feat: dynamic directory title and address converted to slots

packages/visual-editor/src/components/directory/Directory.test.tsx

@@ -610,6 +610,45 @@ const tests: ComponentTest[] = [
     props: version40Props,
     version: 40,
   },
+  {
+    name: "version 58 - Slotified Address with showGetDirectionsLink",
+    document: cityDocument,
+    props: {
+      ...version40Props,
+      slots: {
+        ...version40Props.slots,
+        DirectoryGrid: [
+          {
+            type: "DirectoryGrid",
+            props: {
+              slots: {
+                CardSlot: [
+                  {
+                    type: "DirectoryCard",
+                    props: {
+                      slots: {
+                        AddressSlot: [
+                          {
+                            type: "AddressSlot",
+                            props: {
+                              styles: {
+                                showGetDirectionsLink: true,
+                              },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    },
+    version: 58,
+  },
 ];
 
 describe("Directory", async () => {

packages/visual-editor/src/components/directory/Directory.tsx

@@ -128,11 +128,11 @@ export const Directory: ComponentConfig<{ props: DirectoryProps }> = {
             data: {
               text: {
                 constantValue: {
-                  en: "[[name]]",
+                  en: "",
                   hasLocalizedValue: "true",
                 },
-                constantValueEnabled: true,
-                field: "",
+                constantValueEnabled: false,
+                field: "name",
               },
             },
             styles: { level: 2, align: "center" },

packages/visual-editor/src/components/directory/DirectoryCard.tsx

@@ -1,22 +1,22 @@
 import { ComponentConfig, Fields, PuckComponent, Slot } from "@puckeditor/core";
-import { Background } from "../atoms/background.tsx";
-import { HeadingTextProps } from "../contentBlocks/HeadingText.tsx";
-import { MaybeLink } from "../atoms/maybeLink.tsx";
-import { useTemplateProps } from "../../hooks/useDocument.tsx";
+import React from "react";
 import { YextField } from "../../editor/YextField.tsx";
+import { useCardContext } from "../../hooks/useCardContext.tsx";
+import { useTemplateProps } from "../../hooks/useDocument.tsx";
+import { useGetCardSlots } from "../../hooks/useGetCardSlots.tsx";
 import { msg } from "../../utils/i18n/platform.ts";
 import {
   backgroundColors,
   BackgroundStyle,
 } from "../../utils/themeConfigOptions.ts";
-import { HoursStatusProps } from "../contentBlocks/HoursStatus.tsx";
-import { PhoneProps } from "../contentBlocks/Phone.tsx";
 import { deepMerge } from "../../utils/themeResolver.ts";
-import { Address } from "@yext/pages-components";
-import { useCardContext } from "../../hooks/useCardContext.tsx";
-import { useGetCardSlots } from "../../hooks/useGetCardSlots.tsx";
-import React from "react";
 import { resolveUrlTemplateOfChild } from "../../utils/urls/resolveUrlTemplate.ts";
+import { Background } from "../atoms/background.tsx";
+import { MaybeLink } from "../atoms/maybeLink.tsx";
+import { AddressProps } from "../contentBlocks/Address.tsx";
+import { HeadingTextProps } from "../contentBlocks/HeadingText.tsx";
+import { HoursStatusProps } from "../contentBlocks/HoursStatus.tsx";
+import { PhoneProps } from "../contentBlocks/Phone.tsx";
 
 export const defaultDirectoryCardSlotData = (
   id: string,
@@ -58,6 +58,37 @@ export const defaultDirectoryCardSlotData = (
           } satisfies HeadingTextProps,
         },
       ],
+      AddressSlot: [
+        {
+          type: "AddressSlot",
+          props: {
+            ...(id && { id: `${id}-address` }),
+            data: {
+              address: {
+                field: "",
+                constantValue: {
+                  line1: "",
+                  city: "",
+                  postalCode: "",
+                  countryCode: "",
+                },
+              },
+            },
+            styles: {
+              showGetDirectionsLink:
+                existingSlots?.AddressSlot?.[0]?.props?.styles
+                  ?.showGetDirectionsLink ?? false,
+              ctaVariant:
+                existingSlots?.AddressSlot?.[0]?.props?.styles?.ctaVariant ??
+                "link",
+            },
+            parentData: {
+              field: "profile.address",
+              address: profile["address"],
+            },
+          } satisfies AddressProps,
+        },
+      ],
       PhoneSlot: [
         {
           type: "PhoneSlot",
@@ -142,6 +173,7 @@ export type DirectoryCardProps = {
   /** @internal */
   slots: {
     HeadingSlot: Slot;
+    AddressSlot: Slot;
     PhoneSlot: Slot;
     HoursSlot: Slot;
   };
@@ -199,6 +231,7 @@ const DirectoryCardComponent: PuckComponent<DirectoryCardProps> = (props) => {
       HeadingSlot: [],
       PhoneSlot: [],
       HoursSlot: [],
+      AddressSlot: [],
     };
     Object.entries(slotProps).forEach(([key, value]) => {
       newSlotData[key as keyof DirectoryCardProps["slots"]] = [
@@ -276,10 +309,7 @@ const DirectoryCardComponent: PuckComponent<DirectoryCardProps> = (props) => {
       )}
       {parentData?.profile?.address && (
         <div className="font-body-fontFamily font-body-fontWeight text-body-fontSize">
-          <Address
-            address={parentData?.profile?.address}
-            lines={[["line1"], ["line2"], ["city", "region", "postalCode"]]}
-          />
+          <slots.AddressSlot style={{ height: "auto" }} />
         </div>
       )}
     </Background>
@@ -303,6 +333,7 @@ const directoryCardFields: Fields<DirectoryCardProps> = {
     type: "object",
     objectFields: {
       HeadingSlot: { type: "slot" },
+      AddressSlot: { type: "slot" },
       PhoneSlot: { type: "slot" },
       HoursSlot: { type: "slot" },
     },
@@ -323,6 +354,7 @@ export const DirectoryCard: ComponentConfig<{
       HeadingSlot: [],
       PhoneSlot: [],
       HoursSlot: [],
+      AddressSlot: [],
     },
   },
   render: (props) => <DirectoryCardComponent {...props} />,

packages/visual-editor/src/components/migrations/0058_dynamic_directory_title_binding_and_slotify_address.ts

@@ -0,0 +1,85 @@
+import { Migration } from "../../utils/migrate.ts";
+
+export const fixDirectoryTitleBindingAndSlotifyAddress: Migration = {
+  DirectoryCard: {
+    action: "updated",
+    propTransformation: (props) => {
+      if (props.slots?.AddressSlot?.length) {
+        return props;
+      }
+      return {
+        ...props,
+        slots: {
+          ...props.slots,
+          AddressSlot: [
+            {
+              type: "AddressSlot",
+              props: {
+                data: {
+                  address: {
+                    constantValue: {
+                      line1: "",
+                      city: "",
+                      postalCode: "",
+                      countryCode: "",
+                    },
+                    field: "",
+                  },
+                },
+                styles: {
+                  showGetDirectionsLink: false,
+                  ctaVariant: "link",
+                },
+                parentData: {
+                  field: "profile.address",
+                  address: props.parentData?.profile?.address,
+                },
+              },
+            },
+          ],
+        },
+      };
+    },
+  },
+  Directory: {
+    action: "updated",
+    propTransformation: (props) => {
+      const existingTitle = props.slots?.TitleSlot?.[0];
+      if (
+        existingTitle?.type === "HeadingTextSlot" &&
+        existingTitle.props?.data?.text?.field !== "name"
+      ) {
+        return props;
+      }
+      if (props.slots?.TitleSlot?.length) {
+        return props;
+      }
+
+      return {
+        ...props,
+        slots: {
+          ...props.slots,
+          TitleSlot: [
+            {
+              type: "HeadingTextSlot",
+              props: {
+                id: `${props.id}-TitleSlot`,
+                data: {
+                  text: {
+                    constantValue: {
+                      en: "",
+                      hasLocalizedValue: "true",
+                    },
+                    constantValueEnabled: false,
+                    field: "name",
+                  },
+                },
+                styles: { level: 2, align: "center" },
+              },
+            },
+          ],
+        },
+      };
+    },
+  },
+};

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

@@ -56,6 +56,7 @@ import { productVariants } from "./0054_product_variants.ts";
 import { headerLinksUpdate } from "./0055_header_link_updates.ts";
 import { emptyTitleFix } from "./0056_empty_title_fix.ts";
 import { ctaActionTypeDefaults } from "./0057_cta_action_type_defaults.ts";
+import { fixDirectoryTitleBindingAndSlotifyAddress } from "./0058_dynamic_directory_title_binding_and_slotify_address.ts";
 
 // To add a migration:
 // Create a new file in this directory that exports a Migration
@@ -120,4 +121,5 @@ export const migrationRegistry: MigrationRegistry = [
   headerLinksUpdate,
   emptyTitleFix,
   ctaActionTypeDefaults,
+  fixDirectoryTitleBindingAndSlotifyAddress,
 ];

packages/visual-editor/src/vite-plugin/defaultLayoutData.ts

@@ -4589,7 +4589,7 @@ const mainDefaultLayout = {
 const directoryDefaultLayout = {
   root: {
     props: {
-      version: 55,
+      version: 58,
       title: {
         field: "",
         constantValue: { en: "PLACEHOLDER", hasLocalizedValue: "true" },
@@ -4945,11 +4945,11 @@ const directoryDefaultLayout = {
                 data: {
                   text: {
                     constantValue: {
-                      en: "[[name]]",
+                      en: "",
                       hasLocalizedValue: "true",
                     },
-                    constantValueEnabled: true,
-                    field: "",
+                    constantValueEnabled: false,
+                    field: "name",
                   },
                 },
                 styles: { level: 2, align: "center" },