@tap-payments/os-micro-frontend-shared 0.1.224 → 0.1.226-test.1

package/build/constants/table/cell/invoicesTableCellWidth.js

@@ -7,37 +7,57 @@ export const invoicesTableCellWidth = {
     link: {
         default: '145px',
         text: '145px',
-        sheet: '145px',
+        sheet: '350px',
     },
     date: {
         default: '150px',
         text: '150px',
-        sheet: '150px',
+        sheet: '130px',
     },
     order: {
         default: '80px',
         text: '80px',
-        sheet: '80px',
+        sheet: '90px',
     },
     customer: {
         default: '180px',
         text: '180px',
         sheet: '180px',
     },
+    customer_id: {
+        default: '180px',
+        text: '180px',
+        sheet: '270px',
+    },
+    customer_name: {
+        default: '180px',
+        text: '180px',
+        sheet: '155px',
+    },
+    customer_phone: {
+        default: '180px',
+        text: '180px',
+        sheet: '150px',
+    },
+    merchant: {
+        default: '180px',
+        text: '180px',
+        sheet: '92px',
+    },
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '195px',
+        sheet: '150px',
     },
     channel: {
         default: '90px',
         text: '90px',
-        sheet: '90px',
+        sheet: '156px',
     },
     due: {
         default: '92px',
         text: '340px',
-        sheet: '340px',
+        sheet: '108px',
     },
     status: {
         default: '90px',
@@ -52,7 +72,7 @@ export const invoicesTableCellWidth = {
     paymentMethod: {
         default: '110px',
         text: '130px',
-        sheet: '130px',
+        sheet: '122px',
     },
     cardNo: {
         default: '130px',
@@ -62,7 +82,7 @@ export const invoicesTableCellWidth = {
     chargeId: {
         default: '225px',
         text: '225px',
-        sheet: '225px',
+        sheet: '230px',
     },
     receiptId: {
         default: '180px',

package/build/hooks/index.d.ts

@@ -9,3 +9,6 @@ export * from './useIsParameterSelected';
 export * from './useStickyHeaderShadow';
 export * from './useThemeMode';
 export * from './useCountdown';
+export * from './useAppsInfo';
+export * from './useAppEventPublisher';
+export * from './useAppEventListener';

package/build/hooks/index.js

@@ -9,3 +9,6 @@ export * from './useIsParameterSelected';
 export * from './useStickyHeaderShadow';
 export * from './useThemeMode';
 export * from './useCountdown';
+export * from './useAppsInfo';
+export * from './useAppEventPublisher';
+export * from './useAppEventListener';

package/build/hooks/useAppEventListener.d.ts

@@ -0,0 +1,2 @@
+import { CustomEventMap } from '../types';
+export declare function useAppEventListener<K extends keyof CustomEventMap>(eventName: K, handler: CustomEventMap[K]): void;

package/build/hooks/useAppEventListener.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+export function useAppEventListener(eventName, handler) {
+    useEffect(() => {
+        const listener = (e) => {
+            const customEvent = e;
+            handler(...(customEvent.detail || []));
+        };
+        window.addEventListener(eventName, listener);
+        return () => {
+            window.removeEventListener(eventName, listener);
+        };
+    }, [eventName, handler]);
+}

package/build/hooks/useAppEventPublisher.d.ts

@@ -0,0 +1,2 @@
+import { CustomEventMap } from '../types';
+export declare function useAppEventPublisher<K extends keyof CustomEventMap>(eventName: K): (...args: Parameters<CustomEventMap[K]>) => void;

package/build/hooks/useAppEventPublisher.js

@@ -0,0 +1,7 @@
+import { useCallback } from 'react';
+export function useAppEventPublisher(eventName) {
+    return useCallback((...args) => {
+        const event = new CustomEvent(eventName, { detail: args });
+        window.dispatchEvent(event);
+    }, [eventName]);
+}

package/build/hooks/useAppsInfo.d.ts

@@ -0,0 +1,17 @@
+import { AppService, UserApp } from '../types/index.js';
+interface GetService {
+    appCode: string;
+    serviceCode: string;
+}
+interface GetFunction {
+    appCode: string;
+    serviceCode: string;
+    functionCode: string;
+}
+export declare const useAppsInfo: (segmentApps: UserApp[]) => {
+    getAppInfo: (appCode: string) => UserApp | undefined;
+    getServiceInfo: ({ appCode, serviceCode }: GetService) => AppService | undefined;
+    getServiceFunctions: ({ appCode, serviceCode }: GetService) => import("../types/index.js").ServiceFunction[];
+    getFunctionInfo: ({ appCode, serviceCode, functionCode }: GetFunction) => import("../types/index.js").ServiceFunction | undefined;
+};
+export {};

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/types/appEvents.d.ts

@@ -0,0 +1,30 @@
+import { CalenderMode, NavigateFunction, TableMode, Timezone } from './index.js';
+import { DragControls } from 'framer-motion';
+export type CustomEventMap = {
+    'on-click-table-action': (params: {
+        targetApp: {
+            appCode: string;
+            serviceCode: string;
+            sandboxMode?: boolean;
+            payload?: object;
+        };
+    }) => void;
+    'on-right-click-table-action': (params: {
+        targetApp: {
+            appCode: string;
+            serviceCode: string;
+            sandboxMode?: boolean;
+            payload?: object;
+        };
+    }) => void;
+    'modify-remote-payload': (params: {
+        instanceId: string;
+        payload: object;
+    }) => void;
+    'on-toggle-table-mode': () => void;
+    'on-change-table-mode': (tableMode: TableMode) => void;
+    'on-change-calender-mode': (calenderMode: CalenderMode) => void;
+    'on-change-timezone': (timezone: Timezone) => void;
+    'on-navigate': NavigateFunction;
+    'on-start-drag': (...args: Parameters<DragControls['start']>) => void;
+};

package/build/types/appEvents.js

@@ -0,0 +1 @@
+export {};

package/build/types/apps.d.ts

@@ -1,11 +1,11 @@
 import { ColumnsView } from './column';
-import { Segment, SegmentCountry, TextAndLang } from './user';
+import { SegmentCountry, SelectedBrand, SelectedCountry, TextAndLang } from './user';
 import { BusinessMerchant } from './merchant';
 import type { i18n } from 'i18next';
-import type { DragControls } from 'framer-motion';
 import { Theme } from '@mui/material';
 import { CalenderMode } from './theme';
 import { Timezone } from './appConfig';
+import { Brand, Entity, TableMode } from './index.js';
 export interface AccountAppPayload {
     disabledAccountDataFetching?: boolean;
     isAccountDetailsOpen: boolean;
@@ -73,12 +73,13 @@ export type NavigateFunction = (params: {
     appId?: string;
     appCode: string;
     serviceCode: string;
+    sandboxMode?: boolean;
     state?: any;
 }) => void;
 export type MFWidgetBaseProps = {
     instanceId: string;
     i18n?: i18n;
-    app?: UserApp;
+    app: UserApp;
     appWindow: {
         isMinimized: boolean;
         isMaximized: boolean;
@@ -86,29 +87,33 @@ export type MFWidgetBaseProps = {
         dimensions: Pick<AppDetails['dimensions'], 'width' | 'height'>;
     };
     features: {
+        calendarMode: CalenderMode;
+        tableMode: TableMode;
         hasReportsApp: boolean;
         hasHeader: boolean;
         sandboxMode: boolean;
         initialServiceCode?: string;
+        initialPayload?: Record<string, any> & AppPayload;
     };
-    segment: Pick<Segment, 'id' | 'brands' | 'countries'> & {
-        defaultCountry?: SegmentCountry;
+    segment: {
+        brands: Brand[];
+        countries: SegmentCountry[];
+        defaultCountry: SegmentCountry;
+        defaultEntity: Entity;
+        apps: UserApp[];
+        isBusinessSegment: boolean;
+        isAnyMerchantHasMarketplace: boolean;
+    };
+    activeSegment: {
+        id: string;
+        brands: SelectedBrand[];
+        countries: SelectedCountry[];
     };
     ui: {
         theme: Theme;
-        onStartDrag: DragControls['start'];
-    };
-    calendar: {
-        mode: CalenderMode;
-        onSwitch: (mode: CalenderMode) => void;
-    };
-    navigation: {
-        navigate: NavigateFunction;
     };
     timezone: {
         current?: Timezone | null;
         default?: Timezone;
-        onChange: (timezone: Timezone) => void;
-        onChangeHistory: (timezone: Timezone) => void;
     };
 };

package/build/types/index.d.ts

@@ -23,3 +23,4 @@ export * from './refund';
 export * from './destination';
 export * from './account';
 export * from './day';
+export * from './appEvents';

package/build/types/index.js

@@ -23,3 +23,4 @@ export * from './refund';
 export * from './destination';
 export * from './account';
 export * from './day';
+export * from './appEvents';

package/build/utils/table.d.ts

@@ -1,4 +1,4 @@
-import { TableCellWidthProps, TableMode } from '../types/index.js';
+import { TableCellWidthProps, TableMode, TableNavigation } from '../types/index.js';
 export declare const getColumnWidthPercentage: (widthInPx: number, options?: {
     isFirst?: boolean;
     isLast?: boolean;
@@ -9,3 +9,14 @@ export declare const isHeightNotFullyFilledByRows: (totalRows: number) => boolea
 export declare const isTableDefaultMode: (tableMode: TableMode) => boolean;
 export declare const isTableSheetMode: (tableMode: TableMode) => boolean;
 export declare const isTableTextMode: (tableMode: TableMode) => boolean;
+interface NavigationMap<T> {
+    prefixes: string[];
+    keys?: string[];
+    label: string;
+    appCode: string;
+    serviceCode: string;
+    icon: TableNavigation['icon'];
+    accessor?: (rowData: T) => string[];
+}
+export declare const getPossibleNavigationTablesMap: <T>() => Record<string, NavigationMap<T>>;
+export {};

package/build/utils/table.js

@@ -1,4 +1,4 @@
-import { walletDetailsTableCellWidth, authenticationsTableCellWidth, authorizationTableCellWidth, chargeTableCellWidth, destinationsTableCellWidth, intentsTableCellWidth, invoicesTableCellWidth, leadsTableCellWidth, ordersTableCellWidth, payoutsTableCellWidth, protectChargesTableCellWidth, protectAuthorizationsTableCellWidth, refundTableCellWidth, tokensTableCellWidth, walletStatementTableCellWidth, topupsTableCellWidth, walletTableCellWidth, TABLE_CONTENT_ROW_HEIGHT, TABLE_LOADING_ROW_HEIGHT, TABLE_ROW_HEIGHT, merchantsTableCellWidth, terminalsTableCellWidth, } from '../constants/index.js';
+import { walletDetailsTableCellWidth, authenticationsTableCellWidth, authorizationTableCellWidth, chargeTableCellWidth, destinationsTableCellWidth, intentsTableCellWidth, invoicesTableCellWidth, leadsTableCellWidth, ordersTableCellWidth, payoutsTableCellWidth, protectChargesTableCellWidth, protectAuthorizationsTableCellWidth, refundTableCellWidth, tokensTableCellWidth, walletStatementTableCellWidth, topupsTableCellWidth, walletTableCellWidth, TABLE_CONTENT_ROW_HEIGHT, TABLE_LOADING_ROW_HEIGHT, TABLE_ROW_HEIGHT, merchantsTableCellWidth, terminalsTableCellWidth, APP_CODES, } from '../constants/index.js';
 export const getColumnWidthPercentage = (widthInPx, options) => {
     const { isFirst, isLast } = options || {};
     const paddingInPx = isFirst || isLast ? 0 : 0;
@@ -82,3 +82,149 @@ export const isTableSheetMode = (tableMode) => {
 export const isTableTextMode = (tableMode) => {
     return tableMode === 'text';
 };
+export const getPossibleNavigationTablesMap = () => {
+    return {
+        charge: {
+            prefixes: ['chg_', 'payout_', 'settlement_', 'terminal_'],
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            accessor: (rowData) => {
+                var _a, _b, _c, _d;
+                return [
+                    rowData.id,
+                    (_b = (_a = rowData.capture) === null || _a === void 0 ? void 0 : _a.charge) === null || _b === void 0 ? void 0 : _b.map((charge) => charge.id),
+                    (_c = rowData.charge) === null || _c === void 0 ? void 0 : _c.id,
+                    (_d = rowData.transactions) === null || _d === void 0 ? void 0 : _d.map((transaction) => transaction.id),
+                    rowData.charge_id,
+                ];
+            },
+            label: 'Charge',
+            appCode: APP_CODES.acceptance.code,
+            serviceCode: APP_CODES.acceptance.services.charges.code,
+            icon: 'capture',
+        },
+        authorize: {
+            prefixes: ['auth_'],
+            keys: ['id', 'authorize.id', 'source.id'],
+            label: 'Authorization',
+            appCode: APP_CODES.acceptance.code,
+            serviceCode: APP_CODES.acceptance.services.authorization.code,
+            icon: 'capture',
+        },
+        intents: {
+            prefixes: ['intent_'],
+            keys: [],
+            label: 'Intents',
+            appCode: APP_CODES.acceptance.code,
+            serviceCode: APP_CODES.acceptance.services.intents.code,
+            icon: 'capture',
+        },
+        refunds: {
+            prefixes: ['re_', 'payout_'],
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            accessor: (rowData) => {
+                var _a, _b, _c, _d;
+                return [
+                    (_b = (_a = rowData === null || rowData === void 0 ? void 0 : rowData.refunds) === null || _a === void 0 ? void 0 : _a.refund) === null || _b === void 0 ? void 0 : _b.map((refund) => refund.id),
+                    rowData === null || rowData === void 0 ? void 0 : rowData.id,
+                    ...(((_c = rowData === null || rowData === void 0 ? void 0 : rowData.refunds) === null || _c === void 0 ? void 0 : _c.length) ? [(_d = rowData === null || rowData === void 0 ? void 0 : rowData.refunds) === null || _d === void 0 ? void 0 : _d.map((refund) => refund.id)] : []),
+                ];
+            },
+            label: 'Refunds',
+            appCode: APP_CODES.acceptance.code,
+            serviceCode: APP_CODES.acceptance.services.refunds.code,
+            icon: 'refund',
+        },
+        authentication: {
+            prefixes: ['auth_payer_'],
+            keys: ['authentication.id'],
+            label: 'Authentication',
+            appCode: APP_CODES.authentication.code,
+            serviceCode: APP_CODES.authentication.services.authentication.code,
+            icon: 'capture',
+        },
+        order: {
+            prefixes: ['order_', 'ord_'],
+            keys: ['order.id'],
+            label: 'Order',
+            appCode: APP_CODES.order.code,
+            serviceCode: APP_CODES.order.services.orders.code,
+            icon: 'capture',
+        },
+        chargeFlags: {
+            prefixes: ['flag_'],
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            accessor: (rowData) => {
+                var _a, _b;
+                return (_b = (_a = rowData === null || rowData === void 0 ? void 0 : rowData.flags) === null || _a === void 0 ? void 0 : _a.flag) === null || _b === void 0 ? void 0 : _b.map((flag) => flag.id);
+            },
+            label: 'Flags',
+            appCode: APP_CODES.protect.code,
+            serviceCode: APP_CODES.protect.services.chargesFlags.code,
+            icon: 'flag',
+        },
+        authorizationFlags: {
+            prefixes: ['flag_'],
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            accessor: (rowData) => {
+                var _a, _b;
+                return (_b = (_a = rowData === null || rowData === void 0 ? void 0 : rowData.flags) === null || _a === void 0 ? void 0 : _a.flag) === null || _b === void 0 ? void 0 : _b.map((flag) => flag.id);
+            },
+            label: 'Flags',
+            appCode: APP_CODES.protect.code,
+            serviceCode: APP_CODES.protect.services.authorizationsFlags.code,
+            icon: 'flag',
+        },
+        token: {
+            prefixes: ['tok_'],
+            keys: ['source.id'],
+            label: 'Token',
+            appCode: APP_CODES.tokens.code,
+            serviceCode: APP_CODES.tokens.services.tokens.code,
+            icon: 'capture',
+        },
+        destination: {
+            prefixes: ['trf_', 'payout_'],
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            accessor: (rowData) => {
+                var _a, _b;
+                return [(_b = (_a = rowData === null || rowData === void 0 ? void 0 : rowData.destinations) === null || _a === void 0 ? void 0 : _a.destination) === null || _b === void 0 ? void 0 : _b.map((destination) => { var _a; return (_a = destination === null || destination === void 0 ? void 0 : destination.transfer) === null || _a === void 0 ? void 0 : _a.id; }), rowData === null || rowData === void 0 ? void 0 : rowData.id];
+            },
+            label: 'Destination',
+            appCode: APP_CODES.acceptance.code,
+            serviceCode: APP_CODES.acceptance.services.destinations.code,
+            icon: 'destination',
+        },
+        payout: {
+            prefixes: ['payout_'],
+            keys: ['balance.payout.id'],
+            label: 'Payout',
+            appCode: APP_CODES.payouts.code,
+            serviceCode: APP_CODES.payouts.services.payouts.code,
+            icon: 'capture',
+        },
+        settlement: {
+            prefixes: ['settlement_'],
+            keys: ['settlement.id'],
+            label: 'Settlement',
+            appCode: APP_CODES.acceptance.code,
+            serviceCode: APP_CODES.acceptance.services.settlements.code,
+            icon: 'capture',
+        },
+        intent: {
+            prefixes: ['intent_'],
+            keys: ['intent.id'],
+            label: 'Intent',
+            appCode: APP_CODES.acceptance.code,
+            serviceCode: APP_CODES.acceptance.services.intents.code,
+            icon: 'capture',
+        },
+        topup: {
+            prefixes: ['topup_'],
+            keys: ['topup.id'],
+            label: 'Topup',
+            appCode: APP_CODES.acceptance.code,
+            serviceCode: APP_CODES.acceptance.services.topups.code,
+            icon: 'capture',
+        },
+    };
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.224",
-  "testVersion": 0,
+  "version": "0.1.226-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -163,4 +163,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}