feat(SW-66, SW-348): search functionality and ui

2024-08-28 10:47:57 +02:00
parent b9dbcf7d90
commit af850c90e7
437 changed files with 7663 additions and 9881 deletions
--- a/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
+++ b/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
@@ -0,0 +1,5 @@
+.link {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
--- a/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -0,0 +1,57 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import { EmailIcon, PhoneIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import { getValueFromContactConfig } from "@/utils/contactConfig"
+
+import styles from "./contactRow.module.css"
+
+import type { ContactRowProps } from "@/types/components/sidebar/joinLoyaltyContact"
+
+export default async function ContactRow({ contact }: ContactRowProps) {
+  const data = await serverClient().contentstack.base.contact()
+  if (!data) {
+    return null
+  }
+
+  const val = getValueFromContactConfig(contact.contact_field, data)
+
+  if (!val) {
+    return null
+  }
+
+  let Icon = null
+  if (contact.contact_field.includes("email")) {
+    Icon = EmailIcon
+  } else if (contact.contact_field.includes("phone")) {
+    Icon = PhoneIcon
+  }
+
+  let openableLink = val
+  if (contact.contact_field.includes("email")) {
+    openableLink = `mailto:${val}`
+  } else if (contact.contact_field.includes("phone")) {
+    openableLink = `tel:${val}`
+  }
+
+  return (
+    <div>
+      <Body color="burgundy" textTransform="bold">
+        {contact.display_text}
+      </Body>
+      <Link
+        className={styles.link}
+        href={openableLink}
+        variant="underscored"
+        color="burgundy"
+        size="small"
+      >
+        {Icon ? <Icon width="20" height="20" color="burgundy" /> : null}
+        {val}
+      </Link>
+      <Footnote color="burgundy">{contact.footnote}</Footnote>
+    </div>
+  )
+}
--- a/components/Sidebar/JoinLoyalty/Contact/contact.module.css
+++ b/components/Sidebar/JoinLoyalty/Contact/contact.module.css
@@ -0,0 +1,19 @@
+.contactContainer {
+  display: none;
+}
+
+@media screen and (min-width: 1367px) {
+  .contactContainer {
+    border-top: 1px solid var(--UI-Grey-30);
+    display: flex;
+    flex-direction: column;
+    gap: var(--Spacing-x2);
+    justify-content: center;
+    padding-top: var(--Spacing-x2);
+  }
+
+  .contact {
+    display: grid;
+    gap: var(--Spacing-x-one-and-half);
+  }
+}
--- a/components/Sidebar/JoinLoyalty/Contact/index.tsx
+++ b/components/Sidebar/JoinLoyalty/Contact/index.tsx
@@ -0,0 +1,33 @@
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+
+import ContactRow from "./ContactRow"
+
+import styles from "./contact.module.css"
+
+import type { ContactProps } from "@/types/components/sidebar/joinLoyaltyContact"
+import { JoinLoyaltyContactEnums } from "@/types/enums/joinLoyaltyContact"
+
+export default async function Contact({ contactBlock }: ContactProps) {
+  const intl = await getIntl()
+  return (
+    <article className={styles.contactContainer}>
+      <Subtitle>{intl.formatMessage({ id: "Contact us" })}</Subtitle>
+      <section className={styles.contact}>
+        {contactBlock.map((contact, i) => {
+          switch (contact.typename) {
+            case JoinLoyaltyContactEnums.contact.Contact:
+              return (
+                <ContactRow
+                  key={`${contact.display_text}-${i}`}
+                  contact={contact}
+                />
+              )
+            default:
+              return null
+          }
+        })}
+      </section>
+    </article>
+  )
+}