@opexa/portal-components 0.0.842 → 0.0.844

package/dist/client/hooks/useAiOGCashDepositMutation.js

@@ -2,9 +2,11 @@ import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
 import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
+import { explainError } from '../../components/DepositWithdrawal/utils.js';
 import { OPEXAPAY_ENDPOINT } from '../../constants/index.js';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createAiOGCashDeposit, getDeposit, } from '../../services/wallet.js';
+import { capitalize } from '../../utils/capitalize.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateAiOGCashDepositMutationKey } from '../../utils/mutationKeys.js';
@@ -51,6 +53,14 @@ export const useCreateAiOGCashDepositMutation = (config) => {
                 maxAttempt: 20,
             });
             const res = await poll();
+            if (res?.error) {
+                const error = new Error();
+                error.name = capitalize(res.error, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                });
+                error.message = explainError(res.error);
+                throw error;
+            }
             if (!res?.checkoutUrl) {
                 const error = new Error();
                 error.name = 'AiOGCashDepositError';

package/dist/client/hooks/useCreateGCashDepositMutation.js

@@ -2,8 +2,10 @@ import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
 import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
+import { explainError } from '../../components/DepositWithdrawal/utils.js';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createGCashDeposit, getDeposit, } from '../../services/wallet.js';
+import { capitalize } from '../../utils/capitalize.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateGCashDepositMutationKey } from '../../utils/mutationKeys.js';
@@ -43,6 +45,14 @@ export const useCreateGCashDepositMutation = (config) => {
                 maxAttempt: 20,
             });
             const res = await poll();
+            if (res?.error) {
+                const error = new Error();
+                error.name = capitalize(res.error, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                });
+                error.message = explainError(res.error);
+                throw error;
+            }
             if (!res?.checkoutUrl) {
                 const error = new Error();
                 error.name = 'GCashDepositError';

package/dist/client/hooks/useCreateMayaDepositMutation.js

@@ -2,8 +2,10 @@ import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
 import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
+import { explainError } from '../../components/DepositWithdrawal/utils.js';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createMayaDeposit, getDeposit, } from '../../services/wallet.js';
+import { capitalize } from '../../utils/capitalize.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateMayaDepositMutationKey } from '../../utils/mutationKeys.js';
@@ -43,6 +45,14 @@ export const useCreateMayaDepositMutation = (config) => {
                 maxAttempt: 20,
             });
             const res = await poll();
+            if (res?.error) {
+                const error = new Error();
+                error.name = capitalize(res.error, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                });
+                error.message = explainError(res.error);
+                throw error;
+            }
             if (!res?.checkoutUrl) {
                 const error = new Error();
                 error.name = 'MayaDepositError';

package/dist/client/hooks/useCreateOnlineBankDepositMutation.js

@@ -2,8 +2,10 @@ import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
 import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
+import { explainError } from '../../components/DepositWithdrawal/utils.js';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createAIOOnlineBankDeposit, getDeposit, } from '../../services/wallet.js';
+import { capitalize } from '../../utils/capitalize.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateOnlineBankDepositMutationKey } from '../../utils/mutationKeys.js';
@@ -46,6 +48,14 @@ export const useCreateOnlineBankDepositMutation = (config) => {
                 maxAttempt: 5,
             });
             const res = await poll();
+            if (res?.error) {
+                const error = new Error();
+                error.name = capitalize(res.error, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                });
+                error.message = explainError(res.error);
+                throw error;
+            }
             if (!res?.vca) {
                 const error = new Error();
                 error.name = 'OnlineBankDepositError';

package/dist/client/hooks/useCreateQRPHDepositMutation.js

@@ -2,8 +2,10 @@ import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
 import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
+import { explainError } from '../../components/DepositWithdrawal/utils.js';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createAIOQRPHDeposit, getDeposit, } from '../../services/wallet.js';
+import { capitalize } from '../../utils/capitalize.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateQRPHDepositMutationKey } from '../../utils/mutationKeys.js';
@@ -46,6 +48,14 @@ export const useCreateQRPHDepositMutation = (config) => {
                 maxAttempt: 5,
             });
             const res = await poll();
+            if (res?.error) {
+                const error = new Error();
+                error.name = capitalize(res.error, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                });
+                error.message = explainError(res.error);
+                throw error;
+            }
             if (!res?.qrCode) {
                 const error = new Error();
                 error.name = 'QRPHDepositError';

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

@@ -48,6 +48,7 @@ export function AiOGCashDeposit() {
     const verificationQuery = useMemberVerificationQuery();
     const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
     const [status, setStatus] = useState('waiting');
+    const [errorMessage, setErrorMessage] = useState(null);
     const createDepositMutation = useCreateAiOGCashDepositMutation({
         onMutate() {
             disclosure.setOpen(true);
@@ -62,8 +63,12 @@ export function AiOGCashDeposit() {
             });
             setStatus('success');
         },
-        onError() {
+        onError(data) {
             setStatus('failed');
+            setErrorMessage({
+                name: data.name,
+                message: data.message,
+            });
         },
     });
     const warn = useBoolean();
@@ -192,6 +197,7 @@ export function AiOGCashDeposit() {
                     disclosure.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
                     setStatus('waiting');
+                    setErrorMessage(null);
                     form.reset();
                     warn.setFalse();
                 }, 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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
@@ -203,14 +209,13 @@ export function AiOGCashDeposit() {
                                                 }
                                             }, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) })), status === 'confirmed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' &&
                                                         !warn.value &&
-                                                        'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && errorMessage?.name] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         !warn.value &&
                                                         'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
                                                         warn.value &&
                                                         'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
-                                                        'Your deposit has been successfully processed.', status === 'failed' &&
-                                                        'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
+                                                        'Your deposit has been successfully processed.', status === 'failed' && errorMessage?.message] })] }), (status === 'failed' ||
                                         status === 'success' ||
                                         status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
                                                             warn.setFalse();

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

@@ -48,6 +48,7 @@ export function AiOPayMayaDeposit() {
     const verificationQuery = useMemberVerificationQuery();
     const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
     const [status, setStatus] = useState('waiting');
+    const [errorMessage, setErrorMessage] = useState(null);
     const createDepositMutation = useCreateAiOPayMayaDepositMutation({
         onMutate() {
             disclosure.setOpen(true);
@@ -60,8 +61,12 @@ export function AiOPayMayaDeposit() {
             queryClient.invalidateQueries({ queryKey: getDepositsCountQueryKey() });
             setStatus('success');
         },
-        onError() {
+        onError(data) {
             setStatus('failed');
+            setErrorMessage({
+                name: data.name,
+                message: data.message,
+            });
         },
     });
     const warn = useBoolean();
@@ -190,6 +195,7 @@ export function AiOPayMayaDeposit() {
                     disclosure.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
                     setStatus('waiting');
+                    setErrorMessage(null);
                     form.reset();
                     warn.setFalse();
                 }, 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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
@@ -201,14 +207,13 @@ export function AiOPayMayaDeposit() {
                                                 }
                                             }, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) })), status === 'confirmed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' &&
                                                         !warn.value &&
-                                                        'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && errorMessage?.name] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         !warn.value &&
                                                         'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
                                                         warn.value &&
                                                         'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
-                                                        'Your deposit has been successfully processed.', status === 'failed' &&
-                                                        'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
+                                                        'Your deposit has been successfully processed.', status === 'failed' && errorMessage?.message] })] }), (status === 'failed' ||
                                         status === 'success' ||
                                         status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
                                                             warn.setFalse();

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

@@ -46,6 +46,7 @@ export function GCashDeposit() {
     const verificationQuery = useMemberVerificationQuery();
     const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
     const [status, setStatus] = useState('waiting');
+    const [errorMessage, setErrorMessage] = useState(null);
     const createDepositMutation = useCreateGCashDepositMutation({
         onMutate() {
             disclosure.setOpen(true);
@@ -56,8 +57,12 @@ export function GCashDeposit() {
             window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
             setStatus('success');
         },
-        onError() {
+        onError(data) {
             setStatus('failed');
+            setErrorMessage({
+                name: data.name,
+                message: data.message,
+            });
         },
     });
     const warn = useBoolean();
@@ -183,6 +188,7 @@ export function GCashDeposit() {
                     disclosure.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
                     setStatus('waiting');
+                    setErrorMessage(null);
                     form.reset();
                     warn.setFalse();
                 }, 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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
@@ -194,14 +200,13 @@ export function GCashDeposit() {
                                                 }
                                             }, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) })), status === 'confirmed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' &&
                                                         !warn.value &&
-                                                        'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "Didn't see the payment window?", status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && errorMessage?.name] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         !warn.value &&
-                                                        'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
+                                                        "Sometimes the payment pop up doesn't appear right away. Don't worry, just click the button below to reopen it and continue your deposit.", status === 'success' &&
                                                         warn.value &&
                                                         'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
-                                                        'Your deposit has been successfully processed.', status === 'failed' &&
-                                                        'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
+                                                        'Your deposit has been successfully processed.', status === 'failed' && errorMessage?.message] })] }), (status === 'failed' ||
                                         status === 'success' ||
                                         status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
                                                             warn.setFalse();

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

@@ -34,6 +34,7 @@ export function MayaAppDeposit() {
     const verificationQuery = useMemberVerificationQuery();
     const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
     const [status, setStatus] = useState('waiting');
+    const [errorMessage, setErrorMessage] = useState(null);
     const createDepositMutation = useCreateMayaAppDepositMutation({
         onMutate() {
             setStatus('processing');
@@ -42,8 +43,12 @@ export function MayaAppDeposit() {
             setStatus('success');
             form.reset();
         },
-        onError() {
+        onError(data) {
             setStatus('failed');
+            setErrorMessage({
+                name: data.name,
+                message: data.message,
+            });
         },
     });
     const depositsCountQuery = useDepositsCountQuery();
@@ -149,10 +154,10 @@ export function MayaAppDeposit() {
                     }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), depositWithdrawalProps.hasPrivacyPolicyAndTermsOfUse && (_jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["By depositing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] })), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
                     if (!details.open) {
                         setStatus('waiting');
+                        setErrorMessage(null);
                     }
-                }, lazyMount: true, unmountOnExit: 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: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
-                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' && (_jsxs(_Fragment, { children: ["Your deposit has been successfully processed. ", _jsx("br", {}), " If you are not redirected automatically, click", ' ', !!createDepositMutation.data?.checkoutUrl && (_jsx("a", { href: createDepositMutation.data?.checkoutUrl, target: "_blank", rel: "noopener noreferrer", className: "text-text-brand underline underline-offset-2", children: "here" })), "."] })), status === 'failed' &&
-                                                        'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                }, lazyMount: true, unmountOnExit: 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: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && errorMessage?.name] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' && (_jsxs(_Fragment, { children: ["Your deposit has been successfully processed. ", _jsx("br", {}), " If you are not redirected automatically, click", ' ', !!createDepositMutation.data?.checkoutUrl && (_jsx("a", { href: createDepositMutation.data?.checkoutUrl, target: "_blank", rel: "noopener noreferrer", className: "text-text-brand underline underline-offset-2", children: "here" })), "."] })), status === 'failed' && errorMessage?.message] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
                                                 }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

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

@@ -46,6 +46,7 @@ export function MayaDeposit() {
     const verificationQuery = useMemberVerificationQuery();
     const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
     const [status, setStatus] = useState('waiting');
+    const [errorMessage, setErrorMessage] = useState(null);
     const createDepositMutation = useCreateMayaDepositMutation({
         onMutate() {
             disclosure.setOpen(true);
@@ -56,8 +57,12 @@ export function MayaDeposit() {
             window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
             setStatus('success');
         },
-        onError() {
+        onError(data) {
             setStatus('failed');
+            setErrorMessage({
+                name: data.name,
+                message: data.message,
+            });
         },
     });
     const warn = useBoolean();
@@ -183,6 +188,7 @@ export function MayaDeposit() {
                     disclosure.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
                     setStatus('waiting');
+                    setErrorMessage(null);
                     form.reset();
                     warn.setFalse();
                 }, 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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
@@ -194,14 +200,13 @@ export function MayaDeposit() {
                                                 }
                                             }, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) })), status === 'confirmed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' &&
                                                         !warn.value &&
-                                                        'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && errorMessage?.name] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         !warn.value &&
                                                         'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
                                                         warn.value &&
                                                         'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
-                                                        'Your deposit has been successfully processed.', status === 'failed' &&
-                                                        'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
+                                                        'Your deposit has been successfully processed.', status === 'failed' && errorMessage?.message] })] }), (status === 'failed' ||
                                         status === 'success' ||
                                         status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
                                                             warn.setFalse();

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

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

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

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

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

@@ -7,5 +7,5 @@ import { Portal } from '../../../../ui/Portal/index.js';
 import { useQRPHDepositContext } from './QRPHDepositContext.js';
 export function Failed() {
     const context = useQRPHDepositContext();
-    return (_jsx(AlertDialog.Root, { open: context.status === 'failed', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _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("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: context.reset, children: _jsx(XIcon, {}) }), _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", children: "Your deposit failed or was cancelled." }), _jsx(AlertDialog.Description, { className: "mt-xl px-3", children: "Your deposit was not completed or has been cancelled. You can try again by generating a\u00A0new\u00A0QR code." }), _jsx(Button, { className: "mt-4xl w-full", variant: "outline", onClick: context.regenerateQRCode, children: "Generate New QR Code" })] }) })] }) }));
+    return (_jsx(AlertDialog.Root, { open: context.status === 'failed', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _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("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: context.reset, children: _jsx(XIcon, {}) }), _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", children: context.errorMessage?.name || 'Your deposit failed or was cancelled.' }), _jsx(AlertDialog.Description, { className: "mt-xl px-3", children: context.errorMessage?.message || 'Your deposit was not completed or has been cancelled. You can try again by generating a new QR code.' }), _jsx(Button, { className: "mt-4xl w-full", variant: "outline", onClick: context.regenerateQRCode, children: "Generate New QR Code" })] }) })] }) }));
 }

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

@@ -2,6 +2,10 @@ export declare const QRPHDepositContext: (props: {
     value: {
         status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
         deposit: import("../../../../types").Deposit | null;
+        errorMessage: {
+            name: string;
+            message: string;
+        } | null;
         generateQRCode: (input: import("./useQRPHDeposit").GenerateQRCodeInput) => Promise<void>;
         regenerateQRCode: () => Promise<void>;
         reset: () => void;
@@ -11,6 +15,10 @@ export declare const QRPHDepositContext: (props: {
 }) => React.ReactNode, useQRPHDepositContext: () => {
     status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
     deposit: import("../../../../types").Deposit | null;
+    errorMessage: {
+        name: string;
+        message: string;
+    } | null;
     generateQRCode: (input: import("./useQRPHDeposit").GenerateQRCodeInput) => Promise<void>;
     regenerateQRCode: () => Promise<void>;
     reset: () => void;

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

@@ -7,6 +7,10 @@ export interface GenerateQRCodeInput {
 export declare function useQRPHDeposit(): {
     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/QRPHDeposit/useQRPHDeposit.js

@@ -14,6 +14,7 @@ export function useQRPHDeposit() {
     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 = useCreateQRPHDepositMutation({
@@ -25,8 +26,12 @@ export function useQRPHDeposit() {
             setStatus('qr-code-generated');
             setDeposit(data);
         },
-        onError() {
+        onError(data) {
             setStatus('failed');
+            setErrorMessage({
+                name: data.name,
+                message: data.message,
+            });
         },
     });
     const query = useDepositQuery(deposit?.id, {
@@ -82,11 +87,13 @@ export function useQRPHDeposit() {
     const reset = () => {
         setStatus('idle');
         setDeposit(null);
+        setErrorMessage(null);
         inputRef.current = null;
     };
     return {
         status,
         deposit,
+        errorMessage,
         generateQRCode,
         regenerateQRCode,
         reset,

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

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        view: "form" | "qrCode";
+        view: "qrCode" | "form";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

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

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

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/Confirmed.d.ts

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon } from '../../../../icons/CheckCircleIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+import { useQRPHDepositContext } from './QRPHDepositContext.js';
+export function Confirmed() {
+    const context = useQRPHDepositContext();
+    return (_jsx(AlertDialog.Root, { open: context.status === 'confirmed', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _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("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: context.reset, children: _jsx(XIcon, {}) }), _jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-success-secondary", children: _jsx(CheckCircleIcon, { className: "size-6 text-text-featured-icon-light-success" }) }), _jsx(AlertDialog.Title, { className: "mt-xl", children: "Your deposit was successful!" }), _jsx(AlertDialog.Description, { className: "mt-xl px-3", children: "The funds have been added to your account." }), _jsx(Button, { className: "mt-4xl w-full", onClick: context.reset, children: "Ok" })] }) })] }) }));
+}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/Failed.d.ts

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+import { useQRPHDepositContext } from './QRPHDepositContext.js';
+export function Failed() {
+    const context = useQRPHDepositContext();
+    return (_jsx(AlertDialog.Root, { open: context.status === 'failed', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _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("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: context.reset, children: _jsx(XIcon, {}) }), _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", children: "Your deposit failed or was cancelled." }), _jsx(AlertDialog.Description, { className: "mt-xl px-3", children: "Your deposit was not completed or has been cancelled. You can try again by generating a\u00A0new\u00A0QR code." }), _jsx(Button, { className: "mt-4xl w-full", variant: "outline", onClick: context.regenerateQRCode, children: "Generate New QR Code" })] }) })] }) }));
+}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/Form.d.ts

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