feat: add JoinLoyalty component

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -0,0 +1,37 @@
+import Title from "@/components/Title"
+import JsonToHtml from "@/components/JsonToHtml"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./joinLoyalty.module.css"
+
+import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
+
+export default function JoinLoyaltyContact({
+  block,
+}: {
+  block: JoinLoyaltyContact["join_loyalty_contact"]
+}) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <JsonToHtml
+          embeds={block.body.embedded_itemsConnection.edges}
+          nodes={block.body.json.children}
+        />
+        <Button intent="primary">
+          <span>{block.login_button_text}</span>
+        </Button>
+        <div className={styles.linkContainer}>
+          <Link href="/login" className={styles.logoutLink}>
+            Already a friend? <br />
+            Click here to log in
+          </Link>
+        </div>
+      </div>
+      <section className={styles.contactContainer}>
+        <Title level="h5">Contact</Title>
+      </section>
+    </div>
+  )
+}