Set1.tsx

import { useNavigation } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { Text } from 'react-native-paper';
import { useMutation, useQueryCache } from 'react-query';
import { ApiClient } from '../../../../../api';
import {
	BButton,
	TitleBanner,
	BSeparator,
	SizedBox,
	BDropdown,
	BInput,
	SetLimitsConfirmationPopup,
	SetLimitsSuccess,
} from '../../../../../components';
import mobxStore from '../../../../../store/RootStore';
import { useLimit } from '../../../../../hooks/useLimit';
import { DRAWER_ROUTES_NAMES } from '../../../../../router/DrawerNavigator';
import LoadingScreen from '../../../../Loading.screen';
import { InfoDialog } from '../../components';
import { ApprovedDialog } from '../../components';
import { useRefetchOnFocus } from '../../../../../hooks/useRefetchOnFocus';
import { formatPrice } from '../../../../../helpers/utils';
import { useSetLimitSettings } from '../../../../../hooks/useSetLimitSettings';
import FutureLimit from '../../../../../components/Limits/FutureLimit';

const DAILY_MAX_LIMIT = 1000000;
const WEEKLY_MAX_LIMIT = 1000000;
const MONTHLY_MAX_LIMIT = 1000000;

const Set1 = () => {
	const { data: apiLimitData, fetch: refetchLimits } = useLimit('all', {
		config: undefined,
	});
	useRefetchOnFocus(refetchLimits);

	const navigation = useNavigation();
	const cache = useQueryCache();

	const [dailyLimit, setDailyLimit] = useState(null);
	const [customDailyLimit, setCustomDailyLimit] = useState('');
	const [dailyLimitPlaceholder, setDailyLimitPlaceholder] = useState(null);
	const [weeklyLimit, setWeeklyLimit] = useState(null);
	const [customWeeklyLimit, setCustomWeeklyLimit] = useState('');
	const [weeklyLimitPlaceholder, setWeeklyLimitPlaceholder] = useState(null);
	const [monthlyLimit, setMonthlyLimit] = useState(null);
	const [customMonthlyLimit, setCustomMonthlyLimit] = useState('');
	const [monthlyLimitPlaceholder, setMonthlyLimitPlaceholder] = useState(null);
	const [limits, setLimits] = useState<any>(undefined);
	const [renderDone, setRenderDone] = useState(false);
	const [limitOptions, setLimitOptions] = React.useState<any>([]);
	const [showConfirmation, setShowConfirmation] = React.useState(false);
	const [isLoading, setIsLoading] = React.useState(false);
	const [submitResponse, setSubmitResponse] = React.useState<any>(null);

	// Shared Set Limit Data
	const { disabledSetLimits, renderLimitError } = useSetLimitSettings({
		customDailyLimit,
		customMonthlyLimit,
		customWeeklyLimit,
		dailyLimit,
		monthlyLimit,
		setCustomDailyLimit,
		setCustomMonthlyLimit,
		setCustomWeeklyLimit,
		setDailyLimit,
		setDailyLimitPlaceholder,
		setMonthlyLimit,
		setMonthlyLimitPlaceholder,
		setWeeklyLimit,
		setWeeklyLimitPlaceholder,
		weeklyLimit,
		setRenderDone,
		setSubmitResponse,
		dailyLimitPlaceholder,
		weeklyLimitPlaceholder,
		monthlyLimitPlaceholder,
	});

	const [execLossLimitsChange] = useMutation(ApiClient.updatePlayerLimits, {
		onSuccess: (_data) => {
			setIsLoading(false);
			if (_data.error) {
				console.log('limit change error', _data.error);
			} else {
				console.log('limits changed.', _data.response?.updateLimits?.message);
				cache.invalidateQueries('limits');
				mobxStore.setGlobalToast({
					position: 'bottom',
					mode: 'success',
					message:
						'You have updated your DAILY, WEEKLY and MONTHLY Loss limits',
				});
				setRenderDone(true);
			}
		},
		onError: (error) => {
			setIsLoading(false);
			console.error(error);
		},
	});

	useEffect(() => {
		if (apiLimitData && apiLimitData?.response?.optionsPerLimit) {
			setLimitOptions(apiLimitData?.response?.optionsPerLimit?.loss || []);
		}

		if (apiLimitData && apiLimitData.response.limits) {
			const _limits = apiLimitData.response.limits
				.filter((entry) => {
					return entry.type === 'loss';
				})
				.reduce((prev, cur) => {
					prev[cur.period] = cur;
					return prev;
				}, {});

			setLimits(_limits);

			setDailyLimitPlaceholder(_limits?.Day?.setAmount || null);
			setWeeklyLimitPlaceholder(_limits?.Week?.setAmount || null);
			setMonthlyLimitPlaceholder(_limits?.Month?.setAmount || null);
		}
	}, [apiLimitData]);

	const onSetLimits = async () => {
		if (!dailyLimit && !weeklyLimit && !monthlyLimit) {
			return;
		}
		setIsLoading(true);

		if (dailyLimit) {
			await execLossLimitsChange({
				timePeriod: 'Day',
				limitType: 'loss',
				limitValue:
					dailyLimit === 'custom'
						? parseInt(customDailyLimit)
						: parseInt(dailyLimit),
				licenseType: 'all',
				channel: 'all',
				groupId: limits?.Day.groupId,
			});
		}

		if (weeklyLimit) {
			await execLossLimitsChange({
				timePeriod: 'Week',
				limitType: 'loss',
				limitValue:
					weeklyLimit === 'custom'
						? parseInt(customWeeklyLimit)
						: parseInt(weeklyLimit),
				licenseType: 'all',
				channel: 'all',
				groupId: limits?.Week.groupId,
			});
		}

		if (monthlyLimit) {
			await execLossLimitsChange({
				timePeriod: 'Month',
				limitType: 'loss',
				limitValue:
					monthlyLimit === 'custom'
						? parseInt(customMonthlyLimit)
						: parseInt(monthlyLimit),
				licenseType: 'all',
				channel: 'all',
				groupId: limits?.Month.groupId,
			});
		}

		setShowConfirmation(false);
	};

	if (renderDone) {
		return (
			<React.Fragment>
				<TitleBanner title="Loss limit" />

				{/*  */}
				{/* <ApprovedDialog
					title={`DAILY ${
						dailyLimit === 'custom'
							? formatPrice(customDailyLimit)
							: formatPrice(dailyLimit)
					}, WEEKLY ${
						weeklyLimit === 'custom'
							? formatPrice(customWeeklyLimit)
							: formatPrice(weeklyLimit)
					}, MONTHLY ${
						monthlyLimit === 'custom'
							? formatPrice(customMonthlyLimit)
							: formatPrice(monthlyLimit)
					} LOSS LIMIT SET!`}
					description="YOU CAN TIGHTEN LIMITS INSTANTLY AT ANY TIME, BUT WILL HAVE TO WAIT A 7 DAY PERIOD FOR ANY RELAXATIONS"
				/> */}
				{submitResponse && (
					<SetLimitsSuccess
						title="New play limits"
						dailyLimit={dailyLimit === 'custom' ? customDailyLimit : dailyLimit}
						dailyTimestamp={submitResponse?.Day?.timestampSet}
						weeklyLimit={
							weeklyLimit === 'custom' ? customWeeklyLimit : weeklyLimit
						}
						weeklyTimestamp={submitResponse?.Week?.timestampSet}
						monthlyLimit={
							monthlyLimit === 'custom' ? customMonthlyLimit : monthlyLimit
						}
						monthlyTimestamp={submitResponse?.Month?.timestampSet}
					/>
				)}

				<View style={{ marginBottom: 15, marginTop: 25 }}>
					<BButton
						mode="primary"
						title="Back to loss limits"
						onPress={() => {
							setRenderDone(false);
							// resetStates();
							navigation.navigate(
								DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_LOSS_LIMIT_STEP_1 as never,
							);
						}}
					/>
				</View>
				<View>
					<BButton
						mode="danger"
						title="Back to my account"
						onPress={() => {
							setRenderDone(false);
							// resetStates();
							navigation.navigate(
								DRAWER_ROUTES_NAMES.ACCOUNT__LOGGED_IN as never,
							);
						}}
					/>
				</View>
			</React.Fragment>
		);
	} else if (limits) {
		return (
			<React.Fragment>
				{/*  */}
				<TitleBanner title="Loss limit" />
				{/*  */}
				<InfoDialog
					notice="Fix your loss limit to"
					title="Daily, weekly or monthly limits"
					description="for more control"
				/>
				{/*  */}
				<SizedBox height={20} />
				{/*  */}
				{/* DAILY LIMIT */}

				<View style={{ zIndex: 0 }}>
					<BDropdown
						label="Daily limit"
						value={dailyLimit}
						placeholder={
							dailyLimitPlaceholder
								? `${formatPrice(dailyLimitPlaceholder)}`
								: 'PLEASE SET A DAILY LIMIT AMOUNT'
						}
						values={[
							...limitOptions?.Day?.map((value: string) => ({
								value,
								label: formatPrice(value),
							})),
							{ value: 'custom', label: 'SET CUSTOM LIMIT' },
						]}
						uppercase
						onPress={(entry) => {
							setDailyLimit(entry.value);
							setCustomDailyLimit('');
						}}
					/>

					{dailyLimit === 'custom' && (
						<View style={{ marginTop: 20 }}>
							{/* <Text
								style={{
									textTransform: 'uppercase',
									paddingLeft: 7.5,
									marginBottom: 5,
									color: 'white',
									zIndex: 0,
									elevation: 0,
								}}>
								Enter a daily limit
							</Text> */}
							<BInput
								placeholder=""
								value={formatPrice(customDailyLimit)}
								keyboardType={'number-pad'}
								onChangeText={(entry) => {
									const notDecimal = entry.replace(/[^0-9]/g, '');
									setCustomDailyLimit(notDecimal);
								}}
								onBlur={() => {
									if (parseInt(customDailyLimit) > DAILY_MAX_LIMIT) {
										setCustomDailyLimit(String(DAILY_MAX_LIMIT));
									}
								}}
							/>
						</View>
					)}

					<View style={{ marginTop: 15, paddingHorizontal: 7.5 }}>
						{limits?.Day?.futureLimits &&
							limits?.Day?.futureLimits?.length > 0 && (
								<FutureLimit
									futureLimits={limits?.Day?.futureLimits}
									name="Loss"
								/>
							)}
						<SizedBox height={5} />
						<Text style={{ fontSize: 12, color: 'white' }}>
							YOUR DAILY LIMIT AMOUNT MUST BE A MAXIMUM OF{' '}
							{formatPrice(DAILY_MAX_LIMIT)} AND MUST NOT EXCEED THE AMOUNT OF
							YOUR 7 DAY LIMIT.
						</Text>
					</View>

					<BSeparator spaceless />

					<BDropdown
						label="Weekly limit"
						value={weeklyLimit}
						placeholder={
							weeklyLimitPlaceholder
								? `${formatPrice(weeklyLimitPlaceholder)}`
								: 'PLEASE SET A WEEKLY LIMIT AMOUNT'
						}
						values={[
							...limitOptions?.Week?.map((value: string) => ({
								value,
								label: formatPrice(value),
							})),
							{ value: 'custom', label: 'SET CUSTOM LIMIT' },
						]}
						uppercase
						onPress={(entry) => {
							setWeeklyLimit(entry.value);
							setCustomWeeklyLimit('');
						}}
					/>

					{weeklyLimit === 'custom' && (
						<View style={{ marginTop: 20 }}>
							{/* <Text
								style={{
									textTransform: 'uppercase',
									paddingLeft: 7.5,
									marginBottom: 5,
									color: 'white',
									zIndex: 0,
									elevation: 0,
								}}>
								Enter a weekly limit
							</Text> */}
							<BInput
								placeholder=""
								value={formatPrice(customWeeklyLimit)}
								keyboardType={'number-pad'}
								onChangeText={(entry) => {
									const notDecimal = entry.replace(/[^0-9]/g, '');
									setCustomWeeklyLimit(notDecimal);
								}}
								onBlur={() => {
									if (parseInt(customWeeklyLimit) > WEEKLY_MAX_LIMIT) {
										setCustomWeeklyLimit(String(WEEKLY_MAX_LIMIT));
									}
								}}
							/>
						</View>
					)}

					<View style={{ marginTop: 15, paddingHorizontal: 7.5 }}>
						{limits?.Week?.futureLimits &&
							limits?.Week?.futureLimits?.length > 0 && (
								<FutureLimit
									futureLimits={limits?.Week?.futureLimits}
									name="Loss"
								/>
							)}
						<SizedBox height={5} />
						<Text style={{ fontSize: 12, color: 'white' }}>
							YOUR WEEKLY LIMIT AMOUNT MUST BE A MAXIMUM OF{' '}
							{formatPrice(WEEKLY_MAX_LIMIT)} AND MUST NOT EXCEED THE AMOUNT OF
							YOUR MONTHLY LIMIT.
						</Text>
					</View>

					{/*  */}
					<BSeparator spaceless />

					{/* MONTHLY LIMIT */}

					<BDropdown
						label="Monthly limit"
						value={monthlyLimit}
						placeholder={
							monthlyLimitPlaceholder
								? `${formatPrice(monthlyLimitPlaceholder)}`
								: 'PLEASE SET A MONTHLY LIMIT AMOUNT'
						}
						values={[
							...limitOptions?.Month?.map((value: string) => ({
								value,
								label: formatPrice(value),
							})),
							{ value: 'custom', label: 'SET CUSTOM LIMIT' },
						]}
						uppercase
						onPress={(entry) => {
							setMonthlyLimit(entry.value);
							setCustomMonthlyLimit('');
						}}
					/>

					{monthlyLimit === 'custom' && (
						<View style={{ marginTop: 20 }}>
							{/* <Text
								style={{
									textTransform: 'uppercase',
									paddingLeft: 7.5,
									marginBottom: 5,
									color: 'white',
									zIndex: 0,
									elevation: 0,
								}}>
								Enter a monthly limit
							</Text> */}
							<BInput
								placeholder=""
								value={formatPrice(customMonthlyLimit)}
								keyboardType={'number-pad'}
								onChangeText={(entry) => {
									const notDecimal = entry.replace(/[^0-9]/g, '');
									setCustomMonthlyLimit(notDecimal);
								}}
								onBlur={() => {
									if (parseInt(customMonthlyLimit) > MONTHLY_MAX_LIMIT) {
										setCustomMonthlyLimit(String(MONTHLY_MAX_LIMIT));
									}
								}}
							/>
						</View>
					)}

					<View style={{ marginTop: 15, paddingHorizontal: 7.5 }}>
						{limits?.Month?.futureLimits &&
							limits?.Month?.futureLimits?.length > 0 && (
								<FutureLimit
									futureLimits={limits?.Month?.futureLimits}
									name="Loss"
								/>
							)}
						<SizedBox height={5} />
						<Text style={{ fontSize: 12, color: 'white' }}>
							YOUR MONTHLY LIMIT AMOUNT MUST BE A MAXIMUM OF{' '}
							{formatPrice(MONTHLY_MAX_LIMIT)}
						</Text>
					</View>

					{/* Show Error when Limit is not correct */}
					{renderLimitError()}

					{/*  */}
					<View style={{ marginBottom: 15, marginTop: 35 }}>
						<BButton
							title="Set limits"
							mode="primary"
							disabled={disabledSetLimits}
							onPress={() => setShowConfirmation(true)}
						/>
					</View>
					<View style={{ marginBottom: 5 }}>
						<BButton
							title="Cancel"
							mode="danger"
							onPress={() => {
								setRenderDone(false);
								// resetStates();
								navigation.navigate(
									DRAWER_ROUTES_NAMES.ACCOUNT__CHANGE_LOSS_LIMIT_STEP_1 as never,
								);
							}}
						/>
					</View>
				</View>

				{/* Show Confirmation Popup */}
				{showConfirmation && (
					<SetLimitsConfirmationPopup
						isVisible={showConfirmation}
						customDailyLimit={customDailyLimit}
						dailyLimit={dailyLimit}
						customWeeklyLimit={customWeeklyLimit}
						weeklyLimit={weeklyLimit}
						customMonthlyLimit={customMonthlyLimit}
						monthlyLimit={monthlyLimit}
						isLoading={isLoading}
						onSetLimits={onSetLimits}
						onClose={() => !isLoading && setShowConfirmation(false)}
					/>
				)}
			</React.Fragment>
		);
	} else {
		return <LoadingScreen />;
	}
};

export default Set1;