feat: create blocks component for loyalty

components/Loyalty/Blocks/index.tsx

@@ -0,0 +1,26 @@
+import JsonToHtml from "@/components/JsonToHtml"
+
+import {
+  Blocks as BlocksType,
+  LoyaltyBlocksTypenameEnum,
+} from "@/types/requests/loyaltyPage"
+
+export function Blocks({ blocks }: { blocks: BlocksType[] }) {
+  return blocks.map((block) => {
+    switch (block.__typename) {
+      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid:
+        return <p>Cards</p>
+      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
+        return (
+          <JsonToHtml
+            nodes={block.content.json.children}
+            embeds={block.content.embedded_itemsConnection.edges}
+          />
+        )
+      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
+        return <p>Dynamic</p>
+      default:
+        return null
+    }
+  })
+}

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

components/MyPages/Blocks/Overview/UpcomingStays/index.tsx

@@ -3,8 +3,8 @@ import { serverClient } from "@/lib/trpc/server"
 
 import StayCard from "@/components/MyPages/Blocks/Stays/StayCard"
 import EmptyUpcomingStaysBlock from "@/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays"
-import Title from "@/components/MyPages/Title"
 import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/Title"
 
 import styles from "./upcoming.module.css"
 

components/MyPages/Blocks/Stays/Header/index.tsx

@@ -1,4 +1,4 @@
-import Title from "@/components/MyPages/Title"
+import Title from "@/components/Title"
 
 import styles from "./header.module.css"
 

components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx

@@ -1,6 +1,6 @@
 import { _ } from "@/lib/translation"
 
-import Title from "@/components/MyPages/Title"
+import Title from "@/components/Title"
 
 import styles from "./emptyPreviousStays.module.css"
 

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -2,8 +2,8 @@ import Link from "next/link"
 
 import { _ } from "@/lib/translation"
 
-import Title from "@/components/MyPages/Title"
 import Button from "@/components/TempDesignSystem/Button"
+import Title from "@/components/Title"
 
 import styles from "./emptyUpcomingStays.module.css"