Merged in feat/SW-1488-unlink-sas-account (pull request #1349)

Implement unlink SAS flow

Approved-by: Joakim Jäderberg

components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx

@@ -1,47 +1,34 @@
 "use client"
 
-import { useRouter } from "next/navigation"
+import { useParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
-import { trpc } from "@/lib/trpc/client"
+import Dialog from "@/components/Dialog"
+import Button from "@/components/TempDesignSystem/Button"
 
-import { Loading } from "@/components/Loading"
-import Link from "@/components/TempDesignSystem/Link"
-import { toast } from "@/components/TempDesignSystem/Toasts"
+import type { LangParams } from "@/types/params"
 
 export function UnlinkSAS() {
   const intl = useIntl()
-  const router = useRouter()
-
-  const { mutate, isPending } = trpc.partner.sas.unlinkAccount.useMutation({
-    onSuccess() {
-      toast.success(intl.formatMessage({ id: "Account unlinked, reloading" }))
-      // TODO: reload page
-      router.push("/en/scandic-friends/my-pages")
-    },
-    onError() {
-      toast.error(intl.formatMessage({ id: "Failed to unlink account" }))
-    },
-  })
-
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
-    mutate()
-  }
-
-  if (isPending) {
-    return <Loading color="burgundy" />
-  }
+  const params = useParams<LangParams>()
 
   return (
-    <Link
-      href="#"
-      onClick={handleClick}
-      color="burgundy"
-      variant="default"
-      weight="bold"
-    >
-      {intl.formatMessage({ id: "Unlink accounts" })}
-    </Link>
+    <Dialog
+      titleText={intl.formatMessage({
+        id: "Are you sure you want to unlink your account?",
+      })}
+      // TODO update copy
+      bodyText={intl.formatMessage({
+        id: "We could not connect your accounts to give you access. Please contact us and we’ll help you resolve this issue.",
+      })}
+      cancelButtonText={intl.formatMessage({ id: "Go back" })}
+      proceedText={intl.formatMessage({ id: "Yes, unlink my accounts" })}
+      proceedHref={`/${params.lang}/sas-x-scandic/login?intent=unlink`}
+      trigger={
+        <Button intent="text" theme="base">
+          {intl.formatMessage({ id: "Unlink accounts" })}
+        </Button>
+      }
+    />
   )
 }