@opexa/portal-components 0.0.889 → 0.0.890

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/GeneratingQrCode.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner02Icon } from '../../../../icons/Spinner02Icon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+import { useAurixPayQRPHDepositContext } from './AurixPayQRPHDepositContext.js';
+export function GeneratingQrCode() {
+    const context = useAurixPayQRPHDepositContext();
+    return (_jsx(AlertDialog.Root, { open: context.status === 'generating-qr-code', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: true, children: _jsx(XIcon, {}) }), _jsx(Spinner02Icon, { className: "mx-auto size-12 text-text-featured-icon-light-brand" }), _jsx(AlertDialog.Title, { className: "mt-xl", children: "Generating Single Use QR Code" }), _jsxs(AlertDialog.Description, { className: "mt-xs px-3", children: [_jsx("span", { className: "block", children: "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." }), _jsxs("span", { className: "mt-3 block", children: ["Please wait ", _jsx("span", { className: "font-bold", children: "60" }), " seconds..."] })] })] }) })] }) }));
+}

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/QrCodeGenerated.d.ts

@@ -0,0 +1 @@
+export declare function QrCodeGenerated(): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/QrCodeGenerated.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useBoolean } from 'usehooks-ts';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { ArrowCircleDownIcon } from '../../../../icons/ArrowCircleDownIcon.js';
+import { QrCode02Icon } from '../../../../icons/QrCode02Icon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import qrphIcon from '../../../../images/qrph-icon.png';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+import { QrCode } from '../../../../ui/QrCode/index.js';
+import { useAurixPayQRPHDepositContext } from './AurixPayQRPHDepositContext.js';
+export function QrCodeGenerated() {
+    const context = useAurixPayQRPHDepositContext();
+    const confirm = useBoolean(false);
+    return (_jsx(AlertDialog.Root, { open: context.status === 'qr-code-generated', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx("button", { type: "button", className: "absolute top-4 right-4 icon:size-6 p-md text-text-quinary disabled:cursor-not-allowed disabled:opacity-50", onClick: () => {
+                                    if (!confirm.value) {
+                                        confirm.setTrue();
+                                        return;
+                                    }
+                                    confirm.setFalse();
+                                }, children: _jsx(XIcon, {}) }), !confirm.value ? (_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary", children: _jsx(QrCode02Icon, { className: "size-6 text-text-featured-icon-light-brand" }) })) : (_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-error-secondary", children: _jsx(AlertCircleIcon, { className: "size-6 text-text-featured-icon-light-error" }) })), _jsx(AlertDialog.Title, { className: "mt-xl", dangerouslySetInnerHTML: {
+                                    __html: confirm.value
+                                        ? 'Are you sure you want to close this window?'
+                                        : 'Single Use QR Code',
+                                } }), _jsx(AlertDialog.Description, { className: "mt-xs px-3", children: confirm.value
+                                    ? 'Closing this window will cancel your current deposit. Do you want to continue?'
+                                    : 'Scan the QR code below with your banking app, or upload it to complete your deposit.' }), !confirm.value && (_jsx("div", { className: "mx-auto mt-xl w-[14.125rem] rounded-xl bg-bg-primary-alt p-6", children: _jsxs(QrCode.Root, { value: context.deposit?.qrCode ?? '', encoding: {
+                                        ecc: 'H',
+                                        boostEcc: true,
+                                    }, children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), _jsxs(QrCode.DownloadTrigger, { type: "button", fileName: `QRPH-${Date.now()}.jpg`, mimeType: "image/jpeg", className: "mx-auto mt-5 flex w-fit items-center gap-1 font-semibold text-button-tertiary-fg", children: [_jsx(ArrowCircleDownIcon, { className: "size-5" }), "Download QR Code"] })] }) })), confirm.value && (_jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: confirm.setFalse, children: "Go back" }), _jsx(Button, { onClick: () => {
+                                            context.reset();
+                                            setTimeout(() => {
+                                                confirm.setFalse();
+                                            }, 2);
+                                        }, children: "Continue" })] })), !confirm.value && _jsx(Instruction, {})] }) })] }) }));
+}
+function Instruction() {
+    return (_jsxs(AlertDialog.Root, { lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsxs("p", { className: "mt-lg text-center text-text-tertiary-600 text-xs", children: ["Need help using the QR Code?", ' ', _jsx(AlertDialog.Trigger, { className: "text-text-brand", children: "See instructions" })] }), _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary", children: _jsx(QrCode02Icon, { className: "size-6 text-text-featured-icon-light-brand" }) }), _jsx(AlertDialog.Title, { className: "mt-xl", children: "How to Use the QR Code for Payment" }), _jsx(AlertDialog.Description, { className: "mt-xl px-3", children: "Follow these simple steps to complete your\u00A0transaction:" }), _jsx("div", { className: "mt-4 text-sm text-text-tertiary-600", children: _jsxs("ol", { className: "list-decimal pl-4", children: [_jsx("li", { className: "marker:font-mono marker:text-sm", children: "Open your preferred banking or EMI mobile app and select 'Transfer Money' or 'Pay via QR.'" }), _jsx("li", { className: "marker:font-mono marker:text-sm", children: "Scan or upload the generated QR Ph code. If prompted by the app, enter the amount to be sent." }), _jsx("li", { className: "marker:font-mono marker:text-sm", children: "Proceed with the transfer or payment." })] }) })] }) })] })] }));
+}

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/useAurixPayQRPHDeposit.d.ts

@@ -0,0 +1,17 @@
+import type { Deposit } from '../../../../types';
+export type UseAurixPayQRPHDepositReturn = ReturnType<typeof useAurixPayQRPHDeposit>;
+export interface GenerateQRCodeInput {
+    amount: string;
+    promo?: string | null;
+}
+export declare function useAurixPayQRPHDeposit(): {
+    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
+    deposit: Deposit | null;
+    errorMessage: {
+        name: string;
+        message: string;
+    } | null;
+    generateQRCode: (input: GenerateQRCodeInput) => Promise<void>;
+    regenerateQRCode: () => Promise<void>;
+    reset: () => void;
+};

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/useAurixPayQRPHDeposit.js

@@ -0,0 +1,117 @@
+import { ObjectId } from '@opexa/object-id';
+import { useEffect, useRef, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { useShallow } from 'zustand/shallow';
+import { useCreateAurixPayQrphDepositMutation } from '../../../../client/hooks/useCreateAurixPayQrphDepositMutation.js';
+import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
+import { ObjectType } from '../../../../services/ObjectType.js';
+import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+export function useAurixPayQRPHDeposit() {
+    const depositWithdrawalProps = useDepositWithdrawalPropsContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kycVerificationStatus: ctx.kycVerificationStatus,
+    })));
+    const inputRef = useRef(null);
+    const [deposit, setDeposit] = useState(null);
+    const [status, setStatus] = useState('idle');
+    const [errorMessage, setErrorMessage] = useState(null);
+    const verificationQuery = useMemberVerificationQuery();
+    const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
+    const mutation = useCreateAurixPayQrphDepositMutation({
+        onMutate() {
+            setStatus('generating-qr-code');
+        },
+        onSuccess(data) {
+            invariant(data.qrCode);
+            setStatus('qr-code-generated');
+            setDeposit(data);
+        },
+        onError(data) {
+            setStatus('failed');
+            setErrorMessage({
+                name: data.name,
+                message: data.message,
+            });
+        },
+    });
+    const query = useDepositQuery(deposit?.id, {
+        enabled: !!deposit && status === 'qr-code-generated',
+        refetchInterval: (ctx) => {
+            if (ctx.state.data?.status === 'APPROVED' ||
+                ctx.state.data?.status === 'CONFIRMED' ||
+                ctx.state.data?.status === 'CANCELLED' ||
+                ctx.state.data?.status === 'REJECTED' ||
+                ctx.state.data?.status === 'FAILED') {
+                return false;
+            }
+            return 2000;
+        },
+    });
+    useEffect(() => {
+        if (query.data?.status === 'APPROVED' ||
+            query.data?.status === 'CONFIRMED') {
+            setStatus('confirmed');
+            return;
+        }
+        if (query.data?.status === 'CANCELLED' ||
+            query.data?.status === 'REJECTED' ||
+            query.data?.status === 'FAILED') {
+            setStatus('failed');
+            return;
+        }
+    }, [query.data?.status]);
+    const redirectUrl = (() => {
+        const path = depositWithdrawalProps.depositSuccessPageUrl ?? '/deposits/:id/status';
+        const origin = window.location.origin.includes('localhost')
+            ? 'https://uat.powerplay.ph/deposit-success' +
+                depositWithdrawalProps.depositSuccessPageUrl
+            : window.location.origin;
+        return `${origin}${path}`;
+    })();
+    const generateQRCode = async (input) => {
+        if (!depositWithdrawalProps.bypassDepositKycCheck &&
+            (verificationStatus === 'PENDING' ||
+                verificationStatus === 'UNVERIFIED' ||
+                verificationStatus === 'REJECTED' ||
+                verificationStatus === 'CREATED')) {
+            globalStore.kycVerificationStatus.setOpen(true);
+            return;
+        }
+        const id = ObjectId.generate(ObjectType.Deposit).toString();
+        inputRef.current = input;
+        mutation.mutate({
+            id,
+            amount: input.amount,
+            promo: input.promo ?? undefined,
+            redirectUrl: redirectUrl.replace(':id', id),
+        });
+    };
+    const regenerateQRCode = async () => {
+        invariant(inputRef.current);
+        mutation.reset();
+        await new Promise((resolve) => setTimeout(resolve, 1));
+        const id = ObjectId.generate(ObjectType.Deposit).toString();
+        mutation.mutate({
+            id,
+            amount: inputRef.current.amount,
+            promo: inputRef.current.promo ?? undefined,
+            redirectUrl: redirectUrl.replace(':id', id),
+        });
+    };
+    const reset = () => {
+        setStatus('idle');
+        setDeposit(null);
+        setErrorMessage(null);
+        inputRef.current = null;
+    };
+    return {
+        status,
+        deposit,
+        errorMessage,
+        generateQRCode,
+        regenerateQRCode,
+        reset,
+    };
+}

package/dist/components/DepositWithdrawal/Deposit/Deposit.js

@@ -8,6 +8,10 @@ import { AlertCircleIcon } from '../../../icons/AlertCircleIcon.js';
 import { SpinnerIcon } from '../../../icons/SpinnerIcon.js';
 import { onMobileDevice } from '../../../utils/onMobileDevice.js';
 import { PaymentMethods } from '../PaymentMethods.js';
+import { AurixPayGCashDeposit } from './AurixPayGCashDeposit/AurixPayGCashDeposit.js';
+import { AurixPayPayMayaDeposit } from './AurixPayGrabPayDeposit/AurixPayGrabPayDeposit.js';
+import { AurixPayGrabPayDeposit } from './AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js';
+import { AurixPayQRPHDeposit } from './AurixPayQRPHDeposit/AurixPayQRPHDeposit.js';
 const QRPHDeposit = lazy(() => import('./QRPHDeposit/QRPHDeposit.js').then((m) => ({ default: m.QRPHDeposit })));
 const GCashDeposit = lazy(() => import('./GCashDeposit/GCashDeposit.js').then((m) => ({
     default: m.GCashDeposit,
@@ -107,6 +111,24 @@ export function Deposit() {
                 enabled: paymentSettings?.mayaWebpayDepositGatewaySettings?.[enabledKey] &&
                     featureFlag.enabled,
             },
+            {
+                method: 'AURIX_PAY_GCASH',
+                enabled: paymentSettings?.aurixPayGCashDepositGatewaySettings?.[enabledKey] &&
+                    featureFlag.enabled,
+            },
+            {
+                method: 'AURIX_PAY_GRAB_PAY',
+                enabled: paymentSettings?.aurixPayGrabPayDepositGatewaySettings?.[enabledKey] && featureFlag.enabled,
+            },
+            {
+                method: 'AURIX_PAY_PAYMAYA',
+                enabled: paymentSettings?.aurixPayPayMayaDepositGatewaySettings?.[enabledKey] && featureFlag.enabled,
+            },
+            {
+                method: 'AURIX_PAY_QRPH',
+                enabled: paymentSettings?.aurixPayQrphDepositGatewaySettings?.[enabledKey] &&
+                    featureFlag.enabled,
+            },
         ];
         paymentMethods.forEach((o) => {
             if (o.enabled) {
@@ -135,7 +157,7 @@ export function Deposit() {
     if (enabledPaymentMethods.length <= 0) {
         return _jsx(NoAvailablePaymentMethods, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: handlePaymentMethodChange, options: enabledPaymentMethods }), _jsxs(Suspense, { fallback: _jsx(SpinnerIcon, { className: "mx-auto size-6" }), children: [paymentMethod === 'QRPH' && _jsx(QRPHDeposit, {}), paymentMethod === 'GCASH' && _jsx(GCashDeposit, {}), paymentMethod === 'MAYA' && _jsx(MayaDeposit, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppDeposit, {}), paymentMethod === 'ONLINE_BANK' && _jsx(OnlineBankDeposit, {}), paymentMethod === 'LIBANGAN_PAY_IN' && _jsx(LibanganDeposit, {}), paymentMethod === 'PISO_PAY' && _jsx(PisoPayDeposit, {}), paymentMethod === 'AIO_GCASH' && _jsx(AiOGCashDeposit, {}), paymentMethod === 'AIO_PAY_MAYA' && _jsx(AiOPayMayaDeposit, {}), paymentMethod === 'AIO_GRAB_PAY' && _jsx(AiOGrabPayDeposit, {}), paymentMethod === 'AIO_PALAWAN_PAY' && _jsx(AiOPalawanPayDeposit, {}), paymentMethod === 'GCASH_WEBPAY' && _jsx(GCashWebpayDeposit, {}), paymentMethod === 'MAYA_WEBPAY' && _jsx(MayaWebpayDeposit, {})] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: handlePaymentMethodChange, options: enabledPaymentMethods }), _jsxs(Suspense, { fallback: _jsx(SpinnerIcon, { className: "mx-auto size-6" }), children: [paymentMethod === 'QRPH' && _jsx(QRPHDeposit, {}), paymentMethod === 'GCASH' && _jsx(GCashDeposit, {}), paymentMethod === 'MAYA' && _jsx(MayaDeposit, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppDeposit, {}), paymentMethod === 'ONLINE_BANK' && _jsx(OnlineBankDeposit, {}), paymentMethod === 'LIBANGAN_PAY_IN' && _jsx(LibanganDeposit, {}), paymentMethod === 'PISO_PAY' && _jsx(PisoPayDeposit, {}), paymentMethod === 'AIO_GCASH' && _jsx(AiOGCashDeposit, {}), paymentMethod === 'AIO_PAY_MAYA' && _jsx(AiOPayMayaDeposit, {}), paymentMethod === 'AIO_GRAB_PAY' && _jsx(AiOGrabPayDeposit, {}), paymentMethod === 'AIO_PALAWAN_PAY' && _jsx(AiOPalawanPayDeposit, {}), paymentMethod === 'GCASH_WEBPAY' && _jsx(GCashWebpayDeposit, {}), paymentMethod === 'MAYA_WEBPAY' && _jsx(MayaWebpayDeposit, {}), paymentMethod === 'AURIX_PAY_GCASH' && _jsx(AurixPayGCashDeposit, {}), paymentMethod === 'AURIX_PAY_PAYMAYA' && _jsx(AurixPayPayMayaDeposit, {}), paymentMethod === 'AURIX_PAY_GRAB_PAY' && _jsx(AurixPayGrabPayDeposit, {}), paymentMethod === 'AURIX_PAY_QRPH' && _jsx(AurixPayQRPHDeposit, {})] })] }));
 }
 function MayaSessionSessionExpired() {
     return (_jsxs("div", { className: "py-xl", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-warning-secondary", children: _jsx(AlertCircleIcon, { className: "size-6 text-text-featured-icon-light-warning" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg", children: "Session Expired" }), _jsx("p", { className: "mx-auto mt-xs max-w-[25rem] text-center text-sm text-text-tertiary-600", children: "Your session has timed out. To continue with deposits or withdrawals, Please try reloading the app." })] }));

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
         view: "form" | "vca";
-        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -14,7 +14,7 @@ export declare const OnlineBankDepositContext: (props: {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
     view: "form" | "vca";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -2,7 +2,7 @@ import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
     view: "form" | "vca";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

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

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
+        status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
         deposit: import("../../../../types").Deposit | null;
         errorMessage: {
             name: string;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
+    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
     deposit: import("../../../../types").Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QrCodeGenerated.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
 import Image from 'next/image';
+import { useState } from 'react';
 import { useBoolean } from 'usehooks-ts';
+import { toaster } from '../../../../client/utils/toaster.js';
 import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
 import { ArrowCircleDownIcon } from '../../../../icons/ArrowCircleDownIcon.js';
 import { QrCode02Icon } from '../../../../icons/QrCode02Icon.js';
@@ -10,10 +13,13 @@ import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
 import { Button } from '../../../../ui/Button/index.js';
 import { Portal } from '../../../../ui/Portal/index.js';
 import { QrCode } from '../../../../ui/QrCode/index.js';
+import { downloadImage } from '../../../../utils/downloadImage.js';
 import { useQRPHDepositContext } from './QRPHDepositContext.js';
 export function QrCodeGenerated() {
     const context = useQRPHDepositContext();
     const confirm = useBoolean(false);
+    const [isDownloading, setIsDownloading] = useState(false);
+    const isNative = Capacitor.isNativePlatform();
     return (_jsx(AlertDialog.Root, { open: context.status === 'qr-code-generated', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx("button", { type: "button", className: "absolute top-4 right-4 icon:size-6 p-md text-text-quinary disabled:cursor-not-allowed disabled:opacity-50", onClick: () => {
                                     if (!confirm.value) {
                                         confirm.setTrue();
@@ -29,7 +35,37 @@ export function QrCodeGenerated() {
                                     : 'Scan the QR code below with your banking app, or upload it to complete your deposit.' }), !confirm.value && (_jsx("div", { className: "mx-auto mt-xl w-[14.125rem] rounded-xl bg-bg-primary-alt p-6", children: _jsxs(QrCode.Root, { value: context.deposit?.qrCode ?? '', encoding: {
                                         ecc: 'H',
                                         boostEcc: true,
-                                    }, children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), _jsxs(QrCode.DownloadTrigger, { type: "button", fileName: `QRPH-${Date.now()}.jpg`, mimeType: "image/jpeg", className: "mx-auto mt-5 flex w-fit items-center gap-1 font-semibold text-button-tertiary-fg", children: [_jsx(ArrowCircleDownIcon, { className: "size-5" }), "Download QR Code"] })] }) })), confirm.value && (_jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: confirm.setFalse, children: "Go back" }), _jsx(Button, { onClick: () => {
+                                    }, children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), isNative ? (_jsx(QrCode.Context, { children: (qrCode) => (_jsxs("button", { type: "button", disabled: isDownloading, onClick: async () => {
+                                                    try {
+                                                        setIsDownloading(true);
+                                                        const dataUrl = await qrCode.getDataUrl('image/jpeg');
+                                                        const result = await downloadImage(dataUrl, `QRPH-${Date.now()}.jpg`);
+                                                        if (result.success) {
+                                                            toaster.success({
+                                                                title: 'Success',
+                                                                description: result.message,
+                                                            });
+                                                        }
+                                                        else {
+                                                            toaster.error({
+                                                                title: 'Error',
+                                                                description: result.message,
+                                                            });
+                                                        }
+                                                    }
+                                                    catch (error) {
+                                                        console.error('Failed to download QR code:', error);
+                                                        toaster.error({
+                                                            title: 'Error',
+                                                            description: 'An unexpected error occurred while downloading the QR code.',
+                                                        });
+                                                    }
+                                                    finally {
+                                                        setIsDownloading(false);
+                                                    }
+                                                }, className: "mx-auto mt-5 flex w-fit items-center gap-1 font-semibold text-button-tertiary-fg disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(ArrowCircleDownIcon, { className: "size-5" }), isDownloading
+                                                        ? 'Downloading...'
+                                                        : 'Download QR Code'] })) })) : (_jsxs(QrCode.DownloadTrigger, { type: "button", fileName: `QRPH-${Date.now()}.jpg`, mimeType: "image/jpeg", className: "mx-auto mt-5 flex w-fit items-center gap-1 font-semibold text-button-tertiary-fg", children: [_jsx(ArrowCircleDownIcon, { className: "size-5" }), "Download QR Code"] }))] }) })), confirm.value && (_jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: confirm.setFalse, children: "Go back" }), _jsx(Button, { onClick: () => {
                                             context.reset();
                                             setTimeout(() => {
                                                 confirm.setFalse();

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

@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
     promo?: string | null;
 }
 export declare function useQRPHDeposit(): {
-    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
+    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
     deposit: Deposit | null;
     errorMessage: {
         name: string;

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

@@ -11,5 +11,11 @@ export interface DepositWithdrawalProps {
     hasPrivacyPolicyAndTermsOfUse?: boolean;
     bypassDomains?: BypassDomainConfig[];
     bypassDepositKycCheck?: boolean;
+    /**
+     * @default "/deposits/<id>/status"
+     * @example
+     * "/hello/:id/world"
+     */
+    depositSuccessPageUrl?: string;
 }
 export declare function DepositWithdrawal(props: DepositWithdrawalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/PaymentMethods.js

@@ -107,6 +107,26 @@ const OPTIONS = [
         label: 'Maya Webpay',
         image: maya,
     },
+    {
+        value: 'AURIX_PAY_GCASH',
+        label: 'GCash',
+        image: gcash,
+    },
+    {
+        value: 'AURIX_PAY_GRAB_PAY',
+        label: 'GrabPay',
+        image: grabPay,
+    },
+    {
+        value: 'AURIX_PAY_PAYMAYA',
+        label: 'Maya',
+        image: maya,
+    },
+    {
+        value: 'AURIX_PAY_QRPH',
+        label: 'QRPH',
+        image: qrph,
+    },
 ];
 export function PaymentMethods(props) {
     const options = useMemo(() => props.options?.length

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

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import type { KnownDepositError, KnownWithdrawalError, WithdrawalError } from '../../types';
-export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "GCASH_STANDARD_CASH_IN", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY", "GCASH_WEBPAY", "MAYA_WEBPAY", "INSTAPAY_GCASH", "INSTAPAY_PAYMAYA"]>;
+export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "GCASH_STANDARD_CASH_IN", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY", "GCASH_WEBPAY", "MAYA_WEBPAY", "INSTAPAY_GCASH", "INSTAPAY_PAYMAYA", "AURIX_PAY_GCASH", "AURIX_PAY_PAYMAYA", "AURIX_PAY_GRAB_PAY", "AURIX_PAY_QRPH"]>;
 export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;
 export type DepositWithdrawalErrors = KnownDepositError | KnownWithdrawalError | WithdrawalError | string;
 export declare function explainError(error?: DepositWithdrawalErrors): string;

package/dist/components/DepositWithdrawal/utils.js

@@ -18,6 +18,10 @@ export const PaymentMethodDefinition = z.enum([
     'MAYA_WEBPAY',
     'INSTAPAY_GCASH',
     'INSTAPAY_PAYMAYA',
+    'AURIX_PAY_GCASH',
+    'AURIX_PAY_PAYMAYA',
+    'AURIX_PAY_GRAB_PAY',
+    'AURIX_PAY_QRPH',
 ]);
 const errorMap = {
     DAILY_PURCHASE_OR_DEPOSIT_LIMIT_EXCEEDED: 'You have exceeded your daily purchase or deposit limit. Please try again tomorrow.',

package/dist/components/ForgotPassword/ForgotPassword.lazy.d.ts

@@ -1,11 +1,11 @@
 import { type ImageProps } from 'next/image';
 import { type ReactNode } from 'react';
-type ForgotPasswordLayout = 'crazywin';
+type ForgotPasswordLayout = 'crazywin' | 'default';
 export interface ForgotPasswordProps {
     logo: ImageProps['src'];
     children?: ReactNode;
     className?: string;
-    layout?: ForgotPasswordLayout;
+    layout?: ForgotPasswordLayout | 'happybingo';
 }
 export declare function ForgotPassword(props: ForgotPasswordProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ForgotPassword/ForgotPassword.lazy.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image, {} from 'next/image';
-import { Suspense } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
@@ -14,11 +14,22 @@ export function ForgotPassword(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         forgotPassword: ctx.forgotPassword,
     })));
+    const [layout, setLayout] = useState('default');
+    useEffect(() => {
+        setLayout(() => {
+            switch (props.layout) {
+                case 'crazywin':
+                    return 'crazywin';
+                default:
+                    return 'default';
+            }
+        });
+    }, [props.layout]);
     const Body = {
         crazywin: (_jsx(CrazywinForgotPassword, { logo: props.logo })),
-        default: (_jsxs(Dialog.Content, { className: twMerge('mx-auto h-full w-full items-start bg-bg-primary-alt p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(ForgotPasswordForm, {}) })] }))
+        default: (_jsxs(Dialog.Content, { className: twMerge('mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.layout === 'happybingo' ? 'bg-white dark:bg-[#0C111D]' : 'bg-bg-primary-alt', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(ForgotPasswordForm, { layout: props.layout }) })] }))
     };
     return (_jsx(Dialog.Root, { open: globalStore.forgotPassword.open, onOpenChange: (details) => {
             globalStore.forgotPassword.setOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: Body[props.layout ?? 'default'] })] }) }));
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: Body[layout] })] }) }));
 }

package/dist/components/ForgotPassword/ForgotPasswordForm.d.ts

@@ -1 +1,5 @@
-export declare function ForgotPasswordForm(): import("react/jsx-runtime").JSX.Element;
+type Props = {
+    layout?: string;
+};
+export declare function ForgotPasswordForm({ layout }: Props): import("react/jsx-runtime").JSX.Element;
+export {};