feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam

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

@@ -1,10 +1,9 @@
 "use client"
-import { Link } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { profile } 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"
@@ -40,14 +39,12 @@ export function DateOfBirthError() {
           })}
         </p>
       </Typography>
-      <Button theme="base" asChild>
-        <Link href={profile[lang]}>
-          {intl.formatMessage({
-            id: "linkEuroBonusAccount.viewYourDetailsButton",
-            defaultMessage: "View your details",
-          })}
-        </Link>
-      </Button>
+      <ButtonLink href={profile[lang]} variant="Primary">
+        {intl.formatMessage({
+          id: "linkEuroBonusAccount.viewYourDetailsButton",
+          defaultMessage: "View your details",
+        })}
+      </ButtonLink>
       <SASModalDivider />
       <SASModalContactBlock />
     </SASModal>

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

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { GenericError } from "./GenericError"
@@ -26,7 +26,7 @@ export function TooManyCodesError() {
           })}
         </p>
       </Typography>
-      <Button theme="base" disabled>
+      <Button variant="Primary" isDisabled>
         {intl.formatMessage({
           id: "linkEuroBonusAccount.sendNewCodeButton",
           defaultMessage: "Send new code",

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

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { GenericError } from "./GenericError"
@@ -26,7 +26,7 @@ export function TooManyFailedAttemptsError() {
           })}
         </p>
       </Typography>
-      <Button theme="base" disabled>
+      <Button variant="Primary" isDisabled>
         {intl.formatMessage({
           id: "linkEuroBonusAccount.sendNewCodeButton",
           defaultMessage: "Send new code",

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

@@ -6,10 +6,10 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
+import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -159,11 +159,12 @@ export function LinkAccountForm({
         </div>
         <div className={styles.ctaContainer}>
           <Button
-            theme="base"
+            variant="Primary"
             fullWidth
             className={styles.ctaButton}
             type="submit"
-            disabled={isPending || disableSubmit}
+            isDisabled={disableSubmit}
+            isPending={isPending}
           >
             {intl.formatMessage({
               id: "linkEuroBonusAccount.linkMyAccountsButton",

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx

@@ -1,11 +1,9 @@
-import Link from "next/link"
-import React, { Suspense } from "react"
+import { Suspense } from "react"
 
 import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import Image from "@scandic-hotels/design-system/Image"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -53,19 +51,18 @@ export default async function SASxScandicTransferSuccessPage(
         </Typography>
         <TransactionCard addedPoints={addedPoints} lang={lang} />
         <div className={styles.divider} />
-        <Button
-          theme="primaryLight"
-          asChild
+        <ButtonLink
+          href={partnerSas[lang]}
+          variant="Primary"
+          color="Inverted"
           fullWidth
           className={styles.backButton}
         >
-          <Link href={partnerSas[lang]} color="none">
-            {intl.formatMessage({
-              id: "transferEuroBonusPoints.backToMyPagesButton",
-              defaultMessage: "Go back to My Pages",
-            })}
-          </Link>
-        </Button>
+          {intl.formatMessage({
+            id: "transferEuroBonusPoints.backToMyPagesButton",
+            defaultMessage: "Go back to My Pages",
+          })}
+        </ButtonLink>
       </div>
     </SASModal>
   )
@@ -146,31 +143,21 @@ async function TransactionCard({
               </p>
             </Typography>
           </div>
-          <Button
-            theme="primaryLight"
-            intent="secondary"
-            size="small"
+          {/* TODO correct link */}
+          <ButtonLink
+            href={hotelreservation(lang)}
+            color="Inverted"
+            variant="Secondary"
+            size="sm"
             fullWidth
             className={styles.bookButton}
-            asChild
+            trailingIconName="calendar_add_on"
           >
-            {/* TODO correct link */}
-            <Link href={hotelreservation(lang)} color="none">
-              {intl.formatMessage({
-                id: "transferEuroBonusPoints.bookNowButton",
-                defaultMessage: "Book now",
-              })}
-              {
-                /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
-                " "
-              }
-              <MaterialIcon
-                icon="calendar_add_on"
-                size={20}
-                color="CurrentColor"
-              />
-            </Link>
-          </Button>
+            {intl.formatMessage({
+              id: "transferEuroBonusPoints.bookNowButton",
+              defaultMessage: "Book now",
+            })}
+          </ButtonLink>
         </div>
       )}
     </div>