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

Feat(SW-170): Update overview hero Approved-by: Christel Westerberg
2024-07-12 06:45:44 +00:00
parent c1892ace66
commit 801a041404
48 changed files with 595 additions and 203 deletions
@@ -0,0 +1,24 @@
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
+
+import type { UserProps } from "@/types/components/myPages/user"
+
+export default async function ExpiringPoints({ user }: UserProps) {
+  const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
+  // TODO - add correct points when available from API
+  if (!membership /* || !membership.expiringPoints*/) {
+    //  TODO: handle this case?
+    return null
+  }
+
+  return (
+    <section>
+      <Body color="white" textTransform="bold" textAlign="center">
+        {membership.currentPoints} {formatMessage({ id: "points expiring by" })}{" "}
+        {membership.expirationDate}
+      </Body>
+    </section>
+  )
+}
@@ -1,50 +0,0 @@
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-import { getMembershipLevelObject } from "@/utils/membershipLevel"
-import { getMembership } from "@/utils/user"
-
-import styles from "./nextLevel.module.css"
-
-import type { UserProps } from "@/types/components/myPages/user"
-import type { LangParams } from "@/types/params"
-
-export default async function NextLevel({
-  user,
-  lang,
-}: UserProps & LangParams) {
-  const { formatMessage } = await getIntl()
-  const membership = getMembership(user.memberships)
-
-  if (!membership?.membershipLevel) {
-    //  TODO: handle this case?
-    return null
-  }
-
-  const nextLevel = getMembershipLevelObject(
-    membership.membershipLevel,
-    lang,
-    "nextLevel"
-  )
-  if (!nextLevel) {
-    // TODO: already at top level, no next level exists
-    return null
-  }
-  return (
-    <section>
-      <Body color="white" textAlign="center">
-        {formatMessage({ id: "Next level" })}:
-      </Body>
-      <Title
-        className={styles.nextLevel}
-        color="white"
-        level="h3"
-        textAlign="center"
-      >
-        {nextLevel?.name || "N/A"}
-        <BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
-      </Title>
-    </section>
-  )
-}
@@ -1,13 +0,0 @@
-.nextLevel {
-  align-items: center;
-  display: grid;
-  grid-template-columns: 1fr;
-}
-
-@media screen and (min-width: 768px) {
-  .nextLevel {
-    gap: var(--Spacing-x1);
-    grid-template-columns: auto auto;
-    justify-content: center;
-  }
-}
@@ -0,0 +1,14 @@
+.points {
+  display: grid;
+  gap: var(--Spacing-x5);
+  text-wrap: balance;
+}
+
+@media screen and (min-width: 768px) {
+  .points {
+    grid-template-rows: auto auto auto;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 0;
+    column-gap: var(--Spacing-x2);
+  }
+}
@@ -0,0 +1,5 @@
+import styles from "./container.module.css"
+
+export default function PointsContainer({ children }: React.PropsWithChildren) {
+  return <section className={styles.points}>{children}</section>
+}
@@ -0,0 +1,79 @@
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./pointsColumn.module.css"
+
+import type {
+  NightsColumn,
+  PointsColumn,
+  PointsColumnProps,
+} from "@/types/components/myPages/points"
+
+export const YourPointsColumn = ({ points }: PointsColumn) =>
+  PointsColumn({
+    points,
+    title: "Your points",
+    subtitle: "as of today",
+  })
+
+export const NextLevelPointsColumn = ({
+  points,
+  subtitleParam,
+}: PointsColumn) =>
+  PointsColumn({
+    points,
+    title: "Points needed to level up",
+    subtitleParam,
+    subtitle: "next level:",
+  })
+
+export const StayOnLevelColumn = ({ points, subtitleParam }: PointsColumn) =>
+  PointsColumn({
+    points,
+    title: "Points needed to stay on level",
+    subtitleParam,
+    subtitle: "by",
+  })
+
+export const NextLevelNightsColumn = ({
+  nights,
+  subtitleParam,
+}: NightsColumn) =>
+  PointsColumn({
+    nights,
+    title: "Nights needed to level up",
+    subtitleParam,
+    subtitle: "by",
+  })
+
+async function PointsColumn({
+  points,
+  nights,
+  title,
+  subtitle,
+  subtitleParam,
+}: PointsColumnProps) {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <article>
+      <Body
+        color="white"
+        textTransform="bold"
+        textAlign="center"
+        className={styles.firstRow}
+      >
+        {formatMessage({
+          id: title,
+        })}
+      </Body>
+      <Title color="white" level="h2" textAlign="center">
+        {points ?? nights ?? "N/A"}
+      </Title>
+      <Body color="white" textAlign="center">
+        {formatMessage({ id: subtitle })} {subtitleParam}
+      </Body>
+    </article>
+  )
+}
@@ -0,0 +1,5 @@
+@media screen and (min-width: 768px) {
+  .firstRow {
+    align-content: flex-end;
+  }
+}
@@ -1,34 +1,30 @@
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
+
+import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"

-import styles from "./totalPoints.module.css"
+import PointsContainer from "./Container"
+import { NextLevelPointsColumn, YourPointsColumn } from "./PointsColumn"

-import type { UserProps } from "@/types/components/myPages/user"
+import { UserProps } from "@/types/components/myPages/user"
+import { LangParams } from "@/types/params"

-export default async function Points({ user }: UserProps) {
-  const { formatMessage } = await getIntl()
+export default async function Points({ user, lang }: UserProps & LangParams) {
  const membership = getMembership(user.memberships)
+  const nextLevel = getMembershipLevelObject(
+    membership?.nextLevel as MembershipLevelEnum,
+    lang
+  )
+
  return (
-    <section className={styles.points}>
-      <article>
-        <Body color="white" textAlign="center">
-          {formatMessage({ id: "Total Points" })}
-        </Body>
-        <Title color="white" level="h2" textAlign="center">
-          {membership ? membership.currentPoints : "N/A"}
-        </Title>
-      </article>
-      <article>
-        <Body color="white" textAlign="center">
-          {formatMessage({ id: "Points until next level" })}
-          {/* TODO */}
-        </Body>
-        <Title color="white" level="h2" textAlign="center">
-          {membership ? membership.currentPoints : "N/A"}
-        </Title>
-      </article>
-    </section>
+    <PointsContainer>
+      <YourPointsColumn points={membership?.currentPoints} />
+      {nextLevel && (
+        <NextLevelPointsColumn
+          points={membership?.pointsRequiredToNextlevel}
+          subtitleParam={nextLevel.name}
+        />
+      )}
+    </PointsContainer>
  )
 }
@@ -1,11 +0,0 @@
-.points {
-  display: grid;
-  gap: var(--Spacing-x2);
-  grid-template-columns: 1fr;
-}
-
-@media screen and (min-width: 768px) {
-  .points {
-    grid-template-columns: 1fr 1fr;
-  }
-}
@@ -1,6 +1,6 @@
 import Divider from "@/components/TempDesignSystem/Divider"

-import NextLevel from "./NextLevel"
+import ExpiringPoints from "./ExpiringPoints"
 import Points from "./Points"

 import styles from "./stats.module.css"
@@ -11,9 +11,9 @@ import type { LangParams } from "@/types/params"
 export default function Stats({ user, lang }: UserProps & LangParams) {
  return (
    <section className={styles.stats}>
-      <Points user={user} />
-      <Divider variant="default" color="white" />
-      <NextLevel user={user} lang={lang} />
+      <Points user={user} lang={lang} />
+      <Divider variant="default" color="pale" />
+      <ExpiringPoints user={user} />
    </section>
  )
 }