diff --git a/packages/visual-editor/src/components/locator/Locator.test.tsx b/packages/visual-editor/src/components/locator/Locator.test.tsx index 3baa35926..8650c76ed 100644 --- a/packages/visual-editor/src/components/locator/Locator.test.tsx +++ b/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); } diff --git a/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationCard.tsx b/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationCard.tsx index ab0cbfa12..8c851107d 100644 --- a/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationCard.tsx +++ b/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,7 +41,9 @@ type NearbyLocationCardProps = { export const NearbyLocationCard: React.FC = ( props ) => { - const { locationData, styles, cardNumber, sectionHeadingLevel } = props; + const { locationData, title, styles, cardNumber, sectionHeadingLevel } = + props; + const { i18n } = useTranslation(); if (!locationData) { return <>; @@ -45,6 +51,13 @@ export const NearbyLocationCard: React.FC = ( 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 = ( : undefined } > - {name} + {cardTitle} {styles.showHours && (hours || comingSoon) && ( diff --git a/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationsCardsWrapper.tsx b/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationsCardsWrapper.tsx index 3241209e1..03f894276 100644 --- a/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationsCardsWrapper.tsx +++ b/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; + /** * The search radius in miles. * @defaultValue 10 @@ -137,6 +142,11 @@ const nearbyLocationCardsWrapperFields: YextFields