Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 11x 272x 272x 272x 271x 271x 271x 271x 271x 22x 15x 271x | import { WithOrderColumn } from "../WithOrderColumn";
import { useEffect, useState } from "react";
import CheckoutFormPreview from "../../CheckoutFormPreview";
import { PaymentSuccessInfo } from "@pages/Checkout/components/PaymentSuccess";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import useCheckoutPreview from "../../hooks/useCheckoutPreview";
import { FormProvider } from "react-hook-form";
import useCheckFormType from "@sections/PayBuilder/components/hooks/useCheckFormType";
import { DarkWithCustomTheme } from "@sections/PayBuilder/FormPreview";
export const BottomSheetModal = () => {
const { id } = useParams();
const navigate = useNavigate();
const { isFundraiser } = useCheckFormType();
const { state } = useLocation();
const [paymentSuccessInfo, setPaymentSuccessInfo] =
useState<PaymentSuccessInfo | null>(state?.successInfo ?? null);
const checkoutFormPreviewValues = useCheckoutPreview(setPaymentSuccessInfo);
const { methods, isLoading, onSubmit, isDeclined, isFailed, declineReason } =
checkoutFormPreviewValues;
useEffect(() => {
if (!isFundraiser) {
Iif (paymentSuccessInfo?.orderNumber) {
navigate(`/${id}/checkout_success`, {
state: { successInfo: paymentSuccessInfo },
});
}
}
}, [paymentSuccessInfo]);
return (
<FormProvider {...methods}>
<DarkWithCustomTheme>
<WithOrderColumn
methods={methods}
onSubmit={onSubmit}
isLoading={isLoading}
paymentSuccessInfo={paymentSuccessInfo}
isDeclined={isDeclined}
isFailed={isFailed}
declineReason={declineReason}
>
<CheckoutFormPreview
isPreviewMode={false}
onPaymentSuccess={setPaymentSuccessInfo}
handleSubmit={methods.handleSubmit}
isFromBottomSheet
// We're passing this prop because CheckoutFormPreview has separate instance of useCheckoutPreview hook and uses different values.
// TODO: Make sure CheckoutFormPreview has only one instance, which will help us avoid such issues. Once instance is centralized, remove this prop.
bottomsheetCheckoutFormPreviewValues={{
...checkoutFormPreviewValues,
declineReason,
}}
/>
</WithOrderColumn>
</DarkWithCustomTheme>
</FormProvider>
);
};
|