67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { useApi } from "@/api";
|
|
import Loader from "@/components/Loader";
|
|
import { useEffect, useState } from "react";
|
|
import { Stripe, loadStripe } from "@stripe/stripe-js";
|
|
import { Elements } from "@stripe/react-stripe-js";
|
|
import CheckoutForm from "../PaymentPage/methods/Stripe/CheckoutForm";
|
|
import { useAuth } from "@/auth";
|
|
import styles from "./styles.module.css";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import SubPlanInformation from "../SubPlanInformation";
|
|
|
|
export function StripePage(): JSX.Element {
|
|
const api = useApi();
|
|
const { token } = useAuth();
|
|
const navigate = useNavigate();
|
|
const activeSubPlan = useSelector(selectors.selectActiveSubPlan);
|
|
const [stripePromise, setStripePromise] =
|
|
useState<Promise<Stripe | null> | null>(null);
|
|
const [clientSecret, setClientSecret] = useState<string>("");
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
if (!activeSubPlan) {
|
|
navigate(routes.client.priceList());
|
|
}
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const siteConfig = await api.getAppConfig({ bundleId: "auraweb" });
|
|
setStripePromise(loadStripe(siteConfig.data.stripe_public_key));
|
|
})();
|
|
}, [api]);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const { subscription_receipt } = await api.createSubscriptionReceipt({
|
|
token,
|
|
way: "stripe",
|
|
subscription_receipt: {
|
|
sub_plan_id: activeSubPlan?.id || "stripe.7",
|
|
},
|
|
});
|
|
const { client_secret } = subscription_receipt.data;
|
|
setClientSecret(client_secret);
|
|
setIsLoading(false);
|
|
})();
|
|
}, [api, token]);
|
|
|
|
return (
|
|
<div className={`${styles.page} page`}>
|
|
{isLoading ? (
|
|
<div className={styles["payment-loader"]}>
|
|
<Loader />
|
|
</div>
|
|
) : null}
|
|
{stripePromise && clientSecret && (
|
|
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
|
<CheckoutForm>
|
|
{activeSubPlan && <SubPlanInformation subPlan={activeSubPlan} />}
|
|
</CheckoutForm>
|
|
</Elements>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|