feat: add blocks for loyalty page

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: grid;
+  text-align: center;
+  gap: 0.4rem;
+  padding: 1rem;
+}
+
+.title {
+  font-family: var(--fira-sans);
+  font-size: 1.6rem;
+  font-weight: 700;
+
+  margin: 0;
+}
+
+.value {
+  font-family: var(--fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  margin: 0;
+}

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -0,0 +1,25 @@
+import { serverClient } from "@/lib/trpc/server"
+import { getValueFromContactConfig } from "@/utils/contactConfig"
+
+import styles from "./contactRow.module.css"
+
+import { Lang } from "@/constants/languages"
+import type { ContactFields } from "@/types/requests/contactConfig"
+
+export default async function ContactRow({
+  contact,
+}: {
+  contact: ContactFields
+}) {
+  const data = await serverClient().contentstack.contactConfig.get({
+    lang: Lang.en,
+  })
+
+  const val = getValueFromContactConfig(contact.contact_field, data)
+  return (
+    <div className={styles.container}>
+      <h4 className={styles.title}>{contact.display_text}</h4>
+      <p className={styles.value}>{val}</p>
+    </div>
+  )
+}

components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css

@@ -0,0 +1,16 @@
+.contactContainer {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .contactContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-top: 0.5px solid var(--Base-Border-Disabled);
+    padding: 3.4rem;
+    text-align: center;
+    gap: 6.2rem;
+  }
+}

components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx

@@ -1,8 +1,25 @@
-import { Lang } from "@/constants/languages"
-import { serverClient } from "@/lib/trpc/server"
+import Title from "@/components/Title"
+import ContactRow from "./ContactRow"
 
-export default function Contact({ lang }: { lang: Lang }) {
-  const data = serverClient().contentstack.contactConfig.get({ lang })
+import styles from "./contact.module.css"
 
-  return <div></div>
+import { JoinLoyaltyContactTypenameEnum } from "@/types/requests/loyaltyPage"
+import type { ContactProps } from "@/types/components/loyalty/sidebar"
+
+export default async function Contact({ contactBlock }: ContactProps) {
+  return (
+    <div className={styles.contactContainer}>
+      <Title level="h5">Contact us</Title>
+      <section>
+        {contactBlock.map(({ contact, __typename }) => {
+          switch (__typename) {
+            case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
+              return <ContactRow contact={contact} />
+            default:
+              return null
+          }
+        })}
+      </section>
+    </div>
+  )
 }

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -4,10 +4,10 @@ import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Image from "@/components/Image"
 
-import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
-
 import styles from "./joinLoyalty.module.css"
 
+import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
+
 export default function JoinLoyaltyContact({
   block,
 }: {
@@ -35,11 +35,7 @@ export default function JoinLoyaltyContact({
           </Link>
         </div>
       </div>
-      {block.contact
-        ? block.contact.map((contact, i) => (
-            <Contact key={i} contactFields={contact.contact.contact_fields} />
-          ))
-        : null}
+      {block.contact && <Contact contactBlock={block.contact} />}
     </div>
   )
 }