Merge branch 'develop' into 'main'
Main See merge request witapp/aura-webapp!214
This commit is contained in:
commit
bf0ea888d4
@ -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 (
|
||||||
|
|||||||
@ -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}
|
||||||
|
|||||||
@ -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}>
|
||||||
|
|||||||
@ -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"]}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -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) && (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user