feat(SW-353): dynamic rewards

components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { trpc } from "@/lib/trpc/client"
+import { Reward } from "@/server/routers/contentstack/reward/output"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
+import Grids from "@/components/TempDesignSystem/Grids"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
+
+import styles from "./current.module.css"
+
+type CurrentRewardsClientProps = {
+  initialCurrentRewards: { rewards: Reward[]; nextCursor: number | undefined }
+}
+export default function ClientCurrentRewards({
+  initialCurrentRewards,
+}: CurrentRewardsClientProps) {
+  const lang = useLang()
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.contentstack.rewards.current.useInfiniteQuery(
+      {
+        limit: 3,
+        lang,
+      },
+      {
+        getNextPageParam: (lastPage) => lastPage?.nextCursor,
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialCurrentRewards],
+        },
+      }
+    )
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+  const filteredRewards =
+    data?.pages.filter((page) => page && page.rewards) ?? []
+  const rewards = filteredRewards.flatMap((page) => page?.rewards) as Reward[]
+  return isLoading ? (
+    <LoadingSpinner />
+  ) : rewards.length ? (
+    <div>
+      <Grids.Stackable>
+        {rewards.map((reward, idx) => (
+          <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
+            <Title
+              as="h4"
+              level="h3"
+              textAlign="center"
+              textTransform="regular"
+            >
+              {reward.label}
+            </Title>
+          </article>
+        ))}
+      </Grids.Stackable>
+      {hasNextPage ? (
+        isFetching ? (
+          <LoadingSpinner />
+        ) : (
+          <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+        )
+      ) : null}
+    </div>
+  ) : null
+}

components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css

@@ -0,0 +1,12 @@
+.card {
+  align-items: center;
+  background-color: var(--UI-Opacity-White-100);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  justify-content: center;
+  min-height: 280px;
+  padding: var(--Spacing-x7) var(--Spacing-x3);
+}

components/Blocks/DynamicContent/Rewards/CurrentLevel/index.tsx

@@ -0,0 +1,32 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+
+import ClientCurrentRewards from "./Client"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function CurrentRewardsBlock({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const initialCurrentRewards =
+    await serverClient().contentstack.rewards.current({
+      limit: 3,
+    })
+
+  if (!initialCurrentRewards) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader title={title} link={link} preamble={subtitle} />
+      <ClientCurrentRewards initialCurrentRewards={initialCurrentRewards} />
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}

components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx

@@ -0,0 +1,68 @@
+import { Lock } from "react-feather"
+
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
+import { serverClient } from "@/lib/trpc/server"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+import Chip from "@/components/TempDesignSystem/Chip"
+import Grids from "@/components/TempDesignSystem/Grids"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./next.module.css"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function NextLevelRewardsBlock({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const intl = await getIntl()
+  const membershipLevel = await serverClient().user.membershipLevel()
+
+  if (!membershipLevel || !membershipLevel?.nextLevel) {
+    return null
+  }
+
+  const nextLevelRewards = await serverClient().contentstack.rewards.byLevel({
+    level_id: MembershipLevelEnum[membershipLevel?.nextLevel],
+    unique: true,
+  })
+
+  //  TODO: handle this case, when missing or when user is top level?
+  if (!nextLevelRewards) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader title={title} preamble={subtitle} link={link} />
+      <Grids.Stackable columns={2}>
+        {nextLevelRewards.rewards.map((reward) => (
+          <article key={reward.reward_id} className={styles.card}>
+            <Chip>
+              <Lock height={16} />
+              {intl.formatMessage({ id: "Level up to unlock" })}
+            </Chip>
+            <div className={styles.textContainer}>
+              <Body color="peach50" textAlign="center">
+                {intl.formatMessage(
+                  { id: "As our" },
+                  { level: nextLevelRewards.level?.name }
+                )}
+              </Body>
+              <Title level="h4" as="h5" color="pale" textAlign="center">
+                {reward.label}
+              </Title>
+            </div>
+          </article>
+        ))}
+      </Grids.Stackable>
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}

components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css

@@ -0,0 +1,15 @@
+.card {
+  align-items: center;
+  background-color: var(--Scandic-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Small);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  justify-content: center;
+  padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
+}
+
+.textContainer {
+  display: grid;
+  gap: var(--Spacing-x1);
+}