Merged in feat/LOY-487-profile-consent-accordion (pull request #3192)

feat(LOY-487): add legal text to profiling consent accordion

* feat(LOY-487): add legal text to accordion


Approved-by: Erik Tiekstra

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

@@ -14,6 +14,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import useLang from "@/hooks/useLang"
 import { trackLinkClick } from "@/utils/tracking/profilingConsent"
 
+import { getLegalText } from "./personalizationLegalText"
+
 import styles from "./profilingConsentAccordion.module.css"
 
 interface ProfilingConsentAccordionProps {
@@ -234,6 +236,18 @@ export default function ProfilingConsentAccordion({
           />
         </TextLink>
       </AccordionItem>
+      <AccordionItem
+        title={intl.formatMessage({
+          id: "profilingConsent.readMoreAboutPersonalization",
+          defaultMessage: "Read more about personalization",
+        })}
+        iconName={IconName.InfoCircle}
+        className={styles.accordionItem}
+      >
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{getLegalText(intl, lang)}</p>
+        </Typography>
+      </AccordionItem>
     </Accordion>
   )
 }

apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/personalizationLegalText.tsx

@@ -0,0 +1,54 @@
+import { privacy } from "@scandic-hotels/common/constants/routes/customerService"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
+
+import { partners } from "@/constants/webHrefs"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { IntlShape } from "react-intl"
+
+export function getLegalText(intl: IntlShape, lang: Lang) {
+  const partnerLink = partners[lang]
+  const privacyPolicyLink = privacy[lang]
+
+  const message = intl.formatMessage(
+    {
+      id: "profilingConsent.aMembershipInScandicFriendsMeans",
+      defaultMessage: `A membership in Scandic Friends means that you will receive offers from Scandic about products and services from <partnerLink>Scandic and Scandic Friends partners</partnerLink>. 
+        Such offers could be based on your previous interactions with Scandic including purchase history, information you have entered in your member profile, answered customer surveys, interactions with customer service, 
+        and online behaviour when using Scandic’s website or app.
+        <br></br><br></br>
+        If you give your consent to improved personalization, Scandic can create an even more personalized membership for you and send you personalized offers based on your interactions with Scandic Friends partners. 
+        Scandic may also share the information used for your personalized membership with Scandic Friends partners for analytical and marketing purposes, for example to follow up on partnerships, 
+        develop new relevant products and to tailor offers depending on your interests. Scandic Friends partners may adapt their existing communications to you based on personal data we have shared with them. 
+        None of our Scandic Friends partners will however send marketing communications to you based on the consent you have given to Scandic.
+        <br></br><br></br>
+        If you wish to stop receiving marketing communications or withdraw your consent, you can do so at any time by using the links provided in the relevant digital communications or adjusting the settings in your membership account.
+        For more information on how we process your personal data as a Scandic Friends member and your rights, please refer to <privacyPolicyLink>Scandic’s Privacy Policy.</privacyPolicyLink>`,
+    },
+    {
+      partnerLink: (linkText) => (
+        <TextLink
+          href={partnerLink}
+          color="Text/Interactive/Secondary"
+          typography="Link/md"
+          isInline
+        >
+          {linkText}
+        </TextLink>
+      ),
+      privacyPolicyLink: (linkText) => (
+        <TextLink
+          href={privacyPolicyLink}
+          color="Text/Interactive/Secondary"
+          typography="Link/md"
+          isInline
+        >
+          {linkText}
+        </TextLink>
+      ),
+      br: () => <br />,
+    }
+  )
+
+  return message
+}