@opexa/portal-components 0.1.7 → 0.1.8

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.8",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",