Merged in feat/LOY-484-consent-alert (pull request #3184)

feat(LOY-484): Change toast to alert for Profiling Consent

* feat(LOY-484): change toast to alert using context

* refactor(LOY-484): remove uneccesary code

* chore(LOY-484): small UI fixes


Approved-by: Chuma Mcphoy (We Ahead)

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;
+    }
   }
 }

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<AlertType | null>(null)
+  return (
+    <ProfilingConsentAlertContext.Provider value={{ alertType, setAlertType }}>
+      {children}
+    </ProfilingConsentAlertContext.Provider>
+  )
+}
+
+export const useProfilingConsentAlert = () =>
+  useContext(ProfilingConsentAlertContext)

apps/scandic-web/components/MyPages/ProfilingConsent/Alert/alert.module.css

@@ -0,0 +1,4 @@
+.alert {
+  height: fit-content;
+  margin-bottom: var(--Space-x1);
+}

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 (
+    <Alert
+      variant="inline"
+      type={alert.type}
+      heading={alert.heading}
+      link={alert.link}
+      text={alert.message}
+      close={() => 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
+  }
+}