feat: use ref_listings

packages/visual-editor/src/components/atoms/cta.tsx

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, LinkType } from "@yext/pages-components";
 import { Button, ButtonProps } from "./button.js";
-import { themeManagerCn } from "@yext/visual-editor";
+import { themeManagerCn, useDocument } from "@yext/visual-editor";
 import { FaAngleRight } from "react-icons/fa";
 import { getDirections } from "@yext/pages-components";
 import { PresetImageType } from "../../types/types";
@@ -17,7 +17,6 @@ export type CTAProps = {
   // ctaType specific props
   link?: string;
   linkType?: LinkType;
-  coordinate?: { latitude: number; longitude: number };
   presetImageType?: PresetImageType;
 
   // Styling and behavior props
@@ -50,25 +49,34 @@ const useResolvedCtaProps = (props: CTAProps) => {
     ariaLabel,
   } = props;
   const { t } = useTranslation();
+  const streamDocument = useDocument();
 
   const resolvedDynamicProps = useMemo(() => {
     switch (ctaType) {
-      case "getDirections":
-        const getDirectionsLink = props.coordinate
-          ? getDirections(
-              undefined,
-              undefined,
-              undefined,
-              { provider: "google" },
-              props.coordinate
-            )
-          : "#";
+      case "getDirections": {
+        const listings = streamDocument.ref_listings ?? [];
+        const listingsLink = getDirections(
+          undefined,
+          listings,
+          undefined,
+          { provider: "google" },
+          undefined
+        );
+        const coordinateLink = getDirections(
+          undefined,
+          undefined,
+          undefined,
+          { provider: "google" },
+          streamDocument.yextDisplayCoordinate
+        );
+        // Prefer user-provided link, then listings link, then coordinate link
         return {
-          link: getDirectionsLink || "#",
+          link: props.link || listingsLink || coordinateLink || "#",
           linkType: "DRIVING_DIRECTIONS" as const,
-          label: props.label || "Get Directions",
-          ariaLabel: ariaLabel || "Get Directions",
+          label: props.label || t("getDirections", "Get Directions"),
+          ariaLabel: ariaLabel || t("getDirections", "Get Directions"),
         };
+      }
       case "presetImage":
         if (!props.presetImageType) {
           return null;
@@ -93,7 +101,7 @@ const useResolvedCtaProps = (props: CTAProps) => {
           ariaLabel: ariaLabel ?? "",
         };
     }
-  }, [props, ariaLabel]);
+  }, [props, streamDocument]);
 
   if (!resolvedDynamicProps) {
     return null;

packages/visual-editor/src/components/contentBlocks/Address.tsx

@@ -79,13 +79,17 @@ const AddressComponent = ({ data, styles }: AddressProps) => {
     i18n.language,
     streamDocument
   );
-  const coordinates = getDirections(
+  const addressLink = getDirections(
     address as AddressType,
     undefined,
     undefined,
     { provider: "google" }
   );
 
+  // If ref_listings doesn't exist or the address field selected isn't just address, use the address link.
+  const useAddressLink: boolean =
+    data.address.field !== "address" || !streamDocument.ref_listings?.length;
+
   return (
     <>
       {address && (
@@ -104,11 +108,12 @@ const AddressComponent = ({ data, styles }: AddressProps) => {
               ]}
             />
           </div>
-          {coordinates && styles.showGetDirectionsLink && (
+          {addressLink && styles.showGetDirectionsLink && (
             <CTA
+              ctaType="getDirections"
               eventName={`getDirections`}
               className="font-bold"
-              link={coordinates}
+              link={useAddressLink ? addressLink : undefined}
               label={t("getDirections", "Get Directions")}
               linkType="DRIVING_DIRECTIONS"
               target="_blank"

packages/visual-editor/src/components/contentBlocks/CTAGroup.tsx

@@ -12,7 +12,7 @@ import { CTAWrapperProps } from "./CtaWrapper.tsx";
 import {
   ctaTypeOptions,
   ctaTypeToEntityFieldType,
-  getCTATypeAndCoordinate,
+  getCTAType,
 } from "../../internal/puck/constant-value-fields/EnhancedCallToAction.tsx";
 
 const defaultButton: CTAWrapperProps = {
@@ -78,10 +78,7 @@ const CTAGroupComponent = ({ buttons }: CTAGroupProps) => {
           locale,
           streamDocument
         );
-        const { ctaType, coordinate } = getCTATypeAndCoordinate(
-          button.entityField,
-          cta
-        );
+        const { ctaType } = getCTAType(button.entityField);
 
         return (
           cta && (
@@ -92,7 +89,6 @@ const CTAGroupComponent = ({ buttons }: CTAGroupProps) => {
                 linkType={cta.linkType}
                 variant={button.variant}
                 ctaType={ctaType}
-                coordinate={coordinate}
                 presetImageType={cta.presetImageType}
                 className="truncate w-full"
               />

packages/visual-editor/src/components/contentBlocks/CtaWrapper.tsx

@@ -16,7 +16,7 @@ import {
 import {
   ctaTypeOptions,
   ctaTypeToEntityFieldType,
-  getCTATypeAndCoordinate,
+  getCTAType,
 } from "../../internal/puck/constant-value-fields/EnhancedCallToAction.tsx";
 
 export interface CTAWrapperProps {
@@ -52,7 +52,7 @@ const CTAWrapperComponent: React.FC<CTAWrapperProps> = ({
   const { i18n } = useTranslation();
   const streamDocument = useDocument();
   const cta = resolveComponentData(entityField, i18n.language, streamDocument);
-  const { ctaType, coordinate } = getCTATypeAndCoordinate(entityField, cta);
+  const { ctaType } = getCTAType(entityField);
 
   return (
     <EntityField
@@ -66,7 +66,6 @@ const CTAWrapperComponent: React.FC<CTAWrapperProps> = ({
           link={resolveComponentData(cta.link, i18n.language, streamDocument)}
           linkType={cta.linkType}
           ctaType={ctaType}
-          coordinate={coordinate}
           presetImageType={cta.presetImageType}
           variant={variant}
           className={className}

packages/visual-editor/src/components/contentBlocks/GetDirections.tsx

@@ -1,77 +1,32 @@
 import { useTranslation } from "react-i18next";
 import { ComponentConfig, Fields } from "@measured/puck";
-import { getDirections, Coordinate } from "@yext/pages-components";
 import "@yext/pages-components/style.css";
-import {
-  YextEntityField,
-  useDocument,
-  EntityField,
-  CTA,
-  CTAVariant,
-  YextField,
-  pt,
-  msg,
-  resolveComponentData,
-} from "@yext/visual-editor";
+import { CTA, CTAVariant, YextField, msg } from "@yext/visual-editor";
 
 export type GetDirectionsProps = {
-  coordinate: YextEntityField<Coordinate>;
   variant: CTAVariant;
 };
 
 const getDirectionsFields: Fields<GetDirectionsProps> = {
-  coordinate: YextField<any, Coordinate>(
-    msg("fields.coordinates", "Coordinates"),
-    {
-      type: "entityField",
-      filter: { types: ["type.coordinate"] },
-    }
-  ),
   variant: YextField(msg("fields.variant", "Variant"), {
     type: "radio",
     options: "CTA_VARIANT",
   }),
 };
 
-const GetDirectionsComponent = ({
-  variant,
-  coordinate: coordinateField,
-}: GetDirectionsProps) => {
-  const { t, i18n } = useTranslation();
-  const streamDocument = useDocument();
-  const coordinate = resolveComponentData(
-    coordinateField,
-    i18n.language,
-    streamDocument
-  );
-  if (!coordinate) {
-    console.warn("yextDisplayCoordinate is not present in the stream");
-  }
-
-  const searchQuery = getDirections(
-    undefined,
-    undefined,
-    undefined,
-    { provider: "google" },
-    coordinate
-  );
+const GetDirectionsComponent = ({ variant }: GetDirectionsProps) => {
+  const { t } = useTranslation();
 
   return (
-    <EntityField
-      displayName={pt("getDirections", "Get Directions")}
-      fieldId={coordinateField.field}
-      constantValueEnabled={coordinateField.constantValueEnabled}
-    >
-      <CTA
-        className="font-bold"
-        eventName={`getDirections`}
-        label={t("getDirections", "Get Directions")}
-        link={searchQuery}
-        linkType={"DRIVING_DIRECTIONS"}
-        target="_blank"
-        variant={variant}
-      />
-    </EntityField>
+    <CTA
+      ctaType="getDirections"
+      className="font-bold"
+      eventName={`getDirections`}
+      label={t("getDirections", "Get Directions")}
+      linkType={"DRIVING_DIRECTIONS"}
+      target="_blank"
+      variant={variant}
+    />
   );
 };
 
@@ -80,13 +35,6 @@ export const GetDirections: ComponentConfig<{ props: GetDirectionsProps }> = {
   fields: getDirectionsFields,
   defaultProps: {
     variant: "primary",
-    coordinate: {
-      field: "yextDisplayCoordinate",
-      constantValue: {
-        latitude: 0,
-        longitude: 0,
-      },
-    },
   },
   render: (props) => <GetDirectionsComponent {...props} />,
 };

packages/visual-editor/src/components/pageSections/CoreInfoSection.tsx

@@ -334,12 +334,19 @@ const CoreInfoSectionWrapper = ({ data, styles }: CoreInfoSectionProps) => {
   )?.map((translatableString: TranslatableString) =>
     resolveComponentData(translatableString, i18n.language)
   );
-  const coordinates = getDirections(
+
+  const addressLink = getDirections(
     resolvedAddress as AddressType,
     undefined,
     undefined,
     { provider: "google" }
   );
+
+  // If ref_listings doesn't exist or the address field selected isn't just address, use the address link.
+  const useAddressLink: boolean =
+    data.info.address.field !== "address" ||
+    !streamDocument.ref_listings?.length;
+
   const { additionalHoursText } = streamDocument as {
     additionalHoursText: string;
   };
@@ -352,7 +359,7 @@ const CoreInfoSectionWrapper = ({ data, styles }: CoreInfoSectionProps) => {
     !!resolvedAddress?.countryCode ||
     (resolvedPhoneNumbers?.length ?? 0) > 0 ||
     (resolvedEmails?.length ?? 0) > 0 ||
-    !!(coordinates && styles?.info?.showGetDirectionsLink);
+    !!(addressLink && styles?.info?.showGetDirectionsLink);
 
   const justifyClass = styles?.heading?.align
     ? {
@@ -413,11 +420,12 @@ const CoreInfoSectionWrapper = ({ data, styles }: CoreInfoSectionProps) => {
                 />
               </EntityField>
             )}
-            {coordinates && styles.info.showGetDirectionsLink && (
+            {addressLink && styles.info.showGetDirectionsLink && (
               <CTA
+                ctaType="getDirections"
                 eventName={`getDirections`}
                 className="font-bold"
-                link={coordinates}
+                link={useAddressLink ? addressLink : undefined}
                 label={t("getDirections", "Get Directions")}
                 linkType="DRIVING_DIRECTIONS"
                 target="_blank"
@@ -639,6 +647,7 @@ export const CoreInfoSection: ComponentConfig<{ props: CoreInfoSectionProps }> =
             constantValue: {
               line1: "",
               city: "",
+              region: "",
               postalCode: "",
               countryCode: "",
             },

packages/visual-editor/src/components/pageSections/EventSection.tsx

@@ -285,7 +285,6 @@ const EventCard = ({
             )}
             linkType={event.cta.linkType}
             ctaType={event.cta.ctaType}
-            coordinate={event.cta.coordinate}
             presetImageType={event.cta.presetImageType}
             variant={ctaVariant}
           />

packages/visual-editor/src/components/pageSections/InsightSection.tsx

@@ -257,7 +257,6 @@ const InsightCard = ({
             link={resolveComponentData(insight.cta.link, i18n.language)}
             linkType={insight.cta.linkType ?? "URL"}
             ctaType={insight.cta.ctaType}
-            coordinate={insight.cta.coordinate}
             presetImageType={insight.cta.presetImageType}
             className="mt-auto"
           />

packages/visual-editor/src/components/pageSections/ProductSection.tsx

@@ -269,7 +269,6 @@ const ProductCard = ({
             )}
             linkType={product.cta.linkType}
             ctaType={product.cta.ctaType}
-            coordinate={product.cta.coordinate}
             presetImageType={product.cta.presetImageType}
             className="mt-auto"
           />

packages/visual-editor/src/components/pageSections/PromoSection.tsx

@@ -323,7 +323,6 @@ const PromoWrapper: React.FC<PromoSectionProps> = ({ data, styles }) => {
               )}
               linkType={resolvedPromo.cta.linkType}
               ctaType={resolvedPromo.cta.ctaType || "textAndLink"}
-              coordinate={resolvedPromo.cta.coordinate}
               presetImageType={resolvedPromo.cta.presetImageType}
             />
           </EntityField>

packages/visual-editor/src/components/pageSections/TeamSection.tsx

@@ -269,7 +269,6 @@ const PersonCard = ({
                 link={resolveComponentData(person.cta.link, i18n.language)}
                 linkType={person.cta.linkType}
                 ctaType={person.cta.ctaType}
-                coordinate={person.cta.coordinate}
                 presetImageType={person.cta.presetImageType}
                 variant={ctaVariant}
               />

packages/visual-editor/src/components/pageSections/heroVariants/HeroContent.tsx

@@ -179,7 +179,6 @@ export const HeroContent: React.FC<HeroVariantProps> = ({ data, styles }) => {
                   )}
                   linkType={resolvedHero.primaryCta.linkType}
                   ctaType={resolvedHero.primaryCta.ctaType || "textAndLink"}
-                  coordinate={resolvedHero.primaryCta.coordinate}
                   presetImageType={resolvedHero.primaryCta.presetImageType}
                   className={heroCtaLinkVariantCn(styles, "primary")}
                 />
@@ -208,7 +207,6 @@ export const HeroContent: React.FC<HeroVariantProps> = ({ data, styles }) => {
                   )}
                   linkType={resolvedHero.secondaryCta.linkType}
                   ctaType={resolvedHero.secondaryCta.ctaType || "textAndLink"}
-                  coordinate={resolvedHero.secondaryCta.coordinate}
                   presetImageType={resolvedHero.secondaryCta.presetImageType}
                   className={heroCtaLinkVariantCn(styles, "secondary")}
                 />

packages/visual-editor/src/docs/ai/components.d.ts

@@ -6,8 +6,8 @@ import {
   ComplexImageType,
   HoursType,
   AddressType,
-  Coordinate,
   DayOfWeekNames,
+  Coordinate,
 } from "@yext/pages-components";
 import { VariantProps } from "class-variance-authority";