feat: create blocks component for loyalty

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -1,12 +1,13 @@
 import Title from "@/components/Title"
-import JsonToHtml from "@/components/JsonToHtml"
+import Contact from "./Contact"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-
-import styles from "./joinLoyalty.module.css"
+import Image from "@/components/Image"
 
 import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
 
+import styles from "./joinLoyalty.module.css"
+
 export default function JoinLoyaltyContact({
   block,
 }: {
@@ -15,10 +16,15 @@ export default function JoinLoyaltyContact({
   return (
     <div className={styles.container}>
       <div className={styles.wrapper}>
-        <JsonToHtml
-          embeds={block.body.embedded_itemsConnection.edges}
-          nodes={block.body.json.children}
+        {block.title && <Title level="h3">{block.title}</Title>}
+        <Image
+          alt="Scandic Friends"
+          className={styles.image}
+          height={65}
+          src="/_static/icons/scandic-friends.png"
+          width={203}
         />
+        {block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
         <Button intent="primary">
           <span>{block.login_button_text}</span>
         </Button>
@@ -29,9 +35,11 @@ export default function JoinLoyaltyContact({
           </Link>
         </div>
       </div>
-      <section className={styles.contactContainer}>
-        <Title level="h5">Contact</Title>
-      </section>
+      {block.contact
+        ? block.contact.map((contact, i) => (
+            <Contact key={i} contactFields={contact.contact.contact_fields} />
+          ))
+        : null}
     </div>
   )
 }

components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css

@@ -13,6 +13,15 @@
   padding: 4rem 2rem;
 }
 
+.preamble {
+  font-family: var(--fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+  text-align: center;
+  margin: 0;
+}
+
 .logoutLink {
   text-decoration: none;
   color: var(--some-black-color, #2e2e2e);