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,39 +2,36 @@ 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>
+    <section>
-      <div>
+      {sections.map((section) => {
-        <div>
+        switch (section.__typename) {
-          <div>
+          case Section.ContactBlockSectionsExtraInfo:
-            <h2 className={styles.heading}>{title}</h2>
+            return <p>{section.extra_info.text}</p>
+          case Section.ContactBlockSectionsMailingAddress:
+            return (
               <p>
-              {mailing_address.name}
+                {section.mailing_address.name}
                 <br />
-              {mailing_address.street}
+                {section.mailing_address.street}
                 <br />
-              {mailing_address.zip} {mailing_address.city}
+                {section.mailing_address.zip} {section.mailing_address.city}
                 <br />
-              {mailing_address.country}
+                {section.mailing_address.country}
               </p>
-            <p>
+            )
-              {visitingAddressMessage}: {visiting_address.street}{" "}
+          case Section.ContactBlockSectionsPhone:
-            </p>
+            return (
-          </div>
-        </div>
-        <div>
               <div className={styles.highlightBlock}>
-            <h3>{phone.title}</h3>
+                <h3>{section.phone.title}</h3>
                 <div className={styles.phoneContainer}>
                   <svg
                     focusable="false"
@@ -48,17 +45,28 @@ export default function Contact({
                   </svg>
 
                   <a
-                href={phone.number}
+                    href={`tel:+${section.phone.number}`}
                     itemProp="telephone"
                     className={styles.phoneNumberLink}
                   >
-                {phone.number}
+                    +{section.phone.number}
                   </a>
                 </div>
               </div>
-        </div>
+            )
-      </div>
+          case Section.ContactBlockSectionsTitle:
-    </div>
+            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,7 +1,26 @@
 import type { Edges } from "../utils/edges"
 import type { Lang } from "@/types/lang"
+import type { Typename } from "../utils/typename"
 
-export type ContactNode = {
+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
@@ -9,21 +28,49 @@ export type ContactNode = {
       street: string
       zip: string
     }
-  system: {
+  },
-    uid: string
+  Section.ContactBlockSectionsMailingAddress
-    locale: Lang
+>
-  }
+
+type Phone = Typename<
+  {
     phone: {
-    number: string
+      number: number
       title: string
     }
-  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 = {
+  sections: Sections[]
+  system: {
+    locale: Lang
+    uid: string
+  }
 }
 
 export type Contact = {