feat: Добавил препрогрузку оплаты

src/components/Modal/index.tsx

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

src/components/PaymentModalNew/PaymentCardModal/index.tsx

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

src/components/PaymentModalNew/index.tsx

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

src/components/palmistry/payment-screen/payment-screen.tsx

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

src/components/palmistry/steps-manager/steps-manager.tsx

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