Merge branch 'develop' into 'main'

Develop See merge request witapp/aura-webapp!363
2024-09-07 12:31:27 +00:00 · 2024-09-07 12:31:27 +00:00 · 0589cf9b52
commit 0589cf9b52
parent e9782af7cb 33bb873ccc
3 changed files with 124 additions and 77 deletions
--- a/src/components/palmistry/discount-screen/discount-screen.css
+++ b/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;
--- a/src/components/palmistry/discount-screen/discount-screen.tsx
+++ b/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({
-      token: token,
-      data: {
-        user: {
-          id: user.id,
-          email: user.email,
-          name: user.username || "",
-          sign: user.profile?.sign?.sign || "",
-          age: user.profile.age?.years || 0,
+    try {
+      setIsLoading(true);
+      const response = await api.createSinglePayment({
+        token: token,
+        data: {
+          user: {
+            id: user.id,
+            email: user.email,
+            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 (
-      ("paymentIntent" in response &&
-        response.paymentIntent.status === "paid") ||
-      ("payment" in response && response.payment.status === "paid")
-    ) {
-      goPremiumBundle();
-    } else if ("paymentIntent" in response) {
-      setClientSecret(response.paymentIntent.data.client_secret);
-      setStripePublicKey(response.paymentIntent.data.public_key);
+      if (
+        ("paymentIntent" in response &&
+          response.paymentIntent.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);
    }
  };

@ -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}>
-              Pay now and <br /> skip trial
+            <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>
--- a/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx
+++ b/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({
-      token: token,
-      data: {
-        user: {
-          id: user.id,
-          email: user.email,
-          name: user.username || "",
-          sign: user.profile?.sign?.sign || "",
-          age: user.profile.age?.years || 0,
+    try {
+      setIsLoading(true);
+      const response = await api.createSinglePayment({
+        token: token,
+        data: {
+          user: {
+            id: user.id,
+            email: user.email,
+            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 (
-      ("paymentIntent" in response &&
-        response.paymentIntent.status === "paid") ||
-      ("payment" in response && response.payment.status === "paid")
-    ) {
-      goHome();
-    } else if ("paymentIntent" in response) {
-      setClientSecret(response.paymentIntent.data.client_secret);
-      setStripePublicKey(response.paymentIntent.data.public_key);
+      if (
+        ("paymentIntent" in response &&
+          response.paymentIntent.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);
    }
  };

@ -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
-            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"
+          {isLoading ? (
+            <Loader
+              color={LoaderColor.White}
+              className="discount-screen__loader"
            />
-          </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>