Layout.tsx

import React from 'react';
import { View } from 'react-native';
import { observer } from 'mobx-react';
import mobxStore from '../store/RootStore';

// COMPONENTS
import { Header, NotificationPopup } from '.';
import { BAlert, FocusAwareStatusBar } from './Common';
import {
	KYCLockedOutModal,
	KYCRemainingDaystModal,
} from './KYCAlert';
import { useAuthContext } from '../context/auth/auth.context';
import { useKycUrl } from '../hooks/useKycUrl';
import GeoAlert from './GeoAlert';
import { useAppContext } from '../context/auth/app.context';
import LowBalanceAlert from './LowBalanceAlert';

type Props = {
	isAccount?: boolean;
	children:
		| string
		| number
		| boolean
		| React.ReactElement<any, string | React.JSXElementConstructor<any>>
		| React.ReactFragment
		| React.ReactPortal
		| null
		| undefined;
};

const Layout: React.FC<Props> = ({ isAccount, children }) => {
	const {
		userInfo,
		kycLockedOutModal,
		setKycLockedOutModal,
		showRemainingDaysPopUp,
		setShowRemainingDaysPopUp,
		logout,
		isShowKYCLockedOutAlreadyShow
	} = useAuthContext();

	const { appData } = useAppContext();
	// console.log('appData', appData?.response.geofence)
  // Add a new state to hold the timeoutErrorText value and the enabled flag
  const [geoConfig, setGeoConfig] = React.useState({
    timeoutErrorText: '',
    enabled: false,
  });

  // Update the state with the values from the appData.response.geofence object
  React.useEffect(() => {
    if (appData?.response.geofence) {
      setGeoConfig({
        timeoutErrorText: appData.response.geofence.timeoutErrorText,
        enabled: appData.response.geofence.enabled,
      });
    }
  }, [appData]);

	const { data: kycUrl, fetch: getKycUrl } = useKycUrl({
		key: `${userInfo?.profile.username}_kyc_url`,
		config: { enabled: false },
	});

	const GlobalAlertObserver = observer((props) => {
		const globalToast = props.mobxStore.globalToast;

		return (
			globalToast.message &&
			!globalToast.fromModal && (
				<BAlert
					position={globalToast.position || 'top'}
					mode={globalToast.mode || 'success'}
					message={globalToast.message}
					duration={globalToast.duration || undefined}
					setMessage={() => props.mobxStore.setGlobalToast({ message: '' })}
				/>
			)
		);
	});

	React.useEffect(() => {
		if (userInfo && !userInfo?.kycCheckedData?.kycChecked && !isShowKYCLockedOutAlreadyShow) {
			setKycLockedOutModal(true);
			getKycUrl();
		}
	}, []);

	// ILNA-880 GEOCOMPLY
	const isLoggedIn = userInfo?.profile?.clientId ? true : false;

	const GeoAlertObserver = observer((props) => {
		const { geoAlertVisible, geoAlertMessage, setGeoAlertVisible } =
			props.mobxStore;
	// Conditionally render the GeoAlert component based on the enabled flag and geoAlertVisible state
	return geoConfig.enabled && geoAlertVisible ? (
		<GeoAlert
			isVisible={geoAlertVisible}
			message={geoAlertMessage}
			timeoutErrorText={geoConfig.timeoutErrorText} // Pass the timeoutErrorText value
			onClose={() => setGeoAlertVisible(false)}
			onLogout={props.onLogout}
			isLoggedIn={isLoggedIn}
		/>
	) : null;
	});

	const handleLogout = () => {
		if (isLoggedIn) { // Check if the user is logged in
			logout();
		}
	};

	return (
		<View style={{ flex: 1 }}>
			<FocusAwareStatusBar
				translucent
				backgroundColor="transparent"
				barStyle="light-content"
			/>

			<View style={{ flex: 1 }}>
				<Header />
				<View style={{ position: 'relative' }}>
					{/* NOTIFICATION */}
					{mobxStore.showNotification && <NotificationPopup />}

					{/* CHILDREN */}
					{children}

					{/* KYC Locked Out Modal */}
					{userInfo &&
					userInfo?.kycCheckedData &&
					!userInfo.kycCheckedData.kycChecked &&
					(userInfo.kycCheckedData.remainingDays == null ||
						userInfo.kycCheckedData.remainingDays == 0) ? (
						<KYCLockedOutModal
							isVisible={kycLockedOutModal}
							onClose={() => setKycLockedOutModal(false)}
						/>
					) : (
						<></>
					)}

					{/* KYC Remaining Days Modal */}
					{userInfo &&
					userInfo?.kycCheckedData &&
					!userInfo.kycCheckedData.kycChecked &&
					userInfo.kycCheckedData.remainingDays &&
					userInfo.kycCheckedData.remainingDays > 0 ? (
						<KYCRemainingDaystModal
							isVisible={showRemainingDaysPopUp}
							remainingDays={userInfo?.kycCheckedData?.remainingDays}
							url={kycUrl?.response.scanUrl}
							onClose={() => setShowRemainingDaysPopUp(false)}
						/>
					) : (
						<></>
					)}

					<GlobalAlertObserver mobxStore={mobxStore} />

					{/* GeoAlert Modal */}
					<GeoAlertObserver mobxStore={mobxStore} onLogout={handleLogout} />

					{/* Low Balance Alert  */}
					<LowBalanceAlert balance={userInfo ? userInfo?.wallet?.currentBalance : 0}  />

				</View>
			</View>
		</View>
	);
};

export default observer(Layout);

LowBalanceAlert.tsx

import React from 'react';
import { Text, View } from 'react-native';
import { GLOBAL_STYLE as GS, icons } from '../assets';
import { BButton, BIcon } from './Common';
import { BModal, BModalHeader } from './Common/BModal';
import mobxStore from '../store/RootStore';

interface LowBalanceAlertProps {
	isVisible: boolean;
	onClose: () => void;
	onLogout: () => void;
	balance: number;
}

const LowBalanceAlert = ({ isVisible, onClose, balance }: LowBalanceAlertProps) => {

	// if user clicks cancel, hide the modal
	// if the user clicks Deposit, navigate to the Deposit screen in MY Account

	React.useEffect(() => {
		//if balance is less than or equal to $10, show the modal
		if (balance <= 10) {
			isVisible = true;
		}

	}, []);
	
	return (
		<>
			<React.Fragment>
				<BModal isVisible={isVisible} onClose={onClose}>
					<React.Fragment>
						<BModalHeader style={{ display: 'flex', alignItems: 'center' }}>
							<Text
								style={[
									GS.txtUpper,
									GS.txtH3,
									GS.FF_PoppinsSemiBold,
									GS.txtDanger,
								]}>
								Your Wallet Is Low
							</Text>
						</BModalHeader>
						<View style={{ paddingVertical: 20, paddingHorizontal: 15 }}>
							<View style={[GS.row, GS.alignCenter, GS.justifyCenter, GS.mb3]}>
								<Text
									style={[
										GS.txtUpper,
										GS.txtSm,
										GS.FF_PoppinsSemiBold,
										GS.txtWhite,
									]}>
									Quick Deposit
								</Text>
							</View>
							<BButton
								title="Cancel"
								disabled={!message}
								onPress={() => {
									// if (isLoggedIn && onLogout) {
									// 	onLogout();
									// }
									onClose();
									isVisible = false;
									// mobxStore.setGeoAlertVisible(false);
									// mobxStore.setGeoAlertMessage('');
									//mobxStore.setLoginButtonDisabled(false);
								}}
								mode="secondary"
							/>
							<BButton
								title="Deposit"
								disabled={!message}
								onPress={() => {
									// if (isLoggedIn && onLogout) {
									// 	onLogout();
									// }
									// onClose();
									// isVisible = false;
									// mobxStore.setGeoAlertVisible(false);
									// mobxStore.setGeoAlertMessage('');
									//mobxStore.setLoginButtonDisabled(false);
								}}
								mode="primary"
							/>
						</View>
					</React.Fragment>
				</BModal>
			</React.Fragment>
		</>
	);
};
export default LowBalanceAlert;