Skip to content

Instantly share code, notes, and snippets.

@kevincarpdev

kevincarpdev/NumericalGameInner.screen

Created April 8, 2023 10:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kevincarpdev/ad6fb9acd1891f0a7e9a5188e3446d2a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kevincarpdev/ad6fb9acd1891f0a7e9a5188e3446d2a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
NumericalGameInner.screen
import React, { useEffect } from 'react';
import { View, ScrollView, ActivityIndicator } from 'react-native';
import { Text } from 'react-native-paper';
import { Slider } from '@miblanchard/react-native-slider';
import {
CONSTANT_COLOR as CC,
CONSTANT_COLOR,
GLOBAL_STYLE,
GLOBAL_STYLE as GS,
icons,
} from '../../../assets';
import Moment from 'moment';
import { ticketFactory, gameSettings } from 'CanvasLotteryDemo';
import crashlytics from '@react-native-firebase/crashlytics';
import {
BButton,
BIcon,
BImage,
BListItem,
BPageHeader,
BSeparator,
BSwitch,
BTimer,
Footer,
GenerateQrCodeModal,
InfoButton,
Layout,
SizedBox,
CustomTrackSlider,
BToggle,
BModal,
BModalHeader,
BModalFooter,
} from '../../../components';
//
import { OptionSelectable, TransparentContainer } from './components';
//
import {
FavoritePayslipsView,
ManualPlayView,
QuickPlayView
} from './views';
//
import styles from './styles';
import {
AddToFavoritesModal,
ConfirmationModal,
StatisticModal,
} from './modals';
import { FavoriteCoupon, LotteryGame, LotteryGameSettings, Ticket } from '../../../types';
import LinearGradient from 'react-native-linear-gradient';
import { useNavigation } from '@react-navigation/native';
import { ApiClient } from '../../../api';
import { useMutation } from 'react-query';
import mobxStore, { CartTicket } from '../../../store/RootStore';
import { AxiosError } from 'axios';
import { useAuthContext } from '../../../context/auth/auth.context';
import { useGameFutureDraws } from '../../../hooks/useGameFutureDraws';
import moment from 'moment';
import { useAppContext } from '../../../context/auth/app.context';
import LoadingScreen from '../../Loading.screen';
import {
getDCTotalCostDetails,
getTabColor,
getTotalCostOfTicket,
isDCGame,
isDCTimeZone,
isMegaMillion,
isPowerBall,
isR2RGame,
loadFavoriteCoupon,
multidrawValueToMultidrawObject,
sliderIndexToMultidrawObject,
utilsGetBuyNowButtonEnabled,
utilsGetDCFromIndex,
utilsGetDrawDays,
utilsGetUpdateSliderMaxValue,
} from '../../../helpers/utils';
import ViewNumericalGameInfoModal from './modals/ViewNumericalGameInfoModal';
import MessageModal from './modals/MessageModal';
import { GameCardDrawResults } from '../../../components/Carousel/Carousel.component';
import { useLastDraw } from '../../../hooks/useLastDraw';
import GenericSuccessModal from '../../../components/Common/GenericSuccessModal';
//
enum NUMERICAL_GAME_VIEW {
MANUEL_PLAY = 'MANUEL_PLAY',
QUICK_PLAY = 'QUICK_PLAY',
SYSTEM_PLAY = 'SYSTEM_PLAY',
FAVORITE_PAYSLIPS = 'FAVORITE_PAYSLIPS',
}
const ADVANCE_PLAYS = [
{label: "TODAY", value: "TOD", indexDay: null},
{label: "SUNDAY", value: "SUN", indexDay: 7},
{label: "MONDAY", value: "MON", indexDay: 1},
{label: "TUESDAY", value: "TUE", indexDay: 2},
{label: "WEDNESDAY", value: "WED", indexDay: 3},
{label: "THURSDAY", value: "THU", indexDay: 4},
{label: "FRIDAY", value: "FRI", indexDay: 5},
{label: "SATURDAY", value: "SAT", indexDay: 6}
];
export enum NumericalGameInnerActionTypes {
editFavorite = 'editFavorite',
buyNow_quick_play = 'buyNow_quick_play',
}
export interface MultiDrawTicketClient {
value: number;
sliderIndex: number;
}
const NumericalGameInnerScreen = ({ route }: any) => {
const {
item,
gameId,
quickPick,
action,
favoriteCoupon,
cartItem
}: {
item: any;
gameId: number;
quickPick?: any;
action: NumericalGameInnerActionTypes;
favoriteCoupon: FavoriteCoupon;
cartItem?: CartTicket;
} = route.params;
const navigation = useNavigation();
const { isAuthenticated, setShowLoginModal } = useAuthContext();
const { isAppDataLoading, appData } = useAppContext();
var config: LotteryGameSettings = gameSettings.getConfigForGame({ gameId: gameId });
const { data: gameLastDraw, fetch: refetchGameLastDraw } = useLastDraw(`${gameId}`, { config: undefined});
let lotteryGame: LotteryGame | null = null;
if (appData && appData.response.lotteryGames) {
lotteryGame = appData.response.lotteryGames[gameId];
}
const [disableManualInput, setDisableManualInput] =
React.useState<boolean>(false);
const [ticket, setTicket] = React.useState<Ticket>(
ticketFactory.createDefault({ gameId, config }),
);
const [selectedFavoriteTicket, setSelectedFavoriteTicket] =
React.useState<FavoriteCoupon | null>(null);
const [currentCartItem, setCurrentCartItem] =
React.useState<CartTicket | null>(null);
const [verifyTicketObj, setVerifyTicketObj] = React.useState<any>(null);
const [ticketOptions, setTicketOptions] = React.useState<any>([]);
const [currentView, setCurrentView] = React.useState<NUMERICAL_GAME_VIEW>(
NUMERICAL_GAME_VIEW.MANUEL_PLAY,
);
const [multiDraws, setMultiDraws] = React.useState<MultiDrawTicketClient>({
value: 1,
sliderIndex: 1,
});
const [showGenerateQrCodeModal, setShowGenerateQrCodeModal] =
React.useState(false);
const [showFavoriteNumberModal, setShowFavoriteNumberModal] =
React.useState(false);
const [showGameInfoModal, setShowGameInfoModal] = React.useState(false);
const [showMegaplierConfirmation, setShowMegaplierConfirmation] = React.useState<any>(null);
const [showStatisticModal, setShowStatisticModal] = React.useState(false);
// const [ticketTotal, setTicketTotal] = React.useState(0);
const [disableTicketSubmit, setDisableTicketSubmit] = React.useState(false);
const [showBuyConfirmationModal, setShowBuyConfirmationModal] =
React.useState(false);
const [showBuyMessageModal, setShowBuyMessageModal] = React.useState(false);
const [showJTJConfirmationModal, setShowJTJConfirmationModal] = React.useState<any>(null);
const [serialNumber, setSerialNumber] = React.useState<number | null>(null);
const [isModified, setIsModified] = React.useState<boolean>(false);
const [isScreenFocused, setIsScreenFocused] = React.useState<boolean>(false);
const [showSuccessAddFavorite, setShowSuccessAddFavorite] = React.useState<boolean>(false);
const [showSuccessMessage, setShowSuccessMessage] = React.useState<string>("");
const [cachedTicketPerPlays, setCachedTicketPerPlays] = React.useState<any>({
"MANUEL_PLAY": null,
"QUICK_PLAY": null,
"SYSTEM_PLAY": null,
"FAVORITE_PAYSLIPS": null
});
// let ticketActiveBoards =
// ticket.boards.filter((entry) =>
// entry.panels.some((pEntry) => pEntry.selections.length > 0),
// ).length || 0;
const [advancePlay, setAdvancePlay] = React.useState<any>(ADVANCE_PLAYS[0].value);
const [DRAW_TIMES, SET_DRAW_TIMES] = React.useState<any>([
{label:'DAY', value: 'MOR'},
{label:'NIGHT', value: 'EVE'},
{label:'BOTH', value: 'BOTH'}
]);
const [drawTime, setDrawTime] = React.useState<any>(DRAW_TIMES[2].value);
const [dcMultipleDrawsMaxValue, setDCMultipleDrawsMaxValue] = React.useState<number | null | undefined>(null);
const [dcDetailsFrom, setDcDetailsFrom] = React.useState<any | null>(null);
const [dcDetailsTo, setDcDetailsTo] = React.useState<any | null>(null);
const [quickPickIndexSelected, setQuickIndexSelected] = React.useState<number | null>(null);
// TO REVISIT
const [dcDetailsFromIndex, setDcDetailsFromIndex] = React.useState<number>(0);
const [dcDetailsToIndex, setDcDetailsToIndex] = React.useState<number>(0);
const [displayTabs, setDisplayTabs] = React.useState<boolean>(true);
let ticketActiveBoards = ticket
.boards
.filter((entry) => entry.panels.some((pEntry) => pEntry.selections.length > 0)).length || 0;
let ticketNonCompletedBoards = ticket
.boards
.filter((entry) => entry.panels.some((pEntry) => pEntry.selections.length == 0)).length || 0;
let ticketTotal = getTotalCostOfTicket(gameId, ticket, ticketOptions, config, multiDraws);
const ticketCanBeSubmited = isAuthenticated && (ticketActiveBoards > 0 || ticketOptions.find((entry) => entry.canPlayAlone));
const isJTJ = (ticketOptions ?? []).find((entry) => entry.id === 'JTJ') != null ? true : false;
var isSliderDisabled = false;
if (isR2RGame(gameId)) {
if (ticket && ticket.boards.length > 0 && ticket.boards[0].options?.length > 0) {
const dailyDoubleOption = ticket.boards[0].options.find((e) => e.id == "DAILY DOUBLE");
if (dailyDoubleOption) {
isSliderDisabled = true;
}
}
}
var isR2RBonusEnabled = false;
if (ticketOptions.length > 0 && isR2RGame(gameId)) {
const bonus = ticketOptions.find((e) => e.name == "Bonus" || e.id == "PowerPlay");
if (bonus) {
isR2RBonusEnabled = true;
}
}
let playDays: string[] = utilsGetDrawDays(gameId, appData, config);
const canDisplayTotal = () => {
var hideTotal = ticketNonCompletedBoards > 0 && !isJTJ;
if (isR2RGame(gameId)) {
const haveSomePanels = ticket.boards.filter((entry) => entry.panels.some((pEntry) => pEntry.selections.length > 0)).length || 0;
if (haveSomePanels) {
hideTotal = false;
}
}
return !hideTotal;
}
useEffect(() => {
if (action === 'editFavorite' && favoriteCoupon) {
setSelectedFavoriteTicket(favoriteCoupon);
const { multidraws, newTicketOptions, shouldDisableInput, newTicket } =
loadFavoriteCoupon(gameId, config, favoriteCoupon);
setMultiDraws(multidrawValueToMultidrawObject(multidraws, isDcGame(), isDrawTimeBoth(), isR2RGame(gameId)));
setDisableManualInput(shouldDisableInput);
newTicket.addOptions(newTicketOptions);
setTicketOptions(newTicketOptions);
setTicket(Object.create(newTicket));
setCurrentView(NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS);
} else if (action === 'buyNow_quick_play') {
setCurrentView(NUMERICAL_GAME_VIEW.QUICK_PLAY);
} else {
setCurrentView(NUMERICAL_GAME_VIEW.MANUEL_PLAY);
resetTicket();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [gameId]);
useEffect(() => {
// FOR CART -> REFACTORING NEEDED !
return navigation.addListener("focus", () => {
if (cartItem && cartItem.ticket) {
setCurrentCartItem(cartItem);
handleSetUpCartTicket();
}
setIsScreenFocused(true);
setTimeout(() => {
setIsScreenFocused(false);
}, 1000);
});
}, [navigation]);
const handleSetUpCartTicket = () => {
if (cartItem && cartItem.ticket) {
const newTicket = cartItem.ticket;
setDisableManualInput(cartItem.shouldDisableInput);
newTicket.addOptions(cartItem.newOptions);
setTicketOptions(cartItem.newOptions);
if (cartItem.advancePlay) {
newTicket.setDaySelection(advancePlay);
setAdvancePlay(cartItem.advancePlay);
}
if (cartItem.drawTime) {
newTicket.setTimePeriod(drawTime);
setDrawTime(cartItem.drawTime);
}
if (cartItem.multiDraws) {
if (isDcGame()) {
setTimeout(() => {
if (cartItem.multiDraws) {
setMultiDraws(cartItem.multiDraws);
}
}, 500);
} else {
setMultiDraws(cartItem.multiDraws);
}
}
setTicket(Object.create(newTicket));
setCurrentView(NUMERICAL_GAME_VIEW.MANUEL_PLAY);
// UPDATE CACHED TEMP
var temp = {
"MANUEL_PLAY": null,
"QUICK_PLAY": null,
"SYSTEM_PLAY": null,
"FAVORITE_PAYSLIPS": null
};
temp[NUMERICAL_GAME_VIEW.MANUEL_PLAY.toString()] = {ticket: cartItem.ticket};
setCachedTicketPerPlays(temp);
}
}
const updateCart = () => {
if (currentCartItem && currentCartItem.ticket) {
setCurrentCartItem(null);
mobxStore.updateCart(
currentCartItem.id,
ticket,
ticketOptions,
disableManualInput,
multiDraws,
drawTime,
advancePlay,
isDcGame() ? dcDetailsFromIndex : null,
isDcGame() ? dcDetailsToIndex : null,
isDcGame() ? dcticketDrawOffset() : null,
isDcGame() ? isDrawTimeBoth() : false
);
resetTicket();
mobxStore.setGlobalToast({
mode: 'success',
message: "Ticket updated",
});
navigation.goBack();
}
}
useEffect(() => {
if (isDcGame() && drawTime && advancePlay) {
const updateMaxValue = getUpdateSliderMaxValue(advancePlay, drawTime);
setDCMultipleDrawsMaxValue(updateMaxValue);
const newValue = sliderIndexToMultidrawObject(1, isDcGame(), isDrawTimeBoth());
setMultiDraws(newValue);
ticket.setMultipleDraws(newValue.value);
ticket.setTimePeriod(drawTime);
ticket.setDaySelection(advancePlay);
}
}, [drawTime, advancePlay]);
const isDcGame = () => {
return isDCGame(gameId);
}
const { data: gameFutureDraws, fetch: refetchGameFutureDraws } =
useGameFutureDraws(
{
gameId: gameId,
numberOfDraws: config.maxNumberOfMultipleDraws,
includeActive: true,
},
{ config: undefined },
);
const getDCFromIndex = (dTime: string, adPlay: string) => {
return utilsGetDCFromIndex(gameFutureDraws, dTime, adPlay);
}
useEffect(() => {
if (isDcGame() && drawTime && advancePlay) {
if (gameFutureDraws?.response?.draws?.items.length) {
var newDcFromIndex = getDCFromIndex(drawTime, advancePlay);
setDcDetailsFromIndex(newDcFromIndex);
setDcDetailsFrom(
moment.unix(
gameFutureDraws?.response.draws.items[newDcFromIndex].draw?.drawDate as number
).format('MM/DD/yyyy hh:mm A')
);
// TO
var multiDrawsToUse = (multiDraws.value - 1) * 2;
if (drawTime == "BOTH") {
multiDrawsToUse = multiDraws.value - 1;
}
var newDcToIndex = (newDcFromIndex + multiDrawsToUse);
if (newDcToIndex >= gameFutureDraws.response.draws.items.length) {
console.log("herre ");
newDcToIndex = gameFutureDraws?.response.draws.items.length - 1
}
if (gameFutureDraws?.response.draws.items[newDcToIndex]?.draw) {
setDcDetailsToIndex(newDcToIndex);
setDcDetailsTo(
moment.unix(
gameFutureDraws?.response.draws.items[newDcToIndex].draw?.drawDate as number
).format('MM/DD/yyyy hh:mm A')
);
}
if (newDcFromIndex == gameFutureDraws?.response?.draws?.items.length - 1) {
setDCMultipleDrawsMaxValue(null);
}
}
}
}, [multiDraws, gameFutureDraws]);
const getCachedTicketByView = (view: NUMERICAL_GAME_VIEW) => {
setDisableManualInput(false);
//setSelectedFavoriteTicket(null);
setIsModified(false);
if (cachedTicketPerPlays[view.toString()] != null && cachedTicketPerPlays[view.toString()].ticket) {
var cached = cachedTicketPerPlays[view.toString()];
var cachedTicket = cachedTicketPerPlays[view.toString()].ticket;
if (isDcGame()) {
const multipleDrawsachedTicket = cached.multiDraws ?? 2; // 2 DEFAULT VALUE FOR DC GAMES
const isBoth = cached.drawTime == "BOTH" || cached.drawTime == null;
const val = {
value: multipleDrawsachedTicket,
sliderIndex: multipleDrawsachedTicket === 1 ? 1 : (isBoth ? multipleDrawsachedTicket / 2 : multipleDrawsachedTicket),
}
if (cached.drawTime) {
setDrawTime(cached.drawTime);
}
if (cached.advancePlay) {
setAdvancePlay(cached.advancePlay);
}
setTimeout(() => {
setMultiDraws(val);
}, 750);
} else {
const multipleDrawsachedTicket = cached.multiDraws ?? 1;
setMultiDraws(multidrawValueToMultidrawObject(multipleDrawsachedTicket, false, false, isR2RGame(gameId)));
}
if (cached.ticketOptions) {
setTicketOptions(cached.ticketOptions);
if ((cached.ticketOptions ?? []).find((entry) => entry.id === 'JTJ')) {
setDisableManualInput(true);
} else {
setDisableManualInput(false);
}
}
return cachedTicket;
} else {
if (isDcGame()) {
setDrawTime(DRAW_TIMES[2].value);
setAdvancePlay(ADVANCE_PLAYS[0].value);
setTimeout(() => {
setMultiDraws({ value: 2, sliderIndex: 1}); // DEFAULT FOR DC GAMES
}, 750);
} else {
setMultiDraws({ value: 1, sliderIndex: 1}); // DEFAULT FOR OTHER GAMES
}
setTicketOptions([]);
return ticketFactory.createDefault({ gameId, config });
}
}
const handleDailyDouble = (tic) => {
if (isR2RGame(gameId)) {
if (tic && tic.boards.length > 0 && tic.boards[0].options?.length > 0) {
const dailyDoubleOption = tic.boards[0].options.find((e) => e.id == "DAILY DOUBLE");
if (dailyDoubleOption) {
setMultiDraws({value: 2, sliderIndex: 2});
}
}
}
}
const renderNumericalGameView = () => {
switch (currentView) {
case NUMERICAL_GAME_VIEW.MANUEL_PLAY:
return (
<ManualPlayView
gameId={gameId}
config={config}
ticket={ticket}
setTicket={(value) => {
handleDailyDouble(value);
setTicket(value);
}}
disableInput={disableManualInput}
quickPick={quickPick}
/>
);
case NUMERICAL_GAME_VIEW.QUICK_PLAY:
return (
<QuickPlayView
gameId={gameId}
config={config}
ticket={ticket}
setTicket={(value) => {
handleDailyDouble(value);
setTicket(value);
}}
setMultidraws={(newValue) => {
if (isDcGame() && newValue.multipleDraws && newValue.drawTime) {
setDrawTime(newValue.drawTime);
setTimeout(() => {
setMultiDraws(multidrawValueToMultidrawObject(newValue.multipleDraws, true, newValue.drawTime == "BOTH"));
}, 750);
} else {
setMultiDraws(multidrawValueToMultidrawObject(newValue, false, false, isR2RGame(gameId)));
}
}}
setTicketOptions={setTicketOptions}
setDisableInput={setDisableManualInput}
disableInput={disableManualInput}
quickPickIndexSelected={quickPickIndexSelected}
setQuickPickIndexSelected={(e) => { setQuickIndexSelected(e) }}
/>
);
case NUMERICAL_GAME_VIEW.SYSTEM_PLAY:
return <></>;
case NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS:
return (
<FavoritePayslipsView
gameId={gameId}
config={config}
ticket={ticket}
setTicket={(value) => {
handleDailyDouble(value);
setTicket(value);
if (isDcGame()) {
if (value && value.extraOptions && value.extraOptions.length > 0) {
setDrawTime(value.extraOptions[0]);
if (value.multipleDraws) {
if (value.extraOptions[0] == "BOTH") {
setTimeout(() => {
setMultiDraws({
value: value.multipleDraws,
sliderIndex: value.multipleDraws == 1 ? 1 : value.multipleDraws / 2
});
}, 750);
} else {
setTimeout(() => {
setMultiDraws({value: value.multipleDraws, sliderIndex: value.multipleDraws});
}, 750);
}
}
}
}
}}
selectedFavoriteTicket={selectedFavoriteTicket}
setSelectedFavoriteTicket={setSelectedFavoriteTicket}
setMultidraws={(newValue) => {
if (!isDcGame()) {
setMultiDraws(multidrawValueToMultidrawObject(newValue, false, false, isR2RGame(gameId)));
}
}}
setTicketOptions={setTicketOptions}
setDisableInput={setDisableManualInput}
disableInput={disableManualInput}
isModified={isModified}
setIsModified={setIsModified}
isScreenFocused={isScreenFocused}
/>
);
}
};
const saveCurrentTicketPerPlay = () => {
if (ticket) {
var temp = cachedTicketPerPlays;
if (isDcGame()) {
temp[currentView.toString()] = {
ticket: ticket,
ticketOptions: ticketOptions,
multiDraws: multiDraws.value,
drawTime: drawTime,
advancePlay: advancePlay
};
} else {
temp[currentView.toString()] = {
ticket: ticket,
ticketOptions: ticketOptions,
multiDraws: multiDraws.value
};
}
setCachedTicketPerPlays(temp);
}
}
const resetTicket = () => {
setDisplayTabs(false);
config = gameSettings.getConfigForGame({ gameId: gameId });
const newT = ticketFactory.createDefault({ gameId, config });
setTicket(Object.create(newT));
var temp = {
"MANUEL_PLAY": null,
"QUICK_PLAY": null,
"SYSTEM_PLAY": null,
"FAVORITE_PAYSLIPS": null
};
temp[currentView.toString()] = {ticket: newT};
setCachedTicketPerPlays(temp);
setSelectedFavoriteTicket(null);
setCurrentCartItem(null);
setQuickIndexSelected(null);
if (isDcGame()) {
setMultiDraws(multidrawValueToMultidrawObject(2, true, true));
} else {
setMultiDraws(multidrawValueToMultidrawObject(1, false, false, isR2RGame(gameId)));
}
setDisableTicketSubmit(false);
setTicketOptions([]);
setDisableManualInput(false);
setIsModified(false);
setTimeout(() => {
setTicket(Object.create(ticketFactory.createDefault({ gameId, config })));
}, 500);
if (isDcGame()) {
setDrawTime(DRAW_TIMES[2].value);
setAdvancePlay(ADVANCE_PLAYS[0].value);
}
setTimeout(() => {
setDisplayTabs(true);
}, 800);
};
const [execPlayCoupon] = useMutation(ApiClient.playCoupon, {
onMutate: () => {
setDisableTicketSubmit(true);
},
onSuccess: (data) => {
resetTicket();
setShowBuyConfirmationModal(false);
setTimeout(() => {
setShowBuyMessageModal(true);
}, 1000);
crashlytics().log('coupon_played');
setSerialNumber(data?.response?.serialNumber);
},
onError: (error: AxiosError<any>) => {
if (error.response?.data?.error?.errorMessage.error) {
mobxStore.setGlobalToast({
mode: 'danger',
message: error.response?.data?.error?.errorMessage.error.errorMessage,
fromModal: true,
});
}
setDisableTicketSubmit(false);
crashlytics().log('error_while_coupon_play');
},
});
const [verifyCoupon] = useMutation(ApiClient.verifyCoupon, {
onMutate: () => {
setVerifyTicketObj(null);
},
onSuccess: (data) => {
setVerifyTicketObj(data.response);
setShowBuyConfirmationModal(true);
},
onError: (error: AxiosError<any>) => {
setDisableTicketSubmit(false);
if (error.response?.data?.error?.errorMessage.error) {
mobxStore.setGlobalToast({
mode: 'danger',
message: error.response?.data?.error?.errorMessage.error.errorMessage,
});
}
},
});
const handleCaseFavoriteModified = () => {
if (currentView == NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS && selectedFavoriteTicket) {
setIsModified(true);
}
}
// DC LOGICS STARTED
const isDrawTimeBoth = () => {
return drawTime == DRAW_TIMES[2].value;
}
const getUpdateSliderMaxValue = (adPlay: string, dTime: string) => {
return utilsGetUpdateSliderMaxValue(adPlay, config.maxNumberOfMultipleDraws / 2);
}
const dcticketDrawOffset = () => {
return isDCTimeZone() ? dcDetailsFromIndex : dcticketDrawOffsetOld();
}
const dcticketDrawOffsetOld = () => {
var offset = dcDetailsFromIndex;
if (drawTime == "BOTH") {
offset = offset - 1;
}
if (drawTime == "EVE") {
offset = offset + 1;
}
if (drawTime == "MOR") {
offset = offset - 1;
}
return offset < 0 ? 0 : offset;
}
// DC LOGICS ENDED
const getTotalCostDetails = () => {
return getDCTotalCostDetails(gameId, ticket, config, multiDraws);
}
const getBuyNowButtonEnabled = () => {
return utilsGetBuyNowButtonEnabled(gameId, ticket, ticketOptions);
}
const handleTicketBuyNow = async () => {
if (!isAuthenticated) {
mobxStore.setShowLoginModal("login");
return;
}
if (!disableTicketSubmit) {
if (!isR2RGame(gameId)) {
ticket.addOptions(ticketOptions); // FYI: this will also remove any de-selected option
}
// Set Extra game options to ticket object
let canPlayAlone = ticketOptions.find((entry) => entry.canPlayAlone);
if (canPlayAlone && canPlayAlone.multipliers[canPlayAlone.value - 1]) {
// map slider option number as an index that will give us the multiplier value
const boardMultiplier = canPlayAlone.multipliers[canPlayAlone.value - 1].value;
// If just jackpot clear boards otherwise for a smaller amount -> ticket.boards.length < boardMultiplier will fail
if (canPlayAlone.id == "JTJ") {
var tempJTJTicket = Object.create(ticket);
// JTJ CASE NEEDS TO REVISIT
tempJTJTicket.boards = [];
if (tempJTJTicket.boards.length < boardMultiplier) {
tempJTJTicket.appendBoards({
number: boardMultiplier - tempJTJTicket.boards.length,
}); // -1 because there will always be 1 board entry on a ticket
}
tempJTJTicket.quickPick().then(async () => {
tempJTJTicket.setMultipleDraws(multiDraws.value);
var exportedTicked = await tempJTJTicket.exportTicket();
// TO REVISIT
if (isDcGame()) {
exportedTicked.participatingDraws.drawOffsets = [dcticketDrawOffset()];
}
// END
verifyCoupon({
ticket: {
wager: {
dbg: [exportedTicked],
},
metadata: {},
},
});
});
return;
}
if (ticket.boards.length < boardMultiplier) {
ticket.appendBoards({
number: boardMultiplier - ticket.boards.length,
}); // -1 because there will always be 1 board entry on a ticket
}
ticket.quickPick().then(async () => {
if (isDcGame() && isDrawTimeBoth()) {
ticket.setMultipleDraws(multiDraws.value / 2);
} else {
ticket.setMultipleDraws(multiDraws.value);
}
var exportedTicked = await ticket.exportTicket();
// TO REVISIT
if (isDcGame()) {
exportedTicked.participatingDraws.drawOffsets = [dcticketDrawOffset()];
}
// END
verifyCoupon({
ticket: {
wager: {
dbg: [exportedTicked],
},
metadata: {},
},
});
});
return;
} else {
var exportedTicked;
if (isDcGame() && isDrawTimeBoth()) {
ticket.setMultipleDraws(multiDraws.value / 2);
exportedTicked = await ticket.exportTicket();
} else if (isR2RGame(gameId)){
ticket.setMultipleDraws(multiDraws.value);
const tempJTJTicket = Object.create(ticket);
tempJTJTicket.addOptions(ticketOptions);
exportedTicked = await tempJTJTicket.exportTicket();
} else {
ticket.setMultipleDraws(multiDraws.value);
exportedTicked = await ticket.exportTicket();
}
// TO REVISIT
if (isDcGame()) {
exportedTicked.participatingDraws.drawOffsets = [dcticketDrawOffset()];
}
// END
verifyCoupon({
ticket: {
wager: {
dbg: [exportedTicked],
},
metadata: {},
},
});
}
setShowBuyConfirmationModal(false);
} else {
console.log('nope');
}
};
const range = (start, end) => Array.from(Array(end - start + 1).keys()).map((x) => x + start);
const handleTicketAddToCart = () => {
if (ticket) {
mobxStore.addTicketToCart(
ticket,
ticketOptions,
disableManualInput,
multiDraws,
drawTime,
advancePlay,
isDcGame() ? dcDetailsFromIndex : null,
isDcGame() ? dcDetailsToIndex : null,
isDcGame() ? dcticketDrawOffset() : null,
isDcGame() ? isDrawTimeBoth() : false
);
mobxStore.setGlobalToast({
mode: 'success',
message: "Ticket added to your cart",
});
navigation.goBack();
resetTicket();
}
};
const appDataBannerItem = appData?.response?.bannerCollection[0]?.tiles.find(
(entry) => entry.gameId === gameId.toString()
);
if (isAppDataLoading) {
return <LoadingScreen />;
}
const scrollViewRef = React.useRef();
const handleScrollToTop = () => {
if (scrollViewRef?.current) {
scrollViewRef.current.scrollTo({ y: 0, animated: true });
}
};
useEffect(()=> {
handleScrollToTop();
},[route])
const enablePowerPlayMM = () => {
if (showMegaplierConfirmation && showMegaplierConfirmation.gameOption && showMegaplierConfirmation.optionCost) {
const _ticketOptions = ticketOptions.filter(
(option) => !option.canPlayAlone,
);
setDisableManualInput(false);
_ticketOptions.push(showMegaplierConfirmation);
_ticketOptions.push({
...showMegaplierConfirmation.gameOption,
perPlaycost: showMegaplierConfirmation.optionCost,
dperPlaycost: showMegaplierConfirmation.optionCost,
});
setTicketOptions(_ticketOptions);
ticket.addOptions(ticketOptions);
setTicket(Object.create(ticket));
setShowMegaplierConfirmation(null);
} else {
setShowMegaplierConfirmation(null);
}
}
const jackpotDisplay = () => {
var text: string = (appData?.response?.menuGamesLists?.lotteryListOverview?.games?? []).find((e) => Number(e.gameId) == gameId)?.jackpotText ?? item?.jackpotText ?? config.jackpotReplacement;
if (text.endsWith(".00")) {
text = text.substring(0, text.length - 3);
}
return text;
}
return (
<React.Fragment>
<Layout>
<ScrollView contentInsetAdjustmentBehavior="automatic" ref={scrollViewRef}>
<View style={{ paddingVertical: 20, paddingHorizontal: 15 }}>
<BPageHeader
title="Lottery games"
onPress={() => {
navigation.goBack();
}}
hideCloseIcon
/>
{/* */}
<TransparentContainer noPadding>
<LinearGradient
colors={[
config.gameColor,
config.gameColor,
config.gameBackgroundColor,
]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={{
...GLOBAL_STYLE.flex1,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
position: 'relative',
}}>
<View style={{top: 0.0, right: 0.0, flexDirection: 'row'}}>
<View style={{flex: 1, alignItems: "flex-end", marginTop: 10}}>
<InfoButton onPress={() => setShowGameInfoModal(true) } />
</View>
<SizedBox width={25} />
</View>
<View style={{ padding: 15, paddingTop: -10 }}>
<BImage
source={{ uri: config.gameLogo }}
style={{
height: 78,
width: 200,
marginTop: 10,
resizeMode: 'contain',
alignSelf: 'center',
}}
/>
<SizedBox height={10} />
{/* ESTIMATED JACKPOT AMOUNT */}
{(isPowerBall(gameId) || isMegaMillion(gameId)) && (
<Text style={{color: "white", fontSize: 15, fontWeight:"500", paddingBottom: 5, paddingTop: 5, textAlign: "center", textTransform: "uppercase"}}>
{"Estimated Jackpot Amount"}
</Text>
)}
<Text
style={{
...GS.FF_PoppinsSemiBold,
fontSize: 32,
lineHeight: 42,
textAlign: 'center',
color: 'white',
}}>
{jackpotDisplay()}
</Text>
{gameFutureDraws?.response.draws.items[0].draw.drawDate && (
<View style={styles.inlineText}>
<Text
style={[
styles.textSmall,
styles.textBold,
GS.txtWhite,
]}>
Next draw:
</Text>
<SizedBox width={3.5} />
<Text style={[styles.textSmall, GS.txtWhite]}>
{Moment.unix(
gameFutureDraws?.response.draws.items[0].draw
.drawDate as number,
).format('dddd DD/MM/yyyy hh:mm A')}
</Text>
</View>
)}
{/* DRAW DAYS */}
<View style={{...styles.inlineText, marginStart:12, marginEnd: 12}}>
<Text
style={[styles.textSmall, styles.textBold, GS.txtWhite]}>
Draw days:
<Text style={{...styles.textSmall, color: "white", fontFamily: 'Poppins-Regular'}}>
{" "}{playDays.length === 7 ||
playDays.length === 0
? 'EVERYDAY'
: playDays.join(' | ')}
</Text>
</Text>
<SizedBox width={3.5} />
</View>
{gameFutureDraws?.response.draws.items[0].draw.drawDate && (
<View style={{ marginTop: 15 }}>
<Text
style={[
styles.textSmall,
styles.textBold,
GS.txtWhite,
GS.txtCenter,
]}>
Time until draw
</Text>
<SizedBox height={12.5} />
{/* TIMER */}
<BTimer
expiryDate={Moment.unix(
gameFutureDraws?.response.draws.items[0].draw
.drawDate,
)}
onExpired={() => {
if (isR2RGame(gameId)) {
refetchGameFutureDraws();
refetchGameLastDraw();
}
}}
/>
</View>
)}
{/* RECENT WINNING NUMBERS */}
<View>
<Text
style={{
...GLOBAL_STYLE.FF_PoppinsSemiBold,
...GLOBAL_STYLE.txtWhite,
textTransform: 'uppercase',
textAlign: 'center',
marginTop: 15,
}}>
Recent Winning Numbers
</Text>
{lotteryGame &&
gameLastDraw?.response?.last?.items[0]?.draw?.results && (
<GameCardDrawResults
gameSettings={lotteryGame}
results={gameLastDraw.response.last.items[0].draw.results}
/>
)}
{lotteryGame &&
gameLastDraw &&
lotteryGame.rules?.availableGameTypes?.length > 0 &&
gameLastDraw.response.last.items[0].draw.results[
lotteryGame.rules?.panels[0].boards.length
] && (
<View>
<SizedBox height={5} />
<Text style={{ color: 'white', textAlign: 'center' }}>
{`${
lotteryGame.rules.availableGameTypes[0].gameTypeName
} ${
gameLastDraw.response.last.items[0].draw.results[
lotteryGame.rules.panels[0].boards.length
]
}`}
</Text>
</View>
)}
{
isR2RGame(gameId) &&
lotteryGame &&
gameLastDraw &&
lotteryGame.rules?.availableGameTypes?.length > 0 &&
lotteryGame.rules?.panels[0].boards.length > gameLastDraw.response.last.items[0].draw.results.length &&
gameLastDraw.response.last.items[0].draw.results[
gameLastDraw.response.last.items[0].draw.results.length - 1
] && (
<View>
<SizedBox height={5} />
<Text style={{ color: 'white', textAlign: 'center' }}>
{`${
lotteryGame.rules.availableGameTypes[0].gameTypeName
} ${
gameLastDraw.response.last.items[0].draw.results[
gameLastDraw.response.last.items[0].draw.results.length - 1
]
}`}
</Text>
</View>
)}
</View>
</View>
{/* */}
<View style={[GS.row, GS.justifyBetween]}>
<OptionSelectable
isFirst
isActive={currentView === NUMERICAL_GAME_VIEW.MANUEL_PLAY}
title="Manual play"
icon={icons.manualplay_symbol}
onPress={() => {
saveCurrentTicketPerPlay();
setCurrentView(NUMERICAL_GAME_VIEW.MANUEL_PLAY);
const cachedTicket = getCachedTicketByView(NUMERICAL_GAME_VIEW.MANUEL_PLAY);
setTicket(cachedTicket);
}}
activeTabColor={getTabColor(gameId, appData)?.tabActiveColor}
inActiveTabColor={getTabColor(gameId, appData)?.tabInactiveColor}
/>
<OptionSelectable
title="Quick play"
isActive={currentView === NUMERICAL_GAME_VIEW.QUICK_PLAY}
icon={icons.quickplay_symbol}
onPress={() => {
saveCurrentTicketPerPlay();
setCurrentView(NUMERICAL_GAME_VIEW.QUICK_PLAY);
const cachedTicket = getCachedTicketByView(NUMERICAL_GAME_VIEW.QUICK_PLAY);
setTicket(cachedTicket);
}}
activeTabColor={getTabColor(gameId, appData)?.tabActiveColor}
inActiveTabColor={getTabColor(gameId, appData)?.tabInactiveColor}
/>
<OptionSelectable
isLast
isActive={
currentView === NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS
}
disabled={!isAuthenticated}
title="Favorite payslips"
icon={icons.fav_symbol}
onPress={() => {
setIsModified(false);
saveCurrentTicketPerPlay();
setCurrentView(NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS);
const cachedTicket = getCachedTicketByView(NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS);
setTicket(cachedTicket);
}}
activeTabColor={getTabColor(gameId, appData)?.tabActiveColor}
inActiveTabColor={getTabColor(gameId, appData)?.tabInactiveColor}
/>
</View>
</LinearGradient>
{/* */}
<View>{displayTabs ? renderNumericalGameView() : <><ActivityIndicator size={50} color={'white'} /></>}</View>
</TransparentContainer>
{/* ADVANCE PLAY */}
{isDcGame() && (
<TransparentContainer>
<Text style={{ marginBottom: 10, ...styles.containerTitle }}>
Advance play
</Text>
<View style={[GS.row, GS.flexWrap, GS.alignCenter]}>
{ADVANCE_PLAYS.map((item, index) => (
<View
key={index}
style={{
width: '33.3%',
marginBottom: 12.5,
paddingRight: 20,
}}>
<BToggle
value={item.value === advancePlay}
label={item.label}
onValueChange={() => {
setAdvancePlay(item.value);
ticket.setDaySelection(item.value);
setTicket(Object.create(ticket));
}}
/>
</View>
))}
</View>
</TransparentContainer>
)}
{/* DRAW TIME */}
{isDcGame() && (
<TransparentContainer>
<Text style={{ marginBottom: 15, ...styles.containerTitle }}>
Draw time
</Text>
<View style={[GS.row, GS.alignCenter, GS.mb1]}>
{DRAW_TIMES.map((item, index) => (
<View style={{ marginRight: 20 }} key={index}>
<BToggle
value={item.value === drawTime}
label={item.label}
onValueChange={() => {
setQuickIndexSelected(null);
handleCaseFavoriteModified();
setDrawTime(item.value);
ticket.setTimePeriod(item.value);
// TO CHECK - UPDATE TICKET MULTIPLE DRAWS
const newValue = sliderIndexToMultidrawObject(multiDraws.sliderIndex, isDcGame(), item.value == DRAW_TIMES[2].value);
setMultiDraws(newValue);
ticket.setMultipleDraws(newValue.value);
setTicket(Object.create(ticket));
}}
/>
</View>
))}
</View>
</TransparentContainer>
)}
{/* MULTI DRAWS */}
<TransparentContainer>
<Text style={{ marginBottom: 10, ...styles.containerTitle }}>
Multi {isR2RGame(gameId) ? "Races" : "Draws"}
</Text>
<View style={[GS.row, GS.alignCenter]}>
<Text style={[GS.FF_PoppinsSemiBold, { display: 'flex' }]}>
{isDcGame() && !dcMultipleDrawsMaxValue ? "" : config.minNumberOfMultipleDraws}
</Text>
<View style={[GS.flex1, GS.px2, GS.positionRelative]}>
{!isDcGame() && !isR2RGame(gameId) && (
<CustomTrackSlider
range={range}
maximumValue={config.maxNumberOfMultipleDraws / 2 + 1}
/>
)}
{/* DC GAME SLIDER */}
{ isDcGame() && (
dcMultipleDrawsMaxValue ? (
<Slider
animationType="spring"
animateTransitions={false}
minimumValue={config.minNumberOfMultipleDraws}
step={1}
maximumValue={dcMultipleDrawsMaxValue}
value={multiDraws.sliderIndex}
trackClickable={false}
minimumTrackTintColor="rgba(0,0,0,.25)"
maximumTrackTintColor="rgba(0,0,0,.25)"
onValueChange={(value) => {
handleCaseFavoriteModified();
const newValue = sliderIndexToMultidrawObject(value[0], isDcGame(), isDrawTimeBoth());
setMultiDraws(newValue);
ticket.setMultipleDraws(newValue.value);
}}
trackStyle={styles.trackSlider}
renderThumbComponent={() => (
<View style={styles.thumbSlider}>
<Text
style={{
fontSize: 10,
...GS.FF_PoppinsSemiBold,
color: 'white',
}}>
{isDcGame() ? multiDraws.sliderIndex : multiDraws.value}
</Text>
</View>
)}
/>
) : (
<>
<Text style={{ marginLeft: -8, ...styles.containerTitle, fontSize: 13 }}>
Only one Day is available
</Text>
</>
))
}
{/* NOT DC GAME SLIDER */}
{!isDcGame() && (
<Slider
disabled={isSliderDisabled}
animationType="spring"
animateTransitions={false}
minimumValue={config.minNumberOfMultipleDraws}
step={1}
maximumValue={isR2RGame(gameId) ? config.maxNumberOfMultipleDraws : config.maxNumberOfMultipleDraws / 2 + 1}
value={multiDraws.sliderIndex}
trackClickable={false}
minimumTrackTintColor="rgba(0,0,0,.25)"
maximumTrackTintColor="rgba(0,0,0,.25)"
onValueChange={(value) => {
handleCaseFavoriteModified();
const newMultiDrawsObject = sliderIndexToMultidrawObject(value[0], false, false, isR2RGame(gameId));
setMultiDraws(newMultiDrawsObject);
ticket.setMultipleDraws(newMultiDrawsObject.value);
}}
trackStyle={styles.trackSlider}
renderThumbComponent={() => (
<View style={{...styles.thumbSlider, backgroundColor: isSliderDisabled ? "#D3D3D3" : CONSTANT_COLOR.primary}}>
<Text
style={{
fontSize: 10,
...GS.FF_PoppinsSemiBold,
color: 'white',
}}>
{multiDraws.value}
</Text>
</View>
)}
/>
)}
</View>
<Text
style={[
GS.FF_PoppinsSemiBold,
{
display: 'flex',
},
]}>
{(
isDcGame() && dcMultipleDrawsMaxValue ? dcMultipleDrawsMaxValue :
(isDcGame() && !dcMultipleDrawsMaxValue) ? "" :
config.maxNumberOfMultipleDraws
)}
</Text>
</View>
</TransparentContainer>
{/* TICKET OPTIONS */}
{config.availableOptions.map((gameOption, i) => {
const selectedGameOptionObject = ticketOptions.find(
(entry) => entry.id === gameOption.id,
);
const gameOptionIsSelected =
selectedGameOptionObject !== undefined;
let boardColumns =
config.minNumberOfBoards * config.board.panels.length;
let optionCost = boardColumns;
if (gameOption.operator === 'x') {
optionCost *= gameOption.operand;
} else if (gameOption.operator === '+') {
optionCost += gameOption.operand;
}
if (gameOption.multipliers.length > 0) {
let defaultOptionMultiplier = gameOption.multipliers.find(
(entry) => entry.isDefault,
);
if (defaultOptionMultiplier) {
if (gameOption.operator === 'x') {
optionCost *= defaultOptionMultiplier.value;
} else if (gameOption.operator === '+') {
optionCost += defaultOptionMultiplier.value;
}
}
}
return (
<TransparentContainer key={i}>
<View style={[GS.row, GS.alignCenter]}>
<View style={{ flexGrow: 1 }}>
<Text style={styles.containerTitle}>
{gameOption.name}
</Text>
</View>
<View style={[GS.row, GS.alignCenter]}>
<Text
style={{
fontSize: 12,
...GS.FF_PoppinsSemiBold,
textTransform: 'uppercase',
}}>
{`${isR2RGame(gameId) ? "": "$"}`}
{gameOption.shortdescr.replace(
'{cost}',
optionCost.toFixed(2),
)}
</Text>
<SizedBox width={10} />
<BSwitch
onValueChange={(v) => {
handleCaseFavoriteModified();
if (v) {
if (gameOption.canPlayAlone) {
if (gameOption.id == "JTJ") {
// ASK FOR CONFIRMATION
setShowJTJConfirmationModal([
{
...gameOption,
perPlaycost: optionCost,
dperPlaycost: optionCost,
value: 1,
},
]);
} else {
setTicket(
ticketFactory.createDefault({ gameId, config }),
);
setDisableManualInput(true);
setTicketOptions([
{
...gameOption,
perPlaycost: optionCost,
dperPlaycost: optionCost,
value: 1,
},
]);
}
} else {
if (gameOption.id == "PowerPlay" && isMegaMillion(gameId) && isJTJ) {
// CONFIRMATION
setShowMegaplierConfirmation({
gameOption: gameOption,
optionCost: optionCost
});
} else {
// remove any other selected canPlayAlone options
const _ticketOptions = ticketOptions.filter(
(option) => !option.canPlayAlone,
);
setDisableManualInput(false);
_ticketOptions.push({
...gameOption,
perPlaycost: optionCost,
dperPlaycost: optionCost,
});
setTicketOptions(_ticketOptions);
ticket.addOptions(ticketOptions);
setTicket(Object.create(ticket));
}
}
} else {
if (gameOption.id == "JTJ") {
resetTicket();
} else {
let optionToRemove = ticketOptions.find(
(entry) => entry.id === gameOption.id,
);
if (optionToRemove) {
if (optionToRemove.canPlayAlone) {
setDisableManualInput(false);
}
let optionIndex =
ticketOptions.indexOf(optionToRemove);
ticketOptions.splice(optionIndex, 1);
setTicketOptions(ticketOptions);
ticket.addOptions(ticketOptions);
setTicket(Object.create(ticket));
}
}
}
}}
value={gameOptionIsSelected}
size="small"
/>
</View>
</View>
{gameOptionIsSelected &&
gameOption.multipliers.length > 0 && (
<Slider
minimumValue={1}
step={1}
maximumValue={gameOption.multipliers.length}
value={selectedGameOptionObject.value || 1}
trackClickable={false}
minimumTrackTintColor="rgba(0,0,0,.25)"
maximumTrackTintColor="rgba(0,0,0,.25)"
onValueChange={(value) => {
handleCaseFavoriteModified();
selectedGameOptionObject.perPlaycost =
value[0] * selectedGameOptionObject.dperPlaycost;
selectedGameOptionObject.value = value[0];
ticketOptions[
ticketOptions.indexOf(selectedGameOptionObject)
] = selectedGameOptionObject;
setTicketOptions([...ticketOptions]);
}}
trackStyle={styles.trackSlider}
renderThumbComponent={() => (
<View style={styles.thumbSlider}>
<Text
style={{
fontSize: 13,
...GS.FF_PoppinsSemiBold,
color: 'white',
}}>
{
ticketOptions[
ticketOptions.indexOf(
selectedGameOptionObject,
)
].value
}
</Text>
</View>
)}
/>
)}
</TransparentContainer>
);
})}
{/* DRAWS */}
<TransparentContainer>
{!isDcGame() && (
<>
<Text style={{ marginBottom: 10, ...styles.containerTitle }}>
Draws
</Text>
<BListItem
label="From"
value={moment
.unix(
gameFutureDraws?.response.draws.items[0].draw
.drawDate as number,
)
.format('MM/DD/yyyy hh:mm A')}
bolder
/>
{gameFutureDraws?.response.draws.items[multiDraws.value - 1] && (
<BListItem
label="To"
value={moment
.unix(
gameFutureDraws?.response.draws.items[
multiDraws.value - 1
].draw.drawDate,
)
.format('MM/DD/yyyy hh:mm A')}
bolder
/>
)}
</>
)}
{isDcGame() && dcDetailsFrom && dcDetailsTo && (
<>
<Text style={{ marginBottom: 10, ...styles.containerTitle }}>
Draws
</Text>
<BListItem
label="From"
value={dcDetailsFrom}
bolder
/>
<BListItem
label="To"
value={dcDetailsTo}
bolder
/>
</>
)}
<BListItem
label="No of draws"
value={`X${multiDraws.value}`}
bolder
/>
<Text style={{ marginVertical: 10, ...styles.containerTitle }}>
Price details
</Text>
{
(selectedFavoriteTicket && !isModified && currentView === NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS) ? (
<BListItem
key="fav_key"
label=" FAVORITE:"
value={selectedFavoriteTicket.description}
bolder
/>
) : (
<></>
)
}
{/* DC GAMES */}
{isDcGame() && (
<>
{getTotalCostDetails().plays.map((entry, i, data) => {
return (
<BListItem
key={i}
label={entry.label}
value={`$${entry.price.toFixed(2)}`}
bolder
/>
);
})}
<BListItem
key={"total_grand"}
label={config.gameName}
value={`$${getTotalCostDetails().grandTotal.toFixed(2)}`}
bolder
/>
</>
)}
{/* NOT DC GAMES */}
{!isDcGame() && (
<>
{ticketOptions.find((option) => option.id === 'JTJ') == null && (
isR2RGame(gameId) ? (
<BListItem
label={`${
ticketActiveBoards > 1 ? ticketActiveBoards + ' X ' : ''
} ${config.gameName}`}
value={`$${(ticket.calculateCost()).toFixed(2)}`}
bolder
/>
) : (
<BListItem
label={`${
ticketActiveBoards > 1 ? ticketActiveBoards + ' X ' : ''
} ${config.gameName}`}
value={`$${(
(ticketActiveBoards || 1) * config.columnPrice
).toFixed(2)}`}
bolder
/>
)
)}
{ticketOptions.map((entry, i) => {
const option = config.availableOptions.find(
(configEntry) => entry.id === configEntry.id,
);
if (!option) {
return;
}
if (option.id === 'JTJ') {
return (
<BListItem
key={i}
label={option.name}
value={`${
multiDraws.value
} x $${entry.perPlaycost.toFixed(2)}`}
bolder
/>
);
} else if (isR2RGame(gameId)) {
return (
<BListItem
key={i}
label={option.name}
value={`$${(ticket.calculateCost()).toFixed(2)}`}
bolder
/>
);
} else {
return (
<BListItem
key={i}
label={option.name}
value={`${
ticket.boards.length
} x $${entry.perPlaycost.toFixed(2)}`}
bolder
/>
);
}
})}
</>
)}
<BSeparator
spaceless
style={{ marginTop: 15, marginBottom: 10 }}
/>
<BListItem
label="Total"
value={
!getBuyNowButtonEnabled() ? "$0.00":
(isDcGame() ?
`$${getTotalCostDetails().grandTotal.toFixed(2)}`
:
isR2RGame(gameId) ? `$${(ticket.calculateCost() * (isR2RBonusEnabled ? 2 : 1)).toFixed(2)}`
: `$${((canDisplayTotal()) ? ticketTotal : 0).toFixed(2)}`)
}
size="extraLarge"
bolder
/>
<BSeparator
spaceless
style={{ marginTop: 10, marginBottom: 25 }}
/>
{(isR2RGame(gameId) ? ticket.calculateCost() > config.maxBetAmount : ticketTotal > config.maxBetAmount) && (
<Text style={{ marginBottom: 10, ...styles.containerTitle, color: "red", fontSize: 14 }}>
{`Your participation cost is higher than the maximum allowed ($${config.maxBetAmount}). Please change your play selections and try again.`}
</Text>
)}
{/* BUY NOW BUTTON */}
<BButton
title="Buy now"
onPress={handleTicketBuyNow}
mode="danger"
disabled={
(ticketOptions.find((e) => e.id == "JTJ")) ? false
:
isR2RGame(gameId) ?
!(getBuyNowButtonEnabled() && ticket.calculateCost() < config.maxBetAmount && ticket.calculateCost() >= 1)
:
!(getBuyNowButtonEnabled() && ticketTotal < config.maxBetAmount)
}
/>
<SizedBox height={15} />
{/* ADD TO CART BUTTON */}
<BButton
title={currentCartItem ? "Update cart" : "Add to cart"}
onPress={() => {
if (currentCartItem && currentCartItem.ticket) {
updateCart();
} else {
handleTicketAddToCart();
}
}}
disabled={
isR2RGame(gameId) ?
!(getBuyNowButtonEnabled() && ticket.calculateCost() < config.maxBetAmount && ticket.calculateCost() >= 1)
:
!(getBuyNowButtonEnabled() && ticketTotal < config.maxBetAmount)
}
mode="primary"
/>
<SizedBox height={15} />
{/* ADD TO FAVORITES */}
<BButton
title={currentView == NUMERICAL_GAME_VIEW.FAVORITE_PAYSLIPS && selectedFavoriteTicket ? "Update favorite" : "Add to favorites"}
onPress={() => {
if (isDcGame() && isDrawTimeBoth()) {
ticket.setMultipleDraws(multiDraws.value / 2);
} else {
ticket.setMultipleDraws(multiDraws.value);
}
setShowFavoriteNumberModal(true)
}}
disabled={
isR2RGame(gameId) ?
(!ticketCanBeSubmited ||
disableManualInput ||
!(getBuyNowButtonEnabled() && ticket.calculateCost() < config.maxBetAmount && ticket.calculateCost() >= 1) ||
isJTJ)
:
(!ticketCanBeSubmited ||
disableManualInput ||
!(getBuyNowButtonEnabled() && ticketTotal < config.maxBetAmount) ||
isJTJ)
}
/>
<SizedBox height={20} />
</TransparentContainer>
</View>
<Footer/>
</ScrollView>
{/* GENERATE QR CODE MODAL */}
{showGenerateQrCodeModal && (
<GenerateQrCodeModal
isVisible={showGenerateQrCodeModal}
onClose={() => setShowGenerateQrCodeModal(false)}
/>
)}
{/* BUY CONFIRMATION MODAL */}
{showBuyConfirmationModal && (
<ConfirmationModal
isVisible={showBuyConfirmationModal}
onClose={() => setShowBuyConfirmationModal(false)}
logo={config.gameLogo}
config={config}
ticket={verifyTicketObj?.wager.dbg[0]}
cost={verifyTicketObj?.wager.dbg[0].cost}
participatingDraws={
verifyTicketObj?.wager.dbg[0].participatingDraws
}
onBuy={() => {
if (verifyTicketObj) {
execPlayCoupon({ ticket: verifyTicketObj });
}
}}
isDCGame={isDcGame()}
/>
)}
{/* MESSAGE MODAL */}
{showBuyMessageModal && (
<MessageModal
isVisible={showBuyMessageModal}
onClose={() => {
setShowBuyMessageModal(false);
setVerifyTicketObj(null);
setSerialNumber(null);
handleScrollToTop();
}}
logo={config.gameLogo}
ticket={verifyTicketObj?.wager.dbg[0]}
cost={verifyTicketObj?.wager.dbg[0].cost}
participatingDraws={
verifyTicketObj?.wager.dbg[0].participatingDraws
}
serialNumber={serialNumber}
config={config}
/>
)}
{/* JTJ CONFIRMATION TOGGLE */}
{showJTJConfirmationModal && (
<JTJConfirmationModal
isVisible={showJTJConfirmationModal != null}
onNo={() => {
setShowJTJConfirmationModal(null);
}}
onYes={() => {
setTicket(
ticketFactory.createDefault({ gameId, config }),
);
setDisableManualInput(true);
setTicketOptions(showJTJConfirmationModal);
setShowJTJConfirmationModal(null);
}}
/>
)}
<AddToFavoritesModal
ticket={ticket}
ticketOptions={ticketOptions}
isVisible={showFavoriteNumberModal}
favoriteTicket={selectedFavoriteTicket}
onClose={() => setShowFavoriteNumberModal((v) => !v)}
onSuccess={() => {
setIsModified(false);
setShowSuccessMessage(`SUCCESSFULLY ${selectedFavoriteTicket ? 'UPDATED' : 'ADDED'} YOUR FAVORITE!`);
setTimeout(() => {
setShowSuccessAddFavorite(true);
}, 750);
}}
fromNumericalGame={true}
/>
{showSuccessAddFavorite && (
<GenericSuccessModal
isVisible={showSuccessAddFavorite}
message={showSuccessMessage}
onClose={() => {
setShowSuccessMessage("");
setShowSuccessAddFavorite(false);
}}
/>
)}
{appDataBannerItem && showGameInfoModal && (
<ViewNumericalGameInfoModal
isVisible={showGameInfoModal}
onClose={() => {
setShowGameInfoModal((v) => !v);
}}
game={appDataBannerItem}
/>
)}
{showMegaplierConfirmation != null && isMegaMillion(gameId) && (
<MegaPlierConfirmationModal
isVisible={showMegaplierConfirmation != null}
onPositive={() => {
enablePowerPlayMM();
}}
onNegative={() => {
setShowMegaplierConfirmation(null);
}}
onClose={() => {
setShowMegaplierConfirmation(null);
}}
/>
)}
</Layout>
</React.Fragment>
);
};
interface IJTJConfirmationModal {
isVisible: boolean;
onNo: () => void;
onYes: () => void;
}
const JTJConfirmationModal: React.FC<IJTJConfirmationModal> = ({
isVisible,
onNo,
onYes,
}) => {
return (
<BModal isVisible={isVisible} onClose={onNo}>
<React.Fragment>
<ScrollView showsVerticalScrollIndicator={false}>
<BModalHeader>
<Text
style={[
GS.txtUpper,
GS.FF_PoppinsSemiBold,
GS.txtCenter,
GS.py1,
GS.txtWhite,
]}>
Selecting Just The Jackpot will reset your current game board. Are you sure you want to continue?
</Text>
</BModalHeader>
<BModalFooter style={[GS.row, GS.justifyCenter]}>
<BButton
onPress={onNo}
title="No"
type="outlined"
/>
<SizedBox width={10} />
<BButton
title="Yes"
onPress={onYes}
mode="primary"
/>
</BModalFooter>
</ScrollView>
</React.Fragment>
</BModal>
);
};
interface IMegaplierConfirmation {
isVisible: boolean;
onClose: () => void;
onPositive: () => void;
onNegative: () => void;
}
const MegaPlierConfirmationModal: React.FC<IMegaplierConfirmation> = ({
isVisible,
onClose,
onPositive,
onNegative
}) => {
return (
<BModal isVisible={isVisible} onClose={onClose}>
<React.Fragment>
<ScrollView showsVerticalScrollIndicator={false}>
<BModalHeader>
<Text
style={[
GS.txtUpper,
GS.FF_PoppinsSemiBold,
GS.txtXl,
GS.py1,
GS.txtWhite,
]}>
Confirmation
</Text>
</BModalHeader>
<View style={[GS.px3, GS.py4]}>
<Text
style={[GS.txtCenter, GS.txtUpper, GS.txtSm, GS.mb4, GS.txtWhite]}>
Selecting Megaplier will turn off Just The Jackpot. Are you sure you want to continue ?
</Text>
</View>
<BModalFooter style={[GS.row, GS.justifyCenter]}>
<BButton
title="NO"
onPress={onNegative}
mode="primary"
/>
<SizedBox width={8} />
<BButton
title="YES"
onPress={onPositive}
mode="danger"
/>
</BModalFooter>
</ScrollView>
</React.Fragment>
</BModal>
);
};
export default NumericalGameInnerScreen;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment