web/apps/scandic-web/components/MyPages/ProfilingConsent/README.md

# 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:

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

To open the modal without clearing the dismissed flag:

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