Merged in feat/LOY-233-success-banner-for-dtmc-linking (pull request #2328)

feat(LOY-233): create success banner for successful DTMC linking

* feat(LOY-233): create success banner for successful DTMC linking

* fix(LOY-233): code cleanup

* fix(LOY-233): use new design vars for alert bg colors


Approved-by: Erik Tiekstra

apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx

@@ -1,6 +1,8 @@
+import { env } from "@/env/server"
 import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
+import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCard/Alert"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
@@ -27,6 +29,7 @@ export default async function Overview({
 
   return (
     <SectionContainer>
+      {env.ENABLE_DTMC ? <DigitalTeamMemberCardAlert /> : null}
       <SectionHeader
         link={link}
         preamble={subtitle}

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Alert/index.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useRouter, useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import Alert from "@/components/TempDesignSystem/Alert"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export default function DigitalTeamMemberCardAlert() {
+  const intl = useIntl()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  function removeSearchParam() {
+    const params = new URLSearchParams(searchParams)
+    params.delete("card_added")
+    router.replace(`${window.location.pathname}?${params.toString()}`)
+  }
+
+  if (searchParams.get("card_added") !== "true") {
+    return null
+  }
+
+  return (
+    <Alert
+      variant="inline"
+      type={AlertTypeEnum.Success}
+      heading={intl.formatMessage({
+        defaultMessage: "Team Member Card added",
+      })}
+      text={intl.formatMessage({
+        defaultMessage:
+          "Access your Team Member Card here on My Pages Overview.",
+      })}
+      close={removeSearchParam}
+    />
+  )
+}

apps/scandic-web/components/TempDesignSystem/Alert/alert.module.css

@@ -51,13 +51,16 @@
   padding: var(--Spacing-x-one-and-half);
 }
 .inline.alarm .iconWrapper {
-  background-color: var(--UI-Semantic-Error);
+  background-color: var(--Surface-Feedback-Error-Accent);
 }
 .inline.warning .iconWrapper {
-  background-color: var(--UI-Semantic-Warning);
+  background-color: var(--Surface-Feedback-Warning-Accent);
 }
 .inline.info .iconWrapper {
-  background-color: var(--UI-Semantic-Information);
+  background-color: var(--Surface-Feedback-Information-Accent);
+}
+.inline.success .iconWrapper {
+  background-color: var(--Surface-Feedback-Succes-Accent);
 }
 .inline .icon,
 .inline .icon * {
@@ -70,28 +73,37 @@
   border-left-style: solid;
 }
 .banner.alarm {
-  border-left-color: var(--UI-Semantic-Error);
+  border-left-color: var(--Surface-Feedback-Error-Accent);
   background-color: var(--Scandic-Red-00);
 }
 .banner.warning {
-  border-left-color: var(--UI-Semantic-Warning);
+  border-left-color: var(--Surface-Feedback-Warning-Accent);
   background-color: var(--Scandic-Yellow-00);
 }
 .banner.info {
-  border-left-color: var(--UI-Semantic-Information);
+  border-left-color: var(--Surface-Feedback-Information-Accent);
   background-color: var(--Scandic-Blue-00);
 }
+.banner.success {
+  border-left-color: var(--Surface-Feedback-Succes-Accent);
+  background-color: var(--Scandic-Green-00);
+}
 .banner.alarm .icon,
 .banner.alarm .icon * {
-  fill: var(--UI-Semantic-Error);
+  fill: var(--Surface-Feedback-Error-Accent);
 }
 .banner.warning .icon,
 .banner.warning .icon * {
-  fill: var(--UI-Semantic-Warning);
+  fill: var(--Surface-Feedback-Warning-Accent);
 }
 .banner.info .icon,
 .banner.info .icon * {
-  fill: var(--UI-Semantic-Information);
+  fill: var(--Surface-Feedback-Information-Accent);
+}
+
+.banner.success .icon,
+.banner.sucess .icon * {
+  fill: var(--Surface-Feedback-Succes-Accent);
 }
 
 @media screen and (min-width: 768px) {

apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx

@@ -39,6 +39,17 @@ export function IconByAlertType({
           {...props}
         />
       )
+    case AlertTypeEnum.Success:
+      return (
+        <MaterialIcon
+          icon="check_circle"
+          color={
+            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Success"
+          }
+          isFilled
+          {...props}
+        />
+      )
     case AlertTypeEnum.Info:
     default:
       return (

apps/scandic-web/components/TempDesignSystem/Alert/variants.ts

@@ -14,6 +14,7 @@ export const alertVariants = cva(styles.alert, {
       [AlertTypeEnum.Info]: styles.info,
       [AlertTypeEnum.Warning]: styles.warning,
       [AlertTypeEnum.Alarm]: styles.alarm,
+      [AlertTypeEnum.Success]: styles.success,
     },
   },
   defaultVariants: {

apps/scandic-web/types/enums/alert.ts

@@ -2,6 +2,7 @@ export enum AlertTypeEnum {
   Info = "info",
   Warning = "warning",
   Alarm = "alarm",
+  Success = "success",
 }
 
 export const AlertName = {