Merge branch 'develop' into 'main'

Main

See merge request witapp/aura-webapp!214
This commit is contained in:
Daniil Chemerkin 2024-06-30 14:03:54 +00:00
commit bf0ea888d4
5 changed files with 32 additions and 18 deletions

View File

@ -9,6 +9,7 @@ interface ModalProps {
containerClassName?: string; containerClassName?: string;
type?: "hidden" | "normal"; type?: "hidden" | "normal";
onClose?: () => void; onClose?: () => void;
removeNoScroll?: boolean;
} }
function Modal({ function Modal({
@ -19,6 +20,7 @@ function Modal({
containerClassName = "", containerClassName = "",
type = "normal", type = "normal",
onClose, onClose,
removeNoScroll = true
}: ModalProps): JSX.Element { }: ModalProps): JSX.Element {
const handleClose = (event: React.MouseEvent) => { const handleClose = (event: React.MouseEvent) => {
if (event.target !== event.currentTarget) return; if (event.target !== event.currentTarget) return;
@ -27,6 +29,10 @@ function Modal({
}; };
useEffect(() => { useEffect(() => {
if (!removeNoScroll) {
return;
}
if (open) { if (open) {
document.body.classList.add("no-scroll"); document.body.classList.add("no-scroll");
} }
@ -34,7 +40,7 @@ function Modal({
return () => { return () => {
document.body.classList.remove("no-scroll"); document.body.classList.remove("no-scroll");
}; };
}, [open]); }, [open, removeNoScroll]);
if (!open && type === "normal") return <></>; if (!open && type === "normal") return <></>;
return ( return (

View File

@ -14,6 +14,7 @@ interface IPaymentCardModalProps {
returnUrl?: string; returnUrl?: string;
isOpen: boolean; isOpen: boolean;
setIsOpen: Dispatch<SetStateAction<boolean>>; setIsOpen: Dispatch<SetStateAction<boolean>>;
removeNoScroll?: boolean;
} }
export default function PaymentCardModal({ export default function PaymentCardModal({
@ -24,9 +25,10 @@ export default function PaymentCardModal({
returnUrl, returnUrl,
isOpen, isOpen,
setIsOpen, setIsOpen,
removeNoScroll,
}: IPaymentCardModalProps) { }: IPaymentCardModalProps) {
return ( return (
<Modal open={isOpen} onClose={() => setIsOpen(false)}> <Modal open={isOpen} onClose={() => setIsOpen(false)} removeNoScroll={removeNoScroll}>
<Elements stripe={stripePromise} options={{clientSecret}}> <Elements stripe={stripePromise} options={{clientSecret}}>
<CheckoutForm <CheckoutForm
confirmType={paymentType} confirmType={paymentType}

View File

@ -128,15 +128,18 @@ export default function PaymentModalNew({
/> />
</Elements> </Elements>
<PaymentCardModal <div style={!isOpenCardModal ? {visibility: 'hidden', position: 'absolute'} : {}}>
isOpen={isOpenCardModal} <PaymentCardModal
setIsOpen={setIsOpenCardModal} isOpen={true}
clientSecret={clientSecret} setIsOpen={setIsOpenCardModal}
stripePromise={stripePromise} clientSecret={clientSecret}
paymentType={paymentType} stripePromise={stripePromise}
paymentIntentId={paymentIntentId} paymentType={paymentType}
returnUrl={returnUrl} paymentIntentId={paymentIntentId}
/> returnUrl={returnUrl}
removeNoScroll={isOpenCardModal}
/>
</div>
{!isLoading && {!isLoading &&
<> <>
<div className={styles.infoContainer}> <div className={styles.infoContainer}>

View File

@ -46,6 +46,7 @@ export default function PaymentScreen() {
const [minutes, seconds] = time.split(":"); const [minutes, seconds] = time.split(":");
const returnUrl = window.location.origin + '/palmistry/payment';
return ( return (
<div className="payment-screen"> <div className="payment-screen">
<div className="payment-screen__header"> <div className="payment-screen__header">
@ -256,7 +257,7 @@ export default function PaymentScreen() {
<PaymentModalNew <PaymentModalNew
setHeight={setHeight} setHeight={setHeight}
activeProduct={activeProductFromStore} activeProduct={activeProductFromStore}
returnUrl={window.location.href} returnUrl={returnUrl}
placementKey={EPlacementKeys["aura.placement.palmistry.main"]} placementKey={EPlacementKeys["aura.placement.palmistry.main"]}
/> />
)} )}

View File

@ -78,12 +78,14 @@ export default function StepsManager() {
)} )}
<main className="steps-manager__main"> <main className="steps-manager__main">
{nonSliderSteps.includes(steps.current as Step) && ( {(nonSliderSteps.includes(steps.current as Step) || steps.current === Step.Paywall) && (
<PalmistryContainerWrapper currentStep={steps.current as Step}> <div style={steps.current === Step.Paywall ? {visibility: 'hidden', position: 'absolute'} : {}}>
{steps.current === Step.Payment && <PaymentScreen />} <PalmistryContainerWrapper currentStep={steps.current as Step}>
{steps.current === Step.Discount && <DiscountScreen />} {[Step.Paywall, Step.Payment].includes(steps.current as Step) && <PaymentScreen />}
{steps.current === Step.PremiumBundle && <PremiumBundleScreen />} {steps.current === Step.Discount && <DiscountScreen/>}
</PalmistryContainerWrapper> {steps.current === Step.PremiumBundle && <PremiumBundleScreen/>}
</PalmistryContainerWrapper>
</div>
)} )}
{!nonSliderSteps.includes(steps.current as Step) && ( {!nonSliderSteps.includes(steps.current as Step) && (