Merged in feat/LOY-584-L6-progressbar (pull request #3511)

Feat/LOY-584 L6 progressbar informational modal

* refactor(LOY-584): replace deprecated link

* feat(LOY-584): add info modal to progress bar

* fix(LOY-584): let labels overflow progress bar in mobile


Approved-by: Anton Gunnarsson

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/L6Progress/index.tsx

@@ -9,6 +9,7 @@ import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { getTierStartDate } from "@/utils/getTierStartDate"
 
+import { L6ProgressModal } from "./L6ProgressModal"
 import { ProgressSection } from "./ProgressSection"
 
 import styles from "./l6Progress.module.css"
@@ -58,17 +59,24 @@ export async function L6Progress() {
           </h3>
         </Typography>
         {formattedStartDate && (
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p className={styles.since}>
-              {intl.formatMessage(
-                {
-                  id: "previousStays.sinceDate",
-                  defaultMessage: "Since {date}",
-                },
-                { date: formattedStartDate }
-              )}
-            </p>
-          </Typography>
+          <>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span className={styles.sinceDate}>
+                <p className={styles.since}>
+                  {intl.formatMessage(
+                    {
+                      id: "previousStays.sinceDate",
+                      defaultMessage: "Since {date}",
+                    },
+                    { date: formattedStartDate }
+                  )}
+                </p>
+                <L6ProgressModal
+                  tierExpires={user.membership.tierExpirationDate}
+                />
+              </span>
+            </Typography>
+          </>
         )}
       </header>