@opexa/portal-components 0.1.5 → 0.1.6

package/dist/client/hooks/useCooldown.d.ts

@@ -1,4 +1,4 @@
-interface UseCooldownOptions {
+export interface UseCooldownOptions {
     /** @default 0 */
     min?: number;
     /** @default 10 */
@@ -14,7 +14,7 @@ interface UseCooldownOptions {
     allowPause?: boolean;
     onCooldown?: () => void;
 }
-interface UseCooldownReturn {
+export interface UseCooldownReturn {
     /** Starts or pauses the cooldown */
     start: () => void;
     /** Restarts the cooldown */
@@ -40,4 +40,3 @@ interface UseCooldownReturn {
  *
  */
 export declare function useCooldown(opts?: UseCooldownOptions): UseCooldownReturn;
-export {};

package/dist/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.js

@@ -1,192 +1,29 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { useEffect, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import z from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
-import { useCooldown } from '../../client/hooks/useCooldown.js';
 import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
-import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
-import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
-import { useUpdateMobileNumber } from '../../client/hooks/useUpdateMobileNumber.js';
-import { toaster } from '../../client/utils/toaster.js';
-import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import inplayLogo from '../../images/inplay-logo.png';
 import lightBg from '../../images/light-bg.png';
-import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
-import { Field } from '../../ui/Field/index.js';
-import { PinInput } from '../../ui/PinInput/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 { useUpdateMobileFlow } from './hooks/useUpdateMobileFlow.js';
 export function UpdateMobilePhoneNumber() {
+    useAutoOpenWhenUnverified();
     const featureFlag = useFeatureFlag();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
         kyc: ctx.kyc,
     })));
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    const isAccountLoading = accountQuery.isLoading;
-    const isMobileNumberVerified = account?.mobileNumberVerified === true;
-    const hasExecuted = useRef(false);
-    useEffect(() => {
-        if (!isAccountLoading && !!account && !hasExecuted.current) {
-            if (!isMobileNumberVerified) {
-                globalStore.updateMobilePhoneNumber.setOpen(true);
-            }
-            else {
-                globalStore.updateMobilePhoneNumber.setOpen(false);
-            }
-            hasExecuted.current = true;
-        }
-    }, [
-        isAccountLoading,
-        account,
-        isMobileNumberVerified,
-        globalStore.updateMobilePhoneNumber,
-    ]);
-    const [step, setStep] = useState(1);
-    const sendVerificationCodeMutation = useSendVerificationCodeMutation({
-        onSuccess: () => {
-            setStep(2);
-            cooldown.start();
-        },
-        onError: (err) => {
-            toaster.error({
-                title: 'Sign In Failed',
-                description: err.message,
-            });
-        },
-    });
-    const updateMobileNumberMutation = useUpdateMobileNumber({
-        onSuccess: async () => {
-            step1Form.reset();
-            step2Form.reset();
-            setStep(1);
-            toaster.success({
-                title: 'Verification Successful',
-                description: 'Your mobile number has been verified.',
-            });
-            globalStore.updateMobilePhoneNumber.setOpen(false);
-            // Refetch the account to get the latest verification status before
-            // deciding whether to open the KYC modal. The `account` captured in
-            // this closure may be stale (e.g. a `verification: null` snapshot)
-            // even though the user is already VERIFIED.
-            const { data: freshAccount } = await accountQuery.refetch();
-            // If the user is already verified by any of the available signals,
-            // do NOT open the KYC modal. Mirrors `isKycCompleted` in
-            // KycOpenOnHomeMount.tsx so behavior stays consistent.
-            const isKycCompleted = freshAccount?.verified === true ||
-                freshAccount?.verification?.status === 'APPROVED' ||
-                freshAccount?.verification?.status === 'VERIFIED' ||
-                freshAccount?.verificationStatus === 'VERIFIED';
-            if (isKycCompleted) {
-                return;
-            }
-            // Only open KYC if the user is explicitly UNVERIFIED.
-            const isUnverified = freshAccount?.verification === null ||
-                freshAccount?.verification === undefined ||
-                freshAccount?.verification?.status === 'UNVERIFIED' ||
-                freshAccount?.verification?.status === 'CREATED' ||
-                freshAccount?.verificationStatus === 'UNVERIFIED';
-            if (isUnverified) {
-                globalStore.kyc.setOpen(true);
-            }
-        },
-        onError: (err) => {
-            const errorMessage = err.message === 'Internal Server Error'
-                ? `mobile number ${mobileNumberParser.format(step1Form.getValues('mobileNumber'))} is not available`
-                : err.message;
-            toaster.error({
-                title: 'Sign In Failed',
-                description: errorMessage,
-            });
-        },
-    });
-    const localeInfo = useLocaleInfo();
-    const mobileNumberParser = useMobileNumberParser();
-    const Step1Definition = z.object({
-        mobileNumber: z
-            .string()
-            .min(1, 'Mobile number is required')
-            .superRefine((v, ctx) => {
-            if (!mobileNumberParser.validate(v)) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'Invalid mobile number',
-                });
-            }
-        }),
-    });
-    const Step2Definition = z.object({
-        verificationCode: z.array(z.string()).superRefine((val, ctx) => {
-            if (val.length !== 6 || val.some((v) => v.length !== 1)) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'Please enter your 6-digit verification code.',
-                });
-            }
-        }),
-    });
-    const step1Form = useForm({
-        resolver: zodResolver(Step1Definition),
-        defaultValues: {
-            mobileNumber: '',
-        },
-    });
-    const step2Form = useForm({
-        resolver: zodResolver(Step2Definition),
-        defaultValues: {
-            verificationCode: Array.from({ length: 6 }).fill(''),
-        },
-    });
-    const cooldown = useCooldown({
-        max: 60,
-        duration: 1000 * 60,
-    });
-    const formRef = useRef(null);
+    const { step, step1Form, step2Form, cooldown, formRef, mobileNumberParser, submitStep1, submitStep2, resend, goBackToStep1, } = useUpdateMobileFlow();
     const isOpen = globalStore.updateMobilePhoneNumber.open &&
         featureFlag.enabled &&
         !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})`,
-                        }, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsxs("div", { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "font-bold text-sm", children: ["Get ", _jsx("span", { className: "text-[#F05127]", children: "\u20B150 Bonus" }), " when you verify your account and play."] }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
-                                                    sendVerificationCodeMutation.mutateAsync({
-                                                        channel: 'SMS',
-                                                        recipient: mobileNumberParser.format(data.mobileNumber),
-                                                    });
-                                                }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "text-left", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode }) }), _jsx(Field.Input, { style: {
-                                                                            paddingLeft: `calc(1.25rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
-                                                                        }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Send Code" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Check your Phone" }), _jsxs("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold text-[#F05127]", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: formRef, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
-                                                    updateMobileNumberMutation.mutateAsync({
-                                                        mobileNumber: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
-                                                        verificationCode: verificationCode.join(''),
-                                                    });
-                                                }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", onKeyDown: (e) => {
-                                                                        if (e.key === 'Backspace') {
-                                                                            step2Form.reset();
-                                                                        }
-                                                                    }, value: o.field.value, onValueChange: (details) => {
-                                                                        o.field.onChange(details.value);
-                                                                        o.field.onBlur();
-                                                                    }, otp: true, onValueComplete: () => {
-                                                                        formRef.current?.requestSubmit();
-                                                                    }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-4 flex w-full items-center justify-center gap-xs text-xs", children: [_jsx("span", { className: "text-[#9CA3AF]", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-[#C084FC]", disabled: cooldown.cooling, onClick: async () => {
-                                                                    await sendVerificationCodeMutation.mutateAsync({
-                                                                        channel: 'SMS',
-                                                                        recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
-                                                                    });
-                                                                    cooldown.start();
-                                                                }, children: cooldown.cooling
-                                                                    ? `Resend in ${cooldown.countdown}s`
-                                                                    : 'Resend' })] }), _jsx("button", { type: "button", className: "absolute top-0 left-6 mx-auto mt-3xl flex h-8 w-8 items-center gap-1 rounded-full bg-[#1f2638] font-semibold text-sm text-text-tertiary-600", onClick: () => {
-                                                            setStep(1);
-                                                            step2Form.reset();
-                                                            cooldown.stop();
-                                                        }, children: _jsx(ArrowLeftIcon, { className: "mx-auto size-5" }) })] })] }))] })] }) })] }) }));
+                        }, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsxs("div", { children: [step === 1 && (_jsx(Step1MobileNumberForm, { step1Form: step1Form, submitStep1: submitStep1 })), step === 2 && (_jsx(Step2VerificationForm, { step1Form: step1Form, step2Form: step2Form, cooldown: cooldown, formRef: formRef, mobileNumberParser: mobileNumberParser, submitStep2: submitStep2, resend: resend, goBackToStep1: goBackToStep1 }))] })] }) })] }) }));
 }

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

@@ -0,0 +1,6 @@
+/**
+ * Logout button used inside the UpdateMobilePhoneNumber dialog. Closes the
+ * related account dialogs alongside the mobile number dialog before signing
+ * the user out.
+ */
+export declare function LogoutButton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/UpdateMobilePhoneNumber/components/LogoutButton.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+import { Button } from '../../../ui/Button/index.js';
+import { useLogout } from '../hooks/useLogout.js';
+/**
+ * Logout button used inside the UpdateMobilePhoneNumber dialog. Closes the
+ * related account dialogs alongside the mobile number dialog before signing
+ * the user out.
+ */
+export function LogoutButton() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+    })));
+    const { logout, isPending } = useLogout({
+        onBeforeRedirect: () => {
+            globalStore.updateMobilePhoneNumber.setOpen(false);
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+        },
+    });
+    return (_jsx(Button, { type: "button", className: "mt-lg bg-transparent text-text-brand-primary-600", disabled: isPending, onClick: logout, children: "Log Out" }));
+}

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

@@ -0,0 +1,6 @@
+import type { UseUpdateMobileFlowReturn } from '../hooks/useUpdateMobileFlow';
+export interface Step1MobileNumberFormProps {
+    step1Form: UseUpdateMobileFlowReturn['step1Form'];
+    submitStep1: UseUpdateMobileFlowReturn['submitStep1'];
+}
+export declare function Step1MobileNumberForm({ step1Form, submitStep1, }: Step1MobileNumberFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/UpdateMobilePhoneNumber/components/Step1MobileNumberForm.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Field } from '../../../ui/Field/index.js';
+import { LogoutButton } from './LogoutButton.js';
+export function Step1MobileNumberForm({ step1Form, submitStep1, }) {
+    const localeInfo = useLocaleInfo();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'flex flex-col items-center justify-center gap-1', children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Verify Your Account" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "Please enter your mobile phone number to verify your account." })] }), _jsxs("form", { className: "mt-3xl", onSubmit: submitStep1, children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "text-left", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode }) }), _jsx(Field.Input, { style: {
+                                            paddingLeft: `calc(1.25rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
+                                        }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Send Code" }), _jsx(LogoutButton, {})] })] }));
+}

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

@@ -0,0 +1,12 @@
+import type { UseUpdateMobileFlowReturn } from '../hooks/useUpdateMobileFlow';
+export interface Step2VerificationFormProps {
+    step1Form: UseUpdateMobileFlowReturn['step1Form'];
+    step2Form: UseUpdateMobileFlowReturn['step2Form'];
+    cooldown: UseUpdateMobileFlowReturn['cooldown'];
+    formRef: UseUpdateMobileFlowReturn['formRef'];
+    mobileNumberParser: UseUpdateMobileFlowReturn['mobileNumberParser'];
+    submitStep2: UseUpdateMobileFlowReturn['submitStep2'];
+    resend: UseUpdateMobileFlowReturn['resend'];
+    goBackToStep1: UseUpdateMobileFlowReturn['goBackToStep1'];
+}
+export declare function Step2VerificationForm({ step1Form, step2Form, cooldown, formRef, mobileNumberParser, submitStep2, resend, goBackToStep1, }: Step2VerificationFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/UpdateMobilePhoneNumber/components/Step2VerificationForm.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Field } from '../../../ui/Field/index.js';
+import { PinInput } from '../../../ui/PinInput/index.js';
+export function Step2VerificationForm({ step1Form, step2Form, cooldown, formRef, mobileNumberParser, submitStep2, resend, goBackToStep1, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Check your Phone" }), _jsxs("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold text-[#F05127]", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: formRef, className: "mt-5", onSubmit: submitStep2, children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", onKeyDown: (e) => {
+                                        if (e.key === 'Backspace') {
+                                            step2Form.reset();
+                                        }
+                                    }, value: o.field.value, onValueChange: (details) => {
+                                        o.field.onChange(details.value);
+                                        o.field.onBlur();
+                                    }, otp: true, onValueComplete: () => {
+                                        formRef.current?.requestSubmit();
+                                    }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-4 flex w-full items-center justify-center gap-xs text-xs", children: [_jsx("span", { className: "text-[#9CA3AF]", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-button-secondary-fg disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: resend, children: cooldown.cooling ? `Resend in ${cooldown.countdown}s` : 'Resend' })] }), _jsx("button", { type: "button", className: "absolute top-0 left-6 mx-auto mt-3xl flex h-8 w-8 items-center gap-1 rounded-full bg-[#1f2638] font-semibold text-sm text-text-tertiary-600", onClick: goBackToStep1, children: _jsx(ArrowLeftIcon, { className: "mx-auto size-5" }) })] })] }));
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Opens the UpdateMobilePhoneNumber dialog automatically (once per mount) if
+ * the account has finished loading and the user's mobile number is not yet
+ * verified. Closes it if it is verified.
+ */
+export declare function useAutoOpenWhenUnverified(): void;

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

@@ -0,0 +1,31 @@
+'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 the user's mobile number is not yet
+ * verified. Closes it if it is verified.
+ */
+export function useAutoOpenWhenUnverified() {
+    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 hasExecuted = useRef(false);
+    useEffect(() => {
+        if (!isAccountLoading && !!account && !hasExecuted.current) {
+            if (!isMobileNumberVerified) {
+                setOpen(true);
+            }
+            else {
+                setOpen(false);
+            }
+            hasExecuted.current = true;
+        }
+    }, [isAccountLoading, account, isMobileNumberVerified, setOpen]);
+}

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

@@ -0,0 +1,11 @@
+export interface UseLogoutOptions {
+    /**
+     * Called after FCM unregister and signOut.mutate() but before the final
+     * router navigation. Use this to close any related dialogs.
+     */
+    onBeforeRedirect?: () => void;
+}
+export declare function useLogout(options?: UseLogoutOptions): {
+    logout: () => Promise<void>;
+    isPending: boolean;
+};

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

@@ -0,0 +1,54 @@
+'use client';
+import { Capacitor } from '@capacitor/core';
+import { useRouter } from 'next/navigation';
+import invariant from 'tiny-invariant';
+import { useSignOutMutation } from '../../../client/hooks/useSignOutMutation.js';
+import { getSession } from '../../../client/services/getSession.js';
+import { BIOMETRIC_STORAGE_KEY } from '../../../client/utils/biometric.js';
+import { unregisterFCMDevice } from '../../../services/trigger.js';
+import { getQueryClient } from '../../../utils/getQueryClient.js';
+import { getSessionQueryKey } from '../../../utils/queryKeys.js';
+export function useLogout(options = {}) {
+    const { onBeforeRedirect } = options;
+    const router = useRouter();
+    const signOutMutation = useSignOutMutation({
+        async onSuccess() {
+            // Clear everything except the 'biometric' entry
+            const keep = new Set([BIOMETRIC_STORAGE_KEY]);
+            for (let i = 0; i < localStorage.length;) {
+                const key = localStorage.key(i);
+                if (key && !keep.has(key)) {
+                    localStorage.removeItem(key);
+                }
+                else {
+                    i++;
+                }
+            }
+            sessionStorage.clear();
+            router.replace('/');
+        },
+    });
+    const logout = async () => {
+        if (Capacitor.isNativePlatform()) {
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
+            invariant(session.status === 'authenticated');
+            await unregisterFCMDevice({
+                type: ['IOS', 'ANDROID'],
+            }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        }
+        signOutMutation.mutate();
+        onBeforeRedirect?.();
+        router.push('/');
+    };
+    return {
+        logout,
+        isPending: signOutMutation.isPending,
+    };
+}

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

@@ -0,0 +1,22 @@
+import z from 'zod';
+/**
+ * Returns the zod schemas used by the two-step mobile number update form.
+ * Schemas are memoized against the current mobile number parser so the
+ * `superRefine` validation always uses the latest parser instance.
+ */
+export declare function useMobileNumberSchemas(): {
+    Step1Definition: z.ZodObject<{
+        mobileNumber: z.ZodEffects<z.ZodString, string, string>;
+    }, "strip", z.ZodTypeAny, {
+        mobileNumber: string;
+    }, {
+        mobileNumber: string;
+    }>;
+    Step2Definition: z.ZodObject<{
+        verificationCode: z.ZodEffects<z.ZodArray<z.ZodString, "many">, string[], string[]>;
+    }, "strip", z.ZodTypeAny, {
+        verificationCode: string[];
+    }, {
+        verificationCode: string[];
+    }>;
+};

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

@@ -0,0 +1,38 @@
+'use client';
+import { useMemo } from 'react';
+import z from 'zod';
+import { useMobileNumberParser } from '../../../client/hooks/useMobileNumberParser.js';
+/**
+ * Returns the zod schemas used by the two-step mobile number update form.
+ * Schemas are memoized against the current mobile number parser so the
+ * `superRefine` validation always uses the latest parser instance.
+ */
+export function useMobileNumberSchemas() {
+    const mobileNumberParser = useMobileNumberParser();
+    return useMemo(() => {
+        const Step1Definition = z.object({
+            mobileNumber: z
+                .string()
+                .min(1, 'Mobile number is required')
+                .superRefine((v, ctx) => {
+                if (!mobileNumberParser.validate(v)) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: 'Invalid mobile number',
+                    });
+                }
+            }),
+        });
+        const Step2Definition = z.object({
+            verificationCode: z.array(z.string()).superRefine((val, ctx) => {
+                if (val.length !== 6 || val.some((v) => v.length !== 1)) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: 'Please enter your 6-digit verification code.',
+                    });
+                }
+            }),
+        });
+        return { Step1Definition, Step2Definition };
+    }, [mobileNumberParser]);
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Encapsulates the entire two-step mobile number update flow:
+ *  - step state
+ *  - step 1 / step 2 forms (with their zod resolvers)
+ *  - send-verification-code mutation (advances to step 2 + starts cooldown)
+ *  - update-mobile-number mutation (closes dialog, refetches account,
+ *    opens KYC if appropriate)
+ *  - resend cooldown
+ *  - helpers used by the two step components
+ */
+export declare function useUpdateMobileFlow(): {
+    step: number;
+    step1Form: import("react-hook-form").UseFormReturn<{
+        mobileNumber: string;
+    }, unknown, {
+        mobileNumber: string;
+    }>;
+    step2Form: import("react-hook-form").UseFormReturn<{
+        verificationCode: string[];
+    }, unknown, {
+        verificationCode: string[];
+    }>;
+    cooldown: import("../../../client/hooks/useCooldown").UseCooldownReturn;
+    formRef: import("react").RefObject<HTMLFormElement | null>;
+    mobileNumberParser: {
+        validate: (value: unknown) => value is string;
+        format: (value: string) => string;
+        parse: (value: string) => {
+            mobileNumber: string;
+            areaCode: string;
+        };
+        equals: (mobileNumber0: unknown, mobileNumber1: unknown) => boolean;
+    };
+    submitStep1: (e?: React.BaseSyntheticEvent) => Promise<void>;
+    submitStep2: (e?: React.BaseSyntheticEvent) => Promise<void>;
+    resend: () => Promise<void>;
+    goBackToStep1: () => void;
+};
+export type UseUpdateMobileFlowReturn = ReturnType<typeof useUpdateMobileFlow>;

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

@@ -0,0 +1,156 @@
+'use client';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+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 { useMobileNumberParser } from '../../../client/hooks/useMobileNumberParser.js';
+import { useSendVerificationCodeMutation } from '../../../client/hooks/useSendVerificationCodeMutation.js';
+import { useUpdateMobileNumber } from '../../../client/hooks/useUpdateMobileNumber.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { explainOtpError } from '../utils/explainOtpError.js';
+import { useMobileNumberSchemas } from './useMobileNumberSchemas.js';
+/**
+ * Encapsulates the entire two-step mobile number update flow:
+ *  - step state
+ *  - step 1 / step 2 forms (with their zod resolvers)
+ *  - send-verification-code mutation (advances to step 2 + starts cooldown)
+ *  - update-mobile-number mutation (closes dialog, refetches account,
+ *    opens KYC if appropriate)
+ *  - resend cooldown
+ *  - helpers used by the two step components
+ */
+export function useUpdateMobileFlow() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
+        kyc: ctx.kyc,
+    })));
+    const accountQuery = useAccountQuery();
+    const mobileNumberParser = useMobileNumberParser();
+    const { Step1Definition, Step2Definition } = useMobileNumberSchemas();
+    const [step, setStep] = useState(1);
+    const step1Form = useForm({
+        resolver: zodResolver(Step1Definition),
+        defaultValues: {
+            mobileNumber: '',
+        },
+    });
+    const step2Form = useForm({
+        resolver: zodResolver(Step2Definition),
+        defaultValues: {
+            verificationCode: Array.from({ length: 6 }).fill(''),
+        },
+    });
+    const cooldown = useCooldown({
+        max: 60,
+        duration: 1000 * 60,
+    });
+    const formRef = useRef(null);
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation({
+        onSuccess: () => {
+            setStep(2);
+            cooldown.start();
+        },
+        onError: (err) => {
+            toaster.error({
+                title: 'Unable to Send Code',
+                description: explainOtpError(err, {
+                    cooldown: {
+                        cooling: cooldown.cooling,
+                        countdown: cooldown.countdown,
+                    },
+                }),
+            });
+        },
+    });
+    const updateMobileNumberMutation = useUpdateMobileNumber({
+        onSuccess: async () => {
+            step1Form.reset();
+            step2Form.reset();
+            setStep(1);
+            toaster.success({
+                title: 'Verification Successful',
+                description: 'Your mobile number has been verified.',
+            });
+            globalStore.updateMobilePhoneNumber.setOpen(false);
+            // Refetch the account to get the latest verification status before
+            // deciding whether to open the KYC modal. The `account` captured in
+            // this closure may be stale (e.g. a `verification: null` snapshot)
+            // even though the user is already VERIFIED.
+            const { data: freshAccount } = await accountQuery.refetch();
+            // If the user is already verified by any of the available signals,
+            // do NOT open the KYC modal. Mirrors `isKycCompleted` in
+            // KycOpenOnHomeMount.tsx so behavior stays consistent.
+            const isKycCompleted = freshAccount?.verified === true ||
+                freshAccount?.verification?.status === 'APPROVED' ||
+                freshAccount?.verification?.status === 'VERIFIED' ||
+                freshAccount?.verificationStatus === 'VERIFIED';
+            if (isKycCompleted) {
+                return;
+            }
+            // Only open KYC if the user is explicitly UNVERIFIED.
+            const isUnverified = freshAccount?.verification === null ||
+                freshAccount?.verification === undefined ||
+                freshAccount?.verification?.status === 'UNVERIFIED' ||
+                freshAccount?.verification?.status === 'CREATED' ||
+                freshAccount?.verificationStatus === 'UNVERIFIED';
+            if (isUnverified) {
+                globalStore.kyc.setOpen(true);
+            }
+        },
+        onError: (err) => {
+            const errorMessage = err.message === 'Internal Server Error'
+                ? `mobile number ${mobileNumberParser.format(step1Form.getValues('mobileNumber'))} is not available`
+                : explainOtpError(err);
+            toaster.error({
+                title: 'Verification Failed',
+                description: errorMessage,
+            });
+        },
+    });
+    // -- Helpers consumed by the step components ------------------------------
+    const submitStep1 = step1Form.handleSubmit(async (data) => {
+        sendVerificationCodeMutation.mutateAsync({
+            channel: 'SMS',
+            recipient: mobileNumberParser.format(data.mobileNumber),
+        });
+    });
+    const submitStep2 = step2Form.handleSubmit(async ({ verificationCode }) => {
+        updateMobileNumberMutation.mutateAsync({
+            mobileNumber: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+            verificationCode: verificationCode.join(''),
+        });
+    });
+    const resend = async () => {
+        await sendVerificationCodeMutation.mutateAsync({
+            channel: 'SMS',
+            recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+        });
+        cooldown.start();
+    };
+    const goBackToStep1 = () => {
+        setStep(1);
+        step2Form.reset();
+        // NOTE: deliberately do NOT stop the cooldown here. The server still
+        // enforces its own resend window, so keeping our local timer running
+        // lets us surface an accurate "wait Xs" message if the user tries to
+        // send the code again from step 1 before the window elapses.
+        // Dismiss any lingering toasts (e.g. error toast from a previous send)
+        // so they don't carry over to step 1.
+        toaster.dismiss();
+    };
+    return {
+        step,
+        step1Form,
+        step2Form,
+        cooldown,
+        formRef,
+        mobileNumberParser,
+        submitStep1,
+        submitStep2,
+        resend,
+        goBackToStep1,
+    };
+}

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

@@ -0,0 +1,15 @@
+export interface ExplainOtpErrorContext {
+    /**
+     * Live cooldown info from the OTP flow. When the cooldown is actively
+     * running, NOT_READY_TO_SEND_VERIFICATION_ERROR will be rendered with the
+     * remaining seconds so the user knows exactly how long to wait.
+     */
+    cooldown?: {
+        cooling: boolean;
+        countdown: number;
+    };
+}
+export declare function explainOtpError(error: {
+    name?: string;
+    message?: string;
+}, context?: ExplainOtpErrorContext): string;

package/dist/components/UpdateMobilePhoneNumber/utils/explainOtpError.js

@@ -0,0 +1,29 @@
+/**
+ * Human-friendly messages for OTP / verification error codes thrown by
+ * `httpRequest` (see services/httpRequest.ts -> getErrorMessage).
+ *
+ * Mirrors the `explainError` pattern used by the DepositWithdrawal feature.
+ * The lookup is by the thrown `Error.name` (which `httpRequest` sets to the
+ * upstream error code, e.g. "NOT_READY_TO_SEND_VERIFICATION_ERROR").
+ *
+ * For unknown codes, callers should fall back to `error.message` so that
+ * `getErrorMessage` in httpRequest.ts still drives the wording.
+ */
+const errorMap = {
+    NOT_READY_TO_SEND_VERIFICATION_ERROR: 'Please wait a moment before requesting another verification code.',
+    RATE_LIMIT_REACH: 'You have made too many attempts. Please wait a few minutes and try again.',
+};
+export function explainOtpError(error, context = {}) {
+    const code = error.name;
+    if (code === 'NOT_READY_TO_SEND_VERIFICATION_ERROR') {
+        const cooldown = context.cooldown;
+        if (cooldown?.cooling && cooldown.countdown > 0) {
+            return `Please wait ${Math.ceil(cooldown.countdown)}s before requesting another verification code.`;
+        }
+        return errorMap.NOT_READY_TO_SEND_VERIFICATION_ERROR;
+    }
+    if (code && errorMap[code]) {
+        return errorMap[code];
+    }
+    return error.message ?? 'An unexpected error occurred. Please try again.';
+}

package/dist/services/httpRequest.js

@@ -105,13 +105,22 @@ const KnownErrorSchema = z
         message: z.string().optional(),
     })
         .optional(),
-    // Shape returned by the Inplay `/v3/inplay/sessions` endpoint, e.g.:
-    //   { "error": { "type": "INVALID_CREDENTIALS", "message": "..." } }
+    // `error` can be either:
+    //   - an object (Inplay `/v3/inplay/sessions`):
+    //       { "error": { "type": "INVALID_CREDENTIALS", "message": "..." } }
+    //   - a plain string (e.g. NestJS default 403 body):
+    //       { "message": "NOT_READY_TO_SEND_VERIFICATION_ERROR",
+    //         "error": "Forbidden", "statusCode": 403 }
+    //   In the latter case the actual error code lives in `message`, so we
+    //   must fall through to it instead of dropping the whole payload.
     error: z
-        .object({
-        type: z.string().optional(),
-        message: z.string().optional(),
-    })
+        .union([
+        z.string(),
+        z.object({
+            type: z.string().optional(),
+            message: z.string().optional(),
+        }),
+    ])
         .optional(),
 })
     .nullable()
@@ -126,10 +135,13 @@ const KnownErrorSchema = z
             v.message ??
             null);
     }
-    if (v?.error) {
+    if (v?.error && typeof v.error === 'object') {
         return v.error.type ?? v.error.message ?? null;
     }
-    return v?.code ?? v?.message ?? null;
+    // `error` is a string (e.g. "Forbidden") or absent: prefer the explicit
+    // `code` / `message` fields (which carry the actual error code), and
+    // only fall back to the `error` string itself as a last resort.
+    return (v?.code ?? v?.message ?? (typeof v?.error === 'string' ? v.error : null));
 });
 function getErrorMessage(code) {
     switch (code) {

package/package.json

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