121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
import styles from "./styles.module.css";
|
|
import Modal from "@/components/Modal";
|
|
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 "./CheckoutForm";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import Title from "@/components/Title";
|
|
import ApplePayButton from "@/components/StripePage/ApplePayButton";
|
|
import SubPlanInformation from "@/components/SubPlanInformation";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
|
import { EPlacementKeys } from "@/api/resources/Paywall";
|
|
import { useMakePayment } from "@/hooks/payment/useMakePayment";
|
|
|
|
interface StripeModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
// onSuccess: (receipt: SubscriptionReceipts.SubscriptionReceipt) => void;
|
|
// onError: (error: Error) => void;
|
|
}
|
|
|
|
export function StripeModal({
|
|
open,
|
|
onClose,
|
|
}: // onSuccess,
|
|
// onError,
|
|
StripeModalProps): JSX.Element {
|
|
const navigate = useNavigate();
|
|
const email = useSelector(selectors.selectUser).email;
|
|
const [stripePromise, setStripePromise] =
|
|
useState<Promise<Stripe | null> | null>(null);
|
|
|
|
const { products } = usePaywall({
|
|
placementKey: EPlacementKeys["aura.placement.main"],
|
|
});
|
|
|
|
const activeProduct = useSelector(selectors.selectActiveProduct);
|
|
if (!activeProduct) {
|
|
navigate(routes.client.trialChoice());
|
|
}
|
|
|
|
const {
|
|
paymentIntentId,
|
|
clientSecret,
|
|
returnUrl: checkoutUrl,
|
|
paymentType,
|
|
publicKey,
|
|
isLoading,
|
|
error,
|
|
} = useMakePayment({
|
|
productId: activeProduct?._id || "",
|
|
});
|
|
|
|
if (checkoutUrl?.length) {
|
|
window.location.href = checkoutUrl;
|
|
}
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
if (!products?.length || !publicKey) return;
|
|
setStripePromise(loadStripe(publicKey));
|
|
const isActiveSubPlan = products.find(
|
|
(product) => product._id === activeProduct?._id
|
|
);
|
|
if (!activeProduct || !isActiveSubPlan) {
|
|
navigate(routes.client.priceList());
|
|
}
|
|
})();
|
|
}, [activeProduct, navigate, products, publicKey]);
|
|
|
|
const handleClose = () => {
|
|
onClose();
|
|
};
|
|
|
|
if (error?.length) {
|
|
return (
|
|
<div className={styles["payment-modal"]}>
|
|
<Title variant="h3" className={styles.title}>
|
|
Something went wrong
|
|
</Title>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Modal open={open} onClose={handleClose}>
|
|
{isLoading ? (
|
|
<div className={styles["payment-loader"]}>
|
|
<Loader />
|
|
</div>
|
|
) : null}
|
|
{!isLoading && (
|
|
<>
|
|
<Title variant="h2" className={styles.title}>
|
|
Choose payment method
|
|
</Title>
|
|
<p className={styles.email}>{email}</p>
|
|
</>
|
|
)}
|
|
{stripePromise && clientSecret && paymentIntentId && (
|
|
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
|
<ApplePayButton
|
|
activeProduct={activeProduct}
|
|
client_secret={clientSecret}
|
|
subscriptionReceiptId={paymentIntentId}
|
|
/>
|
|
{activeProduct && <SubPlanInformation product={activeProduct} />}
|
|
<CheckoutForm
|
|
confirmType={paymentType}
|
|
subscriptionReceiptId={paymentIntentId}
|
|
/>
|
|
</Elements>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|