102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
import Title from "../Title";
|
|
import styles from "./styles.module.css";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { EPathsFromHome } from "@/store/siteConfig";
|
|
|
|
function UserCallbacksPage(): JSX.Element {
|
|
const { translate } = useTranslations();
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const statChanges = useSelector(selectors.selectUserCallbacksPrevStat);
|
|
const text = useSelector(selectors.selectUserCallbacksDescription);
|
|
const homeConfig = useSelector(selectors.selectHome);
|
|
const showNavbarFooter = homeConfig.isShowNavbar;
|
|
|
|
const handleNext = () => {
|
|
if (homeConfig.pathFromHome === EPathsFromHome.compatibility) {
|
|
dispatch(
|
|
actions.siteConfig.update({
|
|
home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: true },
|
|
})
|
|
);
|
|
return navigate(routes.client.home());
|
|
}
|
|
if (homeConfig.pathFromHome === EPathsFromHome.breath) {
|
|
return navigate(routes.client.compatibility());
|
|
}
|
|
if (homeConfig.pathFromHome === EPathsFromHome.navbar) {
|
|
return navigate(routes.client.breath());
|
|
}
|
|
};
|
|
|
|
const getPaddingBottomPage = () => {
|
|
if (
|
|
homeConfig.pathFromHome === EPathsFromHome.compatibility &&
|
|
showNavbarFooter
|
|
)
|
|
return "246px";
|
|
if (showNavbarFooter) return "164px";
|
|
return "108px";
|
|
};
|
|
|
|
return (
|
|
<section
|
|
className={`${styles.page} page`}
|
|
style={{ paddingBottom: getPaddingBottomPage() }}
|
|
>
|
|
{<div className={styles.cross} onClick={handleNext}></div>}
|
|
<div className={styles["title-container"]}>
|
|
<Title variant="h3" className={styles.percent}>
|
|
<>
|
|
<p>Well done!</p>
|
|
<p>Your results has changes...</p>
|
|
</>
|
|
</Title>
|
|
</div>
|
|
<div className={styles["result-container"]}>
|
|
<div className={styles["result-container__values"]}>
|
|
{statChanges.map((change, index) => (
|
|
<div className={styles["result-container__value"]} key={index}>
|
|
<span className={styles["result-container__value-label"]}>
|
|
{change.label}
|
|
</span>
|
|
<span
|
|
style={{ color: change.value > 0 ? "#00ea00" : "red" }}
|
|
className={styles["result-container__value-value"]}
|
|
>
|
|
{change.value > 0 ? "+" : ""}
|
|
{(change.value * 100).toFixed()}%
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className={styles["result-container__text"]}>{text}</p>
|
|
</div>
|
|
{homeConfig.pathFromHome === EPathsFromHome.breath && (
|
|
<button
|
|
className={`${styles.button} ${styles["button-red"]}`}
|
|
onClick={handleNext}
|
|
style={{ bottom: showNavbarFooter ? "88px" : "24px" }}
|
|
>
|
|
{translate("aura.breath_compatibility.button")}
|
|
</button>
|
|
)}
|
|
{homeConfig.pathFromHome === EPathsFromHome.compatibility && (
|
|
<button
|
|
className={styles.button}
|
|
onClick={handleNext}
|
|
style={{ bottom: showNavbarFooter ? "88px" : "24px" }}
|
|
>
|
|
{translate("use-all-power")}
|
|
</button>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default UserCallbacksPage;
|