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

components/Webviews/AccountPage/Blocks.tsx

@@ -0,0 +1,92 @@
+import CurrentBenefitsBlock from "@/components/Blocks/DynamicContent/Benefits/CurrentLevel"
+import NextLevelBenefitsBlock from "@/components/Blocks/DynamicContent/Benefits/NextLevel"
+import Overview from "@/components/Blocks/DynamicContent/Overview"
+import EarnAndBurn from "@/components/Blocks/DynamicContent/Points/EarnAndBurn"
+import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
+import Shortcuts from "@/components/Blocks/Shortcuts"
+import JsonToHtml from "@/components/JsonToHtml"
+import { getLang } from "@/i18n/serverContext"
+import { modWebviewLink } from "@/utils/webviews"
+
+import type {
+  AccountPageContentProps,
+  ContentProps,
+} from "@/types/components/myPages/myPage/accountPage"
+import { BlocksEnums } from "@/types/enums/blocks"
+import { DynamicContentEnum } from "@/types/enums/dynamicContent"
+
+function DynamicComponent({ dynamic_content }: AccountPageContentProps) {
+  const dynamicContent = {
+    ...dynamic_content,
+    link: dynamic_content.link
+      ? {
+          ...dynamic_content.link,
+          href: modWebviewLink(dynamic_content.link.href, getLang()),
+        }
+      : undefined,
+  }
+  switch (dynamic_content.component) {
+    case DynamicContentEnum.Blocks.components.membership_overview:
+      return <Overview {...dynamicContent} />
+    case DynamicContentEnum.Blocks.components.points_overview:
+      return <PointsOverview {...dynamicContent} />
+    case DynamicContentEnum.Blocks.components.current_benefits:
+      return <CurrentBenefitsBlock {...dynamicContent} />
+    case DynamicContentEnum.Blocks.components.next_benefits:
+      return <NextLevelBenefitsBlock {...dynamicContent} />
+    case DynamicContentEnum.Blocks.components.expiring_points:
+      // TODO: Add once available
+      // return <ExpiringPoints />
+      return null
+    case DynamicContentEnum.Blocks.components.earn_and_burn:
+      return <EarnAndBurn {...dynamicContent} />
+    default:
+      return null
+  }
+}
+
+export default function Content({ content }: ContentProps) {
+  return (
+    <>
+      {content.map((item, idx) => {
+        switch (item.typename) {
+          case BlocksEnums.block.DynamicContent:
+            return (
+              <DynamicComponent
+                key={`${item.dynamic_content.title}-${idx}`}
+                dynamic_content={item.dynamic_content}
+              />
+            )
+          case BlocksEnums.block.Shortcuts:
+            const shortcuts = item.shortcuts.shortcuts.map((shortcut) => {
+              return {
+                ...shortcut,
+                url: modWebviewLink(shortcut.url, getLang()),
+              }
+            })
+            return (
+              <Shortcuts
+                key={`${item.shortcuts.title}-${idx}`}
+                shortcuts={shortcuts}
+                subtitle={item.shortcuts.subtitle}
+                title={item.shortcuts.title}
+              />
+            )
+          case BlocksEnums.block.TextContent:
+            return (
+              <section key={`${item.__typename}-${idx}`}>
+                <JsonToHtml
+                  embeds={
+                    item.text_content.content.embedded_itemsConnection.edges
+                  }
+                  nodes={item.text_content.content.json.children}
+                />
+              </section>
+            )
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}

components/Webviews/AccountPage/accountPage.module.css

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

components/Webviews/AccountPage/index.tsx

@@ -0,0 +1,37 @@
+import "@/app/globals.css"
+import "@scandic-hotels/design-system/style.css"
+
+import { overview } from "@/constants/routes/webviews"
+import { serverClient } from "@/lib/trpc/server"
+
+import MaxWidth from "@/components/MaxWidth"
+import TrackingSDK from "@/components/TrackingSDK"
+import Blocks from "@/components/Webviews/AccountPage/Blocks"
+import LinkToOverview from "@/components/Webviews/LinkToOverview"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./accountPage.module.css"
+
+export default async function AccountPage() {
+  const accountPageRes = await serverClient().contentstack.accountPage.get()
+
+  if (!accountPageRes) {
+    return null
+  }
+
+  const { tracking, accountPage } = accountPageRes
+
+  const linkToOverview =
+    `/${getLang()}/webview${accountPage.url}` !== overview[getLang()]
+
+  return (
+    <>
+      <MaxWidth className={styles.blocks} tag="main">
+        {linkToOverview ? <LinkToOverview /> : null}
+        <Blocks content={accountPage.content} />
+      </MaxWidth>
+
+      <TrackingSDK pageData={tracking} />
+    </>
+  )
+}