@tap-payments/os-micro-frontend-shared 0.1.407 → 0.1.409

package/build/components/TableCells/CustomCells/DueDateCell/DueDateCell.js

@@ -19,10 +19,10 @@ function DueDateCell(_a) {
     var { dueDate, expiryDate } = _a, props = __rest(_a, ["dueDate", "expiryDate"]);
     const dueMeta = useMemo(() => ({ label: formatDate(dayjs(dueDate).valueOf()), tooltip: 'Due Date' }), [dueDate]);
     const expiryMeta = useMemo(() => ({ label: formatDate(dayjs(expiryDate).valueOf()), tooltip: 'Expiry Date' }), [expiryDate]);
-    const renderIcon = (meta) => (_jsx(Tooltip, Object.assign({ title: meta.tooltip }, { children: _jsx(TextLabel, { children: meta.label }) })));
-    const centerIcon = useMemo(() => (dueMeta ? renderIcon(dueMeta) : expiryMeta ? renderIcon(expiryMeta) : null), [dueMeta, expiryMeta]);
-    const rightIcons = useMemo(() => (expiryMeta && dueMeta ? [renderIcon(expiryMeta)] : []), [dueMeta, expiryMeta]);
-    if (!dueMeta && !expiryMeta)
+    const renderChipContent = (meta) => (_jsx(Tooltip, Object.assign({ title: meta.tooltip }, { children: _jsx(TextLabel, { children: meta.label }) })));
+    const centerIcon = useMemo(() => (dueDate ? renderChipContent(dueMeta) : expiryDate ? renderChipContent(expiryMeta) : null), [dueMeta, expiryMeta, dueDate, expiryDate]);
+    const rightIcons = useMemo(() => (expiryDate && dueDate ? [renderChipContent(expiryMeta)] : []), [dueMeta, expiryMeta, dueDate, expiryDate]);
+    if (!dueDate && !expiryDate)
         return null;
     return (_jsx(TableCell, Object.assign({}, props, { sx: { position: 'relative', overflow: 'visible' } }, { children: _jsx(RightLeftExpandingCenterChip, { sx: { justifyContent: 'flex-start' }, centerIcon: centerIcon, rightIcons: rightIcons }) })));
 }

package/build/hooks/index.d.ts

@@ -3,7 +3,6 @@ export * from './useMouseState';
 export * from './useDelayToSetValue';
 export * from './useActionMenu';
 export * from './useBadgesCount';
-export * from './useCheckInternetConnection';
 export * from './useCheckUserLoggedIn';
 export * from './useIsParameterSelected';
 export * from './useStickyHeaderShadow';
@@ -15,3 +14,4 @@ export * from './useAppEventListener';
 export * from './useSelectedMerchantDetails';
 export * from './useToast';
 export * from './useScrolledTo';
+export * from './useNetworkState';

package/build/hooks/index.js

@@ -3,7 +3,6 @@ export * from './useMouseState';
 export * from './useDelayToSetValue';
 export * from './useActionMenu';
 export * from './useBadgesCount';
-export * from './useCheckInternetConnection';
 export * from './useCheckUserLoggedIn';
 export * from './useIsParameterSelected';
 export * from './useStickyHeaderShadow';
@@ -15,3 +14,4 @@ export * from './useAppEventListener';
 export * from './useSelectedMerchantDetails';
 export * from './useToast';
 export * from './useScrolledTo';
+export * from './useNetworkState';

package/build/hooks/useNetworkState.d.ts

@@ -0,0 +1,12 @@
+export interface UseNetworkStateOptions {
+    checkUrl?: string;
+    checkIntervalMs?: number;
+    debounceMs?: number;
+    timeoutMs?: number;
+}
+export interface OnlineState {
+    isOnline: boolean;
+    isChecking: boolean;
+    error: string | null;
+}
+export declare const useNetworkState: (options?: UseNetworkStateOptions) => OnlineState;

package/build/hooks/useNetworkState.js

@@ -0,0 +1,112 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useCallback, useEffect, useRef, useState } from 'react';
+export const useNetworkState = (options = {}) => {
+    const { checkUrl = '/status', checkIntervalMs = 30000, // poll /status only while offline
+    debounceMs = 800, timeoutMs = 5000, } = options;
+    const isBrowser = typeof window !== 'undefined' && typeof navigator !== 'undefined';
+    const [isOnline, setIsOnline] = useState(isBrowser ? navigator.onLine : true);
+    const [isChecking, setIsChecking] = useState(false);
+    const [error, setError] = useState(null);
+    const debounceTimer = useRef(null);
+    const intervalId = useRef(null);
+    const applyStatusWithDebounce = useCallback((nextOnline) => {
+        if (debounceTimer.current !== null) {
+            window.clearTimeout(debounceTimer.current);
+        }
+        debounceTimer.current = window.setTimeout(() => {
+            setIsOnline(nextOnline);
+            debounceTimer.current = null;
+        }, debounceMs);
+    }, [debounceMs]);
+    useEffect(() => {
+        if (!isBrowser) {
+            return;
+        }
+        let abortController = null;
+        const clearPolling = () => {
+            if (intervalId.current !== null) {
+                window.clearInterval(intervalId.current);
+                intervalId.current = null;
+            }
+        };
+        const checkConnectivity = () => __awaiter(void 0, void 0, void 0, function* () {
+            setIsChecking(true);
+            setError(null);
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+            abortController = new AbortController();
+            try {
+                const timeout = window.setTimeout(() => {
+                    abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+                }, timeoutMs);
+                const res = yield fetch(checkUrl, {
+                    method: 'GET',
+                    cache: 'no-store',
+                    signal: abortController.signal,
+                });
+                window.clearTimeout(timeout);
+                const ok = res.ok;
+                applyStatusWithDebounce(ok);
+                if (ok)
+                    clearPolling();
+                else
+                    setError(`Health check failed with status ${res.status}`);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            }
+            catch (_err) {
+                applyStatusWithDebounce(false);
+                setError('Unable to reach network');
+            }
+            finally {
+                setIsChecking(false);
+            }
+        });
+        const handleOnline = () => {
+            // Browser says we're online: trust it, no /status request
+            clearPolling();
+            applyStatusWithDebounce(true);
+        };
+        const handleOffline = () => {
+            // Browser says we're offline: reflect that and poll /status until back
+            applyStatusWithDebounce(false);
+            clearPolling();
+            checkConnectivity();
+            intervalId.current = window.setInterval(checkConnectivity, checkIntervalMs);
+        };
+        window.addEventListener('online', handleOnline);
+        window.addEventListener('offline', handleOffline);
+        // If initially offline, start polling /status; if online, do not hit /status
+        if (!navigator.onLine) {
+            checkConnectivity();
+            intervalId.current = window.setInterval(checkConnectivity, checkIntervalMs);
+        }
+        return () => {
+            window.removeEventListener('online', handleOnline);
+            window.removeEventListener('offline', handleOffline);
+            if (debounceTimer.current !== null) {
+                window.clearTimeout(debounceTimer.current);
+            }
+            clearPolling();
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, [isBrowser, checkUrl, checkIntervalMs, debounceMs, timeoutMs, applyStatusWithDebounce]);
+    if (!isBrowser) {
+        return {
+            isOnline: false,
+            isChecking: false,
+            error: 'Online status is only available in a browser environment.',
+        };
+    }
+    return {
+        isOnline,
+        isChecking,
+        error,
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.407",
+  "version": "0.1.409",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",

package/build/hooks/useCheckInternetConnection.d.ts

@@ -1 +0,0 @@
-export declare const useCheckInternetConnection: () => boolean;

package/build/hooks/useCheckInternetConnection.js

@@ -1,17 +0,0 @@
-import { useState, useEffect } from 'react';
-export const useCheckInternetConnection = () => {
-    const [isOnline, setIsOnline] = useState(navigator.onLine);
-    useEffect(() => {
-        const handleOnlineStatus = () => {
-            setIsOnline(navigator.onLine);
-        };
-        window.addEventListener('online', handleOnlineStatus);
-        window.addEventListener('offline', handleOnlineStatus);
-        return () => {
-            window.removeEventListener('online', handleOnlineStatus);
-            window.removeEventListener('offline', handleOnlineStatus);
-        };
-    }, []);
-    const isOffline = !isOnline;
-    return isOffline;
-};