Refactor address handling across multiple components to use SafeAddress for improved content validation and consistency.

Author: apav-dev

starter/src/registry/hs1-albany-new-patients/components/Hs1AlbanyNewPatientsLocationSection.tsx

@@ -1,5 +1,5 @@
 import { ComponentConfig, Fields, PuckComponent } from "@puckeditor/core";
-import { Address } from "@yext/pages-components";
+import { Address } from "../../shared/SafeAddress";
 import {
   resolveComponentData,
   TranslatableString,

starter/src/registry/hs1-albany-office/components/Hs1AlbanyOfficeContentSection.tsx

@@ -9,13 +9,13 @@ import {
   YextEntityFieldSelector,
 } from "@yext/visual-editor";
 import {
-  Address,
   ComplexImageType,
   HoursTable,
   HoursType,
   ImageType,
-  Link,
 } from "@yext/pages-components";
+import { Address } from "../../shared/SafeAddress";
+import { Link } from "../../shared/SafeLink";
 
 type StyledTextProps = {
   text: YextEntityField<TranslatableString>;
@@ -325,6 +325,7 @@ export const Hs1AlbanyOfficeContentSectionComponent: PuckComponent<
 > = (props) => {
   const streamDocument = useDocument() as Record<string, unknown>;
   const locale = (streamDocument.locale as string) ?? "en";
+  const address = streamDocument.address as Record<string, unknown> | undefined;
   const officeImage = resolveComponentData(
     props.officeImage,
     locale,
@@ -449,20 +450,24 @@ export const Hs1AlbanyOfficeContentSectionComponent: PuckComponent<
 
         {renderHeading(props.officeName, officeName)}
         <div className="space-y-2 font-['Arial','Helvetica',sans-serif] text-[15px] leading-[1.65] text-[#4a4a4a]">
-          <Address
-            address={streamDocument.address as never}
-            lines={[["line1"], ["city", ",", "region", "postalCode"]]}
-            className="not-italic"
-          />
-          <Link
-            cta={{
-              link: mainPhone,
-              linkType: "PHONE",
-            }}
-            className="inline-block"
-          >
-            {mainPhone}
-          </Link>
+          {address ? (
+            <Address
+              address={address as never}
+              lines={[["line1"], ["city", ",", "region", "postalCode"]]}
+              className="not-italic"
+            />
+          ) : null}
+          {mainPhone ? (
+            <Link
+              cta={{
+                link: mainPhone,
+                linkType: "PHONE",
+              }}
+              className="inline-block"
+            >
+              {mainPhone}
+            </Link>
+          ) : null}
         </div>
 
         {renderHeading(props.officeHoursTitle, officeHoursTitle)}

starter/src/registry/hs1-albany-office/components/Hs1AlbanyOfficeLocationSection.tsx

@@ -6,7 +6,7 @@ import {
   YextEntityField,
   YextEntityFieldSelector,
 } from "@yext/visual-editor";
-import { Address } from "@yext/pages-components";
+import { Address } from "../../shared/SafeAddress";
 import { Link } from "../../shared/SafeLink";
 
 type StyledTextProps = {
@@ -219,7 +219,7 @@ export const Hs1AlbanyOfficeLocationSectionComponent: PuckComponent<
               {addressLabel}
             </p>
             <Address
-              address={streamDocument.address as never}
+              address={address as never}
               lines={[
                 ["line1"],
                 ["city", ",", "region", "postalCode", ",", "countryCode"],
@@ -239,15 +239,17 @@ export const Hs1AlbanyOfficeLocationSectionComponent: PuckComponent<
             >
               {contactLabel}
             </p>
-            <Link
-              cta={{
-                link: mainPhone,
-                linkType: "PHONE",
-              }}
-              className="font-['Arial','Helvetica',sans-serif] text-[14px] text-[#4a4a4a]"
-            >
-              {mainPhone}
-            </Link>
+            {mainPhone ? (
+              <Link
+                cta={{
+                  link: mainPhone,
+                  linkType: "PHONE",
+                }}
+                className="font-['Arial','Helvetica',sans-serif] text-[14px] text-[#4a4a4a]"
+              >
+                {mainPhone}
+              </Link>
+            ) : null}
           </div>
           <div className="min-h-[320px] border border-[#dddddd] bg-white">
             <iframe

starter/src/registry/hs1-albany-services/components/Hs1AlbanyServicesLocationSection.tsx

@@ -10,7 +10,7 @@ import {
   type YextEntityField,
   YextEntityFieldSelector,
 } from "@yext/visual-editor";
-import { Address, type AddressLine } from "@yext/pages-components";
+import { Address, type AddressLine } from "../../shared/SafeAddress";
 import { Link } from "../../shared/SafeLink";
 
 type StyledTextProps = {

starter/src/registry/hs1-albany-staff/components/Hs1AlbanyStaffLocationSection.tsx

@@ -6,7 +6,7 @@ import {
   YextEntityField,
   YextEntityFieldSelector,
 } from "@yext/visual-editor";
-import { Address } from "@yext/pages-components";
+import { Address } from "../../shared/SafeAddress";
 import { Link } from "../../shared/SafeLink";
 
 type StyledTextProps = {

starter/src/registry/hs1-carmel/components/Hs1CarmelLocationSection.tsx

@@ -6,7 +6,8 @@ import {
   YextEntityFieldSelector,
   resolveComponentData,
 } from "@yext/visual-editor";
-import { Address, HoursStatus, HoursTable } from "@yext/pages-components";
+import { HoursStatus, HoursTable } from "@yext/pages-components";
+import { Address } from "../../shared/SafeAddress";
 import { Link } from "../../shared/SafeLink";
 
 type StyledTextProps = {

starter/src/registry/hs1-chicago/components/Hs1ChicagoLocationHoursSection.tsx

@@ -6,7 +6,8 @@ import {
   YextEntityField,
   YextEntityFieldSelector,
 } from "@yext/visual-editor";
-import { Address, HoursTable } from "@yext/pages-components";
+import { HoursTable } from "@yext/pages-components";
+import { Address } from "../../shared/SafeAddress";
 
 type StyledTextProps = {
   text: YextEntityField<TranslatableString>;

starter/src/registry/shared/SafeAddress.tsx

@@ -0,0 +1,29 @@
+import type { ComponentProps } from "react";
+import { Address as PagesAddress } from "@yext/pages-components";
+
+type PagesAddressProps = ComponentProps<typeof PagesAddress>;
+
+const hasAddressContent = (address: PagesAddressProps["address"]): boolean => {
+  if (!address) {
+    return false;
+  }
+
+  return Boolean(
+    address.line1 ||
+      address.line2 ||
+      address.city ||
+      address.region ||
+      address.postalCode ||
+      address.countryCode,
+  );
+};
+
+export const Address = (props: PagesAddressProps) => {
+  if (!hasAddressContent(props.address)) {
+    return null;
+  }
+
+  return <PagesAddress {...props} />;
+};
+
+export type { AddressLine } from "@yext/pages-components";