Merged in feat/LOY-336-Points-to-Spend-Card (pull request #2830)

feat(LOY-336): Add PointsToSpendCard * feat(LOY-366): Add PointsToSpendCard * feat(LOY-336): Add Expiring Points Table Sidepeek * fix(LOY-336): Hide old section * fix(LOY-336): description mobile styling * chore(LOY-336): css cleanup Approved-by: Matilda Landström
2025-09-22 10:16:40 +00:00
parent 8ebc48b138
commit 6a9d598b97
10 changed files with 391 additions and 10 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/index.tsx
@@ -0,0 +1,135 @@
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import MoneyHandEllipsisIcon from "@scandic-hotels/design-system/Icons/MoneyHandEllipsisIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { spendPoints } from "@/constants/webHrefs"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import ExpiringPointsSeeAllButton from "./ExpiringPointsSeeAllButton"
+import { getExpiryLabel } from "./utils"
+
+import styles from "./PointsToSpendCard.module.css"
+
+import type { User } from "@scandic-hotels/trpc/types/user"
+
+interface PointsToSpendCardProps {
+  user: User
+}
+
+export default async function PointsToSpendCard({
+  user,
+}: PointsToSpendCardProps) {
+  const intl = await getIntl()
+  const lang = await getLang()
+
+  if (!user.membership) {
+    return null
+  }
+
+  const spendablePoints = user.membership.currentPoints
+  const hasPointsToSpend = spendablePoints > 0
+
+  const expiringPoints = user.membership.pointsToExpire
+  const expiryDate = user.membership.pointsExpiryDate
+  const expiryDateText = getExpiryLabel(expiryDate, intl, lang)
+
+  return (
+    <section
+      className={styles.card}
+      aria-labelledby="points-to-spend-card-title"
+    >
+      <div className={styles.content}>
+        <MoneyHandEllipsisIcon
+          width="140"
+          height="128"
+          className={styles.icon}
+          aria-hidden="true"
+        />
+        <div className={styles.textContent}>
+          <Typography variant="Title/xs">
+            <h2 id="points-to-spend-card-title" className={styles.title}>
+              {intl.formatMessage({
+                defaultMessage: "Points to spend",
+              })}
+            </h2>
+          </Typography>
+          <div className={styles.pointsContainer}>
+            <Typography variant="Title/lg">
+              <span className={styles.pointsValue}>
+                {intl.formatNumber(spendablePoints)}
+              </span>
+            </Typography>
+            {!hasPointsToSpend && (
+              <Typography variant="Title/Overline/sm">
+                <span className={styles.pointsLabel}>
+                  {intl.formatMessage({
+                    defaultMessage: "POINTS",
+                  })}
+                </span>
+              </Typography>
+            )}
+          </div>
+          {hasPointsToSpend && (
+            <ButtonLink href={spendPoints[lang]} target="_blank" variant="Text">
+              {intl.formatMessage({
+                defaultMessage: "How to spend points",
+              })}
+              <MaterialIcon
+                icon="chevron_right"
+                color="CurrentColor"
+                size={24}
+              />
+            </ButtonLink>
+          )}
+        </div>
+      </div>
+      {!hasPointsToSpend && (
+        <div className={styles.description}>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.descriptionText}>
+              {intl.formatMessage({
+                defaultMessage:
+                  "Earn points by staying at Scandic. Turn your points into free nights and memorable experiences.",
+              })}
+            </p>
+          </Typography>
+        </div>
+      )}
+      {expiringPoints && expiryDate && (
+        <div className={styles.expiringPointsCard}>
+          <Typography variant="Title/Overline/sm">
+            <p className={styles.expiryDate}>{expiryDateText}</p>
+          </Typography>
+          <div className={styles.pointsRow}>
+            <Typography variant="Body/Lead text">
+              <p className={styles.expiringPoints}>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "{expiringPoints} points expiring",
+                  },
+                  {
+                    expiringPoints: (
+                      <Typography
+                        key={`expiring-points-${expiringPoints}`}
+                        variant="Title/Subtitle/md"
+                      >
+                        <strong>{intl.formatNumber(expiringPoints)}</strong>
+                      </Typography>
+                    ),
+                  }
+                )}
+              </p>
+            </Typography>
+            <ExpiringPointsSeeAllButton
+              expiringPoints={expiringPoints}
+              expiryDate={expiryDate}
+            />
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}