feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal/index.tsx

@@ -3,6 +3,7 @@ import Link from "next/link"
 import { Dialog } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -69,18 +70,18 @@ export default function CustomerSupportModal() {
               </div>
             </Modal.Content.Body>
             <Modal.Content.Footer>
-              <Modal.Content.Footer.Secondary onClick={close}>
+              <Button variant="Text" onPress={close}>
                 {intl.formatMessage({
                   id: "common.back",
                   defaultMessage: "Back",
                 })}
-              </Modal.Content.Footer.Secondary>
-              <Modal.Content.Footer.Primary intent="secondary" onClick={close}>
+              </Button>
+              <Button variant="Secondary" onPress={close}>
                 {intl.formatMessage({
                   id: "common.close",
                   defaultMessage: "Close",
                 })}
-              </Modal.Content.Footer.Primary>
+              </Button>
             </Modal.Content.Footer>
           </Modal.Content>
         )}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Alerts.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
 import { Alert } from "@scandic-hotels/design-system/Alert"
+import { Button } from "@scandic-hotels/design-system/Button"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
@@ -64,12 +65,12 @@ export default function Alerts({ children, closeModal }: AlertsProps) {
           <Alert type={AlertTypeEnum.Info} heading={heading} text={text} />
         </Modal.Content.Body>
         <Modal.Content.Footer>
-          <Modal.Content.Footer.Secondary onClick={closeModal}>
+          <Button variant="Text" onPress={closeModal}>
             {intl.formatMessage({
               id: "common.back",
               defaultMessage: "Back",
             })}
-          </Modal.Content.Footer.Secondary>
+          </Button>
         </Modal.Content.Footer>
       </Modal.Content>
     )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Steps/Confirmation/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -116,25 +117,25 @@ export default function CancelStayConfirmation({
         </form>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {secondaryLabel}
-        </Modal.Content.Footer.Secondary>
+        </Button>
         {isCancelable ? (
-          <Modal.Content.Footer.Primary
-            disabled={!isValid}
+          <Button
+            isDisabled={!isValid}
             form="cancel-stay"
-            intent="secondary"
+            variant="Secondary"
             type="submit"
           >
             {primaryLabel}
-          </Modal.Content.Footer.Primary>
+          </Button>
         ) : (
-          <Modal.Content.Footer.Primary intent="secondary" onClick={closeModal}>
+          <Button variant="Secondary" onPress={closeModal}>
             {intl.formatMessage({
               id: "common.close",
               defaultMessage: "Close",
             })}
-          </Modal.Content.Footer.Primary>
+          </Button>
         )}
       </Modal.Content.Footer>
     </Modal.Content>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx

@@ -3,6 +3,7 @@ import { differenceInCalendarDays } from "date-fns"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -188,15 +189,16 @@ export default function FinalConfirmation({
         <CancelStayPriceContainer />
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {dontCancel}
-        </Modal.Content.Footer.Secondary>
-        <Modal.Content.Footer.Primary
-          disabled={cancelBookingsMutation.isPending}
-          onClick={cancelBooking}
+        </Button>
+        <Button
+          variant="Primary"
+          isPending={cancelBookingsMutation.isPending}
+          onPress={cancelBooking}
         >
           {confirm}
-        </Modal.Content.Footer.Primary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/CannotChange/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -45,9 +46,9 @@ export default function CannotChangeDate({
         </Typography>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/CustomerSupport/index.tsx

@@ -2,6 +2,7 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -69,9 +70,9 @@ export default function CustomerSupport({
         </div>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/NotMainRoom.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { Alert } from "@scandic-hotels/design-system/Alert"
+import { Button } from "@scandic-hotels/design-system/Button"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
 
@@ -36,9 +37,9 @@ export default function NotMainRoom({
         />
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -180,18 +181,19 @@ export default function Confirmation({
         </div>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
-        <Modal.Content.Footer.Primary
-          disabled={updateBooking.isPending}
-          onClick={handleModifyStay}
+        </Button>
+        <Button
+          variant="Primary"
+          isPending={updateBooking.isPending}
+          onPress={handleModifyStay}
         >
           {intl.formatMessage({
             defaultMessage: "Confirm",
             id: "common.confirm",
           })}
-        </Modal.Content.Footer.Primary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/index.tsx

@@ -4,6 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { toast } from "@scandic-hotels/design-system/Toast"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -68,22 +69,22 @@ export default function Form({
             <NewDates checkInDate={checkInDate} checkOutDate={checkOutDate} />
           </Modal.Content.Body>
           <Modal.Content.Footer>
-            <Modal.Content.Footer.Secondary onClick={closeModal}>
+            <Button variant="Text" onPress={closeModal}>
               {intl.formatMessage({
                 defaultMessage: "Back",
                 id: "common.back",
               })}
-            </Modal.Content.Footer.Secondary>
-            <Modal.Content.Footer.Primary
-              disabled={methods.formState.isSubmitting}
-              intent="secondary"
+            </Button>
+            <Button
+              variant="Secondary"
               type="submit"
+              isPending={methods.formState.isSubmitting}
             >
               {intl.formatMessage({
                 id: "myStay.actions.changeDates.checkAvailability",
                 defaultMessage: "Check availability",
               })}
-            </Modal.Content.Footer.Primary>
+            </Button>
           </Modal.Content.Footer>
         </Modal.Content>
       </form>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/GuaranteeDialog/index.tsx

@@ -1,6 +1,8 @@
 import { Dialog } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
+
 import Modal from "@/components/HotelReservation/MyStay/Modal"
 
 import Form from "../Form"
@@ -28,18 +30,18 @@ export default function GuaranteeDialog({ error }: GuaranteeDialogProps) {
             <Form error={error} />
           </Modal.Content.Body>
           <Modal.Content.Footer>
-            <Modal.Content.Footer.Secondary onClick={close}>
+            <Button variant="Text" onPress={close}>
               {intl.formatMessage({
                 id: "common.back",
                 defaultMessage: "Back",
               })}
-            </Modal.Content.Footer.Secondary>
-            <Modal.Content.Footer.Primary form="guarantee" type="submit">
+            </Button>
+            <Button variant="Primary" form="guarantee" type="submit">
               {intl.formatMessage({
                 id: "common.confirm",
                 defaultMessage: "Confirm",
               })}
-            </Modal.Content.Footer.Primary>
+            </Button>
           </Modal.Content.Footer>
         </Modal.Content>
       )}