web/apps/scandic-web/components/MyPages/ProfilingConsent

Profiling Consent

A full-page modal shown when a user first visits a My Pages route. If the modal is dimissed, a banner is shown on the overview page. On /profile, the user can navigate to /profile/consent to update the consent. On signup, it's also possible to opt in.

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

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 are 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.

Contentstack

Profiling Consent setup in Contentstack:

• Profiling Consent (config) Config needs to be created and published in respective language.
• /consent (account page) Page needs to be created and published in respective language.
• /overview (account page) Need to add Dynamic content: Profiling Consent Banner to respective language, and re-publish the page.