91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import styles from "./styles.module.css";
|
|
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
|
|
import { useEffect, useRef } from "react";
|
|
import { Outlet, useLocation, useSearchParams } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import PaymentModalV1 from "@/components/CompatibilityV2/components/PaymentModalV1";
|
|
import Header from "@/components/CompatibilityV2/components/Header";
|
|
|
|
const isBackButtonVisibleRoutes = [
|
|
routes.client.compatibilityV2Birthdate(),
|
|
routes.client.compatibilityV2PalmsInformation(),
|
|
routes.client.compatibilityV2WhatAspects(),
|
|
routes.client.compatibilityV2RelationshipStatus(),
|
|
routes.client.compatibilityV2ElementResonates(),
|
|
routes.client.compatibilityV2FavoriteColor(),
|
|
routes.client.compatibilityV2HeadOrHeart(),
|
|
routes.client.compatibilityV2RelateFollowing(),
|
|
routes.client.compatibilityV2LetScan(),
|
|
routes.client.compatibilityV2ScanInstruction(),
|
|
routes.client.compatibilityV2ScannedPhoto(),
|
|
routes.client.compatibilityV2Email(),
|
|
routes.client.compatibilityV2TrialChoice(),
|
|
routes.client.compatibilityV2TrialPayment(),
|
|
routes.client.compatibilityV2TryApp(),
|
|
routes.client.compatibilityV2Payment(),
|
|
];
|
|
|
|
function Layout() {
|
|
const dispatch = useDispatch();
|
|
const token = useSelector(selectors.selectToken);
|
|
const activeProductFromStore = useSelector(selectors.selectActiveProduct);
|
|
const location = useLocation();
|
|
const mainRef = useRef<HTMLDivElement>(null);
|
|
useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
|
|
location,
|
|
]);
|
|
const isShowPaymentModal = useSelector(
|
|
selectors.selectCompatibilityV2IsShowPaymentModalV1
|
|
);
|
|
|
|
const [searchParams] = useSearchParams();
|
|
const subscriptionStatus =
|
|
searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";
|
|
|
|
const getIsBackButtonVisible = () => {
|
|
for (const route of isBackButtonVisibleRoutes) {
|
|
if (location.pathname.includes(route)) return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(actions.compatibilityV2.setIsShowPaymentModalV1(false));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [location]);
|
|
|
|
return (
|
|
<>
|
|
<main className={`${styles.main} content`} ref={mainRef}>
|
|
<Header
|
|
className={styles.header}
|
|
classNameTitle={styles["header-title"]}
|
|
isBackButtonVisible={getIsBackButtonVisible()}
|
|
/>
|
|
{/* <Suspense fallback={<LoadingPage />}> */}
|
|
<section className={styles.page}>
|
|
<Outlet />
|
|
{!!token.length && !!activeProductFromStore && (
|
|
[
|
|
routes.client.compatibilityV2Payment(),
|
|
routes.client.compatibilityV2TrialPayment(),
|
|
].includes(location.pathname) &&
|
|
<PaymentModalV1
|
|
className={
|
|
isShowPaymentModal || subscriptionStatus === "subscribed"
|
|
? styles["payment-modal-active"]
|
|
: styles["payment-modal-hide"]
|
|
}
|
|
/>
|
|
)}
|
|
</section>
|
|
{/* </Suspense> */}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Layout;
|