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

apps/scandic-web/components/MyPages/ProfilingConsent/Modal/index.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+import { AnimatePresence, motion } from "motion/react"
+import { useCallback, useEffect, useState } from "react"
+import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useUpdateProfilingConsent } from "@/hooks/useUpdateProfilingConsent"
+import {
+  profilingConsentOpenEvent,
+  readDismissed,
+  setDismissed as persistDismissed,
+} from "@/utils/profilingConsent"
+import { trackConsentAction } from "@/utils/tracking/profilingConsent"
+
+import ProfilingConsentAccordion from "../Accordion"
+import { GetMainIconByCSIdentifier } from "../utils"
+import BenefitCards from "./BenefitCards"
+
+import styles from "./profilingConsentModal.module.css"
+
+import type { ProfilingConsentModal as ProfilingConsentModalType } from "@scandic-hotels/trpc/types/profilingConsent"
+
+type ProfilingConsentModalProps = {
+  memberKey?: string
+  content: ProfilingConsentModalType
+  iconIdentifier: string
+  readOnly?: boolean
+}
+
+const MotionModal = motion.create(Modal)
+
+export default function ProfilingConsentModal({
+  memberKey,
+  content,
+  iconIdentifier,
+  readOnly = false,
+}: ProfilingConsentModalProps) {
+  const intl = useIntl()
+  const [open, setOpen] = useState(false)
+
+  const { initiateUpdateConsent, isLoading, isSuccess } =
+    useUpdateProfilingConsent()
+
+  const [activeChoice, setActiveChoice] = useState<boolean | null>(null)
+
+  const handleClick = (consent: boolean) => {
+    setActiveChoice(consent)
+    initiateUpdateConsent(consent)
+  }
+
+  useEffect(() => {
+    if (!memberKey) return
+    setOpen(!readDismissed(memberKey))
+  }, [memberKey])
+
+  const onClose = useCallback(() => {
+    if (memberKey) {
+      persistDismissed(memberKey)
+    }
+    setOpen(false)
+  }, [memberKey])
+
+  useEffect(() => {
+    const handleOpen: EventListener = () => setOpen(true)
+    window.addEventListener(profilingConsentOpenEvent, handleOpen)
+    return () => {
+      window.removeEventListener(profilingConsentOpenEvent, handleOpen)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isSuccess) onClose()
+  }, [isSuccess, onClose])
+
+  if (!memberKey && !readOnly) return null
+
+  return (
+    <ModalOverlay
+      className={styles.overlay}
+      isOpen={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          onClose()
+        }
+      }}
+      isKeyboardDismissDisabled
+      isDismissable={false}
+    >
+      <AnimatePresence mode="wait">
+        {open && (
+          <MotionModal
+            className={styles.modal}
+            initial={{ y: 32, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 32, opacity: 0 }}
+            transition={{
+              y: { duration: 0.4, ease: "easeInOut" },
+              opacity: { duration: 0.4, ease: "easeInOut" },
+            }}
+          >
+            <Dialog
+              aria-label={intl.formatMessage({
+                id: "common.profilingConsent",
+                defaultMessage: "Profiling consent",
+              })}
+              className={styles.dialog}
+            >
+              <header className={styles.header}>
+                <div className={styles.logoWrap}>
+                  <ScandicLogoIcon height={20} width={94} />
+                </div>
+                <Button
+                  type="button"
+                  variant="Text"
+                  size="Large"
+                  color="Primary"
+                  className={styles.closeBtn}
+                  onClick={() => {
+                    trackConsentAction({ position: "modal", name: "close" })
+                    onClose()
+                  }}
+                  aria-label={intl.formatMessage({
+                    id: "common.close",
+                    defaultMessage: "Close",
+                  })}
+                >
+                  <MaterialIcon color="CurrentColor" icon="close" />
+                </Button>
+              </header>
+
+              <main className={styles.content}>
+                <GetMainIconByCSIdentifier identifier={iconIdentifier} />
+                <div className={styles.textContent}>
+                  <Typography className={styles.heading} variant="Title/md">
+                    <h2>{content.header}</h2>
+                  </Typography>
+                  <Typography className={styles.text} variant="Body/Lead text">
+                    <p>{content.sub_header}</p>
+                  </Typography>
+                </div>
+                <BenefitCards cards={content.cards} />
+
+                <section className={styles.container}>
+                  <header className={styles.header}>
+                    <Typography variant="Title/Subtitle/lg">
+                      <h3>
+                        {intl.formatMessage({
+                          id: "profilingConsent.personalization&privacy",
+                          defaultMessage: "Personalization & privacy",
+                        })}
+                      </h3>
+                    </Typography>
+                    <Typography variant="Body/Paragraph/mdRegular">
+                      <p>
+                        {intl.formatMessage({
+                          id: "profilingConsent.byAcceptingThisIConsent",
+                          defaultMessage:
+                            "By accepting this I consent to Scandic using my information to give me even more personalized travel inspiration and offers from Scandic and trusted Scandic Friends partners. This means Scandic may use information about my interactions with Scandic Friends partners, and share details of my interactions with Scandic with those partners, to make the experience even more relevant to me.",
+                        })}
+                      </p>
+                    </Typography>
+                  </header>
+                  <ProfilingConsentAccordion component="modal" />
+                </section>
+              </main>
+
+              {!readOnly && (
+                <footer className={styles.actions}>
+                  <Button
+                    variant="Primary"
+                    color="Primary"
+                    size="Large"
+                    typography="Body/Supporting text (caption)/smRegular"
+                    type="button"
+                    isDisabled={isLoading}
+                    isPending={isLoading && activeChoice === true}
+                    onClick={() => {
+                      trackConsentAction({
+                        position: "modal",
+                        name: "accept personalization",
+                      })
+                      handleClick(true)
+                    }}
+                  >
+                    {intl.formatMessage({
+                      id: "profilingConsent.acceptPersonalization",
+                      defaultMessage: "Accept Personalization",
+                    })}
+                  </Button>
+                  <Button
+                    variant="Secondary"
+                    size="Large"
+                    color="Primary"
+                    typography="Body/Supporting text (caption)/smRegular"
+                    type="button"
+                    isDisabled={isLoading}
+                    isPending={isLoading && activeChoice === false}
+                    onClick={() => {
+                      trackConsentAction({ position: "modal", name: "decline" })
+                      handleClick(false)
+                    }}
+                  >
+                    {intl.formatMessage({
+                      id: "common.decline",
+                      defaultMessage: "Decline",
+                    })}
+                  </Button>
+                </footer>
+              )}
+            </Dialog>
+          </MotionModal>
+        )}
+      </AnimatePresence>
+    </ModalOverlay>
+  )
+}