feat(SW-66, SW-348): search functionality and ui

components/Webviews/LoyaltyPage/Blocks.tsx

@@ -0,0 +1,70 @@
+import CardsGrid from "@/components/Blocks/CardsGrid"
+import DynamicContent from "@/components/Blocks/DynamicContent"
+import Shortcuts from "@/components/Blocks/Shortcuts"
+import JsonToHtml from "@/components/JsonToHtml"
+import { getLang } from "@/i18n/serverContext"
+import { modWebviewLink } from "@/utils/webviews"
+
+import type { BlocksProps } from "@/types/components/blocks"
+import { BlocksEnums } from "@/types/enums/blocks"
+
+export default function Blocks({ blocks }: BlocksProps) {
+  return blocks.map((block, idx) => {
+    const firstItem = idx === 0
+    switch (block.typename) {
+      case BlocksEnums.block.CardsGrid:
+        return (
+          <CardsGrid
+            key={`${block.cards_grid.title}-${idx}`}
+            cards_grid={block.cards_grid}
+          />
+        )
+      case BlocksEnums.block.Content:
+        return (
+          <section key={`${block.__typename}-${idx}`}>
+            <JsonToHtml
+              nodes={block.content.json.children}
+              embeds={block.content.embedded_itemsConnection.edges}
+            />
+          </section>
+        )
+      case BlocksEnums.block.DynamicContent:
+        const dynamicContent = {
+          ...block.dynamic_content,
+          link: block.dynamic_content.link
+            ? {
+                ...block.dynamic_content.link,
+                href: modWebviewLink(
+                  block.dynamic_content.link.href,
+                  getLang()
+                ),
+              }
+            : undefined,
+        }
+
+        return (
+          <DynamicContent
+            dynamic_content={dynamicContent}
+            firstItem={firstItem}
+            key={`${block.dynamic_content.title}-${idx}`}
+          />
+        )
+      case BlocksEnums.block.Shortcuts:
+        const shortcuts = block.shortcuts.shortcuts.map((shortcut) => ({
+          ...shortcut,
+          url: modWebviewLink(shortcut.url, getLang()),
+        }))
+        return (
+          <Shortcuts
+            key={`${block.shortcuts.title}-${idx}`}
+            firstItem={firstItem}
+            shortcuts={shortcuts}
+            subtitle={block.shortcuts.subtitle}
+            title={block.shortcuts.title}
+          />
+        )
+      default:
+        return null
+    }
+  })
+}

components/Webviews/LoyaltyPage/index.tsx

@@ -0,0 +1,33 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import MaxWidth from "@/components/MaxWidth"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import TrackingSDK from "@/components/TrackingSDK"
+import LinkToOverview from "@/components/Webviews/LinkToOverview"
+
+import Blocks from "./Blocks"
+
+import styles from "./loyaltyPage.module.css"
+
+export default async function AboutScandicFriends() {
+  const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
+
+  if (!loyaltyPageRes) {
+    return null
+  }
+
+  const { tracking, loyaltyPage } = loyaltyPageRes
+  return (
+    <>
+      <section className={styles.content}>
+        <LinkToOverview />
+        <MaxWidth tag="main" className={styles.blocks}>
+          <Title>{loyaltyPage.heading}</Title>
+          <Blocks blocks={loyaltyPage.blocks} />
+        </MaxWidth>
+      </section>
+
+      <TrackingSDK pageData={tracking} />
+    </>
+  )
+}

components/Webviews/LoyaltyPage/loyaltyPage.module.css

@@ -0,0 +1,10 @@
+.content {
+  display: grid;
+  padding: var(--Spacing-x2);
+  gap: var(--Spacing-x5);
+}
+
+.blocks {
+  display: grid;
+  gap: var(--Spacing-x5);
+}