fix(WEB-115): alter contact block to allow any version of multiple numbers and addresses

app/[lang]/(live-current)/current-content-page/page.tsx

@@ -10,7 +10,7 @@ import Tracking from "@/components/Current/Tracking"
 
 import type { PageArgs, LangParams, UriParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
-import { TrackingData } from "@/types/requests/trackingData"
+import type { TrackingData } from "@/types/requests/trackingData"
 
 export default async function CurrentContentPage({
   params,

components/Current/Aside/Contacts/Contact.tsx

@@ -2,63 +2,71 @@ import styles from "./contact.module.css"
 
 import { langEnum } from "@/types/lang"
 import type { Lang } from "@/types/lang"
-import type { ContactNode } from "@/types/requests/asides/contact"
+import { Section, type ContactNode } from "@/types/requests/asides/contact"
+
+export default function Contact({ sections, system: { locale } }: ContactNode) {
+  if (!sections.length) {
+    return null
+  }
 
-export default function Contact({
-  title,
-  mailing_address,
-  visiting_address,
-  phone,
-  system: { locale },
-}: ContactNode) {
   const visitingAddressMessage = getVisitingAddressMessage(locale)
   return (
-    <div>
-      <div>
-        <div>
-          <div>
-            <h2 className={styles.heading}>{title}</h2>
-            <p>
-              {mailing_address.name}
-              <br />
-              {mailing_address.street}
-              <br />
-              {mailing_address.zip} {mailing_address.city}
-              <br />
-              {mailing_address.country}
-            </p>
-            <p>
-              {visitingAddressMessage}: {visiting_address.street}{" "}
-            </p>
-          </div>
-        </div>
-        <div>
-          <div className={styles.highlightBlock}>
-            <h3>{phone.title}</h3>
-            <div className={styles.phoneContainer}>
-              <svg
-                focusable="false"
-                className={styles.phoneIcon}
-                viewBox="0 0 32 32"
-              >
-                <use
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                  xlinkHref="/_static/img/icons/sprites.svg#icon-phone"
-                ></use>
-              </svg>
+    <section>
+      {sections.map((section) => {
+        switch (section.__typename) {
+          case Section.ContactBlockSectionsExtraInfo:
+            return <p>{section.extra_info.text}</p>
+          case Section.ContactBlockSectionsMailingAddress:
+            return (
+              <p>
+                {section.mailing_address.name}
+                <br />
+                {section.mailing_address.street}
+                <br />
+                {section.mailing_address.zip} {section.mailing_address.city}
+                <br />
+                {section.mailing_address.country}
+              </p>
+            )
+          case Section.ContactBlockSectionsPhone:
+            return (
+              <div className={styles.highlightBlock}>
+                <h3>{section.phone.title}</h3>
+                <div className={styles.phoneContainer}>
+                  <svg
+                    focusable="false"
+                    className={styles.phoneIcon}
+                    viewBox="0 0 32 32"
+                  >
+                    <use
+                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                      xlinkHref="/_static/img/icons/sprites.svg#icon-phone"
+                    ></use>
+                  </svg>
 
-              <a
-                href={phone.number}
-                itemProp="telephone"
-                className={styles.phoneNumberLink}
-              >
-                {phone.number}
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+                  <a
+                    href={`tel:+${section.phone.number}`}
+                    itemProp="telephone"
+                    className={styles.phoneNumberLink}
+                  >
+                    +{section.phone.number}
+                  </a>
+                </div>
+              </div>
+            )
+          case Section.ContactBlockSectionsTitle:
+            return <h2 className={styles.heading}>{section.title.text}</h2>
+          case Section.ContactBlockSectionsVisitingAddress:
+            return (
+              <p>
+                {visitingAddressMessage}: {section.visiting_address.street}{" "}
+              </p>
+            )
+          default:
+            return null
+        }
+      })}
+    </section>
   )
 }
 

components/Current/Aside/Contacts/index.tsx

@@ -1,6 +1,7 @@
-import type { ContactsProps } from "@/types/components/current/asides/contact"
 import Contact from "./Contact"
 
+import type { ContactsProps } from "@/types/components/current/asides/contact"
+
 export default function Contacts({ contacts }: ContactsProps) {
   return contacts.map((contact) => (
     <Contact key={contact.node.system.uid} {...contact.node} />

lib/graphql/Fragments/Contact.graphql

@@ -1,4 +1,10 @@
-fragment Contact on ContactBlock {
+fragment ContactExtraInfo on ContactBlockSectionsExtraInfo {
+  extra_info {
+    text
+  }
+}
+
+fragment ContactMailingAddress on ContactBlockSectionsMailingAddress {
   mailing_address {
     city
     country
@@ -6,15 +12,22 @@ fragment Contact on ContactBlock {
     street
     zip
   }
-  system {
-    uid
-    locale
-  }
+}
+
+fragment ContactPhone on ContactBlockSectionsPhone {
   phone {
     number
     title
   }
-  title
+}
+
+fragment ContactTitle on ContactBlockSectionsTitle {
+  title {
+    text
+  }
+}
+
+fragment ContactVisitingAddress on ContactBlockSectionsVisitingAddress {
   visiting_address {
     city
     country
@@ -22,3 +35,18 @@ fragment Contact on ContactBlock {
     zip
   }
 }
+
+fragment Contact on ContactBlock {
+  sections {
+    __typename
+    ...ContactExtraInfo
+    ...ContactMailingAddress
+    ...ContactPhone
+    ...ContactTitle
+    ...ContactVisitingAddress
+  }
+  system {
+    locale
+    uid
+  }
+}

types/requests/asides/contact.ts

@@ -1,28 +1,75 @@
 import type { Edges } from "../utils/edges"
 import type { Lang } from "@/types/lang"
+import type { Typename } from "../utils/typename"
+
+export enum Section {
+  ContactBlockSectionsExtraInfo = "ContactBlockSectionsExtraInfo",
+  ContactBlockSectionsMailingAddress = "ContactBlockSectionsMailingAddress",
+  ContactBlockSectionsPhone = "ContactBlockSectionsPhone",
+  ContactBlockSectionsTitle = "ContactBlockSectionsTitle",
+  ContactBlockSectionsVisitingAddress = "ContactBlockSectionsVisitingAddress",
+}
+
+type ExtraInfo = Typename<
+  {
+    extra_info: {
+      text: string
+    }
+  },
+  Section.ContactBlockSectionsExtraInfo
+>
+
+type MailingAddress = Typename<
+  {
+    mailing_address: {
+      city: string
+      country: string
+      name: string
+      street: string
+      zip: string
+    }
+  },
+  Section.ContactBlockSectionsMailingAddress
+>
+
+type Phone = Typename<
+  {
+    phone: {
+      number: number
+      title: string
+    }
+  },
+  Section.ContactBlockSectionsPhone
+>
+
+type Title = Typename<
+  {
+    title: {
+      text: string
+    }
+  },
+  Section.ContactBlockSectionsTitle
+>
+
+type VisitingAddress = Typename<
+  {
+    visiting_address: {
+      city: string
+      country: string
+      street: string
+      zip: string
+    }
+  },
+  Section.ContactBlockSectionsVisitingAddress
+>
+
+type Sections = ExtraInfo | MailingAddress | Phone | Title | VisitingAddress
 
 export type ContactNode = {
-  mailing_address: {
-    city: string
-    country: string
-    name: string
-    street: string
-    zip: string
-  }
+  sections: Sections[]
   system: {
-    uid: string
     locale: Lang
-  }
-  phone: {
-    number: string
-    title: string
-  }
-  title: string
-  visiting_address: {
-    city: string
-    country: string
-    street: string
-    zip: string
+    uid: string
   }
 }