Merged in LOY-346-add-modal-to-level-progress-card (pull request #2896)

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

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;
+  }
+}

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 (
+    <Modal
+      className={styles.dialog}
+      trigger={
+        <IconButton theme={"Black"}>
+          <MaterialIcon
+            className={styles.infoButton}
+            icon="info"
+            color={
+              color === "Surface/Brand/Primary 1/OnSurface/Default"
+                ? "Icon/Inverted"
+                : "Icon/Interactive/Default"
+            }
+          />
+        </IconButton>
+      }
+    >
+      <div className={styles.levelProgressModal}>
+        <Typography variant="Title/Subtitle/lg">
+          <h2 id="level-progress-modal-title" className={styles.title}>
+            {intl.formatMessage({
+              defaultMessage: "Your member year and level progress",
+            })}
+          </h2>
+        </Typography>
+        <span>
+          <Typography variant="Body/Paragraph/mdBold">
+            <h3 id="level-progress-modal-subtitle">
+              {intl.formatMessage({ defaultMessage: "Current member year" })}
+            </h3>
+          </Typography>
+          <div>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span className={styles.dates}>
+                <time id="level-progress-modal-start-date">
+                  {dt(tierStarts).locale(lang).format("MMM, YYYY")}
+                </time>
+                →
+                <time id="level-progress-modal-end-date">
+                  {dt(tierExpires).locale(lang).format("MMM D, YYYY")}
+                </time>
+              </span>
+            </Typography>
+          </div>
+        </span>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p id="level-progress-modal-text">
+            {intl.formatMessage({
+              defaultMessage:
+                "The points you earn this year determine your level for both this and the next member year.",
+            })}
+          </p>
+        </Typography>
+        <Link
+          size="large"
+          href={compareAllLevels[lang]}
+          color="Text/Interactive/Secondary"
+          className={styles.link}
+          textDecoration="underline"
+        >
+          {intl.formatMessage({
+            defaultMessage: "Compare all levels",
+          })}
+          <MaterialIcon icon="arrow_forward" color="CurrentColor" size={24} />
+        </Link>
+        <Link
+          size="large"
+          href={faq[lang]}
+          color="Text/Interactive/Secondary"
+          className={styles.link}
+          textDecoration="underline"
+        >
+          {intl.formatMessage({
+            defaultMessage: "Scandic Friends FAQ",
+          })}
+          <MaterialIcon icon="arrow_forward" color="CurrentColor" size={24} />
+        </Link>
+      </div>
+    </Modal>
+  )
+}

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({
             )}
           </p>
         </Typography>
-        <MaterialIcon
-          className={styles.infoButton}
-          icon="info"
-          color={
-            color === "Surface/Brand/Primary 1/OnSurface/Default"
-              ? "Icon/Inverted"
-              : "Icon/Interactive/Default"
-          }
+        <LevelProgressModal
+          color={color}
+          tierExpires={friendsMembership.tierExpires}
         />
       </header>
 

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`,