feat(SW-353): dynamic rewards

2024-09-25 15:59:16 +02:00
parent 6a85cfd19c
commit 56cd02f90b
78 changed files with 1568 additions and 4587 deletions
--- a/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
+++ b/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>
+  )
+}