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

import React from "react";

import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { Elements } from "@stripe/react-stripe-js";
import { Stripe, loadStripe } from "@stripe/stripe-js";

import "./discount-screen.css";

import routes from "@/routes";
import { useApi } from "@/api";
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`;

export default function DiscountScreen() {
  const navigate = useNavigate();
  const api = useApi();
  const { token, user } = useAuth();
  const { i18n } = useTranslations();
  const locale = i18n.language;

  const [price, setPrice] = React.useState("");
  const [isSuccess] = React.useState(false);
  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>("");
  const [isLoading, setIsLoading] = React.useState(false);

  const goPremiumBundle = () => {
    navigate(routes.client.palmistryPremiumBundle());
  };

  React.useEffect(() => {
    (async () => {
      const { sub_plans } = await api.getSubscriptionPlans({ locale });
      const plan = sub_plans.find((plan) => plan.id === "stripe.40");

      if (!plan?.price_cents) return;

      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
      );

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

  React.useEffect(() => {
    if (!stripePublicKey) return;

    setStripePromise(loadStripe(stripePublicKey));
  }, [stripePublicKey]);

  const buy = async () => {
    if (!user?.id || !product) return;

    const { _id, key } = product;
    const paymentInfo = {
      productId: _id,
      key,
    };

    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,
        },
      });

      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);
    }
  };

  return (
    <div className="discount-screen">
      <div className="discount-screen__header">
        <HeaderLogo />
      </div>

      <div className="discount-screen__content">
        <span className="discount-screen__title">
          Not planning on looking back?
        </span>

        <div className="discount-screen__blocks">
          <section className="discount-screen__block">
            <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-value">$0</span>
            </div>

            <div className="discount-screen__details">
              <span className="discount-screen__details-name">7-day trial</span>
              <span className="discount-screen__details-value">yes</span>
            </div>

            <button
              className="discount-screen__button"
              style={{ minHeight: "38px" }}
              onClick={goPremiumBundle}
            >
              Start trial
            </button>
          </section>

          <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>

            <div className="discount-screen__details">
              <span className="discount-screen__details-name">
                Total savings
              </span>
              <span className="discount-screen__details-value">$6.27</span>
            </div>

            <div className="discount-screen__details">
              <span className="discount-screen__details-name">3-day trial</span>
              <span className="discount-screen__details-value">no</span>
            </div>

            <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>
      </div>

      {stripePromise && clientSecret && (
        <div
          className={`discount-screen__widget${
            isSuccess ? " discount-screen__widget_success" : ""
          }`}
        >
          <Elements stripe={stripePromise} options={{ clientSecret }}>
            <CheckoutForm returnUrl={returnUrl} />
          </Elements>

          {isSuccess && (
            <div className="discount-screen__success">
              <svg
                className="discount-screen__success-icon"
                xmlns="http://www.w3.org/2000/svg"
                width="512"
                height="512"
                viewBox="0 0 52 52"
              >
                <path
                  fill="#4ec794"
                  d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329-16 18a1.997 1.997 0 0 1-2.745.233l-10-8a2 2 0 0 1 2.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 0 1 2.99 2.659z"
                />
              </svg>

              <div className="discount-screen__success-text">
                Payment success
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}