Merged in feat/LOY-497-Flag-Profiling-Consent (pull request #3292)
refactor(LOY-497): hide profiling consent behind feature flag * refactor(LOY-497): hide profiling consent behind feature flag * chore(LOY-497): up to date consent readme Approved-by: Matilda Landström
This commit is contained in:
Chuma Mcphoy (We Ahead)
@@ -1,3 +1,5 @@
|
||||
import { env } from "@/env/server"
|
||||
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import { Section } from "../Section"
|
||||
@@ -15,7 +17,7 @@ export async function CommunicationSettings() {
|
||||
})}
|
||||
>
|
||||
<EmailSlot />
|
||||
<PersonalizationSlot />
|
||||
{env.ENABLE_PROFILE_CONSENT && <PersonalizationSlot />}
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { env } from "@/env/server"
|
||||
import { getProfile, getProfilingConsent } from "@/lib/trpc/memoizedRequests"
|
||||
|
||||
import { GetMainIconByCSIdentifier, userHasConsent } from "../utils"
|
||||
@@ -8,6 +9,8 @@ import { BannerButton } from "./Button"
|
||||
import styles from "./profilingConsentBanner.module.css"
|
||||
|
||||
export async function ProfilingConsentBanner() {
|
||||
if (!env.ENABLE_PROFILE_CONSENT) return null
|
||||
|
||||
const user = await getProfile()
|
||||
if (!user || userHasConsent(user?.profilingConsent)) return null
|
||||
|
||||
|
||||
@@ -1,83 +1,115 @@
|
||||
# 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.
|
||||
Profiling consent allows users to opt in/out of personalized experiences. The feature is controlled by the `ENABLE_PROFILE_CONSENT` environment variable.
|
||||
|
||||
## Usage
|
||||
## User Journey
|
||||
|
||||
### 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
|
||||
1. **Signup**: Optional consent checkbox in registration form
|
||||
2. **My Pages Modal**: Prompt shown on first visit (if no decision made)
|
||||
3. **Banner**: Shown on overview page if modal was dismissed without deciding
|
||||
4. **Profile Settings**: Dedicated page at `/profile/consent` to update consent at any time
|
||||
|
||||
## 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 (`Modal/`)
|
||||
|
||||
Full-page modal shown when a user first visits a My Pages route.
|
||||
|
||||
- Rendered in `app/[lang]/(live)/(protected)/my-pages/layout.tsx`
|
||||
- Only shows if user hasn't made a consent decision (`profilingConsent` is `undefined`)
|
||||
- Uses `memberKey` (from `membershipNumber` or `profileId`) for dismissal tracking
|
||||
- Close via "X" button only (no overlay click or ESC key)
|
||||
- Accept/Decline buttons update consent via API
|
||||
|
||||
**Sub-components:**
|
||||
|
||||
- `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
|
||||
- `Modal/ReadOnly.tsx` — Informational version without action buttons (used in signup)
|
||||
|
||||
## Banner
|
||||
### Banner (`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.
|
||||
Shown on the account overview page when consent is pending.
|
||||
|
||||
## Local Persistence
|
||||
- Server component that checks `userHasConsent()` before rendering
|
||||
- CTA button dispatches `profiling-consent:open` event to reopen the modal
|
||||
- Added to overview via Contentstack Dynamic Content block
|
||||
|
||||
### Alert (`Alert/`)
|
||||
|
||||
Feedback alert shown after consent actions in My Pages.
|
||||
|
||||
- `ProfilingConsentAlertProvider` — Context provider in My Pages layout
|
||||
- Shows success/error states after accepting/declining consent
|
||||
- Success alert includes link to edit preferences
|
||||
|
||||
### Consent Form (`components/Forms/ProfilingConsent/`)
|
||||
|
||||
Dedicated form on `/profile/consent` page for managing consent.
|
||||
|
||||
- Radio button selection for Accept/Decline
|
||||
- Shows current consent status
|
||||
- Redirects to profile after saving
|
||||
- Includes accordion with privacy information
|
||||
|
||||
### Signup Integration
|
||||
|
||||
The signup form (`components/Forms/Signup/index.tsx`) includes:
|
||||
|
||||
- Checkbox to opt-in during registration
|
||||
- "Read more" link that opens `Modal/ReadOnly.tsx`
|
||||
|
||||
### Profile Settings
|
||||
|
||||
`PersonalizationSlot` in `components/MyPages/Profile/CommunicationSettings/` provides a link to the consent management page.
|
||||
|
||||
### Accordion (`Accordion/`)
|
||||
|
||||
Expandable section with privacy and personalization details. Used in both the modal and consent form.
|
||||
|
||||
## API
|
||||
|
||||
### tRPC Mutations
|
||||
|
||||
- `trpc.user.profilingConsent.update` — Update user's consent preference
|
||||
- `trpc.user.profilingConsentPromptDate.update` — Record when user was prompted
|
||||
|
||||
### tRPC Queries
|
||||
|
||||
- `trpc.contentstack.profilingConsent.get` — Fetch modal/banner content from CMS
|
||||
|
||||
## Hooks
|
||||
|
||||
- `useUpdateProfilingConsent` (`hooks/useUpdateProfilingConsent.ts`) — Handles consent update mutation with alert feedback via `ProfilingConsentAlertProvider`
|
||||
|
||||
## Local Storage
|
||||
|
||||
Modal dismissal is tracked per-member to control auto-open behavior:
|
||||
|
||||
- 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).
|
||||
- Set when modal is closed via header close button
|
||||
- Does not reflect Accept/Decline (those are stored via API)
|
||||
|
||||
## Utilities
|
||||
|
||||
Located at `apps/scandic-web/utils/profilingConsent.ts`:
|
||||
Located at `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
|
||||
- `storageKey(memberKey)` — Generate storage key
|
||||
- `readDismissed(memberKey)` — Check if modal was dismissed
|
||||
- `setDismissed(memberKey)` — Mark modal as dismissed
|
||||
- `clearDismissed(memberKey)` — Clear dismissal flag
|
||||
- `profilingConsentOpenEvent` — CustomEvent name for opening modal
|
||||
- `requestOpen()` — Dispatch event to open modal
|
||||
|
||||
## Testing
|
||||
|
||||
To re-show the modal after dismissing:
|
||||
Re-show modal after dismissing:
|
||||
|
||||
```js
|
||||
// In the browser console:
|
||||
localStorage.removeItem("profiling-consent:dismissed:<memberKey>")
|
||||
// Then refresh the page
|
||||
// Refresh the page
|
||||
```
|
||||
|
||||
To open the modal without clearing the dismissed flag:
|
||||
Open modal programmatically:
|
||||
|
||||
```js
|
||||
window.dispatchEvent(new CustomEvent("profiling-consent:open"))
|
||||
@@ -85,13 +117,18 @@ window.dispatchEvent(new CustomEvent("profiling-consent:open"))
|
||||
|
||||
Replace `<memberKey>` with the actual `membershipNumber` or `profileId`.
|
||||
|
||||
## Contentstack
|
||||
## Contentstack Setup
|
||||
|
||||
Profiling Consent setup in Contentstack:
|
||||
Required content for the feature:
|
||||
|
||||
- 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.
|
||||
1. **Profiling Consent (config)**
|
||||
|
||||
- Config needs to be created and published in each language
|
||||
|
||||
2. **/consent (account page)**
|
||||
|
||||
- Page needs to be created and published in each language
|
||||
|
||||
3. **/overview (account page)**
|
||||
- Add Dynamic content block: "Profiling Consent Banner"
|
||||
- Re-publish the page for each language
|
||||
|
||||
Reference in New Issue
Block a user