120 lines
3.5 KiB
TypeScript
120 lines
3.5 KiB
TypeScript
import { useTranslations } from "@/hooks/translations";
|
|
import styles from "./styles.module.scss";
|
|
import { addCurrency, ELocalesPlacement } from "@/locales";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import Loader from "@/components/Loader";
|
|
import Title from "@/components/Title";
|
|
import CheckoutForm from "../CheckoutForm";
|
|
import PaymentMethodsChoice from "../../PaymentMethodsChoice";
|
|
import { EPaymentMethod } from "@/data/paymentMethods";
|
|
import { IFunnelPaymentVariant } from "@/api/resources/Session";
|
|
|
|
const getPrice = (product: IFunnelPaymentVariant | null) => {
|
|
if (!product) {
|
|
return 0;
|
|
}
|
|
return (product.trialPrice || 0) / 100;
|
|
};
|
|
|
|
interface IPaymentFormProps {
|
|
isSinglePayment?: boolean;
|
|
className?: string;
|
|
funnel: ELocalesPlacement;
|
|
paymentPlacement: string;
|
|
trialInterval: number;
|
|
onPaymentError?: (error?: string | null) => void;
|
|
onPaymentSuccess?: () => void;
|
|
onModalClosed?: () => void;
|
|
}
|
|
|
|
function PaymentForm({
|
|
isSinglePayment = false,
|
|
className,
|
|
funnel,
|
|
paymentPlacement,
|
|
trialInterval,
|
|
onPaymentError,
|
|
onPaymentSuccess,
|
|
onModalClosed,
|
|
}: IPaymentFormProps) {
|
|
const { translate } = useTranslations(ELocalesPlacement.V1);
|
|
const currency = useSelector(selectors.selectCurrency);
|
|
const activeProduct = useSelector(selectors.selectActiveProduct);
|
|
|
|
const isLoading = false;
|
|
|
|
const paymentMethodsButtons = [
|
|
{
|
|
id: EPaymentMethod.CREDIT_CARD,
|
|
icon: "/payment-form/credit-card.svg",
|
|
title: translate("payment_modal.credit_card"),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{isLoading && (
|
|
<div className={styles["payment-modal"]}>
|
|
<div className={styles["payment-loader"]}>
|
|
<Loader />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div
|
|
className={`${styles["payment-modal"]} ${
|
|
isLoading ? styles.hide : ""
|
|
} ${className}`}
|
|
>
|
|
{!isSinglePayment && (
|
|
<Title variant="h3" className={styles.title}>
|
|
{translate("payment_modal.title")}
|
|
</Title>
|
|
)}
|
|
<PaymentMethodsChoice
|
|
paymentMethods={paymentMethodsButtons}
|
|
selectedPaymentMethod={paymentMethodsButtons[0].id}
|
|
onSelectPaymentMethod={() => {}}
|
|
/>
|
|
{!isSinglePayment && activeProduct && (
|
|
<div>
|
|
<p className={styles["sub-plan-description"]}>
|
|
{translate("payment_modal.description", {
|
|
priceForDays: (
|
|
<b>
|
|
{translate("payment_modal.price_for_days", {
|
|
trialPrice: addCurrency(
|
|
getPrice(activeProduct),
|
|
currency
|
|
),
|
|
trialDuration: trialInterval,
|
|
})}
|
|
</b>
|
|
),
|
|
emailReminder: (
|
|
<b>{translate("payment_modal.email_reminder")}</b>
|
|
),
|
|
})}
|
|
</p>
|
|
</div>
|
|
)}
|
|
<div className={styles["payment-method-container"]}>
|
|
{!!activeProduct && (
|
|
<CheckoutForm
|
|
funnel={funnel}
|
|
paymentPlacement={paymentPlacement}
|
|
activeProduct={activeProduct}
|
|
onError={onPaymentError}
|
|
onSuccess={onPaymentSuccess}
|
|
onModalClosed={onModalClosed}
|
|
/>
|
|
)}
|
|
</div>
|
|
<p className={styles.address}>{translate("payment_modal.address")}</p>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default PaymentForm;
|