feat: add JoinLoyalty component

components/JsonToHtml/renderOptions.tsx

@@ -29,6 +29,10 @@ function extractPossibleAttributes(attrs: Attributes) {
     props.className = attrs["class-name"]
   } else if (attrs.classname) {
     props.className = attrs.classname
+  } else if (attrs?.style?.["text-align"]) {
+    props.style = {
+      textAlign: attrs?.style?.["text-align"],
+    }
   }
 
   return props
@@ -250,6 +254,11 @@ export const renderOptions: RenderOptions = {
         const image = embeds?.[node?.attrs?.["asset-uid"]]
         if (image.node.__typename === EmbedEnum.SysAsset) {
           const alt = image?.node?.title ?? node.attrs.alt
+          const alignment = node.attrs?.style?.["text-align"]
+            ? {
+                alignSelf: node.attrs?.style?.["text-align"],
+              }
+            : {}
           return (
             <Image
               key={node.uid}
@@ -258,6 +267,7 @@ export const renderOptions: RenderOptions = {
               height={image.node.dimension.height}
               src={image?.node?.url}
               width={image.node.dimension.width}
+              style={alignment}
             />
           )
         }

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

@@ -0,0 +1,8 @@
+import { Lang } from "@/constants/languages"
+import { serverClient } from "@/lib/trpc/server"
+
+export default function Contact({ lang }: { lang: Lang }) {
+  const data = serverClient().contentstack.contactConfig.get({ lang })
+
+  return <div></div>
+}

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>
+  )
+}

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

@@ -0,0 +1,42 @@
+.container {
+  display: grid;
+  font-weight: 600;
+  background-color: var(--Base-Background-Elevated);
+  border-radius: 32px 4px 4px 32px;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 4rem 2rem;
+}
+
+.logoutLink {
+  text-decoration: none;
+  color: var(--some-black-color, #2e2e2e);
+  font-size: 1.2rem;
+}
+
+.linkContainer {
+  text-align: center;
+}
+
+.contactContainer {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .wrapper {
+    gap: 3rem;
+  }
+
+  .contactContainer {
+    display: block;
+    border-top: 0.5px solid var(--Base-Border-Disabled);
+    display: flex;
+    justify-content: center;
+    padding: 3.4rem;
+  }
+}

components/Loyalty/Sidebar/index.tsx

@@ -0,0 +1,20 @@
+import JsonToHtml from "@/components/JsonToHtml"
+import JoinLoyaltyContact from "./JoinLoyalty"
+
+import { Sidebar, SidebarTypenameEnum } from "@/types/requests/loyaltyPage"
+
+export default function SidebarLoyalty({ block }: { block: Sidebar }) {
+  switch (block.__typename) {
+    case SidebarTypenameEnum.LoyaltyPageSidebarContent:
+      return (
+        <JsonToHtml
+          embeds={block.content.embedded_itemsConnection.edges}
+          nodes={block.content.json.children}
+        />
+      )
+    case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact:
+      return <JoinLoyaltyContact block={block.join_loyalty_contact} />
+    default:
+      return null
+  }
+}