@opexa/portal-components 0.0.5 → 0.0.7

package/dist/components/BetRecords/BetRecordsContent.jsx

@@ -1,413 +0,0 @@
-'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { createListCollection, parseDate, Portal } from '@ark-ui/react';
-import { tz, TZDateMini } from '@date-fns/tz';
-import { endOfDay, format, startOfDay } from 'date-fns';
-import { useReducer, useState } from 'react';
-import { z } from 'zod';
-import { useBetRecordsQuery } from '../../hooks/useBetRecordsQuery/useBetRecordsQuery.js';
-import { useInfiniteQueryHelper } from '../../hooks/useInfiniteQueryHelper.js';
-import { useLocaleInfo } from '../../hooks/useLocaleInfo.js';
-import { CheckIcon } from '../../icons/CheckIcon.jsx';
-import { ChevronDownIcon } from '../../icons/ChevronDownIcon.jsx';
-import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.jsx';
-import { ChevronRightIcon } from '../../icons/ChevronRightIcon.jsx';
-import { File02Icon } from '../../icons/File02Icon.jsx';
-import { SpinnerIcon } from '../../icons/SpinnerIcon.jsx';
-import { DatePicker, IconButton, SegmentGroup, Select, Table, } from '../../ui/index.js';
-import { capitalize } from '../../utils/capitalize.js';
-import { formatNumber } from '../../utils/formatNumber.js';
-import { Empty } from '../Empty/index.js';
-export function BetRecordsContent(props) {
-    var _a, _b;
-    var _c = useState('all'), tab = _c[0], setTab = _c[1];
-    var _d = useReducer(function (prev, next) { return (__assign(__assign({}, prev), next)); }, {
-        page: 1,
-        pageSize: 10,
-        type: props.gameTypes[0],
-    }), state = _d[0], setState = _d[1];
-    var localeInfo = useLocaleInfo();
-    var providerCollection = createListCollection({
-        items: props.gameProviders,
-        itemToValue: function (item) { return item; },
-        itemToString: function (item) {
-            return capitalize(item, {
-                delimiter: capitalize.delimiters.UNDERSCORE,
-            });
-        },
-    });
-    var _e = useInfiniteQueryHelper(useBetRecordsQuery, {
-        filter: __assign(__assign(__assign(__assign({}, (state.type && {
-            game__type: {
-                equal: state.type,
-            },
-        })), (state.provider && {
-            game__provider: {
-                equal: state.provider,
-            },
-        })), (state.status && {
-            status: {
-                equal: state.status,
-            },
-        })), (state.timestamp && {
-            dateTimeCreated: __assign(__assign({}, (state.timestamp.start && {
-                greaterThanOrEqual: new TZDateMini(startOfDay(state.timestamp.start), localeInfo.timezone).toISOString(),
-            })), (state.timestamp.end && {
-                lesserThanOrEqual: new TZDateMini(endOfDay(state.timestamp.end), localeInfo.timezone).toISOString(),
-            })),
-        })),
-    }), page = _e.page, pageSize = _e.pageSize, hasNextPage = _e.hasNextPage, hasPrevPage = _e.hasPrevPage, next = _e.next, prev = _e.prev, rows = _e.rows, setPageSize = _e.setPageSize, totalPages = _e.totalPages, loading = _e.loading, firstPage = _e.firstPage;
-    return (<div className={props.className}>
-      <h2 className="text-lg font-semibold">Bet Records</h2>
-      <p className="text-gray-600 mt-xs text-xs">View your bet records</p>
-
-      <div className="mt-2xl pb-2xl">
-        <SegmentGroup.Root value={state.type} onValueChange={function (details) {
-            var _a, _b;
-            firstPage();
-            setState({
-                type: (_b = z
-                    .enum(((_a = props.gameTypes) !== null && _a !== void 0 ? _a : []))
-                    .safeParse(details.value).data) !== null && _b !== void 0 ? _b : null,
-            });
-        }}>
-          {props.gameTypes.map(function (type) { return (<SegmentGroup.Item key={type} value={type}>
-              <SegmentGroup.ItemText>
-                {capitalize(type, {
-                delimiter: capitalize.delimiters.UNDERSCORE,
-            })}
-              </SegmentGroup.ItemText>
-              <SegmentGroup.ItemControl />
-              <SegmentGroup.ItemHiddenInput />
-            </SegmentGroup.Item>); })}
-
-          <SegmentGroup.Indicator />
-        </SegmentGroup.Root>
-      </div>
-
-      <div className="mt-4xl">
-        <div className="flex items-center gap-lg">
-          <DatePicker.Root lazyMount unmountOnExit value={[(_a = state.timestamp) === null || _a === void 0 ? void 0 : _a.start, (_b = state.timestamp) === null || _b === void 0 ? void 0 : _b.end]
-            .filter(Boolean)
-            .map(function (d) { return parseDate(d); })} onValueChange={function (details) {
-            var _a, _b;
-            firstPage();
-            setState({
-                timestamp: {
-                    start: (_a = details.value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate(DEVICE_TIMEZONE),
-                    end: (_b = details.value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate(DEVICE_TIMEZONE),
-                },
-            });
-        }} onOpenChange={function (details) {
-            if (details.open)
-                return;
-            if (state.timestamp)
-                return;
-            setTab('all');
-        }} selectionMode="range" closeOnSelect={false} positioning={{
-            gutter: 20,
-            placement: 'bottom',
-        }}>
-            <SegmentGroup.Root value={tab} onValueChange={function (details) {
-            var value = TabDefinition.parse(details.value);
-            if (value === 'today') {
-                var now = new Date();
-                setState({
-                    timestamp: {
-                        start: startOfDay(now),
-                        end: endOfDay(now),
-                    },
-                });
-            }
-            else {
-                setState({
-                    timestamp: null,
-                });
-            }
-            firstPage();
-            setTab(value);
-        }}>
-              <SegmentGroup.Item value="all">
-                <SegmentGroup.ItemText>All</SegmentGroup.ItemText>
-                <SegmentGroup.ItemControl />
-                <SegmentGroup.ItemHiddenInput />
-              </SegmentGroup.Item>
-              <SegmentGroup.Item value="today">
-                <SegmentGroup.ItemText>Today</SegmentGroup.ItemText>
-                <SegmentGroup.ItemControl />
-                <SegmentGroup.ItemHiddenInput />
-              </SegmentGroup.Item>
-
-              <DatePicker.Context>
-                {function (api) { return (<SegmentGroup.Item value="custom" onClick={function () { return api.setOpen(true); }}>
-                    <DatePicker.Control>
-                      <SegmentGroup.ItemText>Custom</SegmentGroup.ItemText>
-                      <SegmentGroup.ItemControl />
-                      <SegmentGroup.ItemHiddenInput />
-                    </DatePicker.Control>
-                  </SegmentGroup.Item>); }}
-              </DatePicker.Context>
-
-              <SegmentGroup.Indicator />
-            </SegmentGroup.Root>
-            <Portal>
-              <DatePicker.Positioner>
-                <DatePicker.Content>
-                  <DatePicker.View view="day">
-                    <DatePicker.Context>
-                      {function (api) { return (<>
-                          <DatePicker.ViewControl>
-                            <DatePicker.PrevTrigger>
-                              <ChevronLeftIcon />
-                            </DatePicker.PrevTrigger>
-                            <DatePicker.ViewTrigger>
-                              <DatePicker.RangeText />
-                            </DatePicker.ViewTrigger>
-                            <DatePicker.NextTrigger>
-                              <ChevronRightIcon />
-                            </DatePicker.NextTrigger>
-                          </DatePicker.ViewControl>
-                          <DatePicker.Table>
-                            <DatePicker.TableHead>
-                              <DatePicker.TableRow>
-                                {api.weekDays.map(function (weekDay, id) { return (<DatePicker.TableHeader key={id}>
-                                    {weekDay.short.substring(0, 2)}
-                                  </DatePicker.TableHeader>); })}
-                              </DatePicker.TableRow>
-                            </DatePicker.TableHead>
-                            <DatePicker.TableBody>
-                              {api.weeks.map(function (week, id) { return (<DatePicker.TableRow key={id}>
-                                  {week.map(function (day, id) { return (<DatePicker.TableCell key={id} value={day}>
-                                      <DatePicker.TableCellTrigger>
-                                        {day.day}
-                                      </DatePicker.TableCellTrigger>
-                                    </DatePicker.TableCell>); })}
-                                </DatePicker.TableRow>); })}
-                            </DatePicker.TableBody>
-                          </DatePicker.Table>
-                        </>); }}
-                    </DatePicker.Context>
-                  </DatePicker.View>
-                </DatePicker.Content>
-              </DatePicker.Positioner>
-            </Portal>
-          </DatePicker.Root>
-
-          <div className="grow"/>
-
-          <Select.Root collection={providerCollection} value={state.provider ? [state.provider] : []} onValueChange={function (details) {
-            var _a;
-            var value = z
-                .enum(((_a = props.gameProviders) !== null && _a !== void 0 ? _a : []))
-                .safeParse(details.value.at(0)).data;
-            firstPage();
-            setState({
-                provider: value !== null && value !== void 0 ? value : null,
-            });
-        }} lazyMount deselectable>
-            <Select.Trigger>
-              <Select.ValueText placeholder="Game Vendor"/>
-              <Select.Indicator asChild>
-                <ChevronDownIcon />
-              </Select.Indicator>
-            </Select.Trigger>
-            <Portal>
-              <Select.Positioner>
-                <Select.Content>
-                  <Select.ItemGroup>
-                    {providerCollection.items.map(function (provider) { return (<Select.Item key={provider} item={provider}>
-                        <Select.ItemText>
-                          {capitalize(provider, {
-                delimiter: capitalize.delimiters.UNDERSCORE,
-            })}
-                        </Select.ItemText>
-                        <Select.ItemIndicator asChild>
-                          <CheckIcon />
-                        </Select.ItemIndicator>
-                      </Select.Item>); })}
-                  </Select.ItemGroup>
-                </Select.Content>
-              </Select.Positioner>
-            </Portal>
-          </Select.Root>
-
-          <Select.Root collection={statusCollection} value={state.status ? [state.status] : []} onValueChange={function (details) {
-            var value = z
-                .enum(BET_RECORD_STATUSES)
-                .safeParse(details.value.at(0)).data;
-            firstPage();
-            setState({
-                status: value !== null && value !== void 0 ? value : null,
-            });
-        }} lazyMount deselectable>
-            <Select.Trigger>
-              <Select.ValueText placeholder="Status"/>
-              <Select.Indicator asChild>
-                <ChevronDownIcon />
-              </Select.Indicator>
-            </Select.Trigger>
-            <Portal>
-              <Select.Positioner>
-                <Select.Content>
-                  <Select.ItemGroup>
-                    {statusCollection.items.map(function (status) { return (<Select.Item key={status} item={status}>
-                        <Select.ItemText>
-                          {capitalize(status, {
-                delimiter: capitalize.delimiters.UNDERSCORE,
-            })}
-                        </Select.ItemText>
-                        <Select.ItemIndicator asChild>
-                          <CheckIcon />
-                        </Select.ItemIndicator>
-                      </Select.Item>); })}
-                  </Select.ItemGroup>
-                </Select.Content>
-              </Select.Positioner>
-            </Portal>
-          </Select.Root>
-        </div>
-
-        {rows.length <= 0 && (<Empty icon={loading ? SpinnerIcon : File02Icon} title={loading ? 'Just a moment' : 'No data'} message={loading
-                ? 'Fetching latest bet records...'
-                : 'No data is currently available.'} className="mt-8 lg:mt-16"/>)}
-
-        {rows.length >= 1 && (<div className="border-gray-200 mt-lg rounded-xl border">
-            <div className="border-gray-200 overflow-hidden overflow-x-auto rounded-xl border-b">
-              <Table.Root className="border-0">
-                <Table.Header>
-                  <Table.Row>
-                    <Table.Heading>Bet Time</Table.Heading>
-                    <Table.Heading>Settlement Time</Table.Heading>
-                    <Table.Heading>Bet Content</Table.Heading>
-                    <Table.Heading>Odds</Table.Heading>
-                    <Table.Heading>Bet Amount</Table.Heading>
-                    <Table.Heading>Valid Bet</Table.Heading>
-                    <Table.Heading>Settled Amount</Table.Heading>
-                    <Table.Heading>Jackpot Contribution</Table.Heading>
-                    <Table.Heading>Jackpot Payout</Table.Heading>
-                    <Table.Heading>Bet Status</Table.Heading>
-                    <Table.Heading>Game Name</Table.Heading>
-                    <Table.Heading>Vendor Round ID</Table.Heading>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body>
-                  {rows.map(function (data) {
-                var _a;
-                return (<Table.Row key={data.id}>
-                      <Table.Cell>
-                        {format(data.dateTimeCreated, 'yyyy MMM dd hh:mma', {
-                        in: tz(localeInfo.timezone),
-                    })}
-                      </Table.Cell>
-                      <Table.Cell>
-                        {!!data.dateTimeSettled &&
-                        format(data.dateTimeSettled, 'yyyy MMM dd hh:mma', {
-                            in: tz(localeInfo.timezone),
-                        })}
-                      </Table.Cell>
-                      <Table.Cell>{data === null || data === void 0 ? void 0 : data.betContent}</Table.Cell>
-                      <Table.Cell>{(_a = data.metadata) === null || _a === void 0 ? void 0 : _a.odds}</Table.Cell>
-                      <Table.Cell>
-                        {formatNumber(data.bet, {
-                        currency: localeInfo.currency.code,
-                        minDecimalPlaces: 2,
-                    })}
-                      </Table.Cell>
-                      <Table.Cell>{data.validBet}</Table.Cell>
-                      <Table.Cell>
-                        {formatNumber(data.payout, {
-                        currency: localeInfo.currency.code,
-                        minDecimalPlaces: 2,
-                    })}
-                      </Table.Cell>
-                      <Table.Cell>
-                        {formatNumber(data.jackpotContribution, {
-                        currency: localeInfo.currency.code,
-                        minDecimalPlaces: 2,
-                    })}
-                      </Table.Cell>
-                      <Table.Cell>
-                        {formatNumber(data.jackpotPayout, {
-                        currency: localeInfo.currency.code,
-                        minDecimalPlaces: 2,
-                    })}
-                      </Table.Cell>
-                      <Table.Cell>{data.status}</Table.Cell>
-                      <Table.Cell>{data.game.name}</Table.Cell>
-                      <Table.Cell>{data.vendorRoundId}</Table.Cell>
-                    </Table.Row>);
-            })}
-                </Table.Body>
-              </Table.Root>
-            </div>
-
-            <div className="flex items-center gap-lg px-4 py-3">
-              <p>
-                Page {page} of {totalPages}
-              </p>
-              <div className="grow"></div>
-              <Select.Root size="sm" value={[pageSize.toString()]} onValueChange={function (details) {
-                var n = parseInt(details.value[0]);
-                var v = isNaN(n) ? 10 : n;
-                setPageSize(v);
-            }} collection={pageSizeCollection} lazyMount>
-                <Select.Trigger>
-                  <Select.ValueText />
-                  <Select.Indicator asChild>
-                    <ChevronDownIcon />
-                  </Select.Indicator>
-                  <Portal>
-                    <Select.Positioner>
-                      <Select.Content>
-                        {pageSizeCollection.items.map(function (item) { return (<Select.Item key={item} item={item}>
-                            {pageSizeCollection.stringifyItem(item)}
-                          </Select.Item>); })}
-                      </Select.Content>
-                    </Select.Positioner>
-                  </Portal>
-                </Select.Trigger>
-              </Select.Root>
-              <div>
-                <IconButton size="sm" variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" disabled={!hasPrevPage || loading} onClick={function () { return prev(); }}>
-                  <ChevronLeftIcon className="size-5"/>
-                </IconButton>
-                <IconButton size="sm" variant="outline" colorScheme="gray" className="rounded-l-none" disabled={!hasNextPage || loading} onClick={function () { return next(); }}>
-                  <ChevronRightIcon className="size-5"/>
-                </IconButton>
-              </div>
-            </div>
-          </div>)}
-      </div>
-    </div>);
-}
-var BET_RECORD_STATUSES = [
-    'CANCELLED',
-    'SETTLED',
-    'STARTED',
-];
-var pageSizeCollection = createListCollection({
-    items: useInfiniteQueryHelper.config.pageSizes,
-    itemToValue: function (item) { return item.toString(); },
-    itemToString: function (item) { return "".concat(item, " items per page"); },
-});
-var statusCollection = createListCollection({
-    items: BET_RECORD_STATUSES,
-    itemToValue: function (item) { return item; },
-    itemToString: function (item) {
-        return capitalize(item, {
-            delimiter: capitalize.delimiters.UNDERSCORE,
-        });
-    },
-});
-var TabDefinition = z.enum(['all', 'today', 'custom']);
-var DEVICE_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;

package/dist/components/BetRecords/index.js

@@ -1 +0,0 @@
-export * from './BetRecords.jsx';

package/dist/components/DepositWithdrawal/AmountChoices.jsx

@@ -1,31 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-import { useControllableState } from '../../hooks/useControllableState.js';
-import { useLocaleInfo } from '../../hooks/useLocaleInfo.js';
-import { Button } from '../../ui/index.js';
-import { dataAttr } from '../../utils/dataAttr.jsx';
-import { formatNumber } from '../../utils/formatNumber.jsx';
-export function AmountChoices(props) {
-    var _a, _b, _c, _d;
-    var min = (_a = props.min) !== null && _a !== void 0 ? _a : 0;
-    var max = (_b = props.max) !== null && _b !== void 0 ? _b : 9999999;
-    var localeInfo = useLocaleInfo();
-    var options = ((_c = props.options) === null || _c === void 0 ? void 0 : _c.length)
-        ? props.options
-        : [500, 750, 1000, 2000];
-    var _e = useControllableState({
-        value: props.value,
-        defaultValue: (_d = props.defaultValue) !== null && _d !== void 0 ? _d : options[0],
-        onChange: props.onChange,
-    }), value = _e[0], setValue = _e[1];
-    return (<div className={twMerge('grid grid-cols-4 gap-2', props.className)}>
-      {options.map(function (option) { return (<Button key={option} variant="outline" colorScheme="gray" onClick={function () {
-                setValue(option);
-            }} disabled={min > option || max < option} data-selected={dataAttr(value === option)}>
-          {formatNumber(option, {
-                currency: localeInfo.currency.code,
-                minDecimalPlaces: 0,
-                maxDecimalPlaces: 0,
-            })}
-        </Button>); })}
-    </div>);
-}

package/dist/components/DepositWithdrawal/AvailablePromos.jsx

@@ -1,78 +0,0 @@
-import { Carousel } from '@ark-ui/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { twMerge } from 'tailwind-merge';
-import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery } from '../../hooks/useAvailablePromosQuery/useAvailablePromosQuery.js';
-import { useControllableState } from '../../hooks/useControllableState.js';
-import { useGlobalStore } from '../../hooks/useGlobalStore.js';
-import { CheckIcon } from '../../icons/CheckIcon.jsx';
-import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.jsx';
-import { ChevronRightIcon } from '../../icons/ChevronRightIcon.jsx';
-import { Checkbox, IconButton } from '../../ui/index.js';
-export function AvailablePromos(props) {
-    var _a, _b;
-    var globalStore = useGlobalStore(useShallow(function (ctx) { return ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    }); }));
-    var query = useAvailablePromosQuery();
-    var promos = (_a = query.data) !== null && _a !== void 0 ? _a : [];
-    var _c = useControllableState({
-        value: props.value,
-        defaultValue: (_b = props.defaultValue) !== null && _b !== void 0 ? _b : null,
-        onChange: props.onChange,
-    }), value = _c[0], setValue = _c[1];
-    return (<Carousel.Root slideCount={promos.length} className={props.className} spacing="16px" slidesPerPage={2}>
-      <div className="flex items-center gap-xl">
-        <div className="grow">
-          <h2 className="text-lg font-semibold leading-tight">
-            Available Promotions
-          </h2>
-          <p className="text-gray-500 mt-1 text-sm leading-tight">
-            Select a promotion with your deposit. Only one can be active at a
-            time.
-          </p>
-        </div>
-
-        <Carousel.Control>
-          <Carousel.PrevTrigger asChild>
-            <IconButton variant="outline" colorScheme="gray" className="rounded-r-none border-r-0">
-              <ChevronLeftIcon />
-            </IconButton>
-          </Carousel.PrevTrigger>
-          <Carousel.NextTrigger asChild>
-            <IconButton variant="outline" colorScheme="gray" className="rounded-l-none">
-              <ChevronRightIcon />
-            </IconButton>
-          </Carousel.NextTrigger>
-        </Carousel.Control>
-      </div>
-
-      <Carousel.ItemGroup className="mt-3xl">
-        {promos.map(function (promo, index) { return (<Carousel.Item key={promo.id} index={index}>
-            <div className="relative select-none p-0.5">
-              <div className={twMerge('block rounded-lg', promo.id === value && 'ring-gray-500/25 ring-2')}>
-                {promo.banner.url && (<Image src={promo.banner.url} alt="" width={288} height={184} className="rounded-lg"/>)}
-              </div>
-
-              <Checkbox.Root checked={promo.id === value} onCheckedChange={function (details) {
-                setValue(details.checked ? promo.id : null);
-            }} className="absolute right-3 top-3 rounded-md border border-white/50 bg-white/60 p-lg backdrop-blur-sm">
-                <Checkbox.Control className="bg-white">
-                  <Checkbox.Indicator asChild>
-                    <CheckIcon />
-                  </Checkbox.Indicator>
-                </Checkbox.Control>
-                <Checkbox.HiddenInput />
-              </Checkbox.Root>
-
-              <Link href={"/promos/".concat(promo.id)} className="absolute bottom-3 right-3 rounded-md border border-white/50 bg-white/60 px-lg py-md text-sm font-semibold backdrop-blur-sm" onClick={function () {
-                globalStore.depositWithdrawal.setOpen(false);
-            }}>
-                Promo Details
-              </Link>
-            </div>
-          </Carousel.Item>); })}
-      </Carousel.ItemGroup>
-    </Carousel.Root>);
-}

package/dist/components/DepositWithdrawal/Deposit/Deposit.jsx

@@ -1,82 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useOnMMA } from '../../../hooks/useOnMMA.js';
-import { usePaymentSettingsQuery } from '../../../hooks/usePaymentSettingsQuery/usePaymentSettingsQuery.js';
-import { AlertCircleIcon } from '../../../icons/AlertCircleIcon.jsx';
-import { SpinnerIcon } from '../../../icons/SpinnerIcon.jsx';
-import { onMobileDevice } from '../../../utils/isMobile.js';
-import { useFeatureFlagContext } from '../../FeatureFlagProvider/index.js';
-import { PaymentMethods } from '../PaymentMethods.jsx';
-import { GCashDeposit } from './GCashDeposit/GCashDeposit.jsx';
-import { MayaAppDeposit } from './MayaAppDeposit/MayaAppDeposit.jsx';
-import { MayaDeposit } from './MayaDeposit/MayaDeposit.jsx';
-import { OnlineBankDeposit } from './OnlineBankDeposit/OnlineBankDeposit.jsx';
-import { QRPHDeposit } from './QRPHDeposit/QRPHDeposit.jsx';
-export function Deposit() {
-    var onMMA = useOnMMA()[0];
-    var featureflag = useFeatureFlagContext();
-    var paymentSettingsQuery = usePaymentSettingsQuery();
-    var paymentSettings = paymentSettingsQuery.data;
-    var enabledPaymentMethods = (function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        var l = [];
-        if (onMMA) {
-            l.push('MAYA_APP');
-        }
-        else if (onMobileDevice()) {
-            if ((_a = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.gcashDepositGatewaySettings) === null || _a === void 0 ? void 0 : _a.mobileWebEnabled) {
-                l.push('GCASH');
-            }
-            if (featureflag.enabled &&
-                ((_b = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.mayaDepositGatewaySettings) === null || _b === void 0 ? void 0 : _b.mobileWebEnabled)) {
-                l.push('MAYA');
-            }
-            if ((_c = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.qrphDepositGatewaySettings) === null || _c === void 0 ? void 0 : _c.mobileWebEnabled) {
-                l.push('QRPH');
-            }
-            if ((_d = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.onlineBankDepositGatewaySettings) === null || _d === void 0 ? void 0 : _d.mobileWebEnabled) {
-                l.push('ONLINE_BANK');
-            }
-        }
-        else {
-            if ((_e = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.gcashDepositGatewaySettings) === null || _e === void 0 ? void 0 : _e.webEnabled) {
-                l.push('GCASH');
-            }
-            if (featureflag.enabled &&
-                ((_f = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.mayaDepositGatewaySettings) === null || _f === void 0 ? void 0 : _f.webEnabled)) {
-                l.push('MAYA');
-            }
-            if ((_g = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.qrphDepositGatewaySettings) === null || _g === void 0 ? void 0 : _g.webEnabled) {
-                l.push('QRPH');
-            }
-            if ((_h = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.onlineBankDepositGatewaySettings) === null || _h === void 0 ? void 0 : _h.webEnabled) {
-                l.push('ONLINE_BANK');
-            }
-        }
-        return l;
-    })();
-    var _a = useState(), paymentMethod = _a[0], setPaymentMethod = _a[1];
-    useEffect(function () {
-        if (enabledPaymentMethods.length > 0 && !paymentMethod) {
-            setPaymentMethod(enabledPaymentMethods[0]);
-        }
-    }, [enabledPaymentMethods, paymentMethod]);
-    if (paymentSettingsQuery.isLoading) {
-        return <SpinnerIcon className="mx-auto size-6"/>;
-    }
-    if (enabledPaymentMethods.length <= 0) {
-        /* TODO: Empty state */
-        return (<div className="border-amber-200 text-amber-700 bg-amber-50 flex items-center gap-1.5 rounded-sm border px-3 py-2.5 text-sm">
-        <AlertCircleIcon className="size-4"/>
-        No available payment methods
-      </div>);
-    }
-    return (<>
-      <PaymentMethods value={paymentMethod} onChange={setPaymentMethod} options={enabledPaymentMethods}/>
-
-      {paymentMethod === 'QRPH' && <QRPHDeposit />}
-      {paymentMethod === 'GCASH' && <GCashDeposit />}
-      {paymentMethod === 'MAYA' && <MayaDeposit />}
-      {paymentMethod === 'MAYA_APP' && <MayaAppDeposit />}
-      {paymentMethod === 'ONLINE_BANK' && <OnlineBankDeposit />}
-    </>);
-}