Merged in feat/SW-3250-account-linking-modal-you- (pull request #2819)

feat(SW-3250): Updated UI for already linked account error

* feat(SW-3250): Updated UI for already linked account error


Approved-by: Anton Gunnarsson

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx

@@ -1,10 +1,9 @@
 "use client"
-import Link from "next/link"
 import { useIntl } from "react-intl"
 
 import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
@@ -17,11 +16,17 @@ export function AlreadyLinkedError() {
 
   return (
     <SASModal>
-      <MaterialIcon icon="cancel" isFilled size={64} />
+      <MaterialIcon
+        icon="check_circle"
+        color={"Icon/Feedback/Success"}
+        isFilled
+        size={64}
+      />
       <Typography variant="Title/Subtitle/lg">
         <h1>
           {intl.formatMessage({
-            defaultMessage: "Your accounts are already linked",
+            defaultMessage:
+              "Your Scandic Friends and SAS EuroBonus accounts are already connected",
           })}
         </h1>
       </Typography>
@@ -29,17 +34,22 @@ export function AlreadyLinkedError() {
         <p>
           {intl.formatMessage({
             defaultMessage:
-              "Looks like you’ve already linked your Scandic Friends and SAS EuroBonus accounts!",
+              "Great news! You can go straight to My Pages to explore all your perks and rewards!",
           })}
         </p>
       </Typography>
-      <Button theme="base" asChild>
-        <Link href={partnerSas[lang]}>
+      <Typography variant="Body/Paragraph/mdBold">
+        <ButtonLink
+          href={partnerSas[lang]}
+          variant={"Tertiary"}
+          color={"Primary"}
+          size={"Large"}
+        >
           {intl.formatMessage({
             defaultMessage: "View your linked accounts",
           })}
-        </Link>
-      </Button>
+        </ButtonLink>
+      </Typography>
       <SASModalDivider />
       <SASModalContactBlock />
     </SASModal>