Merged in feat/profile-consent-feature-branch (pull request #2900)

feat(LOY-268): Feature branch for profiling consent work * feat: Add feature branch for profile and consent work * Merged in feat/LOY-268-profile-consent-banner-comp (pull request #2908) Feat/LOY-358 profile consent banner component * feat: Add feature branch for profile and consent work * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component Approved-by: Chuma Mcphoy (We Ahead) * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): minor fixes * fix(LOY-347): replace old spa icon * fix(LOY-347): re-add env vars * fix(LOY-347): File renaming and cleanup * chore(LOY-347): Update readme * fix(LOY-347): use correct space var * fix(LOY-347): Add TODO comment for adding link to accordion Approved-by: Matilda Landström * Merged in fix/LOY-386-profiling-consent-modal-contentstack (pull request #2930) Fix(LOY-386): profiling consent modal contentstack * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): minor fixes * fix(LOY-347): replace old spa icon * fix(LOY-347): re-add env vars * fix(LOY-347): File renaming and cleanup * fix(LOY-386): Use contentstack content for profile consent modal * fix(LOY-386): beneift cards schema transform * chore(LOY-386): remove usememo * fix(LOY-386): fix modalcontent check * fix(LOY-386): remove uneeded vars Approved-by: Matilda Landström * Merged in feat/LOY-412-profiling-consent-in-signup (pull request #2976) Feat(LOY-412): profiling consent in signup * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Ico… * Merged in fix/lokalise-ids (pull request #3013) fix: add ids to translations in Profiling Consent * fix: add ids to translations Approved-by: Erik Tiekstra Approved-by: Chuma Mcphoy (We Ahead) * Merged in LOY-436-my-pages-profiling-consent (pull request #3011) LOY-436: Profiling Consent on My Profile, no api Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-418-profiling-consent-ui-text-update (pull request #3080) Feat/LOY-418: Profiling consent ui and text update * chore(LOY-418): update /consent buttons * chore(LOY-418): update legal texts Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-268-profiling-consent-api (pull request #3088) Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-413-Signup-API-Profiling-Consent (pull request #3105) Feat/LOY-413 Signup API Profiling Consent * feat(LOY-413): signup profiling consent * chore(LOY-413): remove todo * fix(LOY-413): only pass in profilingConsent if true * fix(LOY-413): proper spread of profilingConsent in signup input Approved-by: Christel Westerberg * Merged in fix/LOY-413-use-v2-for-signup-call (pull request #3112) fix(LOY-413): use v2 endpoint for profile POST in signup * fix(LOY-413): use v2 endpoint for profile POST in signup Approved-by: Erik Tiekstra * Merged in feat/LOY-268-profiling-consent-improvements (pull request #3094) Feat/LOY-268: Profiling consent improvements * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): min… * Merged in fix/update-graphql (pull request #3130) fix: update graphql * fix: update graphql Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-414-prof-consent-tracking (pull request #3127) Feat/LOY-414 profile consent tracking + credit card ui update * chore(LOY-414): create track link function * chore(LOY-414): add cta tracking * chore(LOY-414): add profileConsent to userInfo datalayer * chore(LOY-414): update credit card ui * chore(LOY-414): update tracking specs * chore(LOY-414): add pageView tracking to modal Approved-by: Chuma Mcphoy (We Ahead) * fix: remove old flag * Merged in fix/LOY-268-prof-consent-button-fix (pull request #3162) fix(LOY-268): add button as link * fix(LOY-268): add button as link Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström
2025-11-14 13:28:56 +00:00
parent 9260cc0f81
commit 494bfe10f3
79 changed files with 9332 additions and 268 deletions
@@ -4,8 +4,8 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"

+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"

@@ -98,9 +98,10 @@ export default function AddCreditCardButton() {
  return (
    <Button
      className={styles.addCreditCardButton}
-      variant="icon"
-      theme="base"
-      intent="text"
+      variant="Text"
+      color="Primary"
+      size="Medium"
+      typography="Body/Paragraph/mdBold"
      onClick={() =>
        initiateAddCard.mutate({
          language: lang,
@@ -5,6 +5,11 @@
  grid-template-columns: auto auto auto 1fr;
  justify-items: flex-end;
  padding: var(--Space-x1) var(--Space-x15);
-  border-radius: var(--Corner-radius-sm);
-  background-color: var(--Background-Primary);
+  border-radius: var(--Corner-radius-Medium);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+}
+
+.cardNumber {
+  margin-left: var(--Space-x1);
+  color: var(--Text-Secondary);
 }
@@ -1,6 +1,5 @@
-import Body from "@scandic-hotels/design-system/Body"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import DeleteCreditCardConfirmation from "../DeleteCreditCardConfirmation"

@@ -9,13 +8,20 @@ import styles from "./creditCardRow.module.css"
 import type { CreditCardRowProps } from "@/types/components/myPages/myProfile/creditCards"

 export default function CreditCardRow({ card }: CreditCardRowProps) {
-  const maskedCardNumber = `**** ${card.truncatedNumber.slice(-4)}`
+  const maskedCardNumber = `•••• ${card.truncatedNumber.slice(-4)}`

  return (
    <div className={styles.card}>
      <MaterialIcon icon="credit_card" color="Icon/Intense" />
-      <Body textTransform="bold">{card.type}</Body>
-      <Caption color="textMediumContrast">{maskedCardNumber}</Caption>
+      <Typography variant="Body/Paragraph/mdBold">
+        <span>{card.type}</span>
+      </Typography>
+      <Typography
+        variant="Body/Paragraph/mdRegular"
+        className={styles.cardNumber}
+      >
+        <span>{maskedCardNumber}</span>
+      </Typography>
      <DeleteCreditCardConfirmation card={card} />
    </div>
  )
@@ -1,8 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"

+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"

@@ -70,9 +70,15 @@ export default function DeleteCreditCardConfirmation({
        defaultMessage: "Remove card from member profile",
      })}
      trigger={
-        <Button intent="secondary" size="small" theme="base">
+        <IconButton
+          theme="Black"
+          aria-label={intl.formatMessage({
+            id: "profile.creditCard.deleteCard",
+            defaultMessage: "Delete card",
+          })}
+        >
          <MaterialIcon icon="delete" color="Icon/Interactive/Default" />
-        </Button>
+        </IconButton>
      }
    />
  )
@@ -3,13 +3,13 @@
 import { useIntl } from "react-intl"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { TextLinkButton } from "@scandic-hotels/design-system/TextLinkButton"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"

-import styles from "./managePreferencesButton.module.css"
+import styles from "./manageEmailPreferencesButton.module.css"

-export default function ManagePreferencesButton() {
+export default function ManageEmailPreferencesButton() {
  const intl = useIntl()
  const generatePreferencesLink = trpc.user.generatePreferencesLink.useMutation(
    {
@@ -19,7 +19,7 @@ export default function ManagePreferencesButton() {
        } else {
          toast.error(
            intl.formatMessage({
-              id: "profile.managePreferences.communicationPreferencesUnavailable",
+              id: "profile.manageEmailPreferences.communicationPreferencesUnavailable",
              defaultMessage:
                "It's not possible to manage your communication preferences right now. Please try again later or contact support if the problem persists.",
            })
@@ -29,7 +29,7 @@ export default function ManagePreferencesButton() {
      onError: () => {
        toast.error(
          intl.formatMessage({
-            id: "profile.managePreferences.error",
+            id: "profile.manageEmailPreferences.anErrorOccured",
            defaultMessage:
              "An error occurred trying to manage your preferences, please try again later.",
          })
@@ -39,19 +39,18 @@ export default function ManagePreferencesButton() {
  )

  return (
-    <Button
+    <TextLinkButton
+      theme="Primary"
      className={styles.managePreferencesButton}
-      variant="icon"
-      theme="base"
-      intent="text"
      onClick={() => generatePreferencesLink.mutate()}
-      wrapping
+      typography="Link/md"
+      color="Text/Interactive/Secondary"
    >
      <MaterialIcon icon="arrow_forward" color="CurrentColor" />
      {intl.formatMessage({
-        id: "profile.managePreferences.title",
-        defaultMessage: "Manage preferences",
+        id: "profile.manageEmailPreferences",
+        defaultMessage: "Manage e-mail preferences",
      })}
-    </Button>
+    </TextLinkButton>
  )
 }