From 1d733c5ca39914ba9625f9df2bb4bdbb95853fc4 Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Wed, 28 May 2025 08:11:29 +0000
Subject: [PATCH] Merged in fix/SW-2887-complete-booking-button-always-enabled
 (pull request #2227)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(SW-2887): don't disable the booking button
The complete button shouldn’t be disabled based on validation. This was already correct in desktop, but now it’s also correct in mobile.

* fix(SW-2887): don't disable the booking button


Approved-by: Tobias Johansson
Approved-by: Christian Andolf
---
 .../EnterDetails/Payment/PaymentClient.tsx    | 16 +-------------
 .../Summary/Mobile/BottomSheet/index.tsx      | 22 +++++++------------
 .../scandic-web/stores/enter-details/index.ts |  8 -------
 .../scandic-web/types/stores/enter-details.ts |  2 --
 4 files changed, 9 insertions(+), 39 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
index 50acdadd4..d95f9020a 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
@@ -106,10 +106,6 @@ export default function PaymentClient({
     return room.mustBeGuaranteed
   })
 
-  const setIsSubmittingDisabled = useEnterDetailsStore(
-    (state) => state.actions.setIsSubmittingDisabled
-  )
-
   const [refId, setRefId] = useState("")
   const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
     useState(false)
@@ -284,16 +280,6 @@ export default function PaymentClient({
     handlePaymentError,
   ])
 
-  useEffect(() => {
-    setIsSubmittingDisabled(
-      !methods.formState.isValid || methods.formState.isSubmitting
-    )
-  }, [
-    methods.formState.isValid,
-    methods.formState.isSubmitting,
-    setIsSubmittingDisabled,
-  ])
-
   const getPaymentMethod = useCallback(
     (paymentMethod: string | null | undefined): PaymentMethodEnum => {
       if (hasFlexRates) {
@@ -626,7 +612,7 @@ export default function PaymentClient({
           <div className={styles.submitButton}>
             <Button
               type="submit"
-              isDisabled={methods.formState.isSubmitting}
+              isDisabled={isSubmitting}
               isPending={isSubmitting}
               typography="Body/Supporting text (caption)/smBold"
             >
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
index 0b6f62234..a637f4d9d 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
@@ -21,19 +21,13 @@ export default function SummaryBottomSheet({ children }: PropsWithChildren) {
   const searchParams = useSearchParams()
   const errorCode = searchParams.get("errorCode")
 
-  const {
-    isSummaryOpen,
-    toggleSummaryOpen,
-    totalPrice,
-    isSubmittingDisabled,
-    isSubmitting,
-  } = useEnterDetailsStore((state) => ({
-    isSummaryOpen: state.isSummaryOpen,
-    toggleSummaryOpen: state.actions.toggleSummaryOpen,
-    totalPrice: state.totalPrice,
-    isSubmittingDisabled: state.isSubmittingDisabled,
-    isSubmitting: state.isSubmitting,
-  }))
+  const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmitting } =
+    useEnterDetailsStore((state) => ({
+      isSummaryOpen: state.isSummaryOpen,
+      toggleSummaryOpen: state.actions.toggleSummaryOpen,
+      totalPrice: state.totalPrice,
+      isSubmitting: state.isSubmitting,
+    }))
 
   useEffect(() => {
     if (isSummaryOpen) {
@@ -92,7 +86,7 @@ export default function SummaryBottomSheet({ children }: PropsWithChildren) {
           variant="Primary"
           size="Large"
           type="submit"
-          isDisabled={isSubmittingDisabled}
+          isDisabled={isSubmitting}
           isPending={isSubmitting}
           typography="Body/Supporting text (caption)/smBold"
           form={formId}
diff --git a/apps/scandic-web/stores/enter-details/index.ts b/apps/scandic-web/stores/enter-details/index.ts
index 921fda158..e6f5ba4c5 100644
--- a/apps/scandic-web/stores/enter-details/index.ts
+++ b/apps/scandic-web/stores/enter-details/index.ts
@@ -155,7 +155,6 @@ export function createDetailsStore(
     booking: initialState.booking,
     breakfastPackages,
     canProceedToPayment: false,
-    isSubmittingDisabled: false,
     isSubmitting: false,
     isSummaryOpen: false,
     lastRoom: initialState.booking.rooms.length - 1,
@@ -415,13 +414,6 @@ export function createDetailsStore(
     preSubmitCallbacks: {},
 
     actions: {
-      setIsSubmittingDisabled(isSubmittingDisabled) {
-        return set(
-          produce((state: DetailsState) => {
-            state.isSubmittingDisabled = isSubmittingDisabled
-          })
-        )
-      },
       setIsSubmitting(isSubmitting) {
         return set(
           produce((state: DetailsState) => {
diff --git a/apps/scandic-web/types/stores/enter-details.ts b/apps/scandic-web/types/stores/enter-details.ts
index cf16821c4..c4ee6dc60 100644
--- a/apps/scandic-web/types/stores/enter-details.ts
+++ b/apps/scandic-web/types/stores/enter-details.ts
@@ -85,7 +85,6 @@ export type InitialState = {
 
 export interface DetailsState {
   actions: {
-    setIsSubmittingDisabled: (isSubmittingDisabled: boolean) => void
     setIsSubmitting: (isSubmitting: boolean) => void
     setTotalPrice: (totalPrice: Price) => void
     toggleSummaryOpen: () => void
@@ -96,7 +95,6 @@ export interface DetailsState {
   booking: SelectRateSearchParams
   breakfastPackages: BreakfastPackages
   canProceedToPayment: boolean
-  isSubmittingDisabled: boolean
   isSubmitting: boolean
   isSummaryOpen: boolean
   lastRoom: number