58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import routes from "@/routes";
|
|
import styles from "./styles.module.css";
|
|
import Title from "@/components/Title";
|
|
import MainButton from "@/components/MainButton";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import { useEffect } from "react";
|
|
import metricService, {
|
|
EGoals,
|
|
EMetrics,
|
|
} from "@/services/metric/metricService";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
|
|
function PaymentSuccessPage(): JSX.Element {
|
|
const { translate } = useTranslations(ELocalesPlacement.V1);
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const currentProduct = useSelector(selectors.selectActiveProduct);
|
|
|
|
const handleNext = () => {
|
|
dispatch(actions.status.update("subscribed"));
|
|
navigate(routes.client.addReportV1());
|
|
};
|
|
|
|
useEffect(() => {
|
|
metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
|
|
metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
|
|
currency: "USD",
|
|
value: ((currentProduct?.trialPrice || 100) / 100).toFixed(2),
|
|
});
|
|
}, [currentProduct?.trialPrice]);
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<img
|
|
src="/SuccessIcon.webp"
|
|
alt="Success Icon"
|
|
style={{ minHeight: "98px" }}
|
|
/>
|
|
<div className={styles.text}>
|
|
<Title variant="h1">{translate("/payment/success.title")}</Title>
|
|
<p>{translate("/payment/success.description")}</p>
|
|
</div>
|
|
<MainButton
|
|
className={styles.button}
|
|
onClick={handleNext}
|
|
id="success-payment"
|
|
>
|
|
{translate("next")}
|
|
</MainButton>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default PaymentSuccessPage;
|