Develop

src/components/palmistry/discount-screen/discount-screen.css

@@ -106,6 +106,10 @@
   color: #fff;
 }
 
+.discount-screen__loader {
+  scale: .75;
+}
+
 .discount-screen__header-block {
   top: 0;
   color: #fff;

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

@@ -13,6 +13,7 @@ import { useAuth } from "@/auth";
 import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
 import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
 import { ResponseGet } from "@/api/resources/SinglePayment";
+import Loader, { LoaderColor } from "@/components/Loader";
 
 const currentProductKey = "skip.trial.subscription.aura";
 const returnUrl = `${window.location.host}/palmistry/premium-bundle`;
@@ -31,6 +32,7 @@ export default function DiscountScreen() {
   const [product, setProduct] = React.useState<ResponseGet>();
   const [clientSecret, setClientSecret] = React.useState<string | null>(null);
   const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
+  const [isLoading, setIsLoading] = React.useState(false);
 
   const goPremiumBundle = () => {
     navigate(routes.client.palmistryPremiumBundle());
@@ -78,34 +80,42 @@ export default function DiscountScreen() {
       key,
     };
 
-    const response = await api.createSinglePayment({
+    try {
-      token: token,
+      setIsLoading(true);
-      data: {
+      const response = await api.createSinglePayment({
-        user: {
+        token: token,
-          id: user.id,
+        data: {
-          email: user.email,
+          user: {
-          name: user.username || "",
+            id: user.id,
-          sign: user.profile?.sign?.sign || "",
+            email: user.email,
-          age: user.profile.age?.years || 0,
+            name: user.username || "",
+            sign: user.profile?.sign?.sign || "",
+            age: user.profile.age?.years || 0,
+          },
+          partner: {
+            sign: "",
+            age: 0,
+          },
+          paymentInfo,
+          return_url: returnUrl,
         },
-        partner: {
+      });
-          sign: "",
-          age: 0,
-        },
-        paymentInfo,
-        return_url: returnUrl,
-      },
-    });
 
-    if (
+      if (
-      ("paymentIntent" in response &&
+        ("paymentIntent" in response &&
-        response.paymentIntent.status === "paid") ||
+          response.paymentIntent.status === "paid") ||
-      ("payment" in response && response.payment.status === "paid")
+        ("payment" in response && response.payment.status === "paid") ||
-    ) {
+        ("invoiceId" in response && response.invoiceId === "paid")
-      goPremiumBundle();
+      ) {
-    } else if ("paymentIntent" in response) {
+        goPremiumBundle();
-      setClientSecret(response.paymentIntent.data.client_secret);
+      } else if ("paymentIntent" in response) {
-      setStripePublicKey(response.paymentIntent.data.public_key);
+        setClientSecret(response.paymentIntent.data.client_secret);
+        setStripePublicKey(response.paymentIntent.data.public_key);
+      }
+    } catch (error) {
+      console.log("Error: ", error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -123,14 +133,14 @@ export default function DiscountScreen() {
         <div className="discount-screen__blocks">
           <section className="discount-screen__block">
             <span className="discount-screen__price-block">
-              €19 for <br /> 1-week plan
+              $19 for <br /> 1-week plan
             </span>
 
             <div className="discount-screen__details">
               <span className="discount-screen__details-name">
                 Total savings
               </span>
-              <span className="discount-screen__details-value">€0</span>
+              <span className="discount-screen__details-value">$0</span>
             </div>
 
             <div className="discount-screen__details">
@@ -151,14 +161,14 @@ export default function DiscountScreen() {
             <div className="discount-screen__header-block">save 33%</div>
 
             <span className="discount-screen__price-block">
-              €{price} for <br /> 1-week plan
+              ${price} for <br /> 1-week plan
             </span>
 
             <div className="discount-screen__details">
               <span className="discount-screen__details-name">
                 Total savings
               </span>
-              <span className="discount-screen__details-value">€6.27</span>
+              <span className="discount-screen__details-value">$6.27</span>
             </div>
 
             <div className="discount-screen__details">
@@ -166,8 +176,21 @@ export default function DiscountScreen() {
               <span className="discount-screen__details-value">no</span>
             </div>
 
-            <button className="discount-screen__button" onClick={buy}>
+            <button
-              Pay now and <br /> skip trial
+              className="discount-screen__button"
+              onClick={buy}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <Loader
+                  color={LoaderColor.White}
+                  className="discount-screen__loader"
+                />
+              ) : (
+                <>
+                  Pay now and <br /> skip trial
+                </>
+              )}
             </button>
           </section>
         </div>

src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx

@@ -12,6 +12,7 @@ import { useApi } from "@/api";
 import { useAuth } from "@/auth";
 import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
 import { ResponseGet } from "@/api/resources/SinglePayment";
+import Loader, { LoaderColor } from "@/components/Loader";
 
 const currentProductKey = "premium.bundle.aura";
 const returnUrl = window.location.host;
@@ -27,6 +28,7 @@ export default function PremiumBundleScreen() {
   const [isSuccess] = React.useState(false);
   const [clientSecret, setClientSecret] = React.useState<string | null>(null);
   const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
+  const [isLoading, setIsLoading] = React.useState(false);
 
   React.useEffect(() => {
     (async () => {
@@ -40,7 +42,7 @@ export default function PremiumBundleScreen() {
         setProduct(product);
       }
     })();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   React.useEffect(() => {
@@ -54,37 +56,45 @@ export default function PremiumBundleScreen() {
 
     const { _id, key } = product;
 
-    const response = await api.createSinglePayment({
+    try {
-      token: token,
+      setIsLoading(true);
-      data: {
+      const response = await api.createSinglePayment({
-        user: {
+        token: token,
-          id: user.id,
+        data: {
-          email: user.email,
+          user: {
-          name: user.username || "",
+            id: user.id,
-          sign: user.profile?.sign?.sign || "",
+            email: user.email,
-          age: user.profile.age?.years || 0,
+            name: user.username || "",
+            sign: user.profile?.sign?.sign || "",
+            age: user.profile.age?.years || 0,
+          },
+          partner: {
+            sign: "",
+            age: 0,
+          },
+          paymentInfo: {
+            productId: _id,
+            key,
+          },
+          return_url: returnUrl,
         },
-        partner: {
+      });
-          sign: "",
-          age: 0,
-        },
-        paymentInfo: {
-          productId: _id,
-          key,
-        },
-        return_url: returnUrl,
-      },
-    });
 
-    if (
+      if (
-      ("paymentIntent" in response &&
+        ("paymentIntent" in response &&
-        response.paymentIntent.status === "paid") ||
+          response.paymentIntent.status === "paid") ||
-      ("payment" in response && response.payment.status === "paid")
+        ("payment" in response && response.payment.status === "paid") ||
-    ) {
+        ("invoiceId" in response && response.invoiceId === "paid")
-      goHome();
+      ) {
-    } else if ("paymentIntent" in response) {
+        goHome();
-      setClientSecret(response.paymentIntent.data.client_secret);
+      } else if ("paymentIntent" in response) {
-      setStripePublicKey(response.paymentIntent.data.public_key);
+        setClientSecret(response.paymentIntent.data.client_secret);
+        setStripePublicKey(response.paymentIntent.data.public_key);
+      }
+    } catch (error) {
+      console.log("Error: ", error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -199,9 +209,9 @@ export default function PremiumBundleScreen() {
 
           <div className="premium-bundle-screen__subsection">
             <span className="premium-bundle-screen__one-time-price">
-              One-time price of €19!
+              One-time price of $19!
             </span>
-            <p>Original price is €45. Save 58%!</p>
+            <p>Original price is $45. Save 58%!</p>
           </div>
 
           <div className="premium-bundle-screen__subsection">
@@ -215,21 +225,31 @@ export default function PremiumBundleScreen() {
         <button
           className="premium-bundle-screen__button premium-bundle-screen__button-active premium-bundle-screen__buy-button"
           onClick={buy}
+          disabled={isLoading}
         >
-          <svg
+          {isLoading ? (
-            width="13"
+            <Loader
-            height="16"
+              color={LoaderColor.White}
-            viewBox="0 0 13 16"
+              className="discount-screen__loader"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M11.5556 6.24219H1.44444C0.6467 6.24219 0 6.97481 0 7.87855V13.6058C0 14.5096 0.6467 15.2422 1.44444 15.2422H11.5556C12.3533 15.2422 13 14.5096 13 13.6058V7.87855C13 6.97481 12.3533 6.24219 11.5556 6.24219Z" />
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M6.5 0.242188C4.29086 0.242188 2.5 2.03305 2.5 4.24219V8.24219H10.5V4.24219C10.5 2.03305 8.70914 0.242188 6.5 0.242188ZM6.5 1.24219C4.84315 1.24219 3.5 2.58533 3.5 4.24219V7.24219H9.5V4.24219C9.5 2.58533 8.15685 1.24219 6.5 1.24219Z"
             />
-          </svg>{" "}
+          ) : (
-          Buy now
+            <>
+              <svg
+                width="13"
+                height="16"
+                viewBox="0 0 13 16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M11.5556 6.24219H1.44444C0.6467 6.24219 0 6.97481 0 7.87855V13.6058C0 14.5096 0.6467 15.2422 1.44444 15.2422H11.5556C12.3533 15.2422 13 14.5096 13 13.6058V7.87855C13 6.97481 12.3533 6.24219 11.5556 6.24219Z" />
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M6.5 0.242188C4.29086 0.242188 2.5 2.03305 2.5 4.24219V8.24219H10.5V4.24219C10.5 2.03305 8.70914 0.242188 6.5 0.242188ZM6.5 1.24219C4.84315 1.24219 3.5 2.58533 3.5 4.24219V7.24219H9.5V4.24219C9.5 2.58533 8.15685 1.24219 6.5 1.24219Z"
+                />
+              </svg>{" "}
+              Buy now
+            </>
+          )}
         </button>
       </div>