feat: add address slot

packages/visual-editor/src/components/categories/SlotsCategory.tsx

@@ -2,9 +2,11 @@ import {
   HeadingTextProps,
   HeadingText,
 } from "../contentBlocks/HeadingText.tsx";
+import { Address, AddressProps } from "../contentBlocks/Address.tsx";
 import { Video, VideoProps } from "../contentBlocks/Video.tsx";
 
 export interface SlotsCategoryProps {
+  AddressSlot: AddressProps;
   HeadingTextSlot: HeadingTextProps;
   VideoSlot: VideoProps;
 }
@@ -17,6 +19,7 @@ const lockedPermissions = {
 };
 
 export const SlotsCategoryComponents = {
+  AddressSlot: { ...Address, permissions: lockedPermissions },
   HeadingTextSlot: { ...HeadingText, permissions: lockedPermissions },
   VideoSlot: { ...Video, permissions: lockedPermissions },
 };

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

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { ComponentConfig, Fields } from "@measured/puck";
+import { ComponentConfig, Fields, PuckComponent } from "@measured/puck";
 import {
   AddressType,
   getDirections,
@@ -72,53 +72,56 @@ const addressFields: Fields<AddressProps> = {
   }),
 };
 
-const AddressComponent = ({ data, styles }: AddressProps) => {
+const AddressComponent: PuckComponent<AddressProps> = (props) => {
+  const { data, styles, puck } = props;
   const { t, i18n } = useTranslation();
   const streamDocument = useDocument();
   const address = resolveComponentData(
     data.address,
     i18n.language,
     streamDocument
-  );
-  const coordinates = getDirections(
-    address as AddressType,
-    undefined,
-    undefined,
-    { provider: "google" }
+  ) as unknown as AddressType | undefined;
+  const coordinates = getDirections(address, undefined, undefined, {
+    provider: "google",
+  });
+
+  // Only show the address component if there's at least one line of the address
+  const showAddress = !!(
+    address?.line1 ||
+    address?.line2 ||
+    address?.city ||
+    address?.region ||
+    address?.postalCode
   );
 
-  return (
-    <>
-      {address && (
-        <EntityField
-          displayName={pt("address", "Address")}
-          fieldId={data.address.field}
-          constantValueEnabled={data.address.constantValueEnabled}
-        >
-          <div className="flex flex-col gap-2 text-body-fontSize font-body-fontWeight font-body-fontFamily">
-            <RenderAddress
-              address={address}
-              lines={[
-                ["line1"],
-                ["line2"],
-                ["city", ",", "region", "postalCode"],
-              ]}
-            />
-          </div>
-          {coordinates && styles.showGetDirectionsLink && (
-            <CTA
-              eventName={`getDirections`}
-              className="font-bold"
-              link={coordinates}
-              label={t("getDirections", "Get Directions")}
-              linkType="DRIVING_DIRECTIONS"
-              target="_blank"
-              variant={styles.ctaVariant}
-            />
-          )}
-        </EntityField>
+  return showAddress ? (
+    <div className="flex flex-col gap-2 text-body-fontSize font-body-fontWeight font-body-fontFamily">
+      <EntityField
+        displayName={pt("address", "Address")}
+        fieldId={data.address.field}
+        constantValueEnabled={data.address.constantValueEnabled}
+      >
+        <RenderAddress
+          address={address}
+          lines={[["line1"], ["line2"], ["city", ",", "region", "postalCode"]]}
+        />
+      </EntityField>
+      {coordinates && styles.showGetDirectionsLink && (
+        <CTA
+          eventName={`getDirections`}
+          className="font-bold"
+          link={coordinates}
+          label={t("getDirections", "Get Directions")}
+          linkType="DRIVING_DIRECTIONS"
+          target="_blank"
+          variant={styles.ctaVariant}
+        />
       )}
-    </>
+    </div>
+  ) : puck.isEditing ? (
+    <div className="min-h-[40px]"></div>
+  ) : (
+    <></>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentConfig, Fields } from "@measured/puck";
+import { ComponentConfig, Fields, PuckComponent } from "@measured/puck";
 import {
   useDocument,
   EntityField,
@@ -29,10 +29,8 @@ export type HeadingTextProps = {
   };
 };
 
-const HeadingTextWrapper = React.forwardRef<
-  HTMLHeadingElement,
-  HeadingTextProps
->(({ data, styles, ...headingProps }, ref) => {
+const HeadingTextWrapper: PuckComponent<HeadingTextProps> = (props) => {
+  const { data, styles, puck } = props;
   const streamDocument = useDocument();
   const { i18n } = useTranslation();
 
@@ -50,24 +48,22 @@ const HeadingTextWrapper = React.forwardRef<
     streamDocument
   );
 
-  return (
-    resolvedHeadingText && (
-      <div className={`flex ${justifyClass}`}>
-        <EntityField
-          displayName={pt("Heading", "Heading") + " " + styles.level}
-          fieldId={data.text.field}
-          constantValueEnabled={data.text.constantValueEnabled}
-        >
-          <Heading ref={ref} level={styles.level} {...headingProps}>
-            {resolvedHeadingText}
-          </Heading>
-        </EntityField>
-      </div>
-    )
+  return resolvedHeadingText ? (
+    <div className={`flex ${justifyClass}`}>
+      <EntityField
+        displayName={pt("Heading", "Heading") + " " + styles.level}
+        fieldId={data.text.field}
+        constantValueEnabled={data.text.constantValueEnabled}
+      >
+        <Heading level={styles.level}>{resolvedHeadingText}</Heading>
+      </EntityField>
+    </div>
+  ) : puck.isEditing ? (
+    <div className="h-[30px]" />
+  ) : (
+    <></>
   );
-});
-
-HeadingTextWrapper.displayName = "HeadingText";
+};
 
 const headingTextFields: Fields<HeadingTextProps> = {
   data: {

packages/visual-editor/src/components/migrations/0024_core_info_section_slots.ts

@@ -0,0 +1,119 @@
+import { Migration } from "@yext/visual-editor";
+
+export const coreInfoSectionSlots: Migration = {
+  CoreInfoSection: {
+    action: "updated",
+    propTransformation: (props) => {
+      const infoHeadingText = props.data.info.headingText ?? {
+        constantValue: {
+          en: "Information",
+          hasLocalizedValue: "true",
+        },
+        constantValueEnabled: true,
+        field: "",
+      };
+      const hoursHeadingText = props.data.hours.headingText ?? {
+        constantValue: {
+          en: "Hours",
+          hasLocalizedValue: "true",
+        },
+        constantValueEnabled: true,
+        field: "",
+      };
+      const servicesHeadingText = props.data.services.headingText ?? {
+        constantValue: {
+          en: "Services",
+          hasLocalizedValue: "true",
+        },
+        constantValueEnabled: true,
+        field: "",
+      };
+      const headingLevel = props.styles.heading?.level ?? 3;
+      const headingAlign = props.styles.heading?.align ?? "left";
+
+      const address = props.data.info.address ?? {
+        constantValue: {
+          line1: "",
+          city: "",
+          postalCode: "",
+          countryCode: "",
+        },
+        field: "address",
+      };
+      const addressStyles = {
+        showGetDirectionsLink: props.styles.info.showGetDirectionsLink ?? true,
+        ctaVariant: props.styles.info.ctaVariant,
+      };
+
+      // Clean up old props
+      delete props.data.info.headingText;
+      delete props.data.hours.headingText;
+      delete props.data.services.headingText;
+      delete props.data.info.address;
+      delete props.styles.heading;
+      delete props.styles.info.showGetDirectionsLink;
+      delete props.styles.info.ctaVariant;
+
+      return {
+        ...props,
+        slots: {
+          CoreInfoHeadingSlot: [
+            {
+              type: "HeadingTextSlot",
+              props: {
+                data: {
+                  text: infoHeadingText,
+                },
+                styles: {
+                  level: headingLevel,
+                  align: headingAlign,
+                },
+              },
+            },
+          ],
+          CoreInfoAddressSlot: [
+            {
+              type: "AddressSlot",
+              props: {
+                data: {
+                  address: address,
+                },
+                styles: {
+                  ...addressStyles,
+                },
+              },
+            },
+          ],
+          HoursHeadingSlot: [
+            {
+              type: "HeadingTextSlot",
+              props: {
+                data: {
+                  text: hoursHeadingText,
+                },
+                styles: {
+                  level: headingLevel,
+                  align: headingAlign,
+                },
+              },
+            },
+          ],
+          ServicesHeadingSlot: [
+            {
+              type: "HeadingTextSlot",
+              props: {
+                data: {
+                  text: servicesHeadingText,
+                },
+                styles: {
+                  level: headingLevel,
+                  align: headingAlign,
+                },
+              },
+            },
+          ],
+        },
+      };
+    },
+  },
+};

packages/visual-editor/src/components/migrations/migrationRegistry.ts

@@ -22,6 +22,7 @@ import { updateFooterForAssetImages } from "./0020_footer_asset_images.ts";
 import { setOpenNowDefault } from "./0021_set_open_now_default.ts";
 import { organizeHeadingTextProps } from "./0022_organize_heading_text_props.ts";
 import { eventSectionSlots } from "./0023_event_section_slots.ts";
+import { coreInfoSectionSlots } from "./0024_core_info_section_slots.ts";
 import { videoSectionSlots } from "./0025_video_section_slots.ts";
 
 // To add a migration:
@@ -53,6 +54,6 @@ export const migrationRegistry: MigrationRegistry = [
   setOpenNowDefault,
   organizeHeadingTextProps,
   eventSectionSlots,
-  {}, // address migration placeholder
+  coreInfoSectionSlots,
   videoSectionSlots,
 ];