feat: locator static content toggles

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

@@ -109,15 +109,21 @@ const tests: ComponentTest[] = [
       resultCard: {
         primaryHeading: {
           field: "name",
+          constantValue: { en: "", hasLocalizedValue: "true" },
+          constantValueEnabled: false,
           headingLevel: 5,
         },
         secondaryHeading: {
           field: "name",
+          constantValue: { en: "", hasLocalizedValue: "true" },
+          constantValueEnabled: false,
           variant: "base",
           liveVisibility: false,
         },
         tertiaryHeading: {
           field: "name",
+          constantValue: { en: "", hasLocalizedValue: "true" },
+          constantValueEnabled: false,
           variant: "base",
           liveVisibility: false,
         },
@@ -160,6 +166,11 @@ const tests: ComponentTest[] = [
         },
         image: {
           field: "headshot",
+          constantValue: {
+            en: { url: "", height: 0, width: 0 },
+            hasLocalizedValue: "true",
+          },
+          constantValueEnabled: false,
           liveVisibility: false,
         },
       },
@@ -575,6 +586,236 @@ const tests: ComponentTest[] = [
     },
     version: 60,
   },
+  {
+    name: "version 64 static headings",
+    document: {
+      locale: "en",
+      businessId: "4174974",
+      __: {
+        isPrimaryLocale: true,
+      },
+      _env: {
+        YEXT_PUBLIC_VISUAL_EDITOR_APP_API_KEY: import.meta.env
+          .COMPONENT_TESTS_VISUAL_EDITOR_APP_API_KEY,
+        YEXT_CLOUD_CHOICE: "GLOBAL-MULTI",
+        YEXT_CLOUD_REGION: "US",
+        YEXT_ENVIRONMENT: "PROD",
+        YEXT_MAPBOX_API_KEY: import.meta.env.COMPONENT_TESTS_MAPBOX_API_KEY,
+        YEXT_SEARCH_API_KEY: import.meta.env.COMPONENT_TESTS_SEARCH_API_KEY,
+      },
+      _pageset: JSON.stringify({
+        type: "LOCATOR",
+        typeConfig: {
+          locatorConfig: {
+            source: "accounts/4174974/sites/155048/pagesets/locations",
+            experienceKey: "locator-41",
+            entityType: "location",
+          },
+        },
+        config: {
+          urlTemplate: {
+            primary: "[[address.region]]/[[address.city]]/[[address.line1]]",
+          },
+        },
+      }),
+    },
+    props: {
+      filters: {
+        openNowButton: false,
+        showDistanceOptions: false,
+      },
+      resultCard: {
+        primaryHeading: {
+          field: "name",
+          constantValue: { en: "", hasLocalizedValue: "true" },
+          constantValueEnabled: false,
+          headingLevel: 3,
+        },
+        secondaryHeading: {
+          field: "name",
+          constantValue: {
+            en: "Secondary Static",
+            hasLocalizedValue: "true",
+          },
+          constantValueEnabled: true,
+          variant: "base",
+          liveVisibility: true,
+        },
+        tertiaryHeading: {
+          field: "name",
+          constantValue: { en: "Tertiary Static", hasLocalizedValue: "true" },
+          constantValueEnabled: true,
+          variant: "base",
+          liveVisibility: true,
+        },
+        icons: true,
+        hours: {
+          table: {
+            startOfWeek: "today",
+            collapseDays: false,
+            showAdditionalHoursText: false,
+          },
+          liveVisibility: true,
+        },
+        address: {
+          showGetDirectionsLink: true,
+          liveVisibility: true,
+        },
+        phone: {
+          field: "mainPhone",
+          phoneFormat: "domestic",
+          includePhoneHyperlink: true,
+          liveVisibility: true,
+        },
+        email: {
+          field: "emails",
+          liveVisibility: false,
+        },
+        services: {
+          field: "services",
+          liveVisibility: false,
+        },
+        primaryCTA: {
+          variant: "primary",
+          liveVisibility: true,
+        },
+        secondaryCTA: {
+          label: "Call to Action",
+          link: "#",
+          variant: "secondary",
+          liveVisibility: false,
+        },
+        image: {
+          field: "headshot",
+          constantValue: {
+            en: { url: "", height: 0, width: 0 },
+            hasLocalizedValue: "true",
+          },
+          constantValueEnabled: false,
+          liveVisibility: false,
+        },
+      },
+    },
+    interactions: async (page) => {
+      await expect
+        .element(page.getByText("Secondary Static").first())
+        .toBeVisible();
+    },
+    version: 64,
+  },
+  {
+    name: "version 64 static image",
+    document: {
+      locale: "en",
+      businessId: "4174974",
+      __: {
+        isPrimaryLocale: true,
+      },
+      _env: {
+        YEXT_PUBLIC_VISUAL_EDITOR_APP_API_KEY: import.meta.env
+          .COMPONENT_TESTS_VISUAL_EDITOR_APP_API_KEY,
+        YEXT_CLOUD_CHOICE: "GLOBAL-MULTI",
+        YEXT_CLOUD_REGION: "US",
+        YEXT_ENVIRONMENT: "PROD",
+        YEXT_MAPBOX_API_KEY: import.meta.env.COMPONENT_TESTS_MAPBOX_API_KEY,
+        YEXT_SEARCH_API_KEY: import.meta.env.COMPONENT_TESTS_SEARCH_API_KEY,
+      },
+      _pageset: JSON.stringify({
+        type: "LOCATOR",
+        typeConfig: {
+          locatorConfig: {
+            source: "accounts/4174974/sites/155048/pagesets/locations",
+            experienceKey: "locator-41",
+            entityType: "location",
+          },
+        },
+        config: {
+          urlTemplate: {
+            primary: "[[address.region]]/[[address.city]]/[[address.line1]]",
+          },
+        },
+      }),
+    },
+    props: {
+      filters: {
+        openNowButton: false,
+        showDistanceOptions: false,
+      },
+      resultCard: {
+        primaryHeading: {
+          field: "name",
+          constantValue: { en: "", hasLocalizedValue: "true" },
+          constantValueEnabled: false,
+          headingLevel: 3,
+        },
+        secondaryHeading: {
+          field: "name",
+          constantValue: { en: "", hasLocalizedValue: "true" },
+          constantValueEnabled: false,
+          variant: "base",
+          liveVisibility: false,
+        },
+        tertiaryHeading: {
+          field: "name",
+          constantValue: { en: "", hasLocalizedValue: "true" },
+          constantValueEnabled: false,
+          variant: "base",
+          liveVisibility: false,
+        },
+        icons: true,
+        hours: {
+          table: {
+            startOfWeek: "today",
+            collapseDays: false,
+            showAdditionalHoursText: false,
+          },
+          liveVisibility: true,
+        },
+        address: {
+          showGetDirectionsLink: true,
+          liveVisibility: true,
+        },
+        phone: {
+          field: "mainPhone",
+          phoneFormat: "domestic",
+          includePhoneHyperlink: true,
+          liveVisibility: true,
+        },
+        email: {
+          field: "emails",
+          liveVisibility: false,
+        },
+        services: {
+          field: "services",
+          liveVisibility: false,
+        },
+        primaryCTA: {
+          variant: "primary",
+          liveVisibility: true,
+        },
+        secondaryCTA: {
+          label: "Call to Action",
+          link: "#",
+          variant: "secondary",
+          liveVisibility: false,
+        },
+        image: {
+          field: "headshot",
+          constantValue: {
+            en: {
+              url: "https://placehold.co/80x80",
+              height: 80,
+              width: 80,
+            },
+            hasLocalizedValue: "true",
+          },
+          constantValueEnabled: true,
+          liveVisibility: true,
+        },
+      },
+    },
+    version: 64,
+  },
 ];
 
 const screenshotThreshold = 30;

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

@@ -1,4 +1,9 @@
-import { ComponentConfig, Fields, WithPuckProps } from "@puckeditor/core";
+import {
+  ComponentConfig,
+  Fields,
+  WithPuckProps,
+  setDeep,
+} from "@puckeditor/core";
 import {
   FieldValueFilter,
   FieldValueStaticFilter,
@@ -606,6 +611,64 @@ export const LocatorComponent: ComponentConfig<{ props: LocatorProps }> = {
     resultCard: DEFAULT_LOCATOR_RESULT_CARD_PROPS,
   },
   label: msg("components.locator", "Locator"),
+  resolveFields: (data) => {
+    let updatedFields: Fields<LocatorProps> = { ...locatorFields };
+    const setConstantVaueFieldVisibility = (
+      fields: Fields<LocatorProps>,
+      fieldKey:
+        | "primaryHeading"
+        | "secondaryHeading"
+        | "tertiaryHeading"
+        | "image",
+      isConstantValueEnabled: boolean
+    ): Fields<LocatorProps> => {
+      let nextFields = fields;
+      nextFields = setDeep(
+        nextFields,
+        `resultCard.objectFields.${fieldKey}.objectFields.field.visible`,
+        !isConstantValueEnabled
+      );
+      nextFields = setDeep(
+        nextFields,
+        `resultCard.objectFields.${fieldKey}.objectFields.constantValue.visible`,
+        isConstantValueEnabled
+      );
+      return nextFields;
+    };
+
+    const constantValueFieldConfigs = [
+      {
+        key: "primaryHeading",
+        enabled:
+          data.props.resultCard?.primaryHeading?.constantValueEnabled ?? false,
+      },
+      {
+        key: "secondaryHeading",
+        enabled:
+          data.props.resultCard?.secondaryHeading?.constantValueEnabled ??
+          false,
+      },
+      {
+        key: "tertiaryHeading",
+        enabled:
+          data.props.resultCard?.tertiaryHeading?.constantValueEnabled ?? false,
+      },
+      {
+        key: "image",
+        enabled: data.props.resultCard?.image?.constantValueEnabled ?? false,
+      },
+    ] as const;
+
+    constantValueFieldConfigs.forEach(({ key, enabled }) => {
+      updatedFields = setConstantVaueFieldVisibility(
+        updatedFields,
+        key,
+        enabled
+      );
+    });
+
+    return updatedFields;
+  },
   render: (props) => <LocatorWrapper {...props} />,
 };
 
@@ -892,12 +955,19 @@ const LocatorInternal = ({
 
   const [userLocationRetrieved, setUserLocationRetrieved] =
     React.useState<boolean>(false);
-  const [mapProps, setMapProps] = React.useState<MapProps>({
-    mapStyle,
-    onDragHandler: handleDrag,
-    scrollToResult: scrollToResult,
-    markerOptionsOverride: markerOptionsOverride,
-  });
+  const [centerCoords, setCenterCoords] = React.useState<
+    [number, number] | undefined
+  >();
+  const mapProps = React.useMemo(
+    () => ({
+      mapStyle,
+      centerCoords,
+      onDragHandler: handleDrag,
+      scrollToResult: scrollToResult,
+      markerOptionsOverride: markerOptionsOverride,
+    }),
+    [centerCoords, handleDrag, mapStyle, markerOptionsOverride, scrollToResult]
+  );
 
   React.useEffect(() => {
     const resolveLocationAndSearch = async () => {
@@ -928,7 +998,7 @@ const LocatorInternal = ({
             filterValue.lat,
           ];
           if (areValidCoordinates(centerCoords[1], centerCoords[0])) {
-            setMapProps((prev) => ({ ...prev, centerCoords }));
+            setCenterCoords(centerCoords);
             setMapCenter(mapboxgl.LngLat.convert(centerCoords));
           }
         }