diff --git a/apps/scandic-web/components/Forms/Signup/form.module.css b/apps/scandic-web/components/Forms/Signup/form.module.css
index 3322021bd..0fe65ef40 100644
--- a/apps/scandic-web/components/Forms/Signup/form.module.css
+++ b/apps/scandic-web/components/Forms/Signup/form.module.css
@@ -27,12 +27,6 @@
gap: var(--Space-x1);
}
-.personalizationMoreInfo {
- display: grid;
- grid-template-columns: auto 1fr;
- align-items: start;
- gap: var(--Space-x2);
-}
.personalizationButton {
width: fit-content;
}
diff --git a/apps/scandic-web/components/Forms/Signup/index.tsx b/apps/scandic-web/components/Forms/Signup/index.tsx
index 352f03a60..a26ef0969 100644
--- a/apps/scandic-web/components/Forms/Signup/index.tsx
+++ b/apps/scandic-web/components/Forms/Signup/index.tsx
@@ -18,8 +18,8 @@ import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import DateSelect from "@scandic-hotels/design-system/Form/Date"
import Phone from "@scandic-hotels/design-system/Form/Phone"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
+import { TextLinkButton } from "@scandic-hotels/design-system/TextLinkButton"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useFormTracking } from "@scandic-hotels/tracking/useFormTracking"
@@ -39,7 +39,6 @@ import { getErrorMessage } from "@/utils/getErrorMessage"
import { requestOpen } from "@/utils/profilingConsent"
import { trackLinkClick } from "@/utils/tracking/profilingConsent"
-// import { type SignUpSchema, signUpSchema } from "./schema"
import styles from "./form.module.css"
import type { SignUpFormProps } from "@/types/components/form/signupForm"
@@ -300,31 +299,7 @@ export default function SignupForm({ title }: SignUpFormProps) {
"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.",
})}
-
-
-
- {intl.formatMessage({
- id: "signup.GetATailoredProfile",
- defaultMessage:
- "Get a tailored profile that adapts to your interests.",
- })}
-
-
-
-
-
- {intl.formatMessage({
- id: "signup.PersonalizedOffersEarlyAccess",
- defaultMessage:
- "Personalized offers, early access to campaigns, and deals you won't find anywhere else!",
- })}
-
-
-
+
@@ -375,24 +350,24 @@ export default function SignupForm({ title }: SignUpFormProps) {
},
{
termsAndConditionsLink: (str) => (
-
{str}
-
+
),
privacyPolicy: (str) => (
-
{str}
-
+
),
}
)}
diff --git a/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/index.tsx b/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/index.tsx
index 2dc171a8a..84c016d04 100644
--- a/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/index.tsx
+++ b/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/index.tsx
@@ -2,23 +2,18 @@
import { useIntl } from "react-intl"
-import { privacy } from "@scandic-hotels/common/constants/routes/customerService"
import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
-import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { TextLink } from "@scandic-hotels/design-system/TextLink"
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 {
+export interface ProfilingConsentAccordionProps {
component: "modal" | "profile"
}
export default function ProfilingConsentAccordion({
@@ -27,216 +22,8 @@ export default function ProfilingConsentAccordion({
const intl = useIntl()
const lang = useLang()
- const dataWeProcess = [
- {
- icon: IconName.Person,
- title: intl.formatMessage({
- id: "profilingConsent.NameAndContactInformation",
- defaultMessage: "Name and contact information",
- }),
- subtitle: intl.formatMessage({
- id: "profilingConsent.NameEmailPhoneAddress",
- defaultMessage:
- "Your name, email address, phone number and postal address",
- }),
- },
- {
- icon: IconName.Luggage,
- title: intl.formatMessage({
- id: "profilingConsent.YourBookingsWithScandic",
- defaultMessage: "Your bookings with Scandic",
- }),
- subtitle: intl.formatMessage({
- id: "profilingConsent.BookingsDatesDestinationsPreferences",
- defaultMessage: "Hotel bookings, dates, destinations and preferences",
- }),
- },
- {
- icon: IconName.Diamond,
- title: intl.formatMessage({
- id: "profilingConsent.YourMembershipInformation",
- defaultMessage: "Your membership information",
- }),
- subtitle: intl.formatMessage({
- id: "profilingConsent.ScandicFriendsPointsBenefits",
- defaultMessage: "Scandic Friends status, points and member benefits",
- }),
- },
- {
- icon: IconName.Business,
- title: intl.formatMessage({
- id: "profilingConsent.CompanyInformation",
- defaultMessage: "Company information",
- }),
- subtitle: intl.formatMessage({
- id: "profilingConsent.InformationAboutYourCompany",
- defaultMessage:
- "Information about the company you work for (if available)",
- }),
- },
- {
- icon: IconName.Globe,
- title: intl.formatMessage({
- id: "profilingConsent.UserGeneratedData",
- defaultMessage: "User-generated data",
- }),
- subtitle: intl.formatMessage({
- id: "profilingConsent.ClicksBrowsingPurchasingInteractions",
- defaultMessage:
- "Clicks, browsing, purchase history and website interactions",
- }),
- },
- ]
-
- const rights = [
- intl.formatMessage({
- id: "profilingConsent.GetInformation",
- defaultMessage: "Get information about how we process your data",
- }),
- intl.formatMessage({
- id: "profilingConsent.RequestDeletion",
- defaultMessage: "Request deletion of your personal data",
- }),
- intl.formatMessage({
- id: "profilingConsent.WithdrawConsent",
- defaultMessage: "Withdraw your consent at any time",
- }),
- ]
-
- const security = [
- intl.formatMessage({
- id: "profilingConsent.EncryptedSecureDataStorage",
- defaultMessage: "Encrypted & secure data storage",
- }),
- intl.formatMessage({
- id: "profilingConsent.WeWillNeverSellYourData",
- defaultMessage: "We will never sell your data",
- }),
- intl.formatMessage({
- id: "profilingConsent.RegularSecurityAudits",
- defaultMessage: "Regular security audits",
- }),
- intl.formatMessage({
- id: "profilingConsent.GDPRCompliantProcessing",
- defaultMessage: "GDPR-compliant processing",
- }),
- ]
-
return (
-
-
- {dataWeProcess.map((item, i) => (
-
-
-
-
-
-
- {item.title}
-
-
- {item.subtitle}
-
-
-
- ))}
-
-
-
-
-
-
-
-
- {intl.formatMessage({
- id: "profilingConsent.youHaveTheRightTo",
- defaultMessage: "You have the right to",
- })}
-
-
-
- {rights.map((text, i) => (
-
-
-
- {text}
-
-
- ))}
-
-
-
-
-
- {intl.formatMessage({
- id: "profilingConsent.dataSecurity",
- defaultMessage: "Data security",
- })}
-
-
-
- {security.map((text, i) => (
-
-
-
- {text}
-
-
- ))}
-
-
-
-
-
- trackLinkClick({
- position: component,
- name: "learn more about how we process your data",
- })
- }
- >
- {intl.formatMessage({
- id: "profilingConsent.learnMoreAboutProcessing",
- defaultMessage: "Learn more about how we process your data",
- })}
-
-
-
- {getLegalText(intl, lang)}
+ {getLegalText(intl, lang, component)}
diff --git a/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/personalizationLegalText.tsx b/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/personalizationLegalText.tsx
index 363b59300..2c7f10d83 100644
--- a/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/personalizationLegalText.tsx
+++ b/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/personalizationLegalText.tsx
@@ -3,10 +3,18 @@ import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { partners } from "@/constants/webHrefs"
+import { trackLinkClick } from "@/utils/tracking/profilingConsent"
+
import type { Lang } from "@scandic-hotels/common/constants/language"
import type { IntlShape } from "react-intl"
-export function getLegalText(intl: IntlShape, lang: Lang) {
+import type { ProfilingConsentAccordionProps } from "."
+
+export function getLegalText(
+ intl: IntlShape,
+ lang: Lang,
+ component: ProfilingConsentAccordionProps["component"]
+) {
const partnerLink = partners[lang]
const privacyPolicyLink = privacy[lang]
@@ -28,6 +36,12 @@ export function getLegalText(intl: IntlShape, lang: Lang) {
{
partnerLink: (linkText) => (
+ trackLinkClick({
+ position: component,
+ name: linkText[0],
+ })
+ }
href={partnerLink}
color="Text/Interactive/Secondary"
typography="Link/md"
@@ -39,6 +53,12 @@ export function getLegalText(intl: IntlShape, lang: Lang) {
),
privacyPolicyLink: (linkText) => (
+ trackLinkClick({
+ position: component,
+ name: linkText[0],
+ })
+ }
href={privacyPolicyLink}
color="Text/Interactive/Secondary"
typography="Link/md"
diff --git a/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/profilingConsentAccordion.module.css b/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/profilingConsentAccordion.module.css
index 3a9683448..89a4bd47d 100644
--- a/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/profilingConsentAccordion.module.css
+++ b/apps/scandic-web/components/MyPages/ProfilingConsent/Accordion/profilingConsentAccordion.module.css
@@ -1,79 +1,7 @@
-.divider {
- margin: var(--Space-x1) 0;
-}
-
.accordion {
width: 100%;
}
-.list {
- display: grid;
- gap: var(--Space-x15);
-}
-
-.row {
- display: grid;
- grid-template-columns: 40px 1fr;
- gap: var(--Space-x2);
- align-items: start;
- border: 0.696px solid var(--Border-Divider-Subtle);
- border-radius: var(--Corner-radius-md);
- background: var(--Surface-Primary-OnSurface-Default);
- padding: var(--Space-x1);
-}
-
.accordionItem:first-child {
border-top: 1px solid var(--Border-Default);
}
-
-.rowIcon {
- display: flex;
- align-items: center;
- justify-content: center;
- place-self: center;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: var(--Surface-Primary-Default);
-}
-
-.rowText {
- display: grid;
- gap: 2px;
-}
-
-.columns {
- display: grid;
- gap: var(--Space-x3);
- margin-bottom: var(--Space-x3);
-}
-
-.column {
- display: grid;
- gap: var(--Space-x1);
- height: fit-content;
-}
-
-.bullets {
- display: grid;
- gap: var(--Space-x1);
-}
-
-.bulletRow {
- display: grid;
- grid-template-columns: 20px 1fr;
- gap: var(--Space-x1);
- align-items: start;
-}
-
-.learnMoreLink {
- display: flex;
- gap: var(--Space-x05);
- justify-content: left;
-}
-
-@media (min-width: 768px) {
- .columns {
- grid-template-columns: 1fr 1fr;
- }
-}
diff --git a/apps/scandic-web/components/MyPages/ProfilingConsent/Modal/profilingConsentModal.module.css b/apps/scandic-web/components/MyPages/ProfilingConsent/Modal/profilingConsentModal.module.css
index f9dd652f3..63bed3d93 100644
--- a/apps/scandic-web/components/MyPages/ProfilingConsent/Modal/profilingConsentModal.module.css
+++ b/apps/scandic-web/components/MyPages/ProfilingConsent/Modal/profilingConsentModal.module.css
@@ -32,7 +32,7 @@
box-shadow: var(--modal-box-shadow);
width: 100%;
max-width: 100%;
- border-radius: var(--Corner-radius-xLarge) var(--Corner-radius-xLarge) 0 0;
+ border-radius: var(--Corner-radius-xl) var(--Corner-radius-xl) 0 0;
}
.dialog {
@@ -90,8 +90,8 @@
padding: var(--Space-x2) var(--Space-x3) var(--Space-x3) var(--Space-x3);
border-top: 1px solid var(--Border-Divider-Subtle);
background: var(--Base-Surface-Primary-light-Normal);
- border-bottom-right-radius: var(--Corner-radius-xLarge);
- border-bottom-left-radius: var(--Corner-radius-xLarge);
+ border-bottom-right-radius: var(--Corner-radius-xl);
+ border-bottom-left-radius: var(--Corner-radius-xl);
}
.container {
@@ -119,7 +119,7 @@
.modal {
width: 95%;
max-width: 95%;
- border-radius: var(--Corner-radius-xLarge);
+ border-radius: var(--Corner-radius-xl);
}
.actions {
diff --git a/apps/scandic-web/utils/tracking/profilingConsent.ts b/apps/scandic-web/utils/tracking/profilingConsent.ts
index ccb94f2df..b8b104192 100644
--- a/apps/scandic-web/utils/tracking/profilingConsent.ts
+++ b/apps/scandic-web/utils/tracking/profilingConsent.ts
@@ -4,11 +4,7 @@ import type { TrackingSDKPageData } from "@scandic-hotels/tracking/types"
interface trackLinkClickProps {
position: "modal" | "banner" | "signup" | "profile"
- name:
- | "learn more about how we process your data"
- | "edit preference in my profile"
- | "manage profiling consent"
- | "read more about personalization at scandic"
+ name: string
}
export function trackLinkClick({ position, name }: trackLinkClickProps) {
trackEvent({
diff --git a/packages/design-system/lib/components/TextLinkButton/TextLinkButton.tsx b/packages/design-system/lib/components/TextLinkButton/TextLinkButton.tsx
index a285eaef0..ea1567518 100644
--- a/packages/design-system/lib/components/TextLinkButton/TextLinkButton.tsx
+++ b/packages/design-system/lib/components/TextLinkButton/TextLinkButton.tsx
@@ -32,6 +32,7 @@ export function TextLinkButton({
return (