diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx index b3e3ca541..e5ee6b8c6 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.tsx @@ -6,6 +6,8 @@ import { getProfilingConsent, } from "@/lib/trpc/memoizedRequests" +import ProfilingConsentAlert from "@/components/MyPages/ProfilingConsent/Alert" +import { ProfilingConsentAlertProvider } from "@/components/MyPages/ProfilingConsent/Alert/AlertContext" import ProfilingConsentModal from "@/components/MyPages/ProfilingConsent/Modal" import { userHasConsent } from "@/components/MyPages/ProfilingConsent/utils" import { SASLevelUpgradeCheck } from "@/components/MyPages/SASLevelUpgradeCheck" @@ -36,24 +38,32 @@ export default async function MyPagesLayout({ const lang = await getLang() return ( -
-
- {breadcrumbs} -
{children}
-
+ +
+
+ {breadcrumbs} - {eurobonusMembership && } - - {memberKey && profilingConsent && !hasConsent ? ( - <> - - - - ) : null} -
+
+ + {children} +
+
+ + {eurobonusMembership && } + + {memberKey && profilingConsent && !hasConsent ? ( + <> + + + + ) : null} +
+ ) } diff --git a/apps/scandic-web/components/Forms/ProfilingConsent/form.module.css b/apps/scandic-web/components/Forms/ProfilingConsent/form.module.css index 06b4d3f58..dba307ad9 100644 --- a/apps/scandic-web/components/Forms/ProfilingConsent/form.module.css +++ b/apps/scandic-web/components/Forms/ProfilingConsent/form.module.css @@ -8,6 +8,8 @@ padding: var(--Space-x4) var(--Space-x2) 0; display: grid; gap: var(--Space-x6); + + border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0; } .buttons { @@ -20,6 +22,12 @@ 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-radius: 0 0 var(--Corner-radius-Medium) var(--Corner-radius-Medium); + + button { + width: 100%; + } } .title { @@ -48,11 +56,19 @@ .form { padding: var(--Space-x4) var(--Space-x3) 0; gap: var(--Space-x6); + + border-radius: 0; } .buttons { flex-direction: row-reverse; gap: var(--Space-x2); padding: var(--Space-x6) var(--Space-x3) var(--Space-x4); + + border-radius: 0; + + button { + width: auto; + } } } diff --git a/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/AlertContext.tsx b/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/AlertContext.tsx new file mode 100644 index 000000000..1d70bd8b5 --- /dev/null +++ b/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/AlertContext.tsx @@ -0,0 +1,30 @@ +"use client" +import { createContext, type ReactNode, useContext, useState } from "react" + +import type { AlertTypeEnum } from "@scandic-hotels/common/constants/alert" + +type AlertType = AlertTypeEnum.Success | AlertTypeEnum.Alarm + +const ProfilingConsentAlertContext = createContext<{ + alertType: AlertType | null + setAlertType: (data: AlertType | null) => void +}>({ + alertType: null, + setAlertType: () => {}, +}) + +export function ProfilingConsentAlertProvider({ + children, +}: { + children: ReactNode +}) { + const [alertType, setAlertType] = useState(null) + return ( + + {children} + + ) +} + +export const useProfilingConsentAlert = () => + useContext(ProfilingConsentAlertContext) diff --git a/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/alert.module.css b/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/alert.module.css new file mode 100644 index 000000000..afc63d3a9 --- /dev/null +++ b/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/alert.module.css @@ -0,0 +1,4 @@ +.alert { + height: fit-content; + margin-bottom: var(--Space-x1); +} diff --git a/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/index.tsx b/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/index.tsx new file mode 100644 index 000000000..393d9a534 --- /dev/null +++ b/apps/scandic-web/components/MyPages/ProfilingConsent/Alert/index.tsx @@ -0,0 +1,86 @@ +"use client" + +import { type IntlShape, useIntl } from "react-intl" + +import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert" +import { profileConsent } from "@scandic-hotels/common/constants/routes/myPages" +import { Alert } from "@scandic-hotels/design-system/Alert" + +import useLang from "@/hooks/useLang" + +import { useProfilingConsentAlert } from "./AlertContext" + +import styles from "./alert.module.css" + +import type { Lang } from "@scandic-hotels/common/constants/language" + +type AlertData = { + type: AlertTypeEnum.Success | AlertTypeEnum.Alarm + heading: string + message?: string + link?: { url: string; title: string } +} + +export default function ProfilingConsentAlert() { + const { alertType, setAlertType } = useProfilingConsentAlert() + const intl = useIntl() + const lang = useLang() + + if (!alertType) return null + + const alert = getAlert(alertType, intl, lang) + if (!alert) return null + + return ( + setAlertType(null)} + className={styles.alert} + /> + ) +} + +function getAlert( + alertType: AlertTypeEnum, + intl: IntlShape, + lang: Lang +): AlertData | null { + switch (alertType) { + case AlertTypeEnum.Success: + return { + type: AlertTypeEnum.Success, + heading: intl.formatMessage({ + id: "profilingConsent.alert.preferenceSaved", + defaultMessage: "Preference saved!", + }), + link: { + url: profileConsent[lang], + title: intl.formatMessage({ + id: "profilingConsent.alert.editIn", + defaultMessage: "Edit in Personalization & Profiling", + }), + }, + } + + case AlertTypeEnum.Alarm: + return { + type: AlertTypeEnum.Alarm, + heading: intl.formatMessage({ + id: "profilingConsent.alert.preferenceNotSaved", + defaultMessage: "Preference not saved!", + }), + message: intl.formatMessage({ + id: "profilingConsent.alert.anErrorOcurred", + defaultMessage: + "An error occurred when updating preferences, please try again later.", + }), + } + + default: + return null + } +} diff --git a/apps/scandic-web/hooks/useUpdateProfilingConsent.ts b/apps/scandic-web/hooks/useUpdateProfilingConsent.ts index 9b52e3e7e..0008038ef 100644 --- a/apps/scandic-web/hooks/useUpdateProfilingConsent.ts +++ b/apps/scandic-web/hooks/useUpdateProfilingConsent.ts @@ -1,38 +1,27 @@ "use client" import { useRouter } from "next/navigation" -import { useIntl } from "react-intl" -import { toast } from "@scandic-hotels/design-system/Toast" +import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert" import { trpc } from "@scandic-hotels/trpc/client" +import { useProfilingConsentAlert } from "@/components/MyPages/ProfilingConsent/Alert/AlertContext" + export function useUpdateProfilingConsent() { - const intl = useIntl() const utils = trpc.useUtils() const router = useRouter() + + const { setAlertType } = useProfilingConsentAlert() + const updateConsent = trpc.user.profilingConsent.update.useMutation({ onSuccess: async () => { await utils.user.get.invalidate() router.refresh() - setTimeout(() => { - toast.success( - intl.formatMessage({ - id: "profilingConsent.alert.updateConsentSuccessful", - defaultMessage: "Preference saved!", - }) - ) - }) + setAlertType(AlertTypeEnum.Success) }, + onError: () => { - setTimeout(() => { - toast.error( - intl.formatMessage({ - id: "profilingConsent.alert.updateConsentFailed", - defaultMessage: - "An error occurred when updating preferences, please try again later.", - }) - ) - }) + setAlertType(AlertTypeEnum.Alarm) }, })