Matilda Landström
086319e8b1
Feat/LOY-486 consent prompt date * chore(LOY-486): update name on date * chore(LOY-486): open links in new tab * chore(LOY-486): send prompt date + refactor modal * chore(LOY-486): update README Approved-by: Chuma Mcphoy (We Ahead)
98 lines
3.7 KiB
Markdown
98 lines
3.7 KiB
Markdown
# 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:
|
|
|
|
```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`.
|
|
|
|
## 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.
|