@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/hooks/useAppsInfo.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+export const useAppsInfo = (segmentApps) => {
+    const getAppInfo = useCallback((appCode) => segmentApps.find((app) => app.code.toLowerCase() === appCode.toLowerCase()), [segmentApps]);
+    const getServiceInfo = useCallback(({ appCode, serviceCode }) => {
+        var _a;
+        return (_a = getAppInfo(appCode)) === null || _a === void 0 ? void 0 : _a.app_services.find(({ code }) => code.toLowerCase() === serviceCode.toLowerCase());
+    }, [getAppInfo]);
+    const getServiceFunctions = useCallback(({ appCode, serviceCode }) => {
+        var _a, _b;
+        return (_b = (_a = getServiceInfo({ appCode, serviceCode })) === null || _a === void 0 ? void 0 : _a.functions) !== null && _b !== void 0 ? _b : [];
+    }, [getServiceInfo]);
+    const getFunctionInfo = useCallback(({ appCode, serviceCode, functionCode }) => {
+        return getServiceFunctions({ appCode, serviceCode }).find(({ code }) => code.toLowerCase() === functionCode.toLowerCase());
+    }, [getServiceFunctions]);
+    return {
+        getAppInfo,
+        getServiceInfo,
+        getServiceFunctions,
+        getFunctionInfo,
+    };
+};

package/build/hooks/useCountdown.js

@@ -4,16 +4,19 @@ export function useCountdown() {
     const [timer, setTimer] = useState(0);
     const timerInterval = useRef(null);
     const formattedTime = secondsToTimeString(timer);
+    // Stop the timer
     const stopTimer = () => {
         if (timerInterval.current) {
             clearInterval(timerInterval.current);
             timerInterval.current = null;
         }
     };
+    // Reset the timer
     const resetTimer = () => {
         stopTimer();
         setTimer(0);
     };
+    // Start the timer
     const startTimer = (expiryTime) => {
         if (expiryTime <= 0)
             return;
@@ -31,6 +34,7 @@ export function useCountdown() {
             });
         }, 1000);
     };
+    // Auto-stop and cleanup on unmount
     useEffect(() => {
         return () => {
             stopTimer();

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/build/hooks/useScrolledTo.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type UseScrolledToArgs = {
+    threshold?: number;
+    containerRef?: React.RefObject<HTMLElement>;
+};
+type ScrollSource = HTMLElement | React.UIEvent<HTMLElement, UIEvent>;
+export declare function useScrolledTo({ threshold, containerRef }?: UseScrolledToArgs): {
+    handleScroll: (source: ScrollSource) => void;
+    scrolledToTop: boolean;
+    scrolledToBottom: boolean;
+    scrollable: boolean;
+};
+export {};

package/build/hooks/useScrolledTo.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+const DEFAULT_THRESHOLD = 10;
+export function useScrolledTo({ threshold = DEFAULT_THRESHOLD, containerRef } = {}) {
+    const [scrolledToTop, setScrolledToTop] = useState(true);
+    const [scrolledToBottom, setScrolledToBottom] = useState(false);
+    const [scrollable, setScrollable] = useState(false);
+    const updateFromElement = useCallback((el) => {
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        setScrollable(scrollHeight > clientHeight + threshold);
+        setScrolledToTop(scrollTop <= threshold);
+        setScrolledToBottom(scrollHeight - (scrollTop + clientHeight) <= threshold);
+    }, [threshold]);
+    const handleScroll = useCallback((source) => {
+        if (!source)
+            return;
+        // React onScroll event
+        if ('currentTarget' in source) {
+            updateFromElement(source.currentTarget);
+            return;
+        }
+        // Direct HTMLElement
+        updateFromElement(source);
+    }, [updateFromElement]);
+    useEffect(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+            return;
+        const element = containerRef.current;
+        // Initial calculation
+        handleScroll(element);
+        // Watch for container size changes
+        const resizeObserver = new ResizeObserver(() => {
+            handleScroll(element);
+        });
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [containerRef, handleScroll]);
+    return {
+        handleScroll,
+        scrolledToTop,
+        scrolledToBottom,
+        scrollable,
+    };
+}

package/build/hooks/useSelectedMerchantDetails.d.ts

@@ -0,0 +1,10 @@
+import { Brand, Entity, Merchant, MerchantInfo } from '../types/index.js';
+/**
+ * Custom hook to get selected merchant details
+ */
+export declare const useSelectedMerchantDetails: (selectedValue: MerchantInfo | undefined, selectedBrand?: Brand) => {
+    selectedBrand: Brand | undefined;
+    selectedEntity: (import("../types/index.js").EntityDetails & Entity) | undefined;
+    selectedMerchant: Merchant | undefined;
+    displayName: string;
+};

package/build/hooks/useSelectedMerchantDetails.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+/**
+ * Custom hook to get selected merchant details
+ */
+export const useSelectedMerchantDetails = (selectedValue, selectedBrand) => {
+    const selectedEntity = useMemo(() => selectedBrand === null || selectedBrand === void 0 ? void 0 : selectedBrand.entities.find((entity) => entity.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.entityId)), [selectedBrand, selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.entityId]);
+    const selectedMerchant = useMemo(() => { var _a; return (_a = selectedEntity === null || selectedEntity === void 0 ? void 0 : selectedEntity.merchants) === null || _a === void 0 ? void 0 : _a.find((merchant) => merchant.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId)); }, [selectedEntity, selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId]);
+    const displayName = useMemo(() => { var _a, _b; return (_b = (_a = selectedMerchant === null || selectedMerchant === void 0 ? void 0 : selectedMerchant.display_name) !== null && _a !== void 0 ? _a : selectedMerchant === null || selectedMerchant === void 0 ? void 0 : selectedMerchant.legacy_id) !== null && _b !== void 0 ? _b : 'Select'; }, [selectedMerchant]);
+    return {
+        selectedBrand,
+        selectedEntity,
+        selectedMerchant,
+        displayName,
+    };
+};

package/build/hooks/useStickyHeaderShadow.js

@@ -1,4 +1,10 @@
 import { useEffect, useState } from 'react';
+/* Usage: you will need to add an empty div before your sticky header and pass it's ref to this hook
+    Example:
+     <Box ref={interceptRef} />
+     <StickyHeader></StickyHeader>
+*/
+// TODO: enhance the hook to take only the ref of the sticky bar and handle adding the interceptRef internally from the hook
 export const useStickyHeaderShadow = (interceptRef) => {
     const [showShadow, setShowShadow] = useState(false);
     useEffect(() => {

package/build/hooks/useToast.d.ts

@@ -0,0 +1,12 @@
+import { ToastMessage } from '../types/index.js';
+import type { ToastOptions } from 'react-hot-toast';
+export interface ToastFunction {
+    (message: ToastMessage, options?: ToastOptions): string;
+    success: (message: ToastMessage, options?: ToastOptions) => string;
+    error: (message: ToastMessage, options?: ToastOptions) => string;
+    loading: (message: ToastMessage, options?: ToastOptions) => string;
+    custom: (message: ToastMessage, options?: ToastOptions) => string;
+    dismiss: (toastId?: string) => void;
+    remove: (toastId?: string) => void;
+}
+export declare function useToast(): ToastFunction;

package/build/hooks/useToast.js

@@ -0,0 +1,29 @@
+import { useMemo, useCallback } from 'react';
+import { useAppEventPublisher } from './index.js';
+import { AppEvent } from '../types/index.js';
+const generateToastId = () => crypto.randomUUID();
+export function useToast() {
+    const publish = useAppEventPublisher(AppEvent.OnToast);
+    const createToastByVariant = useCallback((variant) => (message, options) => {
+        var _a;
+        const id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : generateToastId();
+        publish({ action: 'show', variant, message, options: Object.assign(Object.assign({}, options), { id }) });
+        return id;
+    }, [publish]);
+    return useMemo(() => {
+        // base callable function
+        const toast = createToastByVariant('default');
+        // attach variants
+        toast.success = createToastByVariant('success');
+        toast.error = createToastByVariant('error');
+        toast.loading = createToastByVariant('loading');
+        toast.custom = createToastByVariant('custom');
+        toast.dismiss = (toastId) => {
+            publish({ action: 'dismiss', variant: 'dismiss', toastId });
+        };
+        toast.remove = (toastId) => {
+            publish({ action: 'remove', variant: 'remove', toastId });
+        };
+        return toast;
+    }, [createToastByVariant, publish]);
+}

package/build/theme/shadows.js

@@ -10,7 +10,7 @@ export const shadows = [
     '0px 0px 12px 0px rgba(0, 0, 0, 0.15)',
     '0px 8px 30px 0px rgba(0, 0, 0, 0.16)',
     '0px 0px 16px 0px rgba(0, 0, 0, 0.15)',
-    '0px 0px 16px 0px rgba(0 0, 0, 0.13)',
+    '0px 0px 16px 0px rgba(0, 0, 0, 0.13)',
     '-4px 0px 16px 0px rgba(0, 0, 0, 0.10)',
     '0px 0px 32px 0px rgba(0, 0, 0, 0.11)',
     '0px 4px 8px 0px rgba(0, 0, 0, 0.14)',

package/build/types/account.d.ts

@@ -2,5 +2,6 @@ export declare enum ACCOUNT_SECTION {
     BRAND = "brand",
     ENTITY = "entity",
     USERS = "users",
-    USER_ROLES = "userRoles"
+    USER_ROLES = "userRoles",
+    APP_SETTINGS = "appSettings"
 }

package/build/types/account.js

@@ -4,4 +4,5 @@ export var ACCOUNT_SECTION;
     ACCOUNT_SECTION["ENTITY"] = "entity";
     ACCOUNT_SECTION["USERS"] = "users";
     ACCOUNT_SECTION["USER_ROLES"] = "userRoles";
+    ACCOUNT_SECTION["APP_SETTINGS"] = "appSettings";
 })(ACCOUNT_SECTION || (ACCOUNT_SECTION = {}));

package/build/types/appEvents.d.ts

@@ -0,0 +1,51 @@
+import { CalenderMode, NavigateFunction, TableMode, Timezone, ToastEventPayload } from './index.js';
+import { DragControls } from 'framer-motion';
+export declare enum AppEvent {
+    OnClickTableAction = "on-click-table-action",
+    OnRightClickTableAction = "on-right-click-table-action",
+    OnToggleTableMode = "on-toggle-table-mode",
+    OnChangeTableMode = "on-change-table-mode",
+    OnChangeCalenderMode = "on-change-calender-mode",
+    OnChangeTimezone = "on-change-timezone",
+    OnNavigate = "on-navigate",
+    OnStartDrag = "on-start-drag",
+    OnChangeAppToolbar = "on-change-app-toolbar",
+    OnToast = "on-toast",
+    OnModifyRemotePayload = "on-modify-remote-payload"
+}
+/**
+ * Map event names to their corresponding payload types.
+ */
+export type AppEventMap = {
+    [AppEvent.OnClickTableAction]: (params: {
+        targetApp: {
+            appCode: string;
+            serviceCode: string;
+            sandboxMode?: boolean;
+            payload?: object;
+        };
+    }) => void;
+    [AppEvent.OnRightClickTableAction]: (params: {
+        targetApp: {
+            appCode: string;
+            serviceCode: string;
+            sandboxMode?: boolean;
+            payload?: object;
+        };
+    }) => void;
+    [AppEvent.OnToggleTableMode]: () => void;
+    [AppEvent.OnChangeTableMode]: (tableMode: TableMode) => void;
+    [AppEvent.OnChangeCalenderMode]: (calenderMode: CalenderMode) => void;
+    [AppEvent.OnChangeTimezone]: (timezone: Timezone) => void;
+    [AppEvent.OnNavigate]: NavigateFunction;
+    [AppEvent.OnStartDrag]: (...args: Parameters<DragControls['start']>) => void;
+    [AppEvent.OnChangeAppToolbar]: (params: {
+        windowId: string;
+        toolbarIconUrl: string;
+    }) => void;
+    [AppEvent.OnModifyRemotePayload]: (params: {
+        windowId: string;
+        payload: object;
+    }) => void;
+    [AppEvent.OnToast]: (params: ToastEventPayload) => void;
+};

package/build/types/appEvents.js

@@ -0,0 +1,16 @@
+export var AppEvent;
+(function (AppEvent) {
+    // Host Events
+    AppEvent["OnClickTableAction"] = "on-click-table-action";
+    AppEvent["OnRightClickTableAction"] = "on-right-click-table-action";
+    AppEvent["OnToggleTableMode"] = "on-toggle-table-mode";
+    AppEvent["OnChangeTableMode"] = "on-change-table-mode";
+    AppEvent["OnChangeCalenderMode"] = "on-change-calender-mode";
+    AppEvent["OnChangeTimezone"] = "on-change-timezone";
+    AppEvent["OnNavigate"] = "on-navigate";
+    AppEvent["OnStartDrag"] = "on-start-drag";
+    AppEvent["OnChangeAppToolbar"] = "on-change-app-toolbar";
+    AppEvent["OnToast"] = "on-toast";
+    // Remote Events
+    AppEvent["OnModifyRemotePayload"] = "on-modify-remote-payload";
+})(AppEvent || (AppEvent = {}));

package/build/types/apps.d.ts

@@ -1,12 +1,17 @@
 import { ColumnsView } from './column';
-import { TextAndLang } from './user';
-import { BusinessMerchant } from './merchant';
-export interface AccountAppPayload {
-    disabledAccountDataFetching?: boolean;
-    isAccountDetailsOpen: boolean;
-    selectedMerchant?: BusinessMerchant;
-}
-export interface AppPayload extends Partial<AccountAppPayload> {
+import { Segment, SegmentCountry, SegmentUser, SelectedBrand, SelectedCountry, User } from './user';
+import type { i18n } from 'i18next';
+import { Theme } from '@mui/material';
+import { CalenderMode } from './theme';
+import { Timezone } from './appConfig';
+import { Brand, Entity, Override, TableMode } from './index.js';
+import { TextAndLang } from './common';
+export type AppPayload<TServiceCodes extends string = string, TOverrides extends Partial<DefaultServicePayload> = object> = {
+    services: {
+        [key in TServiceCodes]?: ServicePayload<TOverrides>;
+    };
+};
+export type DefaultServicePayload = {
     columnFilters?: Record<string, any>;
     filteredIds?: string[];
     dateRange?: [Date, Date];
@@ -15,7 +20,9 @@ export interface AppPayload extends Partial<AccountAppPayload> {
     isTextShown?: boolean;
     tableViews?: ColumnsView[];
     calendarTimezone?: number;
-}
+    reportTypes?: string[];
+};
+export type ServicePayload<TOverrides extends Partial<DefaultServicePayload> = object> = Override<DefaultServicePayload, TOverrides>;
 export interface AppDetails {
     id: string;
     appCode: string;
@@ -37,7 +44,7 @@ export interface AppDetails {
         minWidth: number | string;
         minHeight: number | string;
     };
-    payload?: Record<string, any> & AppPayload;
+    payload?: Record<string, any> & ServicePayload;
     toolbarIconUrl?: string;
     hideMaximizedApp?: boolean;
     hideMinimizeApp?: boolean;
@@ -63,3 +70,66 @@ export interface UserApp {
     name: TextAndLang[];
     app_services: AppService[];
 }
+export type NavigateFunction = (params: {
+    windowId?: string;
+    appCode: string;
+    serviceCode: string;
+    sandboxMode?: boolean;
+    state?: any;
+}) => void;
+export interface WindowPreview {
+    id: string;
+    img: string;
+    status: 'idle' | 'completed' | 'error' | 'loading';
+    appCode: string;
+}
+export type MFWidgetBaseProps = {
+    windowId: string;
+    i18n?: i18n;
+    app: UserApp;
+    appWindow: {
+        isMinimized: boolean;
+        isMaximized: boolean;
+        order: number;
+        dimensions: Pick<AppDetails['dimensions'], 'width' | 'height'>;
+    };
+    features: {
+        calendarMode: CalenderMode;
+        tableMode: TableMode;
+        hasReportsApp: boolean;
+        hasHeader: boolean;
+        sandboxMode: boolean;
+        initialServiceCode?: string;
+        initialAppPayload?: AppPayload;
+    };
+    user: User;
+    segment: {
+        code: string;
+        type: string;
+        brands: Brand[];
+        countries: SegmentCountry[];
+        defaultCountry: SegmentCountry;
+        defaultEntity: Entity;
+        apps: UserApp[];
+        users: SegmentUser[];
+        operator: Segment['operator'];
+        organizationId: string;
+        isBusinessSegment: boolean;
+        isAnyMerchantHasMarketplace: boolean;
+        isSegmentHasMoreThanOneMerchant: boolean;
+        marketplaceMerchantsCount: number;
+    };
+    segments: Segment[];
+    selectedSegment: {
+        id: string;
+        selectedBrands: SelectedBrand[];
+        selectedCountries: SelectedCountry[];
+    };
+    ui: {
+        theme: Theme;
+    };
+    timezone: {
+        current: Timezone | null;
+        default: Timezone | null;
+    };
+};

package/build/types/brand.d.ts

@@ -1,4 +1,4 @@
-import { TextAndLang } from './user';
+import { TextAndLang } from './common';
 import { Entity, EntityDetails } from './entity';
 export declare enum SalesChannelTypes {
     MOBILE_APP = "mobile_app",
@@ -28,6 +28,7 @@ export interface Brand {
     name: TextAndLang[];
     logo: string;
     entities: (EntityDetails & Entity)[];
+    business_id: string;
 }
 export interface BrandDetails {
     id: string;
@@ -36,6 +37,7 @@ export interface BrandDetails {
     created: number;
     name: Record<string, string>;
     logo: string;
+    sector: string[];
     activities: Array<{
         id: string;
         code: string;