@opexa/portal-components 0.0.1 → 0.0.3

package/dist/components/BetRecords/BetRecordsContent.jsx

@@ -0,0 +1,413 @@
+'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';
+import { useInfiniteQueryHelper } from '../../hooks/useInfiniteQueryHelper';
+import { useLocaleInfo } from '../../hooks/useLocaleInfo';
+import { CheckIcon } from '../../icons/CheckIcon';
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon';
+import { File02Icon } from '../../icons/File02Icon';
+import { SpinnerIcon } from '../../icons/SpinnerIcon';
+import { DatePicker, IconButton, SegmentGroup, Select, Table } from '../../ui';
+import { capitalize } from '../../utils/capitalize';
+import { formatNumber } from '../../utils/formatNumber';
+import { Empty } from '../Empty';
+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.d.ts

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

package/dist/components/BetRecords/index.js

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

package/dist/components/DepositWithdrawal/AmountChoices.d.ts

@@ -0,0 +1,11 @@
+interface AmountChoicesProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    options?: number[];
+    className?: string;
+    min?: number;
+    max?: number;
+}
+export declare function AmountChoices(props: AmountChoicesProps): import("react").JSX.Element;
+export {};

package/dist/components/DepositWithdrawal/AmountChoices.jsx

@@ -0,0 +1,31 @@
+import { twMerge } from 'tailwind-merge';
+import { useControllableState } from '../../hooks/useControllableState';
+import { useLocaleInfo } from '../../hooks/useLocaleInfo';
+import { Button } from '../../ui';
+import { dataAttr } from '../../utils/dataAttr';
+import { formatNumber } from '../../utils/formatNumber';
+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.d.ts

@@ -0,0 +1,8 @@
+interface AvailablePromosProps {
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    className?: string;
+}
+export declare function AvailablePromos(props: AvailablePromosProps): import("react").JSX.Element;
+export {};

package/dist/components/DepositWithdrawal/AvailablePromos.jsx

@@ -0,0 +1,78 @@
+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';
+import { useControllableState } from '../../hooks/useControllableState';
+import { useGlobalStore } from '../../hooks/useGlobalStore';
+import { CheckIcon } from '../../icons/CheckIcon';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon';
+import { Checkbox, IconButton } from '../../ui';
+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.d.ts

@@ -0,0 +1 @@
+export declare function Deposit(): import("react").JSX.Element;

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

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { useOnMMA } from '../../../hooks/useOnMMA';
+import { usePaymentSettingsQuery } from '../../../hooks/usePaymentSettingsQuery/usePaymentSettingsQuery';
+import { AlertCircleIcon } from '../../../icons/AlertCircleIcon';
+import { SpinnerIcon } from '../../../icons/SpinnerIcon';
+import { onMobileDevice } from '../../../utils/isMobile';
+import { useFeatureFlagContext } from '../../FeatureFlagProvider';
+import { PaymentMethods } from '../PaymentMethods';
+import { GCashDeposit } from './GCashDeposit/GCashDeposit';
+import { MayaAppDeposit } from './MayaAppDeposit/MayaAppDeposit';
+import { MayaDeposit } from './MayaDeposit/MayaDeposit';
+import { OnlineBankDeposit } from './OnlineBankDeposit/OnlineBankDeposit';
+import { QRPHDeposit } from './QRPHDeposit/QRPHDeposit';
+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 />}
+    </>);
+}

package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.d.ts

@@ -0,0 +1 @@
+export declare function GCashDeposit(): import("react").JSX.Element;