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/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}
+    />
+  )
+}