@opexa/portal-components 0.0.29 → 0.0.31

package/dist/components/Bonuses/Bonuses.jsx

@@ -1,87 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { StopWatchIcon } from '../../icons/index.js';
-import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
-export function Bonuses(props) {
-    return (<div className={props.className}>
-      <h2 className="text-lg font-semibold">{props.heading ?? 'Rewards'}</h2>
-
-      <SegmentGroup.Root defaultValue="all" className="mt-3 w-full lg:w-fit">
-        <SegmentGroup.Item value="all" className="w-full lg:w-auto">
-          <SegmentGroup.ItemText>All</SegmentGroup.ItemText>
-          <SegmentGroup.ItemControl />
-          <SegmentGroup.ItemHiddenInput />
-        </SegmentGroup.Item>
-        <SegmentGroup.Item value="active" className="w-full lg:w-auto">
-          <SegmentGroup.ItemText>Active</SegmentGroup.ItemText>
-          <SegmentGroup.ItemControl />
-          <SegmentGroup.ItemHiddenInput />
-        </SegmentGroup.Item>
-        <SegmentGroup.Item value="cashbacks" className="w-full lg:w-auto">
-          <SegmentGroup.ItemText>Cashback</SegmentGroup.ItemText>
-          <SegmentGroup.ItemControl />
-          <SegmentGroup.ItemHiddenInput />
-        </SegmentGroup.Item>
-        <SegmentGroup.Indicator />
-      </SegmentGroup.Root>
-
-      <div className="mt-3xl grid gap-3xl lg:grid-cols-3">
-        <Bonus />
-        <Cashback />
-      </div>
-    </div>);
-}
-function Bonus(props) {
-    return (<div className="border-border-primary bg-bg-tertiary overflow-hidden rounded-2xl border">
-      <div className="relative">
-        <Image src="https://images.pexels.com/photos/5868275/pexels-photo-5868275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width={400} height={200} className="h-auto w-full"/>
-
-        <Badge.Root size="lg" round={false} colorScheme="brand" className="absolute right-4 top-4">
-          <Badge.Icon>
-            <StopWatchIcon />
-          </Badge.Icon>
-          <Badge.Label>9d:10h:11m</Badge.Label>
-        </Badge.Root>
-      </div>
-      <div className="px-xl py-3xl">
-        <h2 className="text-center text-xl font-semibold text-white">
-          50 PHP First Deposit Bonus
-        </h2>
-        <div className="text-text-primary-brand mt-xl flex justify-between">
-          <p>Your bonus</p>
-          <p>₱20.00</p>
-        </div>
-        <div className="text-text-primary-brand mt-2 flex justify-between">
-          <p>Wagering 40%</p>
-          <p>400/1000</p>
-        </div>
-        <Progress.Root defaultValue={42} className="mt-2">
-          <Progress.Track>
-            <Progress.Range />
-          </Progress.Track>
-        </Progress.Root>
-
-        <Button variant="outline" className="mt-6" asChild>
-          <Link href={props.viewDetailsUrl ?? '/rewards/1'}>See More</Link>
-        </Button>
-      </div>
-    </div>);
-}
-function Cashback(props) {
-    console.log(props);
-    return (<div className="border-border-primary bg-bg-tertiary overflow-hidden rounded-2xl border">
-      <Image src="https://images.pexels.com/photos/5868275/pexels-photo-5868275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width={400} height={200} className="h-auto w-full"/>
-
-      <div className="px-xl py-3xl">
-        <p className="text-center text-xl font-semibold text-white">Cashback</p>
-        <h2 className="mt-2 text-center text-3xl font-semibold text-white">
-          ₱20.48
-        </h2>
-        <p className="text-text-secondary-700 mt-2 text-center text-sm">
-          Claim your cashback reward and explore other exciting offers!
-        </p>
-
-        <Button className="mt-6">Claim</Button>
-      </div>
-    </div>);
-}

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

@@ -1,73 +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, useControllableState, useGlobalStore, } from '../../../client/hooks/index.js';
-import { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from '../../../icons/index.js';
-import { Checkbox, IconButton } from '../../../ui/index.js';
-export function AvailablePromos(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const query = useAvailablePromosQuery();
-    const promos = query.data ?? [];
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? null,
-        onChange: props.onChange,
-    });
-    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((promo, index) => (<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={(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/${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={() => {
-                globalStore.depositWithdrawal.setOpen(false);
-            }}>
-                Promo Details
-              </Link>
-            </div>
-          </Carousel.Item>))}
-      </Carousel.ItemGroup>
-    </Carousel.Root>);
-}

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

@@ -1,15 +0,0 @@
-import { OnlineBankDepositContext } from './OnlineBankDepositContext';
-import { OnlineBankDepositForm } from './OnlineBankDepositForm';
-import { OnlineBankDepositLoading } from './OnlineBankDepositLoading';
-import { OnlineBankDepositSuccess } from './OnlineBankDepositSuccess';
-import { OnlineBankDepositVCA } from './OnlineBankDepositVCA';
-import { useOnlineBankDeposit } from './useOnlineBankDeposit';
-export function OnlineBankDeposit() {
-    const context = useOnlineBankDeposit();
-    return (<OnlineBankDepositContext value={context}>
-      {context.view === 'FORM' && <OnlineBankDepositForm />}
-      {context.view === 'LOADING' && <OnlineBankDepositLoading />}
-      {context.view === 'SUCCESS' && <OnlineBankDepositSuccess />}
-      {context.view === 'VCA' && <OnlineBankDepositVCA />}
-    </OnlineBankDepositContext>);
-}

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

@@ -1,203 +0,0 @@
-import { Portal } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { noop } from 'lodash-es';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useAvailablePromosQuery, useDepositsCountQuery, useDisclosure, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
-import { AmountChoices } from '../../AmountChoices';
-import { AvailablePromos } from '../AvailablePromos';
-import { useOnlineBankDepositContext } from './OnlineBankDepositContext';
-export function OnlineBankDepositForm() {
-    const context = useOnlineBankDepositContext();
-    const disclosure = useDisclosure();
-    const depositsCountQuery = useDepositsCountQuery();
-    const depositsCount = depositsCountQuery.data ?? 0;
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.onlineBankDepositGatewaySettings;
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    const minimumAmount = depositsCount <= 0
-        ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
-        : parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const promosQuery = useAvailablePromosQuery();
-    const promos = promosQuery.data ?? [];
-    const definition = z
-        .object({
-        amount: z.string().superRefine((val, ctx) => {
-            const n = parseDecimal(val, 0);
-            if (n < minimumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_small,
-                    inclusive: true,
-                    minimum: minimumAmount,
-                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
-                });
-            }
-            if (n > maximumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_big,
-                    inclusive: true,
-                    maximum: maximumAmount,
-                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
-                });
-            }
-        }),
-        promo: z.string().optional().nullable(),
-    })
-        .superRefine((value, ctx) => {
-        const promo = promos.find((o) => o.id === value.promo);
-        const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
-        const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
-        const amount = parseDecimal(value.amount, 0);
-        if (promo && amount < promoMinAmount) {
-            ctx.addIssue({
-                path: ['amount'],
-                code: z.ZodIssueCode.custom,
-                message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
-            });
-        }
-        if (promo && amount > promoMaxAmount) {
-            ctx.addIssue({
-                path: ['amount'],
-                code: z.ZodIssueCode.custom,
-                message: `Maximum amount for this promo is ${promoMaxAmount}`,
-            });
-        }
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            promo: null,
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                promo: null,
-            });
-        }
-    }, [form, minimumAmount]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        context.generateVca({
-            amount: data.amount.toString(),
-            promo: data.promo ?? undefined,
-        }, {
-            onSuccess() {
-                form.reset();
-            },
-        });
-    });
-    return (<form onSubmit={handleSubmit} noValidate>
-      <Field.Root>
-        <Field.Label>Bank</Field.Label>
-        <Field.Input value="BANKNET" onChange={noop} readOnly/>
-      </Field.Root>
-
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount} className="mt-4">
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to deposit
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Controller control={form.control} name="promo" render={(o) => (<AvailablePromos className="mt-3xl" value={o.field.value} onChange={o.field.onChange}/>)}/>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-      <Button type="submit" className="mt-4.5" onClick={async (e) => {
-            const ok = await form.trigger('amount');
-            if (!ok)
-                return;
-            if (promos.length <= 0)
-                return;
-            if (form.getValues('promo'))
-                return;
-            e.preventDefault();
-            disclosure.setOpen(true);
-        }}>
-        Deposit
-      </Button>
-
-      <AlertDialog.Root role="alertdialog" open={disclosure.open} onOpenChange={(details) => {
-            disclosure.setOpen(details.open);
-        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
-        <Portal>
-          <AlertDialog.Backdrop className="!z-[calc(var(--z-dialog)+10)]"/>
-          <AlertDialog.Positioner className="!z-[calc(var(--z-dialog)+25)]">
-            <AlertDialog.Content>
-              <AlertDialog.Header>
-                <div className="flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]">
-                  <AlertCircleIcon />
-                </div>
-                <AlertDialog.CloseTrigger>
-                  <XIcon />
-                </AlertDialog.CloseTrigger>
-              </AlertDialog.Header>
-              <AlertDialog.Body>
-                <AlertDialog.Title>
-                  Submit deposit request without promo?
-                </AlertDialog.Title>
-                <AlertDialog.Description>
-                  You haven&rsquo;t selected a promo. Are you sure you want to
-                  proceed without one?
-                </AlertDialog.Description>
-              </AlertDialog.Body>
-              <AlertDialog.Footer>
-                <Button variant="outline" colorScheme="gray" onClick={() => {
-            disclosure.setOpen(false);
-        }}>
-                  Cancel
-                </Button>
-                <Button onClick={() => {
-            handleSubmit();
-            disclosure.setOpen(false);
-        }}>
-                  Proceed
-                </Button>
-              </AlertDialog.Footer>
-            </AlertDialog.Content>
-          </AlertDialog.Positioner>
-        </Portal>
-      </AlertDialog.Root>
-    </form>);
-}

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

@@ -1,15 +0,0 @@
-import { SpinnerIcon } from '../../../../icons/index.js';
-export function OnlineBankDepositLoading() {
-    return (<div className="bg-gray-50 rounded-lg px-10 py-12 lg:py-16">
-      <SpinnerIcon className="mx-auto size-8 lg:size-10"/>
-      <p className="mt-5 text-center text-lg font-semibold lg:text-xl">
-        Processing Your Deposit
-      </p>
-      <p className="text-gray-700 mt-3 text-center text-sm lg:text-base">
-        Your deposit is being processed. Please hold tight as we verify the
-        account details and amount. Once verified, a Virtual Collection Account
-        (VCA) will be displayed for you to copy and paste in a designated field
-        and complete the transaction.
-      </p>
-    </div>);
-}

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

@@ -1,13 +0,0 @@
-import { CheckCircleBrokenIcon } from '../../../../icons/index.js';
-export function OnlineBankDepositSuccess() {
-    return (<div className="bg-gray-50 rounded-lg px-10 py-12 lg:p-16">
-      <CheckCircleBrokenIcon className="text-green-600 mx-auto size-8 lg:size-10"/>
-      <p className="mt-5 text-center text-lg font-semibold lg:text-xl">
-        Deposit Successful!
-      </p>
-      <p className="text-gray-700 mt-3 text-center text-sm lg:text-base">
-        Your funds have been successfully added and are now ready to use in your
-        account.
-      </p>
-    </div>);
-}

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

@@ -1,90 +0,0 @@
-import { Portal } from '@ark-ui/react';
-import Image from 'next/image';
-import { BankIcon, XIcon } from '../../../../icons/index.js';
-import bankIcon from '../../../../images/bank-icon.png';
-import { Button, Clipboard, Dialog } from '../../../../ui/index.js';
-import { useOnlineBankDepositContext } from './OnlineBankDepositContext';
-export function OnlineBankDepositVCA() {
-    const context = useOnlineBankDepositContext();
-    return (<div className="bg-gray-50 rounded-lg px-10 py-12 lg:p-16">
-      <Image src={bankIcon} alt="" width={52} height={44.2} className="mx-auto h-auto w-[3.25rem]"/>
-
-      <p className="mt-8 text-center font-semibold">
-        Your unique Virtual Collection Account (VCA) is:
-      </p>
-
-      <Clipboard.Root value={context.vca ?? ''} className="mx-auto mt-6 max-w-[22.5rem]">
-        <Clipboard.Control className="flex flex-col gap-4 lg:flex-row">
-          <Clipboard.Input className="lg:grow"/>
-          <Clipboard.Context>
-            {(ctx) => (<Clipboard.Trigger asChild>
-                <Button fullWidth={false} className="w-full shrink-0 lg:w-28">
-                  {ctx.copied ? 'Copied' : 'Copy VCA'}
-                </Button>
-              </Clipboard.Trigger>)}
-          </Clipboard.Context>
-        </Clipboard.Control>
-      </Clipboard.Root>
-
-      <Instruction />
-    </div>);
-}
-function Instruction() {
-    return (<p className="text-gray-500 mt-6 text-center text-xs">
-      Need help using the online bank for payment?{' '}
-      <Dialog.Root lazyMount unmountOnExit>
-        <Dialog.Trigger className="text-blue-500">
-          See instructions
-        </Dialog.Trigger>
-        <Portal>
-          <Dialog.Backdrop className="!z-[calc(var(--z-dialog)+2)]"/>
-          <Dialog.Positioner className="!z-[calc(var(--z-dialog)+3)] flex items-center justify-center">
-            <Dialog.Content className="mx-auto w-[calc(100%-2rem)] rounded-lg bg-white p-4xl lg:w-[33.625rem]">
-              <Dialog.CloseTrigger>
-                <XIcon />
-              </Dialog.CloseTrigger>
-
-              <Dialog.Body>
-                <div className="flex items-center gap-xl">
-                  <div className="border-gray-200 flex size-11 items-center justify-center rounded-lg border">
-                    <BankIcon className="text-gray-600 size-6"/>
-                  </div>
-                  <Dialog.Title className="text-lg font-semibold">
-                    How to Use Online Bank for Payment
-                  </Dialog.Title>
-                </div>
-
-                <Dialog.Description className="mt-5">
-                  Follow these simple steps to complete your transaction:
-                </Dialog.Description>
-
-                <ol className="mt-3 list-inside list-decimal space-y-3">
-                  <li>
-                    Click the &apos;Copy VCA&apos; button to save your unique
-                    account number.
-                  </li>
-                  <li>
-                    Log in to your Online Banking: Open your bank&apos;s app or
-                    website.
-                  </li>
-                  <li>
-                    Initiate a Deposit: Choose the option to make a deposit.
-                  </li>
-                  <li>Enter VCA: Paste your VCA in the designated field.</li>
-                  <li>
-                    Complete Transaction: Follow your bank&apos;s prompts to
-                    finalize the deposit.
-                  </li>
-                </ol>
-
-                <p className="mt-3">
-                  Note: Please ensure that the deposit amount you enter matches
-                  exactly.
-                </p>
-              </Dialog.Body>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-    </p>);
-}

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

@@ -1,15 +0,0 @@
-import { QRPHDepositContext } from './QRPHDepositContext';
-import { QRPHDepositForm } from './QRPHDepositForm';
-import { QRPHDepositLoading } from './QRPHDepositLoading';
-import { QRPHDepositQrCode } from './QRPHDepositQrCode';
-import { QRPHDepositSuccess } from './QRPHDepositSuccess';
-import { useQRPHDeposit } from './useQRPHDeposit';
-export function QRPHDeposit() {
-    const context = useQRPHDeposit();
-    return (<QRPHDepositContext value={context}>
-      {context.view === 'FORM' && <QRPHDepositForm />}
-      {context.view === 'LOADING' && <QRPHDepositLoading />}
-      {context.view === 'SUCCESS' && <QRPHDepositSuccess />}
-      {(context.view === 'QR_CODE' || context.view === 'VERIFYING') && (<QRPHDepositQrCode />)}
-    </QRPHDepositContext>);
-}