feat: allow Nearby Location Section customization

packages/visual-editor/src/components/locator/Locator.test.tsx

@@ -1545,7 +1545,9 @@ describe("Locator", async () => {
           String(input).includes("/search/filtersearch")
         )
       ).toBe(false);
-      expect(screen.getByText(/Custom Search Area/)).toBeInTheDocument();
+      expect(
+        screen.getByRole("combobox", { name: "Find a Location" })
+      ).toHaveValue("Custom Search Area");
     } finally {
       window.history.replaceState(window.history.state, "", originalUrl);
     }

packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationCard.tsx

@@ -15,11 +15,15 @@ import {
 } from "../../../utils/urls/resolveUrlTemplate.ts";
 import { NearbyLocationDoc } from "./useNearbyLocations.ts";
 import { getTextColorClass, getTextColorStyle } from "../../../utils/colors.ts";
+import { resolveComponentData } from "../../../utils/resolveComponentData.tsx";
+import { useTranslation } from "react-i18next";
 
 /** A single card for the Nearby Locations Section */
 type NearbyLocationCardProps = {
   /** The location data to display in the card */
   locationData?: NearbyLocationDoc;
+  /** The title binding shared by cards in the section. */
+  title?: NearbyLocationCardsWrapperProps["data"]["title"];
 
   /** @internal Shared styles for the card (controlled by the parent) */
   styles: NearbyLocationCardsWrapperProps["styles"];
@@ -37,14 +41,23 @@ type NearbyLocationCardProps = {
 export const NearbyLocationCard: React.FC<NearbyLocationCardProps> = (
   props
 ) => {
-  const { locationData, styles, cardNumber, sectionHeadingLevel } = props;
+  const { locationData, title, styles, cardNumber, sectionHeadingLevel } =
+    props;
+  const { i18n } = useTranslation();
 
   if (!locationData) {
     return <></>;
   }
 
   const { name, hours, comingSoon, address, timezone, mainPhone } =
     locationData;
+  const resolvedTitle = resolveComponentData(
+    title ?? { field: "name", constantValue: { defaultValue: "" } },
+    i18n.language,
+    locationData,
+    { output: "plainText" }
+  );
+  const cardTitle = resolvedTitle.trim() ? resolvedTitle : name;
 
   const { document: streamDocument, relativePrefixToRoot } = useTemplateProps();
 
@@ -80,7 +93,7 @@ export const NearbyLocationCard: React.FC<NearbyLocationCardProps> = (
               : undefined
           }
         >
-          {name}
+          {cardTitle}
         </Heading>
       </MaybeLink>
       {styles.showHours && (hours || comingSoon) && (

packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationsCardsWrapper.tsx

@@ -14,6 +14,8 @@ import {
   usePlatformTranslation,
 } from "../../../utils/i18n/platform.ts";
 import { resolveComponentData } from "../../../utils/resolveComponentData.tsx";
+import { YextEntityField } from "../../../editor/YextEntityFieldSelector.tsx";
+import { TranslatableString } from "../../../types/types.ts";
 import { useDocument } from "../../../hooks/useDocument.tsx";
 import {
   formatDistance,
@@ -41,6 +43,9 @@ import {
 export type NearbyLocationCardsWrapperProps = {
   /** The search parameters for finding nearby locations. */
   data: {
+    /** The Content Endpoint field to use for each card title. Defaults to name. */
+    title?: YextEntityField<TranslatableString>;
+
     /**
      * The search radius in miles.
      * @defaultValue 10
@@ -137,6 +142,11 @@ const nearbyLocationCardsWrapperFields: YextFields<NearbyLocationCardsWrapperPro
       type: "object",
       label: msg("fields.data", "Data"),
       objectFields: {
+        title: {
+          type: "entityField",
+          label: msg("fields.name", "Name"),
+          filter: { types: ["type.string"] },
+        },
         radius: {
           type: "number",
           label: msg("fields.radiusMiles", "Radius (Miles)"),
@@ -362,6 +372,7 @@ const NearbyLocationCardsWrapperComponent: PuckComponent<
                 <NearbyLocationCard
                   key={index}
                   cardNumber={index}
+                  title={data.title}
                   styles={styles}
                   locationData={location}
                   puck={puck}
@@ -378,6 +389,11 @@ const NearbyLocationCardsWrapperComponent: PuckComponent<
 export const defaultNearbyLocationsCardsProps: NearbyLocationCardsWrapperProps =
   {
     data: {
+      title: {
+        field: "name",
+        constantValue: { defaultValue: "" },
+        constantValueEnabled: false,
+      },
       radius: 10,
       limit: 3,
     },

packages/visual-editor/src/components/pageSections/NearbyLocations/useNearbyLocations.ts

@@ -10,6 +10,8 @@ type Coordinate = {
 };
 
 export type NearbyLocationDoc = {
+  /** Content Endpoint records may include additional fields for card titles. */
+  [field: string]: unknown;
   /** The entity id of the location */
   id?: string;
   /** The name of the location */