Merge branch 'fix/single-payment' into 'develop'

add key of product See merge request witapp/aura-webapp!72
2024-04-05 19:59:02 +00:00 · 2024-04-05 19:59:02 +00:00 · 261417649d
commit 261417649d
parent c2c1f5a31c e2a230af88
8 changed files with 138 additions and 55 deletions
--- a/src/api/resources/SinglePayment.ts
+++ b/src/api/resources/SinglePayment.ts
@ -7,6 +7,11 @@ interface Payload {

 export type PayloadGet = Payload;

+export interface IPaymentInfo {
+  productId: string;
+  key: string;
+}
+
 export interface PayloadPost extends Payload {
  data: {
    user: {
@ -21,9 +26,7 @@ export interface PayloadPost extends Payload {
      sign: string | null;
      age: number | null;
    };
-    paymentInfo: {
-      productId: string;
-    };
+    paymentInfo: IPaymentInfo;
    return_url: string;
  };
 }
--- a/src/components/pages/AdditionalPurchases/pages/AddConsultation/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/AddConsultation/index.tsx
@ -48,9 +48,14 @@ function AddConsultationPage() {
  const handleClick = async () => {
    if (!userFromStore || !currentProduct) return;
    setIsLoading(true);
+    const { productId, key } = currentProduct;
+    const paymentInfo = {
+      productId,
+      key,
+    };
    const paymentIntent = await createSinglePayment(
      userFromStore,
-      currentProduct.productId,
+      paymentInfo,
      tokenFromStore,
      userFromStore.email,
      userFromStore.profile.full_name,
--- a/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx
@ -53,9 +53,14 @@ function AddReportPage() {
    const currentProduct = getCurrentProduct(activeOffer?.productKey);
    if (!currentProduct) return;
    setIsLoading(true);
+    const { productId, key } = currentProduct;
+    const paymentInfo = {
+      productId,
+      key,
+    };
    const paymentIntent = await createSinglePayment(
      userFromStore,
-      currentProduct.productId,
+      paymentInfo,
      tokenFromStore,
      userFromStore.email,
      userFromStore.profile.full_name,
--- a/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx
@ -63,9 +63,14 @@ function UnlimitedReadingsPage() {
  const handleClick = async () => {
    if (!userFromStore || !currentProduct) return;
    setIsLoading(true);
+    const { productId, key } = currentProduct;
+    const paymentInfo = {
+      productId,
+      key,
+    };
    const paymentIntent = await createSinglePayment(
      userFromStore,
-      currentProduct.productId,
+      paymentInfo,
      tokenFromStore,
      userFromStore.email,
      userFromStore.profile.full_name,
--- a/src/components/pages/PaymentWithEmailPage/index.tsx
+++ b/src/components/pages/PaymentWithEmailPage/index.tsx
@ -138,10 +138,14 @@ function PaymentWithEmailPage() {
    }
    setCurrentProduct(currentProduct);

-    const { productId } = currentProduct;
+    const { productId, key } = currentProduct;
+    const paymentInfo = {
+      productId,
+      key,
+    };
    const paymentIntent = await createSinglePayment(
      user,
-      productId,
+      paymentInfo,
      token,
      email,
      name,
@ -171,10 +175,14 @@ function PaymentWithEmailPage() {
    }
    setCurrentProduct(currentProduct);

-    const { productId } = currentProduct;
+    const { productId, key } = currentProduct;
+    const paymentInfo = {
+      productId,
+      key,
+    };
    const paymentIntent = await createSinglePayment(
      userFromStore,
-      productId,
+      paymentInfo,
      tokenFromStore,
      userFromStore.email,
      userFromStore.profile.full_name,
--- a/src/components/palmistry/discount-screen/discount-screen.tsx
+++ b/src/components/palmistry/discount-screen/discount-screen.tsx
@ -1,17 +1,18 @@
 import React from "react";

-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Elements } from "@stripe/react-stripe-js";
 import { Stripe, loadStripe } from "@stripe/stripe-js";

-import './discount-screen.css';
+import "./discount-screen.css";

-import routes from '@/routes';
+import routes from "@/routes";
 import { useApi } from "@/api";
 import { useAuth } from "@/auth";
-import HeaderLogo from '@/components/palmistry/header-logo/header-logo';
+import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
 import CheckoutForm from "@/components/PaymentPage/methods/Stripe/CheckoutForm";
+import { ResponseGet } from "@/api/resources/SinglePayment";

 const currentProductKey = "skip.trial.subscription.aura";
 const returnUrl = `${window.location.host}/palmistry/premium-bundle`;
@ -23,10 +24,11 @@ export default function DiscountScreen() {
  const { i18n } = useTranslation();
  const locale = i18n.language;

-  const [price, setPrice] = React.useState('');
+  const [price, setPrice] = React.useState("");
  const [isSuccess] = React.useState(false);
-  const [stripePromise, setStripePromise] = React.useState<Promise<Stripe | null> | null>(null);
-  const [productId, setProductId] = React.useState('');
+  const [stripePromise, setStripePromise] =
+    React.useState<Promise<Stripe | null> | null>(null);
+  const [product, setProduct] = React.useState<ResponseGet>();
  const [clientSecret, setClientSecret] = React.useState<string | null>(null);
  const [stripePublicKey, setStripePublicKey] = React.useState<string>("");

@ -43,18 +45,22 @@ export default function DiscountScreen() {

      setPrice((plan?.price_cents / 100).toFixed(2));
    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  React.useEffect(() => {
    (async () => {
      const products = await api.getSinglePaymentProducts({ token });

-      const product = products.find((product) => product.key === currentProductKey);
+      const product = products.find(
+        (product) => product.key === currentProductKey
+      );

      if (product) {
-        setProductId(product.productId);
+        setProduct(product);
      }
    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  React.useEffect(() => {
@ -64,7 +70,13 @@ export default function DiscountScreen() {
  }, [stripePublicKey]);

  const buy = async () => {
-    if (!user?.id) return;
+    if (!user?.id || !product) return;
+
+    const { productId, key } = product;
+    const paymentInfo = {
+      productId,
+      key,
+    };

    const response = await api.createSinglePayment({
      token: token,
@ -80,16 +92,18 @@ export default function DiscountScreen() {
          sign: "",
          age: 0,
        },
-        paymentInfo: {
-          productId,
-        },
+        paymentInfo,
        return_url: returnUrl,
      },
    });

-    if ('paymentIntent' in response && response.paymentIntent.status === "paid" || 'payment' in response && response.payment.status === "paid") {
+    if (
+      ("paymentIntent" in response &&
+        response.paymentIntent.status === "paid") ||
+      ("payment" in response && response.payment.status === "paid")
+    ) {
      goPremiumBundle();
-    } else if ('paymentIntent' in response) {
+    } else if ("paymentIntent" in response) {
      setClientSecret(response.paymentIntent.data.client_secret);
      setStripePublicKey(response.paymentIntent.data.public_key);
    }
@ -108,10 +122,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</span>
+            <span className="discount-screen__price-block">
+              €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-name">
+                Total savings
+              </span>
              <span className="discount-screen__details-value">€0</span>
            </div>

@ -120,7 +138,11 @@ export default function DiscountScreen() {
              <span className="discount-screen__details-value">yes</span>
            </div>

-            <button className="discount-screen__button" style={{ minHeight: '38px' }} onClick={goPremiumBundle}>
+            <button
+              className="discount-screen__button"
+              style={{ minHeight: "38px" }}
+              onClick={goPremiumBundle}
+            >
              Start trial
            </button>
          </section>
@ -128,10 +150,14 @@ export default function DiscountScreen() {
          <section className="discount-screen__block">
            <div className="discount-screen__header-block">save 33%</div>

-            <span className="discount-screen__price-block">€{price} for <br /> 1-week plan</span>
+            <span className="discount-screen__price-block">
+              €{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-name">
+                Total savings
+              </span>
              <span className="discount-screen__details-value">€6.27</span>
            </div>

@ -148,7 +174,11 @@ export default function DiscountScreen() {
      </div>

      {stripePromise && clientSecret && (
-        <div className={`discount-screen__widget${isSuccess ? " discount-screen__widget_success" : ""}`}>
+        <div
+          className={`discount-screen__widget${
+            isSuccess ? " discount-screen__widget_success" : ""
+          }`}
+        >
          <Elements stripe={stripePromise} options={{ clientSecret }}>
            <CheckoutForm returnUrl={returnUrl} />
          </Elements>
@ -168,7 +198,9 @@ export default function DiscountScreen() {
                />
              </svg>

-              <div className="discount-screen__success-text">Payment success</div>
+              <div className="discount-screen__success-text">
+                Payment success
+              </div>
            </div>
          )}
        </div>
--- a/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx
+++ b/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx
@ -1,16 +1,17 @@
 import React from "react";

-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
 import { Elements } from "@stripe/react-stripe-js";
 import { Stripe, loadStripe } from "@stripe/stripe-js";

-import './premium-bundle-screen.css';
+import "./premium-bundle-screen.css";

-import routes from '@/routes';
-import HeaderLogo from '@/components/palmistry/header-logo/header-logo';
-import { useApi } from '@/api';
+import routes from "@/routes";
+import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
+import { useApi } from "@/api";
 import { useAuth } from "@/auth";
 import CheckoutForm from "@/components/PaymentPage/methods/Stripe/CheckoutForm";
+import { ResponseGet } from "@/api/resources/SinglePayment";

 const currentProductKey = "premium.bundle.aura";
 const returnUrl = window.location.host;
@ -20,8 +21,9 @@ export default function PremiumBundleScreen() {
  const { token, user } = useAuth();
  const api = useApi();

-  const [stripePromise, setStripePromise] = React.useState<Promise<Stripe | null> | null>(null);
-  const [productId, setProductId] = React.useState('');
+  const [stripePromise, setStripePromise] =
+    React.useState<Promise<Stripe | null> | null>(null);
+  const [product, setProduct] = React.useState<ResponseGet>();
  const [isSuccess] = React.useState(false);
  const [clientSecret, setClientSecret] = React.useState<string | null>(null);
  const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
@ -30,12 +32,15 @@ export default function PremiumBundleScreen() {
    (async () => {
      const products = await api.getSinglePaymentProducts({ token });

-      const product = products.find((product) => product.key === currentProductKey);
+      const product = products.find(
+        (product) => product.key === currentProductKey
+      );

      if (product) {
-        setProductId(product.productId);
+        setProduct(product);
      }
    })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  React.useEffect(() => {
@ -45,7 +50,9 @@ export default function PremiumBundleScreen() {
  }, [stripePublicKey]);

  const buy = async () => {
-    if (!user?.id) return;
+    if (!user?.id || !product) return;
+
+    const { productId, key } = product;

    const response = await api.createSinglePayment({
      token: token,
@ -63,14 +70,19 @@ export default function PremiumBundleScreen() {
        },
        paymentInfo: {
          productId,
+          key,
        },
        return_url: returnUrl,
      },
    });

-    if ('paymentIntent' in response && response.paymentIntent.status === "paid" || 'payment' in response && response.payment.status === "paid") {
+    if (
+      ("paymentIntent" in response &&
+        response.paymentIntent.status === "paid") ||
+      ("payment" in response && response.payment.status === "paid")
+    ) {
      goHome();
-    } else if ('paymentIntent' in response) {
+    } else if ("paymentIntent" in response) {
      setClientSecret(response.paymentIntent.data.client_secret);
      setStripePublicKey(response.paymentIntent.data.public_key);
    }
@ -87,9 +99,13 @@ export default function PremiumBundleScreen() {
      </div>

      <div className="premium-bundle-screen__content">
-        <button className="premium-bundle-screen__button-skip" onClick={goHome}>Skip &gt;</button>
+        <button className="premium-bundle-screen__button-skip" onClick={goHome}>
+          Skip &gt;
+        </button>

-        <span className="premium-bundle-screen__title">Get extra insights with our Premium Bundle</span>
+        <span className="premium-bundle-screen__title">
+          Get extra insights with our Premium Bundle
+        </span>

        <span className="premium-bundle-screen__subtitle">
          Exclusive offer: recommended for get more insights about what future
@ -97,7 +113,9 @@ export default function PremiumBundleScreen() {
        </span>

        <div className="premium-bundle-screen__block-description">
-          <span className="premium-bundle-screen__list-title">What your Premium Bundle will include:</span>
+          <span className="premium-bundle-screen__list-title">
+            What your Premium Bundle will include:
+          </span>

          <div className="premium-bundle-screen__item">
            <div className="premium-bundle-screen__icon">
@ -180,7 +198,9 @@ export default function PremiumBundleScreen() {
          </div>

          <div className="premium-bundle-screen__subsection">
-            <span className="premium-bundle-screen__one-time-price">One-time price of €19!</span>
+            <span className="premium-bundle-screen__one-time-price">
+              One-time price of €19!
+            </span>
            <p>Original price is €45. Save 58%!</p>
          </div>

@ -202,7 +222,7 @@ export default function PremiumBundleScreen() {
            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 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"
@ -214,7 +234,11 @@ export default function PremiumBundleScreen() {
      </div>

      {stripePromise && clientSecret && (
-        <div className={`discount-screen__widget${isSuccess ? " discount-screen__widget_success" : ""}`}>
+        <div
+          className={`discount-screen__widget${
+            isSuccess ? " discount-screen__widget_success" : ""
+          }`}
+        >
          <Elements stripe={stripePromise} options={{ clientSecret }}>
            <CheckoutForm returnUrl={returnUrl} />
          </Elements>
@ -234,7 +258,9 @@ export default function PremiumBundleScreen() {
                />
              </svg>

-              <div className="discount-screen__success-text">Payment success</div>
+              <div className="discount-screen__success-text">
+                Payment success
+              </div>
            </div>
          )}
        </div>
--- a/src/services/singlePayment/index.ts
+++ b/src/services/singlePayment/index.ts
@ -1,10 +1,11 @@
 import { User } from "@/api/resources/User";
 import { getZodiacSignByDate } from "../zodiac-sign";
 import { ApiContextValue } from "@/api";
+import { IPaymentInfo } from "@/api/resources/SinglePayment";

 export const createSinglePayment = async (
  user: User,
-  productId: string,
+  paymentInfo: IPaymentInfo,
  token: string,
  email: string,
  name: string | null,
@ -28,9 +29,7 @@ export const createSinglePayment = async (
        sign: "partner_cancer",
        age: 26,
      },
-      paymentInfo: {
-        productId,
-      },
+      paymentInfo,
      return_url: returnUrl,
    },
  });