From daed74481edbb67dafa9ee2161364996aa3ddc44 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 11 Nov 2024 11:00:43 +0100 Subject: [PATCH] fix: handle submit from summary bottom sheet --- .../(standard)/[step]/enterDetailsLayout.css | 3 +- .../EnterDetails/Payment/index.tsx | 43 +++++++++++++------ .../EnterDetails/Payment/payment.module.css | 9 +++- .../SelectedRoom/selectedRoom.module.css | 2 +- .../BottomSheet/bottomSheet.module.css | 34 ++++++++++++--- .../Summary/BottomSheet/index.tsx | 20 ++++++--- stores/enter-details.ts | 5 +++ 7 files changed, 87 insertions(+), 29 deletions(-) diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/enterDetailsLayout.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/enterDetailsLayout.css index 31054ccd4..74fa4b622 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/enterDetailsLayout.css +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/enterDetailsLayout.css @@ -11,7 +11,7 @@ .enter-details-layout__content { display: grid; gap: var(--Spacing-x3) var(--Spacing-x9); - margin: var(--Spacing-x5) auto 0; + margin: var(--Spacing-x3) var(--Spacing-x2) 0; /* simulates padding on viewport smaller than --max-width-navigation */ width: min( calc(100dvw - (var(--Spacing-x2) * 2)), @@ -31,6 +31,7 @@ .enter-details-layout__content { grid-template-columns: 1fr 340px; grid-template-rows: auto 1fr; + margin: var(--Spacing-x5) auto 0; } .enter-details-layout__summaryContainer { diff --git a/components/HotelReservation/EnterDetails/Payment/index.tsx b/components/HotelReservation/EnterDetails/Payment/index.tsx index 77821d8a2..d85fc3f77 100644 --- a/components/HotelReservation/EnterDetails/Payment/index.tsx +++ b/components/HotelReservation/EnterDetails/Payment/index.tsx @@ -45,6 +45,8 @@ import { BreakfastPackageEnum } from "@/types/enums/breakfast" const maxRetries = 40 const retryInterval = 2000 +export const formId = "submit-booking" + function isPaymentMethodEnum(value: string): value is PaymentMethodEnum { return Object.values(PaymentMethodEnum).includes(value as PaymentMethodEnum) } @@ -59,10 +61,13 @@ export default function Payment({ const lang = useLang() const intl = useIntl() const queryParams = useSearchParams() - const { userData, roomData } = useEnterDetailsStore((state) => ({ - userData: state.userData, - roomData: state.roomData, - })) + const { userData, roomData, setIsSubmittingDisabled } = useEnterDetailsStore( + (state) => ({ + userData: state.userData, + roomData: state.roomData, + setIsSubmittingDisabled: state.setIsSubmittingDisabled, + }) + ) const { firstName, @@ -119,6 +124,16 @@ export default function Payment({ } }, [bookingStatus, router]) + useEffect(() => { + setIsSubmittingDisabled( + !methods.formState.isValid || methods.formState.isSubmitting + ) + }, [ + methods.formState.isValid, + methods.formState.isSubmitting, + setIsSubmittingDisabled, + ]) + function handleSubmit(data: PaymentFormData) { const allQueryParams = queryParams.size > 0 ? `?${queryParams.toString()}` : "" @@ -209,6 +224,7 @@ export default function Payment({
{mustBeGuaranteed ? (
@@ -309,15 +325,16 @@ export default function Payment({
- +
+ +
) diff --git a/components/HotelReservation/EnterDetails/Payment/payment.module.css b/components/HotelReservation/EnterDetails/Payment/payment.module.css index 7f4f2899a..c8cc6184c 100644 --- a/components/HotelReservation/EnterDetails/Payment/payment.module.css +++ b/components/HotelReservation/EnterDetails/Payment/payment.module.css @@ -18,7 +18,7 @@ } .submitButton { - align-self: flex-start; + display: none; } .paymentContainer .link { @@ -31,3 +31,10 @@ flex-direction: row; gap: var(--Spacing-x-one-and-half); } + +@media screen and (min-width: 1367px) { + .submitButton { + display: flex; + align-self: flex-start; + } +} diff --git a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css index 03af9d904..3149cf709 100644 --- a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css +++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css @@ -3,7 +3,6 @@ display: flex; flex-direction: row; gap: var(--Spacing-x-one-and-half); - padding-top: var(--Spacing-x3); } .main { @@ -67,6 +66,7 @@ @media screen and (min-width: 1367px) { .wrapper { gap: var(--Spacing-x3); + padding-top: var(--Spacing-x3); } .iconWrapper { diff --git a/components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css b/components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css index 75f34791b..789362b0c 100644 --- a/components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css +++ b/components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css @@ -13,8 +13,6 @@ grid-template-columns: 1fr auto; padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5) var(--Spacing-x3); - justify-content: space-between; - width: auto; align-items: flex-start; transition: 0.5s ease-in-out; } @@ -24,11 +22,9 @@ border: none; background: none; text-align: start; - opacity: 1; - transition: - opacity 0.5s ease-in-out, - padding 0.5s ease-in-out; + transition: padding 0.5s ease-in-out; cursor: pointer; + white-space: nowrap; } .wrapper[data-open="true"] { @@ -36,15 +32,39 @@ } .wrapper[data-open="true"] .bottomSheet { - grid-template-columns: 0fr 1fr; + grid-template-columns: 0fr auto; } .wrapper[data-open="true"] .priceDetailsButton { + animation: fadeOut 0.3s ease-out; opacity: 0; padding: 0; } +.wrapper[data-open="false"] .priceDetailsButton { + animation: fadeIn 0.8s ease-in; + opacity: 1; +} + .content, .priceDetailsButton { overflow: hidden; } + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} diff --git a/components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx b/components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx index b01e928b8..ac7921aec 100644 --- a/components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx +++ b/components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx @@ -1,6 +1,6 @@ "use client" -import { PropsWithChildren, useState } from "react" +import { PropsWithChildren } from "react" import { useIntl } from "react-intl" import { useEnterDetailsStore } from "@/stores/enter-details" @@ -9,18 +9,20 @@ import Button from "@/components/TempDesignSystem/Button" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import { formId } from "../../Payment" + import styles from "./bottomSheet.module.css" export function SummaryBottomSheet({ children }: PropsWithChildren) { const intl = useIntl() - const { isSummaryOpen, toggleSummaryOpen, totalPrice } = useEnterDetailsStore( - (state) => ({ + const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmittingDisabled } = + useEnterDetailsStore((state) => ({ isSummaryOpen: state.isSummaryOpen, toggleSummaryOpen: state.toggleSummaryOpen, totalPrice: state.totalPrice, - }) - ) + isSubmittingDisabled: state.isSubmittingDisabled, + })) return (
@@ -45,7 +47,13 @@ export function SummaryBottomSheet({ children }: PropsWithChildren) { {intl.formatMessage({ id: "See details" })} -
diff --git a/stores/enter-details.ts b/stores/enter-details.ts index 18c0695fe..0649fd837 100644 --- a/stores/enter-details.ts +++ b/stores/enter-details.ts @@ -38,6 +38,7 @@ interface EnterDetailsState { selectRateUrl: string currentStep: StepEnum totalPrice: TotalPrice + isSubmittingDisabled: boolean isSummaryOpen: boolean isValid: Record completeStep: (updatedData: Partial) => void @@ -51,6 +52,7 @@ interface EnterDetailsState { setCurrentStep: (step: StepEnum) => void toggleSummaryOpen: () => void setTotalPrice: (totalPrice: TotalPrice) => void + setIsSubmittingDisabled: (isSubmittingDisabled: boolean) => void } export function initEditDetailsState( @@ -143,6 +145,7 @@ export function initEditDetailsState( euro: { price: 0, currency: "" }, }, isSummaryOpen: false, + isSubmittingDisabled: false, setCurrentStep: (step) => set({ currentStep: step }), navigate: (step, updatedData) => set( @@ -182,6 +185,8 @@ export function initEditDetailsState( ), toggleSummaryOpen: () => set({ isSummaryOpen: !get().isSummaryOpen }), setTotalPrice: (totalPrice) => set({ totalPrice: totalPrice }), + setIsSubmittingDisabled: (isSubmittingDisabled) => + set({ isSubmittingDisabled }), })) }