124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
import { useDispatch, useSelector } from "react-redux";
|
|
import EmailSubstrate from "../../components/EmailSubstrate";
|
|
import styles from "./styles.module.scss";
|
|
import { actions, selectors } from "@/store";
|
|
// import Title from "@/components/Title";
|
|
import PriceList from "@/components/pages/ABDesign/v1/components/PriceList";
|
|
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
|
import { EPlacementKeys } from "@/api/resources/Paywall";
|
|
import {
|
|
ELocalesPlacement,
|
|
getDefaultLocaleByLanguage,
|
|
language,
|
|
} from "@/locales";
|
|
import { useEffect, useState } from "react";
|
|
import Button from "../../components/Button";
|
|
import routes from "@/routes";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Loader from "@/components/Loader";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
// import { useMetricABFlags } from "@/services/metric/metricService";
|
|
import { getLongText } from "./abText";
|
|
import metricService, { EGoals, EMetrics, useMetricABFlags } from "@/services/metric/metricService";
|
|
import TrialChoiceV1 from "./v1";
|
|
|
|
function TrialChoice() {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const { products, isLoading, currency, getText } = usePaywall({
|
|
placementKey: EPlacementKeys["aura.placement.compatibility.v2"],
|
|
localesPlacement: ELocalesPlacement.CompatibilityV2,
|
|
});
|
|
|
|
const locale = getDefaultLocaleByLanguage(language);
|
|
|
|
const { flags, ready } = useMetricABFlags();
|
|
const trialChoicePageType = flags?.trialChoicePageType?.[0];
|
|
// const trialChoicePageType = "v1";
|
|
|
|
// const { flags } = useMetricABFlags();
|
|
// const isLongText = flags?.text?.[0] === "on";
|
|
|
|
const [isDisabled, setIsDisabled] = useState(true);
|
|
|
|
const selectedPrice = useSelector(selectors.selectSelectedPrice);
|
|
const email = useSelector(selectors.selectEmail);
|
|
const homeConfig = useSelector(selectors.selectHome);
|
|
|
|
const handlePriceItem = () => {
|
|
metricService.reachGoal(EGoals.SELECT_TRIAL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
|
|
metricService.reachGoal(EGoals.AURA_SELECT_TRIAL, [EMetrics.KLAVIYO]);
|
|
setIsDisabled(false);
|
|
};
|
|
|
|
const handleNext = () => {
|
|
if (isDisabled) {
|
|
return;
|
|
}
|
|
dispatch(
|
|
actions.siteConfig.update({
|
|
home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: false },
|
|
})
|
|
);
|
|
navigate(routes.client.compatibilityV2TrialPayment());
|
|
};
|
|
|
|
useEffect(() => {
|
|
metricService.reachGoal(EGoals.TRIAL_CHOICE_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
|
|
metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, [EMetrics.KLAVIYO]);
|
|
}, []);
|
|
|
|
if (!ready) {
|
|
return (
|
|
<div className={styles.container}>
|
|
<Loader className={styles.loader} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (trialChoicePageType === "v1") {
|
|
return <TrialChoiceV1 />;
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{!isLoading && (
|
|
<>
|
|
<EmailSubstrate className={styles["email-substrate"]} email={email} />
|
|
{/* {!isLongText && (
|
|
<Title className={styles.title} variant="h2">
|
|
{getText("text.0")}
|
|
</Title>
|
|
)} */}
|
|
<p className={styles.text}>{getLongText(locale)}</p>
|
|
|
|
<div className={styles["price-container"]}>
|
|
<PriceList
|
|
products={products}
|
|
activeItem={selectedPrice}
|
|
classNameItem={styles["price-item"]}
|
|
classNameItemActive={`${styles["price-item-active"]}`}
|
|
classNamePricesContainer={styles["prices-container"]}
|
|
currency={currency}
|
|
click={handlePriceItem}
|
|
/>
|
|
<p className={styles["auxiliary-text"]}>{getText("text.1")}</p>
|
|
</div>
|
|
|
|
<Button
|
|
className={styles.button}
|
|
disabled={isDisabled}
|
|
onClick={handleNext}
|
|
>
|
|
{translate("next")}
|
|
</Button>
|
|
</>
|
|
)}
|
|
{isLoading && <Loader className={styles.loader} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TrialChoice;
|