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

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>
   )
 }