scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
494bfe10f3fea7761677fcd0114efa4eaa15748b
web/apps/scandic-web/components/MyPages/ProfilingConsent/README.md
Chuma Mcphoy (We Ahead) 494bfe10f3 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

3.4 KiB
Raw Blame History

Profiling Consent

A full-page modal shown when a user first visits a My Pages route.

Usage

My Pages Modal

Rendered in app/[lang]/(live)/(protected)/my-pages/layout.tsx so it is available across all My Pages routes. The layout passes memberKey (derived from membershipNumber or profileId) to enable per-member dismissal tracking.

Signup Form Integration

A read-only version (Modal/ReadOnly.tsx) is integrated into the signup form (components/Forms/Signup/index.tsx) to provide users with information about personalization benefits during registration. This version:

  • Has no action buttons (Accept/Decline)
  • Can be opened via the "Read more about personalization at Scandic" button in the signup form
  • Uses the same Contentstack content as the main modal
  • Does not require a memberKey since it's for non-authenticated users

Features

My Pages Modal

  • Displays upon landing on any My Pages route (if not previously dismissed)
  • Shows Scandic logo, title, lead text, benefit cards and an accordion
  • Close via "X" button only (no overlay click or ESC key)
  • Dismissal persisted in localStorage per member
  • Includes Accept/Decline action buttons (currently non-functional)

Read-Only Version (Signup)

  • Same visual content as main modal but without action buttons
  • Accessible during signup process via "Read more" button
  • Uses Contentstack content fetched via trpc.contentstack.profilingConsent.get.useQuery
  • No localStorage persistence since it's informational only

Components

  • Modal/ — Main modal shell with header, content, and action buttons
  • Modal/ReadOnly.tsx — Read-only version without action buttons, used in signup form
  • Modal/BenefitCards/ — Cards showcasing personalization benefits
  • Accordion/ — Privacy and personalization information
  • Banner/ — A banner shown on the account overview page that can reopen the modal

Banner

  • Purpose: Offer a way to reopen the Profiling Consent modal later when the user is ready to decide.
  • Visibility: Decided server-side in Banner/index.tsx (render only when consent status is pending once API is available).
  • Behavior: The client CTA dispatches a profiling-consent:open event to reopen the modal.

Local Persistence

  • Key: profiling-consent:dismissed:<memberKey>
  • Set when the modal is closed via the header close button.
  • This flag only controls auto-open behavior; it does not reflect Accept/Decline (those will be handled via API and used server-side to decide banner visibility).

Utilities

Located at apps/scandic-web/utils/profilingConsent.ts:

  • storageKey(memberKey)
  • readDismissed(memberKey)
  • setDismissed(memberKey)
  • clearDismissed(memberKey)
  • profilingConsentOpenEvent — CustomEvent name used to request the modal to open
  • requestOpen() — Dispatches the open event

Testing

To re-show the modal after dismissing:

// In the browser console:
localStorage.removeItem("profiling-consent:dismissed:<memberKey>")
// Then refresh the page

To open the modal without clearing the dismissed flag:

window.dispatchEvent(new CustomEvent("profiling-consent:open"))

Replace <memberKey> with the actual membershipNumber or profileId.

Future Work

  • Wire up Antavo/API integration for Accept/Decline actions
  • Consider default-open Accordion items support in DS and open relevant items by default here
  • Connect signup form personalization checkbox with profiling consent acceptance
Reference in New Issue View Git Blame Copy Permalink