game_web_uk/src/layout/Layout.jsx

import ScrollToTop from "@components/ScrollToTop";
import Sidebar from "@layout/Sidebar";
import Navbar from "@layout/Navbar";
import BottomNav from "@layout/BottomNav";
import AppContainer from "@layout/AppContainer";
import React, { Suspense, useCallback, useEffect, useRef } from "react";
import LoadingScreen from "@components/LoadingScreen";
import { useLocation, useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { getFreeWithdraw, isFullRoute, isLogined, routesIn, routesPop, updateGameRoute } from "@features/mainSlice";
import { preventDefault } from "@utils/helpers";
import { useThemeProvider } from "@contexts/themeContext";
import { CBrowserRouter, CHashRouter } from "@layout/Routes";
import GameSearchPanel from "@layout/GameSearchPanel";
import WLangSelect from "@widgets/WLangSelect";
import MsgBox from "@components/MsgBox";
// import WDPassPrompt from "@widgets/WWithdraw/PassPrompt/WDPassPrompt";
import WHallWheel from "@widgets/WCashWheel/WHallWheel/WHallWheel";
import LoadingIn from "@components/Loading/LoadingIn";
// import WDPassBox from "@widgets/WWithdraw/PassBox/WDPassBox";
import { ROUTE_PATH, ROUTE_TYPE_FULL, ROUTE_TYPE_IN } from "@constants/routes";
import DropCoins from "@components/DropCoins";
import useEdgeGesture from "@hooks/useEdgeGesture";
import MailNew from "@components/MailNew";
import WBindPhone from "@widgets/WBindPhone";
import WInsBrowserGuide from "@widgets/WInsBrowserGuide";
import WProtect from "@widgets/WProtect";
import LoadingCircular from "@components/Loading/LoadingCircular";
import WFirstPay from "@widgets/WFirstPay";
// import WSaveAccount from "@widgets/WSaveAccount";
// import WDepositInfo from "@widgets/WDeposit/WPayInfo/WDepositInfo";
import WNewUserPrompt from "@widgets/WNewUserPrompt";
import WFirstCashoutTips from "@widgets/WFirstCashoutTips";
import WWithdrawLimit from "@widgets/WWithdrawLimit";
import WWithdrawMission from "@widgets/WWithdrawMission";
import WCheckIn from "@widgets/WCheckIn";
import WMusicSettings from "@widgets/WMusicSettings";
import TopDownload from "@widgets/TopDownload";
import WOrientation from "@widgets/WOrientation";
import { useWithdrawMission } from "@contexts/withdrawMissionContext";
import WExclusiveGift from "@widgets/WExclusiveGift";
// import WComeBackBonus from "@widgets/WComeBackBonus";
// import WComeBackWithdraw from "@widgets/WComeBackWithdraw";
import WRecallGiftTips from "@widgets/WRecallGiftTips";
import WRecommendedGames from "@widgets/WRecommendedGames";
import WCommonTextTip from "@widgets/WCommonTextTip";
import WHolidaysAct from "@widgets/WHolidaysAct";
import WFreeBonusGift from "@widgets/WFreeBonusGift";
import WSecurityScan from "@widgets/WInstallBox/WSecurityScan";
import WQuickInstall from "@widgets/WInstallBox/WQuickInstall";
import WDownloadPrompt from "@widgets/WInstallBox/WDownloadPrompt";
import WPopPwaBonus from "@widgets/WInstallBox/WPopPwaBonus";
import WDailyGift from "@widgets/WDailyGift";
import WAllBalance from "@widgets/WAllBalance";
import WWithdrawHelp from "@widgets/WWithdrawHelp";
import WBalanceRule from "@widgets/WBalanceRule";
import WEditUserInfo from "@widgets/WEditUserInfo";
import WEditNickName from "@widgets/WEditNickName";
import WDetailsPopup from "@widgets/WDetailsPopup";
import WRecallGiftInfo from "@widgets/WRecallGiftInfo";
import WSuperBallPopup from "@widgets/WSuperBall/WSuperBallPopup/WSuperBallPopup";
import WOfficialGuide from "@widgets/WOfficialGuide";
import WVipUpgrade from "@widgets/WVipUpgrade";
import WMobileCode from "@widgets/WMobileCode";
import HomeWithdrawPopup from "@widgets/HomeWithdrawPopup";
import HomeWithdrawChoosePopup from "@widgets/HomeWithdrawChoosePopup";
import WPaymentResult from "@widgets/WPaymentResult";
import WEditBindInfo from "@widgets/Userinfo/WBindInfo/WEditBindInfo";
import WKickoutTips from "@widgets/WKickoutTips";
import { ENABLE_SUPERBALL } from "@constants/app";
import WRedeemCode from "@widgets/WRedeemCode";
import WSecurityCheck from "@widgets/WWithdrawalInfo/Security/WSecurityCheck";
import { selectEmailInfo } from "@features/redemptionCodeSlice";

const Layout = ({ ...props }) => {
    const appRef = useRef(null);
    const mainRef = useRef(null);
    const msgBoxRef = useRef(null);
    const { isMobile, isShowWheel, setIsShowWheel, isOpenSub, walletPos } = useThemeProvider();
    const { pathname, search, hash } = useLocation();
    const isFull = useSelector(isFullRoute(pathname));
    const inRoutes = useSelector(routesIn);
    const popRoutes = useSelector(routesPop);
    const isLogin = useSelector(isLogined);
    const navigate = useNavigate();
    const { getSidedGesture } = useEdgeGesture();
    const isGesture = getSidedGesture();
    const mobile = isMobile();
    const dispatch = useDispatch();

    useEffect(() => {
        preventDefault();
    }, []);
    useEffect(() => {
        const root = document.documentElement;
        let frameId;
        const updateViewportHeight = () => {
            cancelAnimationFrame(frameId);
            frameId = requestAnimationFrame(() => {
                const viewportHeight = window.visualViewport?.height || window.innerHeight;
                root.style.setProperty("--app-viewport-height", `${Math.round(viewportHeight)}px`);
            });
        };
        const viewport = window.visualViewport;

        updateViewportHeight();
        window.addEventListener("resize", updateViewportHeight);
        window.addEventListener("orientationchange", updateViewportHeight);
        viewport?.addEventListener("resize", updateViewportHeight);
        viewport?.addEventListener("scroll", updateViewportHeight);

        return () => {
            cancelAnimationFrame(frameId);
            window.removeEventListener("resize", updateViewportHeight);
            window.removeEventListener("orientationchange", updateViewportHeight);
            viewport?.removeEventListener("resize", updateViewportHeight);
            viewport?.removeEventListener("scroll", updateViewportHeight);
            root.style.removeProperty("--app-viewport-height");
        };
    }, []);
    useEffect(() => {
        const scrollTop = () => {
            mainRef.current && mainRef.current.scrollTo(0, 0);
            appRef.current && appRef.current.scrollTo(0, 0);
            window.scrollTo(0, 0);
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        };
        scrollTop();
        const raf = requestAnimationFrame(scrollTop);
        const timer = setTimeout(scrollTop, 0);
        return () => {
            cancelAnimationFrame(raf);
            clearTimeout(timer);
        };
    }, [pathname, hash]);
    useEffect(() => {
        const msgBox = msgBoxRef.current;
        global.msgBox = msgBox;
        return () => {
            if (global.msgBox === msgBox) delete global.msgBox;
        };
    }, []);
    useEffect(() => {
        let routeType = ROUTE_TYPE_FULL;
        if (!mobile) routeType = ROUTE_TYPE_IN;
        dispatch(updateGameRoute(routeType));
    }, [dispatch, mobile]);

    // 通用提现按钮跳转
    const withdrawInfo = useSelector(getFreeWithdraw);
    const { setOpen: setMissionOpen } = useWithdrawMission();
    const onClickNormalWithdraw = useCallback(() => {
        if (withdrawInfo?.state === 1) {
            navigate(ROUTE_PATH.FREEWITHDRAW);
        } else if (withdrawInfo?.state === 2) {
            navigate(ROUTE_PATH.FREEWITHDRAW);
        } else if (withdrawInfo?.state === 3) {
            setMissionOpen(true);
        } else if (withdrawInfo?.state === 4) {
            setMissionOpen(true);
        }
    }, [navigate, setMissionOpen, withdrawInfo?.state]);

    // 通用邮箱兑换码按钮跳转
    const emailInfo = useSelector(selectEmailInfo);
    const onClickRedeemCode = useCallback(() => {
        if (emailInfo && typeof emailInfo === 'object' && Object.keys(emailInfo).length === 0) return;

        const pendingRechargeCount = emailInfo?.pending_recharge_reward_count;
        const vipReward = emailInfo?.vip_reward;
        const claimableRewardCount = emailInfo?.claimable_reward_count;
        const rawMultiplier = Number(vipReward?.multiplier);
        const multiplier = Number.isFinite(rawMultiplier) && rawMultiplier > 0 ? rawMultiplier : 1;
        // 兑换按钮
        if (claimableRewardCount > 0) {//存在充值解锁未领取奖励
            const payload = {
                grant_status: "ready",
                amount: claimableRewardCount,
                base_amount: (claimableRewardCount / multiplier),
                vip_multiplier: multiplier
            };
            global.showRedeemResult?.(payload);
        } else if (pendingRechargeCount > 0) {//未充值
            const payload = {
                grant_status: "pending_recharge",
                amount: pendingRechargeCount,
                base_amount: (pendingRechargeCount / multiplier),
                vip_multiplier: multiplier
            };
            global.showRedeemResult?.(payload);
        } else if (emailInfo?.is_bound === false) {//未绑定邮箱
            global.openRedeemFirstBind?.();
        } else {
            global.openRedeemNormal?.();
        }
    }, [emailInfo]);

    useEffect(() => {
        global.onClickNormalWithdraw = onClickNormalWithdraw;
        global.onClickRedeemCode = onClickRedeemCode;
        return () => {
            if (global.onClickNormalWithdraw === onClickNormalWithdraw) delete global.onClickNormalWithdraw;
            if (global.onClickRedeemCode === onClickRedeemCode) delete global.onClickRedeemCode;
        };
    }, [onClickNormalWithdraw, onClickRedeemCode]);


    const renderIn = () => {
        let isShowSub = false;
        if (isMobile() && isOpenSub) isShowSub = true;
        if (hash == null || hash === "") isShowSub = false;
        return (
            <>
                <div className={`app ${isShowSub ? 'app_openSub' : ''} ${isGesture ? 'app_gestureSub' : ''}`} ref={appRef}>
                    <ScrollToTop />
                    <AppContainer>
                        <div className="app_container-content d-flex flex-column flex-1">
                            <Suspense fallback={<LoadingIn />}>
                                <CBrowserRouter isLogin={isLogin} routes={inRoutes} />
                            </Suspense>
                        </div>
                    </AppContainer>
                    <GameSearchPanel />
                </div>
                <div className={`app-top  ${isShowSub ? 'app_openSub' : ''} ${isGesture ? 'app_gestureSub' : ''}`}>
                    <Sidebar />
                    <Navbar />
                    {isMobile() && <BottomNav />}
                </div>
            </>
        );
    };
    const renderInFull = () => {
        return (
            <div className={`app fluid`} ref={appRef}>
                <ScrollToTop />
                <div className="app_container_full">
                    <Suspense fallback={<LoadingScreen />}>
                        <CBrowserRouter isLogin={isLogin} routes={inRoutes} />
                    </Suspense>
                </div>
            </div>
        );
    };
    const renderHash = () => {
        return (
            <CHashRouter isLogin={isLogin} routes={popRoutes} hlocation={{
                pathname: pathname,
                search: search,
                hash: hash
            }} basePath={pathname} />
        );
    };
    const renderPop = () => {
        return (
            <div className="app-pop">
                <WLangSelect />
                <MsgBox ref={msgBoxRef} />
                {/* <WDPassPrompt />
                <WDPassBox open={isShowWDPassBox} onClose={() => {
                    setIsShowWDPassBox(false);
                }} /> */}
                <WHallWheel open={isShowWheel} onClose={() => {
                    setIsShowWheel(false);
                }}></WHallWheel>
                <WBindPhone />
                <WNewUserPrompt />
                <WProtect />
                <WFirstPay />
                {/* <WSaveAccount /> */}
                {/* <WDepositInfo /> */}
                <WFirstCashoutTips />
                <WWithdrawLimit />
                <WWithdrawMission />
                <WMusicSettings />
                <WExclusiveGift />
                {/* <WComeBackBonus /> */}
                {/* <WComeBackWithdraw /> */}
                <WRecallGiftTips />
                <WCommonTextTip />
                <WDetailsPopup />

                {
                    isLogin && <WCheckIn />
                }
                <WHolidaysAct />
                <WFreeBonusGift />

                <WRecommendedGames />
                <WSecurityScan />
                <WQuickInstall />
                <WDownloadPrompt />
                <WPopPwaBonus />
                <WDailyGift />

                <WAllBalance />
                <WWithdrawHelp />
                <WBalanceRule />
                <WEditUserInfo />
                <WEditNickName />
                <WRecallGiftInfo />
                <WOrientation />
                {
                    ENABLE_SUPERBALL && <WSuperBallPopup />
                }
                <WOfficialGuide />
                <WInsBrowserGuide />
                <WVipUpgrade />
                <WMobileCode />
                <HomeWithdrawPopup />
                <HomeWithdrawChoosePopup />
                <WPaymentResult />
                <WEditBindInfo />
                <WKickoutTips />
                <WRedeemCode />
                <WSecurityCheck />
            </div>
        );
    };
    const renderEffect = () => {
        return (
            <>
                <DropCoins walletPos={walletPos} />
                <MailNew />
                <LoadingCircular />
            </>
        );
    };
    const topRef = useRef(null);
    const renderTop = () => {
        return (
            <div className="appHeader" ref={topRef}>
            </div>
        );
    };
    const mainStyles = {
        height: `calc(var(--app-viewport-height) - ${topRef.current ? topRef.current?.clientHeight : 0}px)`
    };
    const renderFloat = () => {
        return (
            <div className="appFloat">
                <TopDownload />
            </div>
        );
    };
    return (
        <>
            {
                renderTop()
            }
            {
                renderFloat()
            }
            <div className={`appMain ${mobile ? "appMain_mobile" : ""}`} style={mainStyles} ref={mainRef}>
                {
                    !isFull ? renderIn() : renderInFull()
                }
                {
                    renderHash()
                }
                {
                    renderPop()
                }
                {
                    renderEffect()
                }
            </div>

        </>
    );
};
export default Layout;