@opexa/portal-components 0.0.2 → 0.0.3

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

@@ -0,0 +1,92 @@
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import { BankIcon } from '../../../../icons/BankIcon';
+import { XIcon } from '../../../../icons/XIcon';
+import { Button, Clipboard, Dialog } from '../../../../ui';
+import { useOnlineBankDepositContext } from './OnlineBankDepositContext';
+import bankIcon from './bank.png';
+export function OnlineBankDepositVCA() {
+    var _a;
+    var 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={(_a = context.vca) !== null && _a !== void 0 ? _a : ''} 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>
+            {function (ctx) { return (<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/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -0,0 +1,14 @@
+type View = 'FORM' | 'LOADING' | 'SUCCESS' | 'VCA';
+export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
+export declare function useOnlineBankDeposit(): {
+    vca: string | null;
+    view: View;
+    generateVca: import("@tanstack/react-query").UseMutateFunction<import("@opexa/portal-sdk-core").Deposit, Error, {
+        amount: string;
+        promo?: string | undefined;
+        id?: string | undefined;
+    }, unknown>;
+    regenerateVca: () => void;
+    reset: () => void;
+};
+export {};

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

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { useCreateOnlineBankDepositMutation } from '../../../../hooks/useCreateOnlineBankDepositMutation/useCreateOnlineBankDepositMutation';
+import { useDepositQuery } from '../../../../hooks/useDepositQuery/useDepositQuery';
+import { toaster } from '../../../../utils/toaster';
+export function useOnlineBankDeposit() {
+    var _a;
+    var _b = useState('FORM'), view = _b[0], setView = _b[1];
+    var _c = useState(null), id = _c[0], setId = _c[1];
+    var _d = useState(null), vca = _d[0], setVca = _d[1];
+    var _e = useState(null), promo = _e[0], setPromo = _e[1];
+    var _f = useState(null), amount = _f[0], setAmount = _f[1];
+    var mutation = useCreateOnlineBankDepositMutation({
+        onSuccess: function (data) {
+            invariant(data.vca);
+            setId(data.id);
+            setVca(data.vca);
+            setView('VCA');
+        },
+        onError: function (error) {
+            setView('FORM');
+            toaster.error({
+                description: error.message,
+            });
+        },
+        onMutate: function (data) {
+            var _a;
+            setId(null);
+            setVca(null);
+            setPromo((_a = data.promo) !== null && _a !== void 0 ? _a : null);
+            setAmount(data.amount);
+            setView('LOADING');
+        },
+    });
+    var query = useDepositQuery(id !== null && id !== void 0 ? id : undefined, {
+        enabled: !!id,
+        refetchInterval: 5000,
+    });
+    useEffect(function () {
+        var _a, _b;
+        if (((_a = query.data) === null || _a === void 0 ? void 0 : _a.status) === 'CONFIRMED' ||
+            ((_b = query.data) === null || _b === void 0 ? void 0 : _b.status) === 'APPROVED') {
+            setView('SUCCESS');
+        }
+    }, [(_a = query.data) === null || _a === void 0 ? void 0 : _a.status]);
+    var generateVca = mutation.mutate;
+    var regenerateVca = function () {
+        invariant(amount);
+        mutation.mutate({
+            amount: amount.toString(),
+            promo: promo !== null && promo !== void 0 ? promo : undefined,
+        });
+    };
+    var reset = function () {
+        setId(null);
+        setVca(null);
+        setPromo(null);
+        setAmount(null);
+        setView('FORM');
+    };
+    useEffect(function () {
+        return function () {
+            setId(null);
+            setVca(null);
+            setPromo(null);
+            setAmount(null);
+            setView('FORM');
+        };
+    }, []);
+    return {
+        vca: vca,
+        view: view,
+        generateVca: generateVca,
+        regenerateVca: regenerateVca,
+        reset: reset,
+    };
+}

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

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

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

@@ -0,0 +1,15 @@
+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() {
+    var 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>);
+}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -0,0 +1,24 @@
+export declare const QRPHDepositContext: import("react").Context<{
+    view: "LOADING" | "FORM" | "SUCCESS" | "QR_CODE" | "VERIFYING";
+    qrCode: string | null;
+    verify: () => void;
+    generateQrCode: import("@tanstack/react-query").UseMutateFunction<import("@opexa/portal-sdk-core").Deposit, Error, {
+        amount: string;
+        promo?: string | undefined;
+        id?: string | undefined;
+    }, unknown>;
+    regenerateQrCode: () => void;
+    reset: () => void;
+} | null>;
+export declare const useQRPHDepositContext: () => {
+    view: "LOADING" | "FORM" | "SUCCESS" | "QR_CODE" | "VERIFYING";
+    qrCode: string | null;
+    verify: () => void;
+    generateQrCode: import("@tanstack/react-query").UseMutateFunction<import("@opexa/portal-sdk-core").Deposit, Error, {
+        amount: string;
+        promo?: string | undefined;
+        id?: string | undefined;
+    }, unknown>;
+    regenerateQrCode: () => void;
+    reset: () => void;
+};

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

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+export var QRPHDepositContext = createContext(null);
+export var useQRPHDepositContext = function () {
+    var context = useContext(QRPHDepositContext);
+    invariant(context);
+    return context;
+};

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.d.ts

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

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

@@ -0,0 +1,256 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 } from '../../../../hooks/useAvailablePromosQuery/useAvailablePromosQuery';
+import { useDepositsCountQuery } from '../../../../hooks/useDepositsCountQuery/useDepositsCountQuery';
+import { useDisclosure } from '../../../../hooks/useDisclosure';
+import { usePaymentSettingsQuery } from '../../../../hooks/usePaymentSettingsQuery/usePaymentSettingsQuery';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon';
+import { XIcon } from '../../../../icons/XIcon';
+import { AlertDialog, Button, Field, NumberInput } from '../../../../ui';
+import { parseDecimal } from '../../../../utils/parseDecimal';
+import { AmountChoices } from '../../AmountChoices';
+import { AvailablePromos } from '../../AvailablePromos';
+import { useQRPHDepositContext } from './QRPHDepositContext';
+export function QRPHDepositForm() {
+    var _this = this;
+    var _a, _b, _c;
+    var context = useQRPHDepositContext();
+    var disclosure = useDisclosure();
+    var depositsCountQuery = useDepositsCountQuery();
+    var depositsCount = (_a = depositsCountQuery.data) !== null && _a !== void 0 ? _a : 0;
+    var paymentSettingsQuery = usePaymentSettingsQuery();
+    var paymentSettings = paymentSettingsQuery.data;
+    var gatewaySettings = paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.qrphDepositGatewaySettings;
+    var maximumAmount = parseDecimal(gatewaySettings === null || gatewaySettings === void 0 ? void 0 : gatewaySettings.maximumAmount, 0);
+    var minimumAmount = depositsCount <= 0
+        ? parseDecimal((_b = paymentSettingsQuery.data) === null || _b === void 0 ? void 0 : _b.minimumFirstDepositAmount, 0)
+        : parseDecimal(gatewaySettings === null || gatewaySettings === void 0 ? void 0 : gatewaySettings.minimumAmount, 0);
+    var promosQuery = useAvailablePromosQuery();
+    var promos = (_c = promosQuery.data) !== null && _c !== void 0 ? _c : [];
+    var definition = z
+        .object({
+        amount: z.string().superRefine(function (val, ctx) {
+            var n = parseDecimal(val, 0);
+            if (n < minimumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_small,
+                    inclusive: true,
+                    minimum: minimumAmount,
+                    message: "Minimum amount is ".concat(minimumAmount.toLocaleString()),
+                });
+            }
+            if (n > maximumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_big,
+                    inclusive: true,
+                    maximum: maximumAmount,
+                    message: "Maximum amount is ".concat(maximumAmount.toLocaleString()),
+                });
+            }
+        }),
+        promo: z.string().optional().nullable(),
+    })
+        .superRefine(function (value, ctx) {
+        var promo = promos.find(function (o) { return o.id === value.promo; });
+        var promoMinAmount = parseDecimal(promo === null || promo === void 0 ? void 0 : promo.minimumDepositAmount, 0);
+        var promoMaxAmount = parseDecimal(promo === null || promo === void 0 ? void 0 : promo.maximumDepositAmount, 0);
+        var amount = parseDecimal(value.amount, 0);
+        if (promo && amount < promoMinAmount) {
+            ctx.addIssue({
+                path: ['amount'],
+                code: z.ZodIssueCode.custom,
+                message: "Minimum amount for this promo is ".concat(promoMinAmount.toLocaleString()),
+            });
+        }
+        if (promo && amount > promoMaxAmount) {
+            ctx.addIssue({
+                path: ['amount'],
+                code: z.ZodIssueCode.custom,
+                message: "Maximum amount for this promo is ".concat(promoMaxAmount),
+            });
+        }
+    });
+    var form = useForm({
+        mode: 'all',
+        resolver: zodResolver(definition),
+        defaultValues: {
+            amount: '0',
+            promo: null,
+        },
+    });
+    useEffect(function () {
+        if (minimumAmount) {
+            form.reset({
+                amount: minimumAmount.toString(),
+                promo: null,
+            });
+        }
+    }, [form, minimumAmount]);
+    var handleSubmit = form.handleSubmit(function (data) { return __awaiter(_this, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            context.generateQrCode({
+                amount: data.amount.toString(),
+                promo: (_a = data.promo) !== null && _a !== void 0 ? _a : undefined,
+            }, {
+                onSuccess: function () {
+                    form.reset();
+                },
+            });
+            return [2 /*return*/];
+        });
+    }); });
+    return (<form onSubmit={handleSubmit} noValidate>
+      <Controller control={form.control} name="amount" render={function (o) {
+            var _a;
+            return (<Field.Root invalid={!!form.formState.errors.amount}>
+            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={function (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>
+              {(_a = form.formState.errors.amount) === null || _a === void 0 ? void 0 : _a.message}
+            </Field.ErrorText>
+          </Field.Root>);
+        }}/>
+
+      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={function (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={function (o) { return (<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={function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var ok;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, form.trigger('amount')];
+                    case 1:
+                        ok = _a.sent();
+                        if (!ok)
+                            return [2 /*return*/];
+                        if (promos.length <= 0)
+                            return [2 /*return*/];
+                        if (form.getValues('promo'))
+                            return [2 /*return*/];
+                        e.preventDefault();
+                        disclosure.setOpen(true);
+                        return [2 /*return*/];
+                }
+            });
+        }); }}>
+        Deposit
+      </Button>
+
+      <AlertDialog.Root role="alertdialog" open={disclosure.open} onOpenChange={function (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={function () {
+            disclosure.setOpen(false);
+        }}>
+                  Cancel
+                </Button>
+                <Button onClick={function () {
+            handleSubmit();
+            disclosure.setOpen(false);
+        }}>
+                  Proceed
+                </Button>
+              </AlertDialog.Footer>
+            </AlertDialog.Content>
+          </AlertDialog.Positioner>
+        </Portal>
+      </AlertDialog.Root>
+    </form>);
+}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositLoading.d.ts

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

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

@@ -0,0 +1,14 @@
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon';
+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.d.ts

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

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

@@ -0,0 +1,107 @@
+import { Portal, QrCode } from '@ark-ui/react';
+import Image from 'next/image';
+import { QrCode02Icon } from '../../../../icons/QrCode02Icon';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon';
+import { XIcon } from '../../../../icons/XIcon';
+import qrphIcon from '../../../../images/qrph-icon.png';
+import { Button, Dialog } from '../../../../ui';
+import { useQRPHDepositContext } from './QRPHDepositContext';
+export function QRPHDepositQrCode() {
+    var _a;
+    var 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={(_a = context.qrCode) !== null && _a !== void 0 ? _a : ''} 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-".concat(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={function () {
+                context.reset();
+            }}>
+            Generate New QR Code
+          </Button>
+          <Button size="sm" onClick={function () {
+                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.d.ts

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

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

@@ -0,0 +1,19 @@
+import { CheckCircleBrokenIcon } from '../../../../icons/CheckCircleBrokenIcon';
+import { Button } from '../../../../ui';
+import { useQRPHDepositContext } from './QRPHDepositContext';
+export function QRPHDepositSuccess() {
+    var 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={function () { return context.reset(); }}>
+        Generate New QR Code
+      </Button>
+    </div>);
+}