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

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

@@ -42,8 +42,8 @@ export default async function SASLinkedAccount({
         </section>
       </SectionContainer>
       <div className={styles.mutationSection}>
-        <LevelUpgradeButton />
         <UnlinkSAS />
+        <LevelUpgradeButton />
       </div>
     </>
   )

components/Blocks/DynamicContent/SAS/LinkedAccounts/levelupgradebutton.module.css

@@ -3,6 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
 
   & .textContainer {
     display: flex;
@@ -10,6 +11,10 @@
     align-items: center;
     gap: var(--Spacing-x1);
   }
+
+  @media screen and (min-width: 768px) {
+    width: fit-content;
+  }
 }
 
 .loading {

components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css

@@ -21,7 +21,7 @@
 
 .mutationSection {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   gap: var(--Spacing-x2);
   align-items: center;