@opexa/portal-components 0.1.7 → 0.1.12

package/dist/components/DepositWithdrawal/Withdrawal/InstapayGCashWithdrawal/InstapayGcashWithdrawal.js

@@ -138,7 +138,12 @@ export function InstapayGCashWithdrawal() {
             bankCode: 'BNKGCH',
         });
     });
-    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", id: "hook-form", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Phone Number" }), _jsx(Field.Input, { type: "number", ...form.register('accountNumber'), onKeyDown: (e) => {
+    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", id: "hook-form", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Phone Number" }), _jsx(Field.Input, { type: "text", inputMode: "numeric", pattern: "[0-9]*", ...form.register('accountNumber', {
+                            setValueAs: (value) => value.replace(/\D/g, ''),
+                            onChange: (e) => {
+                                e.target.value = e.target.value.replace(/\D/g, '');
+                            },
+                        }), onKeyDown: (e) => {
                             if (['e', 'E', '.', '-', '+', ','].includes(e.key)) {
                                 e.preventDefault();
                             }

package/dist/components/DepositWithdrawal/Withdrawal/InstapayPaymayaWithdrawal/InstapayPaymayaWithdrawal.js

@@ -138,7 +138,12 @@ export function InstapayPaymayaWithdrawal() {
             bankCode: 'BNKMYA',
         });
     });
-    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", id: "hook-form", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Phone Number" }), _jsx(Field.Input, { type: "number", ...form.register('accountNumber'), onKeyDown: (e) => {
+    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", id: "hook-form", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Phone Number" }), _jsx(Field.Input, { type: "text", inputMode: "numeric", pattern: "[0-9]*", ...form.register('accountNumber', {
+                            setValueAs: (value) => value.replace(/\D/g, ''),
+                            onChange: (e) => {
+                                e.target.value = e.target.value.replace(/\D/g, '');
+                            },
+                        }), onKeyDown: (e) => {
                             if (['e', 'E', '.', '-', '+', ','].includes(e.key)) {
                                 e.preventDefault();
                             }

package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js

@@ -177,7 +177,12 @@ export function InstapayWithdrawal() {
                                 sameWidth: true,
                             }, value: o.field.value ? [o.field.value] : [], onValueChange: (details) => {
                                 o.field.onChange(details.value.at(0) ?? '');
-                            }, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item.id))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account number" }), _jsx(Field.Input, { type: "number", ...form.register('accountNumber'), onKeyDown: (e) => {
+                            }, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item.id))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account number" }), _jsx(Field.Input, { type: "text", inputMode: "numeric", pattern: "[0-9]*", ...form.register('accountNumber', {
+                            setValueAs: (value) => value.replace(/\D/g, ''),
+                            onChange: (e) => {
+                                e.target.value = e.target.value.replace(/\D/g, '');
+                            },
+                        }), onKeyDown: (e) => {
                             if (['e', 'E', '.', '-', '+', ','].includes(e.key)) {
                                 e.preventDefault();
                             }

package/dist/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.d.ts

@@ -1 +1,6 @@
-export declare function UpdateMobilePhoneNumber(): import("react/jsx-runtime").JSX.Element;
+import { type UpdateMobilePhoneNumberShouldOnlyShow } from './hooks/useAutoOpen';
+export type { UpdateMobilePhoneNumberShouldOnlyShow };
+type UpdateMobilePhoneNumberProps = {
+    shouldOnlyShow?: UpdateMobilePhoneNumberShouldOnlyShow;
+};
+export declare function UpdateMobilePhoneNumber({ shouldOnlyShow, }?: UpdateMobilePhoneNumberProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.js

@@ -10,10 +10,10 @@ import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { Step1MobileNumberForm } from './components/Step1MobileNumberForm.js';
 import { Step2VerificationForm } from './components/Step2VerificationForm.js';
-import { useAutoOpenWhenUnverified } from './hooks/useAutoOpenWhenUnverified.js';
+import { useAutoOpen, } from './hooks/useAutoOpen.js';
 import { useUpdateMobileFlow } from './hooks/useUpdateMobileFlow.js';
-export function UpdateMobilePhoneNumber() {
-    useAutoOpenWhenUnverified();
+export function UpdateMobilePhoneNumber({ shouldOnlyShow = 'MobileVerified', } = {}) {
+    useAutoOpen(shouldOnlyShow);
     const featureFlag = useFeatureFlag();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,

package/dist/components/UpdateMobilePhoneNumber/hooks/useAutoOpen.d.ts

@@ -0,0 +1,8 @@
+export type UpdateMobilePhoneNumberShouldOnlyShow = 'MobileVerified' | 'HasMobile';
+/**
+ * Opens the UpdateMobilePhoneNumber dialog automatically (once per mount) if
+ * the account has finished loading and:
+ * - `MobileVerified` (default): the mobile number is not verified; closes if verified.
+ * - `HasMobile`: the user has no mobile number (`mobileNumber` is null); closes if set.
+ */
+export declare function useAutoOpen(shouldOnlyShow?: UpdateMobilePhoneNumberShouldOnlyShow): void;

package/dist/components/UpdateMobilePhoneNumber/hooks/useAutoOpen.js

@@ -0,0 +1,48 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../../client/hooks/useAccountQuery.js';
+import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+/**
+ * Opens the UpdateMobilePhoneNumber dialog automatically (once per mount) if
+ * the account has finished loading and:
+ * - `MobileVerified` (default): the mobile number is not verified; closes if verified.
+ * - `HasMobile`: the user has no mobile number (`mobileNumber` is null); closes if set.
+ */
+export function useAutoOpen(shouldOnlyShow = 'MobileVerified') {
+    const { setOpen } = useGlobalStore(useShallow((ctx) => ({
+        setOpen: ctx.updateMobilePhoneNumber.setOpen,
+    })));
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const isAccountLoading = accountQuery.isLoading;
+    const isMobileNumberVerified = account?.mobileNumberVerified === true;
+    const hasMobileNumber = account?.mobileNumber != null;
+    const hasExecuted = useRef(false);
+    useEffect(() => {
+        if (!isAccountLoading && !!account && !hasExecuted.current) {
+            if (shouldOnlyShow === 'HasMobile') {
+                if (!hasMobileNumber) {
+                    setOpen(true);
+                }
+                else {
+                    setOpen(false);
+                }
+            }
+            else if (!isMobileNumberVerified) {
+                setOpen(true);
+            }
+            else {
+                setOpen(false);
+            }
+            hasExecuted.current = true;
+        }
+    }, [
+        isAccountLoading,
+        account,
+        hasMobileNumber,
+        isMobileNumberVerified,
+        shouldOnlyShow,
+        setOpen,
+    ]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.1.7",
+  "version": "0.1.12",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",