96 lines
3.2 KiB
TypeScript
96 lines
3.2 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 PriceList from "@/components/pages/ABDesign/v1/components/PriceList";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import Button from "../../components/Button";
|
|
import routes from "@/routes";
|
|
import { useNavigate, useOutletContext } from "react-router-dom";
|
|
import Loader from "@/components/Loader";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { IOutletContext } from "@/routerComponents/Compatibility/v2/LayoutPersonalVideo";
|
|
import { useFunnel } from "@/hooks/funnel/useFunnel";
|
|
|
|
function TrialChoiceVideo() {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const { products, isPending, currency, getProperty } = useFunnel({
|
|
funnel: ELocalesPlacement.CompatibilityV2,
|
|
paymentPlacement: "main"
|
|
});
|
|
|
|
const [isDisabled, setIsDisabled] = useState(true);
|
|
|
|
const selectedPrice = useSelector(selectors.selectSelectedPrice);
|
|
const email = useSelector(selectors.selectEmail);
|
|
const homeConfig = useSelector(selectors.selectHome);
|
|
|
|
const containerVideoRef = useRef<HTMLDivElement>(null);
|
|
|
|
const { containerVideoRef: videoRef, isVisibleElements } =
|
|
useOutletContext<IOutletContext>();
|
|
|
|
const handlePriceItem = () => {
|
|
setIsDisabled(false);
|
|
};
|
|
|
|
const handleNext = () => {
|
|
if (isDisabled) {
|
|
return;
|
|
}
|
|
dispatch(
|
|
actions.siteConfig.update({
|
|
home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: false },
|
|
})
|
|
);
|
|
navigate(routes.client.compatibilityV2TrialPayment());
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!containerVideoRef.current || !videoRef.current) return;
|
|
containerVideoRef.current?.appendChild(videoRef.current);
|
|
videoRef.current.classList.add(styles["personal-video"]);
|
|
}, [videoRef]);
|
|
|
|
useEffect(() => {
|
|
dispatch(actions.personalVideo.updateIsVideoPlaying(true));
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div ref={containerVideoRef} />
|
|
{!isPending && isVisibleElements && (
|
|
<>
|
|
<EmailSubstrate className={styles["email-substrate"]} email={email} />
|
|
<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"]}>{translate(String(getProperty("text.1")?.value))}</p>
|
|
</div>
|
|
|
|
<Button
|
|
className={styles.button}
|
|
disabled={isDisabled}
|
|
onClick={handleNext}
|
|
>
|
|
{translate("next")}
|
|
</Button>
|
|
</>
|
|
)}
|
|
{isPending && <Loader className={styles.loader} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TrialChoiceVideo;
|