Merged in feature/sas-mypages (pull request #1302)

Feature/sas mypages * feat: Add SAS partner page under my pages * fix: feature toggle SAS Partner page in my pages * add translations for SAS account page * use 'flex-start' instead of 'start' * fix: flatten css * fix: don't use <SectionContainer /> on linkedAccounts page
2025-02-11 12:55:00 +00:00
parent 98e3afe9db
commit 3d11cfb50a
37 changed files with 875 additions and 20 deletions
--- a/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx
+++ b/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx
@@ -0,0 +1,94 @@
+import { Suspense } from "react"
+import { setTimeout } from "timers/promises"
+
+import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"
+import { env } from "@/env/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+
+import { TierLevelCard, TierLevelCardSkeleton } from "./Card/TierLevelCard"
+import { LevelUpgradeButton } from "./LevelUpgradeButton"
+import { UnlinkSAS } from "./UnlinkSAS"
+
+import styles from "./linkedAccounts.module.css"
+
+type Props = {
+  title?: string
+  link?: { href: string; text: string }
+  subtitle?: string
+}
+
+export default async function SASLinkedAccount({
+  title,
+  subtitle,
+  link,
+}: Props) {
+  if (!env.SAS_ENABLED) {
+    return null
+  }
+
+  return (
+    <>
+      <SectionContainer>
+        <SectionHeader link={link} preamble={subtitle} title={title} />
+        <SectionLink link={link} variant="mobile" />
+        <section className={styles.cardsContainer}>
+          <Suspense fallback={<TierLevelCardsSkeleton />}>
+            <TierLevelCards />
+          </Suspense>
+        </section>
+      </SectionContainer>
+      <div className={styles.mutationSection}>
+        <LevelUpgradeButton />
+        <UnlinkSAS />
+      </div>
+    </>
+  )
+}
+
+function TierLevelCardsSkeleton() {
+  return (
+    <>
+      <TierLevelCardSkeleton bonusSystem={"scandic"} />
+      <TierLevelCardSkeleton bonusSystem={"sas"} />
+    </>
+  )
+}
+
+async function TierLevelCards() {
+  console.log("[SAS] Fetching tier level cards")
+  await setTimeout(2_000)
+  console.log("[SAS] AFTER Fetching tier level cards")
+
+  const user = await getProfile()
+  if (!user || "error" in user) {
+    return null
+  }
+
+  const sasPoints = 250_000
+  const sfPoints = user.membership?.currentPoints || 0
+  const sfLevelName =
+    TIER_TO_FRIEND_MAP[user.membership?.membershipLevel ?? "L1"]
+
+  return (
+    <>
+      <TierLevelCard
+        points={sfPoints}
+        tier={sfLevelName}
+        boostState="boostedInThisSystem"
+        bonusSystem={"scandic"}
+      />
+      <TierLevelCard
+        points={sasPoints}
+        tier="Silver"
+        boostState="boostedInOtherSystem"
+        bonusSystem={"sas"}
+        boostExpiration={new Date("2022-12-31")}
+        boostedTier="Gold"
+      />
+    </>
+  )
+}