Merged in feat/best-friend-hero (pull request #338)

Feat(SW-170): Update overview hero

Approved-by: Christel Westerberg

components/MyPages/Blocks/Points/Overview/Points/index.tsx

@@ -0,0 +1,55 @@
+import {
+  MembershipLevelEnum,
+  membershipLevels,
+} from "@/constants/membershipLevels"
+
+import PointsContainer from "@/components/MyPages/Blocks/Overview/Stats/Points/Container"
+import {
+  NextLevelNightsColumn,
+  NextLevelPointsColumn,
+  StayOnLevelColumn,
+  YourPointsColumn,
+} from "@/components/MyPages/Blocks/Overview/Stats/Points/PointsColumn"
+import { getMembershipLevelObject } from "@/utils/membershipLevel"
+import { getMembership } from "@/utils/user"
+
+import { UserProps } from "@/types/components/myPages/user"
+import { LangParams } from "@/types/params"
+
+/* TODO */
+export default async function Points({ user, lang }: UserProps & LangParams) {
+  const membership = getMembership(user.memberships)
+  const nextLevel = getMembershipLevelObject(
+    membership?.nextLevel as MembershipLevelEnum,
+    lang
+  )
+
+  return (
+    <PointsContainer>
+      <YourPointsColumn points={membership?.currentPoints} />
+      {nextLevel && (
+        <>
+          {membership?.currentPoints ? (
+            <StayOnLevelColumn
+              points={membership?.currentPoints} //TODO
+              subtitleParam={membership?.expirationDate}
+            />
+          ) : (
+            <>
+              <NextLevelPointsColumn
+                points={membership?.pointsRequiredToNextlevel}
+                subtitleParam={nextLevel.name}
+              />
+              {nextLevel?.level === membershipLevels.L7 && (
+                <NextLevelNightsColumn
+                  nights={100} //TODO
+                  subtitleParam={membership?.expirationDate}
+                />
+              )}
+            </>
+          )}
+        </>
+      )}
+    </PointsContainer>
+  )
+}

components/MyPages/Blocks/Points/Overview/index.tsx

@@ -0,0 +1,39 @@
+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 Divider from "@/components/TempDesignSystem/Divider"
+
+import Friend from "../../Overview/Friend"
+import Hero from "../../Overview/Friend/Hero"
+import Stats from "../../Overview/Stats"
+
+import styles from "./overview.module.css"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+import type { LangParams } from "@/types/params"
+
+export default async function PointsOverview({
+  link,
+  subtitle,
+  title,
+  lang,
+}: AccountPageComponentProps & LangParams) {
+  const user = await serverClient().user.get()
+  if (!user) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader link={link} subtitle={subtitle} title={title} topTitle />
+      <Hero color="burgundy">
+        <Friend user={user} color="red" />
+        <Divider className={styles.divider} color="peach" />
+        <Stats user={user} lang={lang} />
+      </Hero>
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}

components/MyPages/Blocks/Points/Overview/overview.module.css

@@ -0,0 +1,9 @@
+.divider {
+  padding-top: var(--Spacing-x2);
+}
+
+@media screen and (min-width: 768px) {
+  .divider {
+    display: none;
+  }
+}