From 49cea63a9503f583f949f6b91a6d60f0e016766d Mon Sep 17 00:00:00 2001
From: yury <yury.work.js@gmail.com>
Date: Sat, 29 Jun 2024 06:02:33 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BF=D1=80=D0=B5=D0=BF=D1=80=D0=BE=D0=B3=D1=80=D1=83?=
 =?UTF-8?q?=D0=B7=D0=BA=D1=83=20=D0=BE=D0=BF=D0=BB=D0=B0=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/index.tsx                |  8 ++++++-
 .../PaymentCardModal/index.tsx                |  4 +++-
 src/components/PaymentModalNew/index.tsx      | 21 +++++++++++--------
 .../payment-screen/payment-screen.tsx         |  3 ++-
 .../palmistry/steps-manager/steps-manager.tsx | 14 +++++++------
 5 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index d3e0236..fcb8e6f 100644
--- a/src/components/Modal/index.tsx
+++ b/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 (
diff --git a/src/components/PaymentModalNew/PaymentCardModal/index.tsx b/src/components/PaymentModalNew/PaymentCardModal/index.tsx
index 3bc937d..258a0a4 100644
--- a/src/components/PaymentModalNew/PaymentCardModal/index.tsx
+++ b/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}
diff --git a/src/components/PaymentModalNew/index.tsx b/src/components/PaymentModalNew/index.tsx
index 5473e7b..36df019 100644
--- a/src/components/PaymentModalNew/index.tsx
+++ b/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}>
diff --git a/src/components/palmistry/payment-screen/payment-screen.tsx b/src/components/palmistry/payment-screen/payment-screen.tsx
index 853eeb7..13be936 100644
--- a/src/components/palmistry/payment-screen/payment-screen.tsx
+++ b/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"]}
               />
             )}
diff --git a/src/components/palmistry/steps-manager/steps-manager.tsx b/src/components/palmistry/steps-manager/steps-manager.tsx
index f5b5124..ef23312 100644
--- a/src/components/palmistry/steps-manager/steps-manager.tsx
+++ b/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) && (