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

2024-08-28 10:47:57 +02:00
parent b9dbcf7d90
commit af850c90e7
437 changed files with 7663 additions and 9881 deletions
@@ -0,0 +1,67 @@
+import { Lock } from "react-feather"
+
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
+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 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 { getLang } from "@/i18n/serverContext"
+import { getMembershipLevelObject } from "@/utils/membershipLevel"
+
+import styles from "./next.module.css"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function NextLevelBenefitsBlock({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const intl = await getIntl()
+  const user = await getProfile()
+  if (!user || "error" in user || !user.membership) {
+    return null
+  }
+  const nextLevel = getMembershipLevelObject(
+    user.membership.nextLevel as MembershipLevelEnum,
+    getLang()
+  )
+  if (!nextLevel) {
+    //  TODO: handle this case, when missing or when user is top level?
+    return null
+  }
+  // TODO: how to handle different count of unlockable benefits?
+  return (
+    <SectionContainer>
+      <SectionHeader title={title} preamble={subtitle} link={link} />
+      <Grids.Stackable columns={2}>
+        {nextLevel.benefits.map((benefit) => (
+          <article key={benefit.title} 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: nextLevel.name }
+                )}
+              </Body>{" "}
+              <Title level="h4" as="h5" color="pale" textAlign="center">
+                {benefit.title}
+              </Title>
+            </div>
+          </article>
+        ))}
+      </Grids.Stackable>
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}
@@ -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);
+}