@opexa/portal-components 0.0.28 → 0.0.30

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

@@ -1,197 +0,0 @@
-import { Portal } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useAvailablePromosQuery, useDepositsCountQuery, useDisclosure, usePaymentSettingsQuery, } from '../../../../client/hooks';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, XIcon, } from '../../../../icons';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui';
-import { parseDecimal } from '../../../../utils';
-import { AmountChoices } from '../../AmountChoices';
-import { AvailablePromos } from '../AvailablePromos';
-import { useQRPHDepositContext } from './QRPHDepositContext';
-export function QRPHDepositForm() {
-    const context = useQRPHDepositContext();
-    const disclosure = useDisclosure();
-    const depositsCountQuery = useDepositsCountQuery();
-    const depositsCount = depositsCountQuery.data ?? 0;
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.qrphDepositGatewaySettings;
-    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.generateQrCode({
-            amount: data.amount.toString(),
-            promo: data.promo ?? undefined,
-        }, {
-            onSuccess() {
-                form.reset();
-            },
-        });
-    });
-    return (<form onSubmit={handleSubmit} noValidate>
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount}>
-            <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-4xl" 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/QRPHDeposit/QRPHDepositLoading.jsx

@@ -1,14 +0,0 @@
-import { SpinnerIcon } from '../../../../icons';
-export function QRPHDepositLoading() {
-    return (<div className="bg-gray-50 rounded-lg px-10 py-12 lg:p-16">
-      <SpinnerIcon className="mx-auto size-8 lg:size-10"/>
-      <p className="mt-5 text-center text-lg font-semibold lg:text-xl">
-        Generating QR Code
-      </p>
-      <p className="text-gray-700 mt-3 text-center text-sm lg:text-base">
-        Please hold tight as we verify the account details and amount. Once
-        verified, a QRPH code will be displayed for you to scan and complete the
-        transaction.
-      </p>
-    </div>);
-}

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

@@ -1,104 +0,0 @@
-import { Portal, QrCode } from '@ark-ui/react';
-import Image from 'next/image';
-import { QrCode02Icon, SpinnerIcon, XIcon } from '../../../../icons';
-import qrphIcon from '../../../../images/qrph-icon.png';
-import { Button, Dialog } from '../../../../ui';
-import { useQRPHDepositContext } from './QRPHDepositContext';
-export function QRPHDepositQrCode() {
-    const context = useQRPHDepositContext();
-    return (<div className="bg-gray-50 rounded-lg px-10 py-12 lg:p-16">
-      <p className="mt-5 text-center text-lg font-semibold lg:text-xl">
-        QR Code
-      </p>
-      <p className="text-gray-700 mt-3 text-center text-sm lg:text-base">
-        Scan the QR code below with your banking app, or upload it to complete
-        your deposit.
-      </p>
-      <QrCode.Root value={context.qrCode ?? ''} className="border-gray-200 mx-auto mt-6 w-[12.5rem] rounded-lg border bg-white p-5 lg:w-[13rem] lg:p-6">
-        <div className="relative">
-          <QrCode.Frame className="border-gray-200 mx-auto size-[10rem] rounded-[0.25rem] border">
-            <QrCode.Pattern />
-          </QrCode.Frame>
-          <QrCode.Overlay className="bg-white p-0.5">
-            <Image src={qrphIcon} alt="" className="size-8" width={40} height={40}/>
-          </QrCode.Overlay>
-        </div>
-        <QrCode.DownloadTrigger fileName={`qrcode-${new Date().getTime()}`} mimeType="image/png" className="text-gray-900 mt-5 block w-full text-center text-sm font-semibold">
-          Download QR Code
-        </QrCode.DownloadTrigger>
-      </QrCode.Root>
-
-      {context.view === 'QR_CODE' && (<div className="mt-6 flex flex-col gap-4 lg:flex-row">
-          <Button size="sm" variant="outline" colorScheme="gray" onClick={() => {
-                context.reset();
-            }}>
-            Generate New QR Code
-          </Button>
-          <Button size="sm" onClick={() => {
-                context.verify();
-            }}>
-            Confirm Deposit
-          </Button>
-        </div>)}
-
-      {context.view === 'VERIFYING' && (<div className="border-gray-200 mt-6 rounded-lg border bg-white p-4 lg:p-6">
-          <SpinnerIcon className="mx-auto size-6 lg:size-8"/>
-          <p className="mt-5 text-center font-semibold lg:text-lg">
-            Processing your deposit
-          </p>
-          <p className="text-gray-700 mx-auto mt-2 text-center text-xs lg:text-sm">
-            Your deposit is being processed. <br />
-            Please hold tight as we verify the account details and amount.
-          </p>
-        </div>)}
-
-      <Instruction />
-    </div>);
-}
-function Instruction() {
-    return (<p className="text-gray-500 mt-6 text-center text-xs">
-      Need help using the QR Code?{' '}
-      <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">
-                    <QrCode02Icon className="text-gray-600 size-6"/>
-                  </div>
-                  <Dialog.Title className="text-lg font-semibold">
-                    How to Use the QR Code 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>
-                    Open your preferred banking or EMI mobile app and select
-                    &apos;Transfer Money&apos; or &apos;Pay via QR&apos;
-                  </li>
-                  <li>
-                    Scan or upload the generated QR Ph code. If prompted by the
-                    app, enter the amount to be sent.
-                  </li>
-                  <li>Proceed with the transfer or payment.</li>
-                </ol>
-              </Dialog.Body>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-    </p>);
-}

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

@@ -1,19 +0,0 @@
-import { CheckCircleBrokenIcon } from '../../../../icons';
-import { Button } from '../../../../ui';
-import { useQRPHDepositContext } from './QRPHDepositContext';
-export function QRPHDepositSuccess() {
-    const context = useQRPHDepositContext();
-    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>
-      <Button size="sm" variant="outline" colorScheme="gray" className="mx-auto mt-6 w-fit" onClick={() => context.reset()}>
-        Generate New QR Code
-      </Button>
-    </div>);
-}

package/dist/components/DepositWithdrawal/DepositWithdrawal.jsx

@@ -1,95 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useLocaleInfo, useWalletQuery } from '../../client/hooks';
-import { Wallet02Icon, XIcon } from '../../icons';
-import { Dialog, Tabs } from '../../ui';
-import { formatNumber } from '../../utils';
-import { Deposit } from './Deposit/Deposit';
-import { Withdrawal } from './Withdrawal/Withdrawal';
-export function DepositWithdrawal(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 5000,
-    });
-    return (<Dialog.Root lazyMount unmountOnExit open={globalStore.depositWithdrawal.open} onOpenChange={(details) => {
-            globalStore.depositWithdrawal.setOpen(details.open);
-        }} closeOnEscape={false} closeOnInteractOutside={false}>
-      <Dialog.Trigger asChild>
-        {props.children ?? <DefaulTrigger />}
-      </Dialog.Trigger>
-      <Portal>
-        <Dialog.Backdrop className="!z-[calc(var(--z-dialog)+1)]"/>
-        <Dialog.Positioner className="!z-[calc(var(--z-dialog)+2)]">
-          <Dialog.Content className="lg:min-h-auto mx-auto min-h-full w-full p-2xl lg:w-[640px] lg:rounded-xl lg:p-3xl">
-            <Dialog.CloseTrigger>
-              <XIcon />
-            </Dialog.CloseTrigger>
-            <Dialog.Header className="flex items-center gap-xl">
-              <div className="border-border-secondary shadow-xs text-gray-700 flex size-12 items-center justify-center rounded-lg border">
-                <Wallet02Icon />
-              </div>
-              <Dialog.Title className="grow text-lg font-semibold">
-                Wallet
-              </Dialog.Title>
-            </Dialog.Header>
-
-            <Dialog.Body className="mt-5">
-              <p className="text-gray-500 text-center text-sm font-medium leading-tight">
-                Available Balance
-              </p>
-              <p className="mt-lg text-center text-4xl font-semibold leading-tight tracking-tight">
-                {formatNumber(walletQuery.data?.balance, {
-            currency: localeInfo.currency.code,
-            minDecimalPlaces: 2,
-        })}
-              </p>
-
-              <Tabs.Root value={globalStore.depositWithdrawal.tab} onValueChange={(details) => {
-            globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
-        }} lazyMount unmountOnExit className="mt-4xl space-y-4xl">
-                <Tabs.List className="w-full">
-                  <Tabs.Trigger value="DEPOSIT" className="grow">
-                    Deposit
-                  </Tabs.Trigger>
-                  <Tabs.Trigger value="WITHDRAWAL" className="grow">
-                    Withdrawal
-                  </Tabs.Trigger>
-                  <Tabs.Indicator />
-                </Tabs.List>
-
-                <Tabs.Content value="DEPOSIT" className="space-y-4xl">
-                  <Deposit />
-                </Tabs.Content>
-                <Tabs.Content value="WITHDRAWAL" className="space-y-4xl">
-                  <Withdrawal />
-                </Tabs.Content>
-              </Tabs.Root>
-            </Dialog.Body>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-}
-function DefaulTrigger(props) {
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 5000,
-    });
-    return (<button type="button" {...props} className={twMerge('flex', props.className)}>
-      <div className="border-border-primary flex h-10 items-center rounded-l-md border border-r-0 px-3.5">
-        {formatNumber(walletQuery.data?.balance, {
-            currency: localeInfo.currency.code,
-            minDecimalPlaces: 2,
-        })}
-      </div>
-      <div className="bg-button-primary-bg text-button-primary-fg flex h-10 items-center gap-1.5 rounded-r-md px-3.5 text-sm font-semibold">
-        Deposit
-      </div>
-    </button>);
-}

package/dist/components/DepositWithdrawal/MayaSessionExpired.jsx

@@ -1,13 +0,0 @@
-import { AlertTriangleIcon } from '../../icons';
-export function MayaSessionExpired() {
-    return (<div className="bg-gray-50 mt-3xl rounded-lg px-5 py-16 lg:mt-4xl">
-      <AlertTriangleIcon className="text-amber-500 mx-auto size-10"/>
-      <h2 className="mt-3 text-center text-lg font-semibold">
-        Session Expired
-      </h2>
-      <p className="text-gray-700 mx-auto mt-2 max-w-[30rem] text-center text-sm">
-        Your session has timed out. To continue with deposits or withdrawals,
-        Please try reloading the app.
-      </p>
-    </div>);
-}

package/dist/components/DepositWithdrawal/PaymentMethods.jsx

@@ -1,75 +0,0 @@
-import Image from 'next/image';
-import { useControllableState } from '../../client/hooks';
-import { CheckIcon } from '../../icons';
-import qrph from '../../images/QRPh.png';
-import gcash from '../../images/gcash.png';
-import instapay from '../../images/instapay.png';
-import maya from '../../images/maya.png';
-import onlineBank from '../../images/online-bank.png';
-import { Checkbox, Field } from '../../ui';
-import { PaymentMethodDefinition } from './utils';
-const OPTIONS = [
-    {
-        value: 'GCASH',
-        label: 'GCash',
-        image: gcash,
-    },
-    {
-        value: 'MAYA_APP',
-        label: 'Maya App',
-        image: maya,
-    },
-    {
-        value: 'MAYA',
-        label: 'Maya',
-        image: maya,
-    },
-    {
-        value: 'QRPH',
-        label: 'QRPH',
-        image: qrph,
-    },
-    {
-        value: 'ONLINE_BANK',
-        label: 'Online Bank',
-        image: onlineBank,
-    },
-    {
-        value: 'INSTAPAY',
-        label: 'Instapay',
-        image: instapay,
-    },
-];
-export function PaymentMethods(props) {
-    const options = props.options?.length
-        ? OPTIONS.filter((option) => props.options?.includes(option.value))
-        : OPTIONS;
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? options[0].value,
-        onChange: props.onChange,
-    });
-    return (<div className={props.className}>
-      <Field.Label asChild>
-        <div>Select your payment method</div>
-      </Field.Label>
-      <Checkbox.Group value={[value]} onValueChange={(newValue) => {
-            const lastValue = newValue.at(-1);
-            if (!lastValue)
-                return;
-            setValue(PaymentMethodDefinition.parse(lastValue));
-        }} className="grid grid-cols-2 gap-x-4 gap-y-3">
-        {options.map((option) => (<Checkbox.Root key={option.value} value={option.value} className="border-border-secondary ui-checked:border-gray-900 ui-checked:outline-solid ui-checked:outline-border-secondary flex cursor-pointer rounded-xl border p-xl ui-checked:outline">
-            <div className="grow">
-              <Image src={option.image} alt="" width={200} height={40} className="h-5 w-auto lg:h-8" draggable={false}/>
-            </div>
-            <Checkbox.Control className="shrink-0">
-              <Checkbox.Indicator asChild>
-                <CheckIcon />
-              </Checkbox.Indicator>
-            </Checkbox.Control>
-            <Checkbox.HiddenInput />
-          </Checkbox.Root>))}
-      </Checkbox.Group>
-    </div>);
-}