104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import { useDispatch, useSelector } from "react-redux";
|
|
import PaymentInformation from "../../components/PaymentInformation";
|
|
import styles from "./styles.module.scss";
|
|
import { actions, selectors } from "@/store";
|
|
import { getFormattedPrice } from "@/utils/price.utils";
|
|
import Guarantees from "../../components/Guarantees";
|
|
import Button from "../../components/Button";
|
|
import { useEffect } from "react";
|
|
import { useNavigate, useSearchParams } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { addCurrency, ELocalesPlacement } from "@/locales";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import Stars from "../../components/Stars";
|
|
import metricService, {
|
|
EGoals,
|
|
EMetrics,
|
|
} from "@/services/metric/metricService";
|
|
|
|
function Payment() {
|
|
const dispatch = useDispatch();
|
|
const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
|
|
const navigate = useNavigate();
|
|
const activeProductFromStore = useSelector(selectors.selectActiveProduct);
|
|
const currency = useSelector(selectors.selectCurrency);
|
|
const trialPrice = activeProductFromStore?.trialPrice || 0;
|
|
const fullPrice = activeProductFromStore?.price || 0;
|
|
const isShowPaymentModal = useSelector(
|
|
selectors.selectPalmistryIsShowPaymentModalV1
|
|
);
|
|
const [searchParams] = useSearchParams();
|
|
const subscriptionStatus =
|
|
searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";
|
|
|
|
const showModal = () => {
|
|
dispatch(actions.palmistry.setIsShowPaymentModalV1(true));
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (subscriptionStatus !== "subscribed") return;
|
|
metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
|
|
metricService.reachGoal(EGoals.PAYMENT_SUCCESS_PALMISTRY, [
|
|
EMetrics.YANDEX,
|
|
]);
|
|
if (activeProductFromStore) {
|
|
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
|
|
currency: "USD",
|
|
value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
|
|
});
|
|
}
|
|
const timer = setTimeout(() => {
|
|
navigate(routes.client.skipTrial());
|
|
}, 1500);
|
|
return () => clearTimeout(timer);
|
|
}, [activeProductFromStore, navigate, subscriptionStatus]);
|
|
|
|
return (
|
|
<>
|
|
<div className={styles["app-number-one"]}>
|
|
<p className={styles.text}>
|
|
{translate("/payment.app_number_one", {
|
|
color: <span>{translate("/payment.app_number_one_color")}</span>,
|
|
})}
|
|
</p>
|
|
<Stars />
|
|
</div>
|
|
<PaymentInformation />
|
|
<div className={styles["prices-description"]}>
|
|
{translate("/payment.will_be_charged", {
|
|
trialPrice: addCurrency(getFormattedPrice(trialPrice), currency),
|
|
fullPrice: (
|
|
<s>{addCurrency(getFormattedPrice(fullPrice), currency)}</s>
|
|
),
|
|
save: addCurrency(
|
|
getFormattedPrice(fullPrice - trialPrice),
|
|
currency
|
|
),
|
|
emailReminder: (
|
|
<b>{translate("/payment.will_be_charged_email_reminder")}</b>
|
|
),
|
|
trialInfo: (
|
|
<b>
|
|
{translate("/payment.will_be_charged_trial_info", {
|
|
trialDuration: activeProductFromStore?.trialDuration,
|
|
trialPrice: addCurrency(
|
|
getFormattedPrice(trialPrice),
|
|
currency
|
|
),
|
|
})}
|
|
</b>
|
|
),
|
|
})}
|
|
</div>
|
|
<Guarantees />
|
|
{!isShowPaymentModal && subscriptionStatus !== "subscribed" && (
|
|
<Button className={styles.button} onClick={showModal}>
|
|
{translate("/payment.get_personal_prediction")}
|
|
</Button>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Payment;
|