Merged in feat/LOY-423-Nights-Stayed-Progress-for-L6-Members (pull request #3360)

feat(LOY-423): Add progress bar for L6 members showing nights stayed * feat(LOY-423): Add progress bar for L6 members showing nights stayed * chore(LOY-423): shorten css selector Approved-by: Matilda Landström
2025-12-17 10:45:30 +00:00
parent 3dce2d310f
commit ac53f128af
6 changed files with 267 additions and 8 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/L6Progress/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/L6Progress/index.tsx
@@ -0,0 +1,82 @@
+import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
+import { dt } from "@scandic-hotels/common/dt"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+import { getTierStartDate } from "@/utils/getTierStartDate"
+
+import { ProgressSection } from "./ProgressSection"
+
+import styles from "./l6Progress.module.css"
+
+const MAX_NIGHTS = 100
+
+export async function L6Progress() {
+  const user = await getProfile()
+  const intl = await getIntl()
+  const lang = await getLang()
+
+  if (
+    !user ||
+    "error" in user ||
+    user?.membership?.membershipLevel !== MembershipLevelEnum.L6
+  ) {
+    return null
+  }
+
+  const nightsToTopTier = user?.membership?.nightsToTopTier
+
+  if (nightsToTopTier == null) {
+    return null
+  }
+
+  const nightsStayed = MAX_NIGHTS - nightsToTopTier
+  // Cap progress at 100 to prevent overflow.
+  const progressValue = Math.min(nightsStayed, MAX_NIGHTS)
+
+  const tierStartDate = getTierStartDate(user.membership.tierExpirationDate)
+  const formattedStartDate = tierStartDate
+    ? dt(tierStartDate).locale(lang).format("D MMMM YYYY")
+    : null
+
+  const bestFriendLabel = TIER_TO_FRIEND_MAP[MembershipLevelEnum.L7]
+
+  return (
+    <div className={styles.l6Progress}>
+      <header className={styles.header}>
+        <Typography variant="Title/Subtitle/md">
+          <h3 className={styles.title}>
+            {intl.formatMessage({
+              id: "previousStays.totalStays",
+              defaultMessage: "Total stays",
+            })}
+          </h3>
+        </Typography>
+        {formattedStartDate && (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.since}>
+              {intl.formatMessage(
+                {
+                  id: "previousStays.sinceDate",
+                  defaultMessage: "Since {date}",
+                },
+                { date: formattedStartDate }
+              )}
+            </p>
+          </Typography>
+        )}
+      </header>
+
+      <ProgressSection
+        nightsStayed={nightsStayed}
+        progressValue={progressValue}
+        maxNights={MAX_NIGHTS}
+        bestFriendLabel={bestFriendLabel}
+      />
+    </div>
+  )
+}