@opexa/portal-components 0.1.25 → 0.1.27

package/dist/components/TransactionRecords/DepositRecordsTable.js

@@ -31,6 +31,8 @@ export function DepositRecordsTable(props) {
         ...next,
     }), {
         type: enabledDepositTypes?.length === 1 ? enabledDepositTypes[0] : null,
+        status: null,
+        timestamp: null,
     });
     const localeInfo = useLocaleInfo();
     const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useDepositRecordsQuery, {
@@ -73,14 +75,14 @@ export function DepositRecordsTable(props) {
         ? { scrollbarThumb: props.className }
         : (props.className ?? {});
     return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
-                    timestamp: state.timestamp,
-                    depositType: state.type,
-                    depositStatus: state.status,
+                    timestamp: state.timestamp ?? null,
+                    depositType: state.type ?? null,
+                    depositStatus: state.status ?? null,
                 }, onChange: (value) => {
                     setState({
-                        type: value.depositType,
-                        status: value.depositStatus,
-                        timestamp: value.timestamp,
+                        type: value.depositType ?? null,
+                        status: value.depositStatus ?? null,
+                        timestamp: value.timestamp ?? null,
                     });
                     firstPage();
                     if (searchParams.has('id')) {

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -22,7 +22,7 @@ export function TransactionRecordsTable(props) {
     const [state, setState] = useReducer((prev, next) => ({
         ...prev,
         ...next,
-    }), {});
+    }), { type: null, timestamp: null });
     const localeInfo = useLocaleInfo();
     const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useTransactionRecordsQuery, {
         filter: {
@@ -47,12 +47,12 @@ export function TransactionRecordsTable(props) {
         ? { scrollbarThumb: props.className }
         : (props.className ?? {});
     return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
-                    timestamp: state.timestamp,
-                    transactionType: state.type,
+                    timestamp: state.timestamp ?? null,
+                    transactionType: state.type ?? null,
                 }, onChange: (value) => {
                     setState({
-                        type: value.transactionType,
-                        timestamp: value.timestamp,
+                        type: value.transactionType ?? null,
+                        timestamp: value.timestamp ?? null,
                     });
                     firstPage();
                 }, enabledFilters: {

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -31,6 +31,8 @@ export function WithdrawalRecordsTable(props) {
         ...next,
     }), {
         type: enabledWithdrawalTypes?.length === 1 ? enabledWithdrawalTypes[0] : null,
+        status: null,
+        timestamp: null,
     });
     const localeInfo = useLocaleInfo();
     const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useWithdrawalRecordsQuery, {
@@ -73,14 +75,14 @@ export function WithdrawalRecordsTable(props) {
         ? { scrollbarThumb: props.className }
         : (props.className ?? {});
     return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
-                    timestamp: state.timestamp,
-                    withdrawalType: state.type,
-                    withdrawalStatus: state.status,
+                    timestamp: state.timestamp ?? null,
+                    withdrawalType: state.type ?? null,
+                    withdrawalStatus: state.status ?? null,
                 }, onChange: (value) => {
                     setState({
-                        type: value.withdrawalType,
-                        status: value.withdrawalStatus,
-                        timestamp: value.timestamp,
+                        type: value.withdrawalType ?? null,
+                        status: value.withdrawalStatus ?? null,
+                        timestamp: value.timestamp ?? null,
                     });
                     firstPage();
                     if (searchParams.has('id')) {

package/dist/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.js

@@ -17,7 +17,7 @@ export function UpdateMobilePhoneNumber({ shouldOnlyShow = 'MobileVerified', } =
         updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
         kyc: ctx.kyc,
     })));
-    const { step, step1Form, step2Form, cooldown, formRef, mobileNumberParser, submitStep1, submitStep2, resend, goBackToStep1, } = useUpdateMobileFlow();
+    const { step, step1Form, step2Form, cooldown, formRef, mobileNumberParser, submitStep1, submitStep2, resend, goBackToStep1, } = useUpdateMobileFlow(shouldOnlyShow);
     const isOpen = globalStore.updateMobilePhoneNumber.open && !globalStore.kyc.open;
     return (_jsx(Dialog.Root, { open: isOpen, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-[375px] flex-col items-center space-y-4 rounded-xl bg-[#111827] p-6 text-center", style: {
                             backgroundImage: `url(${lightBg.src})`,

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

@@ -1,3 +1,4 @@
+import type { UpdateMobilePhoneNumberShouldOnlyShow } from './useAutoOpen';
 /**
  * Encapsulates the entire two-step mobile number update flow:
  *  - step state
@@ -8,7 +9,7 @@
  *  - resend cooldown
  *  - helpers used by the two step components
  */
-export declare function useUpdateMobileFlow(): {
+export declare function useUpdateMobileFlow(shouldOnlyShow?: UpdateMobilePhoneNumberShouldOnlyShow): {
     step: number;
     step1Form: import("react-hook-form").UseFormReturn<{
         mobileNumber: string;

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

@@ -2,10 +2,12 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useTimeout } from 'usehooks-ts';
 import { useShallow } from 'zustand/shallow';
 import { useAccountQuery } from '../../../client/hooks/useAccountQuery.js';
 import { useCooldown } from '../../../client/hooks/useCooldown.js';
 import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../../client/hooks/useSessionQuery.js';
 import { useMobileNumberParser } from '../../../client/hooks/useMobileNumberParser.js';
 import { useSendVerificationCodeMutation } from '../../../client/hooks/useSendVerificationCodeMutation.js';
 import { useUpdateMobileNumber } from '../../../client/hooks/useUpdateMobileNumber.js';
@@ -22,12 +24,34 @@ import { useMobileNumberSchemas } from './useMobileNumberSchemas.js';
  *  - resend cooldown
  *  - helpers used by the two step components
  */
-export function useUpdateMobileFlow() {
+export function useUpdateMobileFlow(shouldOnlyShow = 'MobileVerified') {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
         kyc: ctx.kyc,
     })));
-    const accountQuery = useAccountQuery();
+    const pollForMobileVerified = shouldOnlyShow === 'MobileVerified';
+    const sessionQuery = useSessionQuery();
+    const accountQuery = useAccountQuery(pollForMobileVerified
+        ? {
+            enabled: sessionQuery.data?.status === 'authenticated' &&
+                globalStore.updateMobilePhoneNumber.open,
+            refetchInterval: (ctx) => {
+                if (ctx.state.data?.mobileNumberVerified === true) {
+                    return false;
+                }
+                if (ctx.state.dataUpdateCount > 5) {
+                    return false;
+                }
+                return 1000;
+            },
+        }
+        : undefined);
+    useTimeout(() => {
+        globalStore.updateMobilePhoneNumber.setOpen(false);
+    }, pollForMobileVerified &&
+        accountQuery.data?.mobileNumberVerified === true
+        ? 1
+        : null);
     const mobileNumberParser = useMobileNumberParser();
     const { Step1Definition, Step2Definition } = useMobileNumberSchemas();
     const [step, setStep] = useState(1);

package/dist/services/httpRequest.js

@@ -150,7 +150,7 @@ function getErrorMessage(code) {
         case 'MEMBER_ACCOUNT_SUSPENDED':
             return 'Your account has been temporarily suspended. Please reach out to the Chat Support team to learn more and get help with resolving the issue.';
         case 'MEMBER_ACCOUNT_DISABLED':
-            return 'Your account is being created. Please try again later.';
+            return 'Your account is being created. It may take a few minutes to complete. Please try again later.';
         case 'INVALID_RECAPTCHA_RESPONSE':
             return 'Invalid reCAPTCHA response';
         case 'MEMBER_NOT_FOUND':

package/package.json

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