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,6 +80,8 @@ export default function DiscountScreen() {
       key,
     };
 
+    try {
+      setIsLoading(true);
       const response = await api.createSinglePayment({
         token: token,
         data: {
@@ -100,13 +104,19 @@ export default function DiscountScreen() {
       if (
         ("paymentIntent" in response &&
           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) {
         setClientSecret(response.paymentIntent.data.client_secret);
         setStripePublicKey(response.paymentIntent.data.public_key);
       }
+    } catch (error) {
+      console.log("Error: ", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
@@ -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
+              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 () => {
@@ -54,6 +56,8 @@ export default function PremiumBundleScreen() {
 
     const { _id, key } = product;
 
+    try {
+      setIsLoading(true);
       const response = await api.createSinglePayment({
         token: token,
         data: {
@@ -79,13 +83,19 @@ export default function PremiumBundleScreen() {
       if (
         ("paymentIntent" in response &&
           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) {
         setClientSecret(response.paymentIntent.data.client_secret);
         setStripePublicKey(response.paymentIntent.data.public_key);
       }
+    } catch (error) {
+      console.log("Error: ", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const goHome = () => {
@@ -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,7 +225,15 @@ export default function PremiumBundleScreen() {
         <button
           className="premium-bundle-screen__button premium-bundle-screen__button-active premium-bundle-screen__buy-button"
           onClick={buy}
+          disabled={isLoading}
         >
+          {isLoading ? (
+            <Loader
+              color={LoaderColor.White}
+              className="discount-screen__loader"
+            />
+          ) : (
+            <>
               <svg
                 width="13"
                 height="16"
@@ -230,6 +248,8 @@ export default function PremiumBundleScreen() {
                 />
               </svg>{" "}
               Buy now
+            </>
+          )}
         </button>
       </div>