From 20f10208186f0930ce7a543e70184254c235c7b1 Mon Sep 17 00:00:00 2001 From: Emma Zettervall Date: Mon, 6 Oct 2025 07:42:11 +0000 Subject: [PATCH] Merged in LOY-346-add-modal-to-level-progress-card (pull request #2896) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(LOY-346): Add modal to LevelProgressCard * Added LevelProgressModal with styles in LevelProgressCard. Also added compareAllLevels LangRoute in webHrefs * feat(LOY-346): Smaller changes based on comments * feat(LOY-346): Changed paragraph to time, added textdecoration:underline, changed dialog css * feat(LOY-346): Changed title size:) * feat(LOY-346): Changed dates-arrow icon to in text Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström --- .../LevelProgressModal.module.css | 38 ++++++ .../LevelProgressModal/index.tsx | 120 ++++++++++++++++++ .../MyPages/LevelProgressCard/index.tsx | 13 +- apps/scandic-web/constants/webHrefs.ts | 9 ++ 4 files changed, 171 insertions(+), 9 deletions(-) create mode 100644 apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/LevelProgressModal.module.css create mode 100644 apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx diff --git a/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/LevelProgressModal.module.css b/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/LevelProgressModal.module.css new file mode 100644 index 000000000..96b6acecb --- /dev/null +++ b/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/LevelProgressModal.module.css @@ -0,0 +1,38 @@ +.infoButton { + grid-column: 2; + grid-row: 1 / 3; + align-self: start; +} + +.levelProgressModal { + display: flex; + flex-direction: column; + gap: var(--Space-x2); + padding-bottom: var(--Space-x1); +} + +.title { + display: flex; + flex-direction: column; +} + +.dates { + display: flex; + align-items: center; + gap: var(--Space-x1); +} + +.link { + display: flex; + gap: var(--Space-x1); +} + +.linkText { + text-decoration: underline; +} + +@media screen and (min-width: 768px) { + .dialog { + max-width: 560px; + } +} diff --git a/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx b/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx new file mode 100644 index 000000000..cdaa1e4d5 --- /dev/null +++ b/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx @@ -0,0 +1,120 @@ +/* eslint-disable formatjs/no-literal-string-in-jsx */ +"use client" + +import { useIntl } from "react-intl" + +import { dt } from "@scandic-hotels/common/dt" +import { IconButton } from "@scandic-hotels/design-system/IconButton" // client only +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Link from "@scandic-hotels/design-system/Link" +import Modal from "@scandic-hotels/design-system/Modal" +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { compareAllLevels, faq } from "@/constants/webHrefs" + +import useLang from "@/hooks/useLang" + +import styles from "./LevelProgressModal.module.css" + +type LevelProgressModalProps = { + color: string | null + tierExpires: string | null +} + +export default function LevelProgressModal({ + color, + tierExpires, +}: LevelProgressModalProps) { + const intl = useIntl() + const lang = useLang() + + // calculate tierStarts by tierExpires + let tierStarts: string | null = null + + if (tierExpires) { + const date = new Date(tierExpires) + date.setFullYear(date.getFullYear() - 1) + tierStarts = date.toISOString().split("T")[0] + } + + return ( + + + + } + > +
+ +

+ {intl.formatMessage({ + defaultMessage: "Your member year and level progress", + })} +

+ + + +

+ {intl.formatMessage({ defaultMessage: "Current member year" })} +

+ +
+ + + + → + + + +
+ + +

+ {intl.formatMessage({ + defaultMessage: + "The points you earn this year determine your level for both this and the next member year.", + })} +

+ + + {intl.formatMessage({ + defaultMessage: "Compare all levels", + })} + + + + {intl.formatMessage({ + defaultMessage: "Scandic Friends FAQ", + })} + + +
+ + ) +} diff --git a/apps/scandic-web/components/MyPages/LevelProgressCard/index.tsx b/apps/scandic-web/components/MyPages/LevelProgressCard/index.tsx index 2366477a0..d9103bd71 100644 --- a/apps/scandic-web/components/MyPages/LevelProgressCard/index.tsx +++ b/apps/scandic-web/components/MyPages/LevelProgressCard/index.tsx @@ -1,5 +1,4 @@ import { dt } from "@scandic-hotels/common/dt" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { getScandicNativeMembership } from "@scandic-hotels/trpc/routers/user/helpers" @@ -9,6 +8,7 @@ import { getLang } from "@/i18n/serverContext" import ProgressCardHighestLevel from "./InnerCard/ProgressCardHighestLevel" import ProgressCardLowerLevel from "./InnerCard/ProgressCardLowerLevel" import SuccessCard from "./InnerCard/SuccessCard" +import LevelProgressModal from "./LevelProgressModal" import { getLevelProgressData } from "./utils" import { levelProgressCardVariants } from "./variants" @@ -56,14 +56,9 @@ export default async function LevelProgressCard({ )}

- diff --git a/apps/scandic-web/constants/webHrefs.ts b/apps/scandic-web/constants/webHrefs.ts index 6c8270bd0..8d96735fc 100644 --- a/apps/scandic-web/constants/webHrefs.ts +++ b/apps/scandic-web/constants/webHrefs.ts @@ -20,6 +20,15 @@ export const faq: LangRoute = { sv: `/${Lang.sv}/scandic-friends/hjalp-och-service/faq`, } +export const compareAllLevels: LangRoute = { + da: `/${Lang.da}/scandic-friends/sammenlign-alle-niveauer`, + de: `/${Lang.de}/scandic-friends/alle-level-vergleichen`, + en: `/${Lang.en}/scandic-friends/compare-all-levels`, + fi: `/${Lang.fi}/scandic-friends/vertaa-kaikkia-tasoja`, + no: `/${Lang.no}/scandic-friends/sammenligne-alle-nivaer`, + sv: `/${Lang.sv}/scandic-friends/jamfor-alla-nivaer`, +} + export const partners: LangRoute = { da: `/${Lang.da}/scandic-friends/partnere`, de: `/${Lang.de}/scandic-friends/partner`,