@opexa/portal-components 0.0.27 → 0.0.28

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

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { useCreateQRPHDepositMutation, useDepositQuery } from '../../../../client/hooks';
+import { toaster } from '../../../../client/utils';
+export function useQRPHDeposit() {
+    const [view, setView] = useState('FORM');
+    const [id, setId] = useState(null);
+    const [promo, setPromo] = useState(null);
+    const [amount, setAmount] = useState(null);
+    const [qrCode, setQrCode] = useState(null);
+    const mutation = useCreateQRPHDepositMutation({
+        onSuccess(data) {
+            invariant(data.qrCode);
+            setId(data.id);
+            setQrCode(data.qrCode);
+            setView('QR_CODE');
+        },
+        onError(error) {
+            setView('FORM');
+            toaster.error({
+                description: error.message,
+            });
+        },
+        onMutate(data) {
+            setId(null);
+            setPromo(data.promo ?? null);
+            setAmount(data.amount);
+            setQrCode(null);
+            setView('LOADING');
+        },
+    });
+    const query = useDepositQuery(id ?? undefined, {
+        enabled: !!id,
+        refetchInterval: view === 'VERIFYING' ? 2500 : 5000,
+    });
+    useEffect(() => {
+        if (query.data?.status === 'CONFIRMED' ||
+            query.data?.status === 'APPROVED') {
+            setView('SUCCESS');
+        }
+    }, [query.data?.status]);
+    const generateQrCode = mutation.mutate;
+    const regenerateQrCode = () => {
+        invariant(amount);
+        mutation.mutate({
+            amount: amount.toString(),
+            promo: promo ?? undefined,
+        });
+    };
+    const verify = () => {
+        setView('VERIFYING');
+    };
+    const reset = () => {
+        setId(null);
+        setPromo(null);
+        setAmount(null);
+        setQrCode(null);
+        setView('FORM');
+    };
+    useEffect(() => {
+        return () => {
+            setId(null);
+            setPromo(null);
+            setAmount(null);
+            setQrCode(null);
+            setView('FORM');
+        };
+    }, []);
+    return {
+        view,
+        qrCode,
+        verify,
+        generateQrCode,
+        regenerateQrCode,
+        reset,
+    };
+}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface DepositWithdrawalProps {
     children?: ReactNode;
 }

package/dist/components/DepositWithdrawal/DepositWithdrawal.jsx

@@ -0,0 +1,95 @@
+'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/DepositWithdrawalTrigger.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 export interface DepositWithdrawalTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }

package/dist/components/DepositWithdrawal/DepositWithdrawalTrigger.jsx

@@ -0,0 +1,19 @@
+'use client';
+import { ark } from '@ark-ui/react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useSessionQuery } from '../../client/hooks';
+export function DepositWithdrawalTrigger(props) {
+    const sessionQuery = useSessionQuery();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const disabled = sessionQuery.data?.status === 'unauthenticated'
+        ? true
+        : globalStore.depositWithdrawal.open
+            ? true
+            : props.disabled;
+    return (<ark.button type="button" {...props} onClick={async (e) => {
+            props.onClick?.(e);
+            globalStore.depositWithdrawal.setOpen(true);
+        }} disabled={disabled} data-state={globalStore.depositWithdrawal.open ? 'open' : 'closed'}/>);
+}

package/dist/components/DepositWithdrawal/MayaSessionExpired.jsx

@@ -0,0 +1,13 @@
+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.d.ts

@@ -1,4 +1,4 @@
-import { PaymentMethod } from './utils';
+import { type PaymentMethod } from './utils';
 interface PaymentMethodsProps {
     value?: PaymentMethod;
     onChange?: (value: PaymentMethod) => void;

package/dist/components/DepositWithdrawal/PaymentMethods.jsx

@@ -0,0 +1,75 @@
+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>);
+}

package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.jsx

@@ -0,0 +1,169 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useCreateGCashWithdrawalMutation, useGlobalStore, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks';
+import { toaster } from '../../../../client/utils';
+import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons';
+import { Button, Field, NumberInput, PasswordInput } from '../../../../ui';
+import { parseDecimal } from '../../../../utils';
+import { AmountChoices } from '../../AmountChoices';
+export function GCashWithdrawal() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const localeInfo = useLocaleInfo();
+    const mobileNumberParser = useMobileNumberParser();
+    const createWithdrawalMutation = useCreateGCashWithdrawalMutation({
+        onSuccess() {
+            form.reset();
+            globalStore.depositWithdrawal.setOpen(false);
+            toaster.success({
+                description: 'Withdrawal request submitted successfully.',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const paymentSettingsQuery = usePaymentSettingsQuery();
+    const paymentSettings = paymentSettingsQuery.data;
+    const gatewaySettings = paymentSettings?.gcashWithdrawalGatewaySettings;
+    const minimumAmount = parseDecimal(gatewaySettings?.minimumAmount, 0);
+    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
+    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()}`,
+                });
+            }
+        }),
+        password: z
+            .string()
+            .min(8, 'Password must be 8 or more characters')
+            .max(64, 'Password must be not be more than 64 characters'),
+        mobileNumber: z
+            .string()
+            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number'),
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(definition),
+        defaultValues: {
+            amount: '0',
+            password: '',
+            mobileNumber: '',
+        },
+    });
+    useEffect(() => {
+        if (minimumAmount) {
+            form.reset({
+                amount: minimumAmount.toString(),
+                password: '',
+                mobileNumber: '',
+            });
+        }
+    }, [form, minimumAmount]);
+    const handleSubmit = form.handleSubmit(async (data) => {
+        createWithdrawalMutation.mutate({
+            amount: data.amount,
+            recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),
+            transactionPassword: data.password,
+        });
+    });
+    return (<form onSubmit={handleSubmit} noValidate autoComplete="off">
+      <Field.Root invalid={!!form.formState.errors.mobileNumber}>
+        <Field.Label>Mobile Number</Field.Label>
+        <div className="relative">
+          <localeInfo.country.flag className="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
+          <Field.Input className="pl-10.5" {...form.register('mobileNumber')}/>
+        </div>
+        <Field.ErrorText>
+          {form.formState.errors.mobileNumber?.message}
+        </Field.ErrorText>
+      </Field.Root>
+
+      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount} className="mt-3xl">
+            <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 withdraw
+              </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"/>
+
+      <Field.Root className="mt-3xl" invalid={!!form.formState.errors.password}>
+        <PasswordInput.Root>
+          <PasswordInput.Label>Password</PasswordInput.Label>
+          <PasswordInput.Control>
+            <PasswordInput.Input {...form.register('password')}/>
+            <PasswordInput.VisibilityTrigger>
+              <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
+                <EyeIcon />
+              </PasswordInput.Indicator>
+            </PasswordInput.VisibilityTrigger>
+          </PasswordInput.Control>
+        </PasswordInput.Root>
+        <Field.ErrorText>
+          {form.formState.errors.password?.message}
+        </Field.ErrorText>
+      </Field.Root>
+
+      <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" disabled={createWithdrawalMutation.isPending}>
+        {createWithdrawalMutation.isPending ? (<>
+            <SpinnerIcon />
+            Processing...
+          </>) : ('Deposit')}
+      </Button>
+    </form>);
+}