98 lines
4.0 KiB
TypeScript
98 lines
4.0 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 PaymentMethodsChoice from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentMethodsChoice";
|
|
import { paymentMethods } from "@/data/paymentMethods";
|
|
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
|
|
import SecurityPayments from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/SecurityPayments";
|
|
import CheckoutForm from "../CheckoutForm";
|
|
|
|
const paymentMethodsButtons = paymentMethods(null);
|
|
|
|
const getPrice = (product: IPaywallProduct | null) => {
|
|
if (!product) {
|
|
return 0;
|
|
}
|
|
return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
|
|
}
|
|
|
|
interface IPaymentFormProps {
|
|
isSinglePayment?: boolean;
|
|
className?: string;
|
|
placementKey: EPlacementKeys;
|
|
onPaymentError?: () => void;
|
|
onPaymentSuccess?: () => void;
|
|
onModalClosed?: () => void;
|
|
}
|
|
|
|
function PaymentForm({ isSinglePayment = false, className, placementKey, onPaymentError, onPaymentSuccess, onModalClosed }: IPaymentFormProps) {
|
|
const { translate } = useTranslations(ELocalesPlacement.V1);
|
|
const currency = useSelector(selectors.selectCurrency);
|
|
const activeProduct = useSelector(selectors.selectActiveProduct);
|
|
|
|
const isLoading = false;
|
|
|
|
|
|
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: activeProduct?.trialDuration,
|
|
})}
|
|
</b>
|
|
),
|
|
emailReminder: (
|
|
<b>{translate("payment_modal.email_reminder")}</b>
|
|
),
|
|
})}
|
|
</p>
|
|
</div>
|
|
)}
|
|
<div className={styles["payment-method-container"]}>
|
|
{!!activeProduct && <CheckoutForm
|
|
placementKey={placementKey}
|
|
activeProduct={activeProduct}
|
|
onError={onPaymentError}
|
|
onSuccess={onPaymentSuccess}
|
|
onModalClosed={onModalClosed}
|
|
/>}
|
|
</div>
|
|
<SecurityPayments />
|
|
<p className={styles.address}>{translate("payment_modal.address")}</p>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PaymentForm |