scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/submit-booking-disabled (pull request #1936)

Browse Source 
Don't disable payment based on room forms

* Don't disable payment based on room forms


Approved-by: Arvid Norlin
Approved-by: Tobias Johansson
This commit is contained in:
Niclas Edenvin
2025-05-05 07:55:25 +00:00
parent 91933f47cf
commit 4191441f32
1 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
View File

@@ -1,15 +1,15 @@
"use client" "use client"
import { zodResolver } from "@hookform/resolvers/zod" import { zodResolver } from "@hookform/resolvers/zod"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { cx } from "class-variance-authority" import { cx } from "class-variance-authority"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect, useState } from "react" import { useCallback, useEffect, useState } from "react"
import { Label } from "react-aria-components" import { Label } from "react-aria-components"
import { FormProvider, useForm } from "react-hook-form" import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Button } from "@scandic-hotels/design-system/Button" import { Button } from "@scandic-hotels/design-system/Button"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { import {
BOOKING_CONFIRMATION_NUMBER, BOOKING_CONFIRMATION_NUMBER,
@@ -76,17 +76,21 @@ export default function PaymentClient({
const [showBookingAlert, setShowBookingAlert] = useState(false) const [showBookingAlert, setShowBookingAlert] = useState(false)
const { booking, rooms, totalPrice, isSubmitting, preSubmitCallbacks, setIsSubmitting } = const {
useEnterDetailsStore((state) => ({ booking,
booking: state.booking, rooms,
rooms: state.rooms, totalPrice,
totalPrice: state.totalPrice, isSubmitting,
preSubmitCallbacks: state.preSubmitCallbacks, preSubmitCallbacks,
isSubmitting: state.isSubmitting, setIsSubmitting,
setIsSubmitting: state.actions.setIsSubmitting, } = useEnterDetailsStore((state) => ({
})) booking: state.booking,
rooms: state.rooms,
const allRoomsComplete = rooms.every((r) => r.isComplete) totalPrice: state.totalPrice,
preSubmitCallbacks: state.preSubmitCallbacks,
isSubmitting: state.isSubmitting,
setIsSubmitting: state.actions.setIsSubmitting,
}))
const bookingMustBeGuaranteed = rooms.some(({ room }, idx) => { const bookingMustBeGuaranteed = rooms.some(({ room }, idx) => {
if (idx === 0 && isUserLoggedIn && room.memberMustBeGuaranteed) { if (idx === 0 && isUserLoggedIn && room.memberMustBeGuaranteed) {
@@ -329,24 +333,24 @@ export default function PaymentClient({
const guarantee = data.guarantee const guarantee = data.guarantee
const useSavedCard = savedCreditCard const useSavedCard = savedCreditCard
? { ? {
card: { card: {
alias: savedCreditCard.alias, alias: savedCreditCard.alias,
expiryDate: savedCreditCard.expirationDate, expiryDate: savedCreditCard.expirationDate,
cardType: savedCreditCard.cardType, cardType: savedCreditCard.cardType,
}, },
} }
: {} : {}
const shouldUsePayment = const shouldUsePayment =
guarantee || bookingMustBeGuaranteed || !hasOnlyFlexRates guarantee || bookingMustBeGuaranteed || !hasOnlyFlexRates
const payment = shouldUsePayment const payment = shouldUsePayment
? { ? {
paymentMethod: paymentMethod, paymentMethod: paymentMethod,
...useSavedCard, ...useSavedCard,
success: `${paymentRedirectUrl}/success`, success: `${paymentRedirectUrl}/success`,
error: `${paymentRedirectUrl}/error`, error: `${paymentRedirectUrl}/error`,
cancel: `${paymentRedirectUrl}/cancel`, cancel: `${paymentRedirectUrl}/cancel`,
} }
: undefined : undefined
if (guarantee || (bookingMustBeGuaranteed && hasOnlyFlexRates)) { if (guarantee || (bookingMustBeGuaranteed && hasOnlyFlexRates)) {
@@ -482,7 +486,7 @@ export default function PaymentClient({
return ( return (
<section <section
className={cx(styles.paymentSection, { className={cx(styles.paymentSection, {
[styles.disabled]: !allRoomsComplete || isSubmitting, [styles.disabled]: isSubmitting,
})} })}
> >
<header> <header>
@@ -555,7 +559,7 @@ export default function PaymentClient({
value={savedCreditCard.id} value={savedCreditCard.id}
label={ label={
PAYMENT_METHOD_TITLES[ PAYMENT_METHOD_TITLES[
savedCreditCard.cardType as PaymentMethodEnum savedCreditCard.cardType as PaymentMethodEnum
] ]
} }
cardNumber={savedCreditCard.truncatedNumber} cardNumber={savedCreditCard.truncatedNumber}
@@ -584,7 +588,7 @@ export default function PaymentClient({
value={paymentMethod} value={paymentMethod}
label={ label={
PAYMENT_METHOD_TITLES[ PAYMENT_METHOD_TITLES[
paymentMethod as PaymentMethodEnum paymentMethod as PaymentMethodEnum
] ]
} }
/> />
@@ -606,9 +610,7 @@ export default function PaymentClient({
<div className={styles.submitButton}> <div className={styles.submitButton}>
<Button <Button
type="submit" type="submit"
isDisabled={ isDisabled={methods.formState.isSubmitting}
!methods.formState.isValid || methods.formState.isSubmitting
}
isPending={isSubmitting} isPending={isSubmitting}
typography="Body/Supporting text (caption)/smBold" typography="Body/Supporting text (caption)/smBold"
> >