@tap-payments/os-micro-frontend-shared 0.1.96-test.2 → 0.1.96-test.21

package/build/components/Window/Window.js

@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
 import { Resizable } from 're-resizable';
 import { APP_WINDOW_Z_INDEX, FOOTER_HEIGHT, HEADER_HEIGHT } from '../../constants/index.js';
 import { contentStyle, ContentWrapper, initalStyle, resizableMainStyle, AppContainerWrapper, AppContainerContainer } from './style';
-function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, }) {
+function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, sandboxMode = false, }) {
     const [isDrag, setIsDrag] = useState(true);
     const modalRef = useRef(null);
     const constraintsRef = useRef(null);
@@ -32,7 +32,7 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
                         left: 48 * (openOrder - 1),
                     })), animate: Object.assign(Object.assign({ width }, (isMaximized && {
                         width: '100vw',
-                    })), { scale: Number(!isMinimized), top: isMaximized ? 0 : HEADER_HEIGHT + FOOTER_HEIGHT * (openOrder - 1), left: isMaximized ? 0 : 48 * (openOrder - 1) }), ref: modalRef, maximized: isMaximized, transition: { duration: isMaximized ? 0.3 : 0 } }, { children: _jsx(Resizable, Object.assign({ ref: (c) => {
+                    })), { scale: Number(!isMinimized), top: isMaximized ? 0 : HEADER_HEIGHT + FOOTER_HEIGHT * (openOrder - 1), left: isMaximized ? 0 : 48 * (openOrder - 1) }), ref: modalRef, maximized: isMaximized, transition: { duration: isMaximized ? 0.3 : 0 }, sandboxMode: sandboxMode }, { children: _jsx(Resizable, Object.assign({ ref: (c) => {
                             resizableRef.current = c;
                         }, style: resizableStyle, minHeight: minHeight, minWidth: minWidth, maxHeight: maxHeight, maxWidth: maxWidth, onResizeStart: onResizeStart, onResizeStop: onResizeStop, onResize: (_, __, element) => {
                             onResize === null || onResize === void 0 ? void 0 : onResize(element);

package/build/components/Window/style.d.ts

@@ -265,6 +265,7 @@ export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     maximized?: boolean | undefined;
+    sandboxMode?: boolean | undefined;
 }, {}, {}>;
 export declare const AppContainerWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/build/components/Window/style.js

@@ -30,7 +30,7 @@ export const initalStyle = {
 };
 export const ContentWrapper = styled(motion.div, {
     shouldForwardProp: (props) => props !== 'maximized',
-})(({ maximized }) => (Object.assign({ overflow: 'hidden', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', zIndex: 1, borderRadius: '12px' }, (maximized && {
+})(({ maximized, sandboxMode, theme }) => (Object.assign({ background: sandboxMode ? theme.palette.common.lightOrange : theme.palette.background.transparent[0], backdropFilter: 'blur(32px)', overflow: 'hidden', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', zIndex: 1, borderRadius: '12px' }, (maximized && {
     transform: 'translate(0,0) !important',
 }))));
 export const AppContainerWrapper = styled(Box)(() => ({

package/build/components/index.d.ts

@@ -105,4 +105,12 @@ export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
+export { default as AmountStatusChip, type AmountStatusChipProps } from './AmountStatusChip';
+export { default as AuthenticationTypeChip, type AuthenticationTypeChipProps } from './AuthenticationTypeChip';
 export * from './LazyImage';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as ToggleView } from './ToggleView';
+export * from './ToggleView';
+export { default as AppServicesBar } from './AppServicesBar';
+export * from './AppServicesBar';

package/build/components/index.js

@@ -105,4 +105,12 @@ export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
+export { default as AmountStatusChip } from './AmountStatusChip';
+export { default as AuthenticationTypeChip } from './AuthenticationTypeChip';
 export * from './LazyImage';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as ToggleView } from './ToggleView';
+export * from './ToggleView';
+export { default as AppServicesBar } from './AppServicesBar';
+export * from './AppServicesBar';

package/build/constants/apps.d.ts

@@ -12,6 +12,20 @@ export declare const SERVICE_COMMON_FUNCTIONS: {
         code: string;
     };
 };
+export declare const BUSINESS_FUNCTIONS: {
+    updateEntity: {
+        code: string;
+    };
+    updateBrand: {
+        code: string;
+    };
+    updateUsers: {
+        code: string;
+    };
+    createUsers: {
+        code: string;
+    };
+};
 export declare const APP_CODES: {
     tokens: {
         code: string;
@@ -84,6 +98,18 @@ export declare const APP_CODES: {
             merchant: {
                 code: string;
                 functions: {
+                    updateEntity: {
+                        code: string;
+                    };
+                    updateBrand: {
+                        code: string;
+                    };
+                    updateUsers: {
+                        code: string;
+                    };
+                    createUsers: {
+                        code: string;
+                    };
                     view: {
                         code: string;
                     };
@@ -101,6 +127,18 @@ export declare const APP_CODES: {
             retailer: {
                 code: string;
                 functions: {
+                    updateEntity: {
+                        code: string;
+                    };
+                    updateBrand: {
+                        code: string;
+                    };
+                    updateUsers: {
+                        code: string;
+                    };
+                    createUsers: {
+                        code: string;
+                    };
                     view: {
                         code: string;
                     };
@@ -719,3 +757,6 @@ export declare const APP_ICONS: {
     toolbarIconUrl: string;
 }[];
 export declare const excludedApps: string[];
+export declare const MF_APPS_MAPPER: Readonly<{
+    TERMINALS: "TERMINALS";
+}>;

package/build/constants/apps.js

@@ -14,6 +14,20 @@ export const SERVICE_COMMON_FUNCTIONS = {
         code: 'REPORTS',
     },
 };
+export const BUSINESS_FUNCTIONS = {
+    updateEntity: {
+        code: 'UPDATE ENTITY',
+    },
+    updateBrand: {
+        code: 'UPDATE BRAND',
+    },
+    updateUsers: {
+        code: 'UPDATE USERS',
+    },
+    createUsers: {
+        code: 'CREATE USERS',
+    },
+};
 export const APP_CODES = {
     tokens: {
         code: 'TOKEN',
@@ -40,11 +54,11 @@ export const APP_CODES = {
         services: {
             merchant: {
                 code: 'MERCHANT',
-                functions: Object.assign({}, SERVICE_COMMON_FUNCTIONS),
+                functions: Object.assign(Object.assign({}, SERVICE_COMMON_FUNCTIONS), BUSINESS_FUNCTIONS),
             },
             retailer: {
                 code: 'RETAILER',
-                functions: Object.assign({}, SERVICE_COMMON_FUNCTIONS),
+                functions: Object.assign(Object.assign({}, SERVICE_COMMON_FUNCTIONS), BUSINESS_FUNCTIONS),
             },
         },
     },
@@ -359,3 +373,6 @@ export const APP_ICONS = [
     },
 ];
 export const excludedApps = ['login'];
+export const MF_APPS_MAPPER = Object.freeze({
+    TERMINALS: 'TERMINALS',
+});

package/build/constants/chips/index.d.ts

@@ -0,0 +1 @@
+export * from './statusChips';

package/build/constants/chips/index.js

@@ -0,0 +1 @@
+export * from './statusChips';

package/build/{components/StatusChip/constants.d.ts → constants/chips/statusChips.d.ts}

@@ -1,4 +1,4 @@
-export declare const unknownGeographyColors: {
+export declare const emptyStatusChipColors: {
     bgColor: string;
     borderColor: string;
     textColor: string;

package/build/{components/StatusChip/constants.js → constants/chips/statusChips.js}

@@ -1,4 +1,4 @@
-export const unknownGeographyColors = {
+export const emptyStatusChipColors = {
     bgColor: 'white',
     borderColor: '#F2F2F2',
     textColor: '#20232B33',

package/build/constants/index.d.ts

@@ -12,3 +12,4 @@ export * from './table';
 export * from './toggleOptions';
 export * from './payment';
 export * from './segment';
+export * from './chips';

package/build/constants/index.js

@@ -12,3 +12,4 @@ export * from './table';
 export * from './toggleOptions';
 export * from './payment';
 export * from './segment';
+export * from './chips';

package/build/constants/table/cell/authenticationsTableCellWidth.d.ts

@@ -37,7 +37,7 @@ export declare const authenticationsTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "250px";
-        readonly sheet: "250px";
+        readonly sheet: "165px";
     };
     readonly amount: {
         readonly default: "195px";

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

@@ -37,7 +37,7 @@ export const authenticationsTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '250px',
-        sheet: '250px',
+        sheet: '165px',
     },
     amount: {
         default: '195px',

package/build/constants/table/cell/authorizationTableCellWidth.d.ts

@@ -57,12 +57,12 @@ export declare const authorizationTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "170px";
+        readonly sheet: "230px";
     };
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
-        readonly sheet: "195px";
+        readonly sheet: "150px";
     };
     readonly destinations: {
         readonly default: "70px";
@@ -82,7 +82,7 @@ export declare const authorizationTableCellWidth: {
     readonly merchant: {
         readonly default: "110px";
         readonly text: "150px";
-        readonly sheet: "215px";
+        readonly sheet: "138px";
     };
     readonly charge: {
         readonly default: "150px";
@@ -207,7 +207,7 @@ export declare const authorizationTableCellWidth: {
     readonly eci: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "100px";
+        readonly sheet: "72px";
     };
     readonly acquirer_response: {
         readonly default: "70px";

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

@@ -57,12 +57,12 @@ export const authorizationTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '170px',
+        sheet: '230px',
     },
     amount: {
         default: '170px',
         text: '195px',
-        sheet: '195px',
+        sheet: '150px',
     },
     destinations: {
         default: '70px',
@@ -82,7 +82,7 @@ export const authorizationTableCellWidth = {
     merchant: {
         default: '110px',
         text: '150px',
-        sheet: '215px',
+        sheet: '138px',
     },
     charge: {
         default: '150px',
@@ -207,7 +207,7 @@ export const authorizationTableCellWidth = {
     eci: {
         default: '150px',
         text: '150px',
-        sheet: '100px',
+        sheet: '72px',
     },
     acquirer_response: {
         default: '70px',

package/build/constants/table/cell/chargeTableCellWidth.d.ts

@@ -92,7 +92,7 @@ export declare const chargeTableCellWidth: {
     readonly eci: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "100px";
+        readonly sheet: "72px";
     };
     readonly amount: {
         readonly default: "170px";
@@ -132,7 +132,7 @@ export declare const chargeTableCellWidth: {
     readonly merchant: {
         readonly default: "100px";
         readonly text: "150px";
-        readonly sheet: "215px";
+        readonly sheet: "138px";
     };
     readonly charge: {
         readonly default: "150px";
@@ -222,7 +222,7 @@ export declare const chargeTableCellWidth: {
     readonly consolidated_amount: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "180px";
+        readonly sheet: "150px";
     };
     readonly customer_amount: {
         readonly default: "150px";

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

@@ -92,7 +92,7 @@ export const chargeTableCellWidth = {
     eci: {
         default: '150px',
         text: '150px',
-        sheet: '100px',
+        sheet: '72px',
     },
     amount: {
         default: '170px',
@@ -132,7 +132,7 @@ export const chargeTableCellWidth = {
     merchant: {
         default: '100px',
         text: '150px',
-        sheet: '215px',
+        sheet: '138px',
     },
     charge: {
         default: '150px',
@@ -222,7 +222,7 @@ export const chargeTableCellWidth = {
     consolidated_amount: {
         default: '180px',
         text: '180px',
-        sheet: '180px',
+        sheet: '150px',
     },
     customer_amount: {
         default: '150px',

package/build/constants/table/cell/destinationsTableCellWidth.d.ts

@@ -67,7 +67,7 @@ export declare const destinationsTableCellWidth: {
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
-        readonly sheet: "195px";
+        readonly sheet: "150px";
     };
     readonly status: {
         readonly default: "50px";
@@ -82,7 +82,7 @@ export declare const destinationsTableCellWidth: {
     readonly merchant: {
         readonly default: "100px";
         readonly text: "150px";
-        readonly sheet: "215px";
+        readonly sheet: "138px";
     };
     readonly actions: {
         readonly default: "100px";
@@ -157,7 +157,7 @@ export declare const destinationsTableCellWidth: {
     readonly eci: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "100px";
+        readonly sheet: "72px";
     };
     readonly payout_status: {
         readonly default: "120px";

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

@@ -67,7 +67,7 @@ export const destinationsTableCellWidth = {
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '195px',
+        sheet: '150px',
     },
     status: {
         default: '50px',
@@ -82,7 +82,7 @@ export const destinationsTableCellWidth = {
     merchant: {
         default: '100px',
         text: '150px',
-        sheet: '215px',
+        sheet: '138px',
     },
     actions: {
         default: '100px',
@@ -157,7 +157,7 @@ export const destinationsTableCellWidth = {
     eci: {
         default: '150px',
         text: '150px',
-        sheet: '100px',
+        sheet: '72px',
     },
     payout_status: {
         default: '120px',

package/build/constants/table/cell/merchantsTableCellWidth.d.ts

@@ -72,6 +72,6 @@ export declare const merchantsTableCellWidth: {
     readonly merchant: {
         readonly default: "175px";
         readonly text: "180px";
-        readonly sheet: "180px";
+        readonly sheet: "138px";
     };
 };

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

@@ -72,6 +72,6 @@ export const merchantsTableCellWidth = {
     merchant: {
         default: '175px',
         text: '180px',
-        sheet: '180px',
+        sheet: '138px',
     },
 };

package/build/constants/table/cell/refundTableCellWidth.d.ts

@@ -87,12 +87,12 @@ export declare const refundTableCellWidth: {
     readonly eci: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "100px";
+        readonly sheet: "72px";
     };
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
-        readonly sheet: "180px";
+        readonly sheet: "150px";
     };
     readonly payouts: {
         readonly default: "195px";
@@ -122,7 +122,7 @@ export declare const refundTableCellWidth: {
     readonly merchant: {
         readonly default: "100px";
         readonly text: "150px";
-        readonly sheet: "215px";
+        readonly sheet: "138px";
     };
     readonly reference: {
         readonly default: "95px";

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

@@ -87,12 +87,12 @@ export const refundTableCellWidth = {
     eci: {
         default: '150px',
         text: '150px',
-        sheet: '100px',
+        sheet: '72px',
     },
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '180px',
+        sheet: '150px',
     },
     payouts: {
         default: '195px',
@@ -122,7 +122,7 @@ export const refundTableCellWidth = {
     merchant: {
         default: '100px',
         text: '150px',
-        sheet: '215px',
+        sheet: '138px',
     },
     reference: {
         default: '95px',

package/build/types/apps.d.ts

@@ -1,6 +1,11 @@
 import { ColumnsView } from './column';
-import { TextAndLang } from './user';
+import { Segment, SegmentCountry, 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';
 export interface AccountAppPayload {
     disabledAccountDataFetching?: boolean;
     isAccountDetailsOpen: boolean;
@@ -63,3 +68,47 @@ export interface UserApp {
     name: TextAndLang[];
     app_services: AppService[];
 }
+export type NavigateFunction = (params: {
+    instanceId?: string;
+    appId?: string;
+    appCode: string;
+    serviceCode: string;
+    state?: any;
+}) => void;
+export type MFWidgetBaseProps = {
+    instanceId: string;
+    i18n?: i18n;
+    app?: UserApp;
+    appWindow: {
+        isMinimized: boolean;
+        isMaximized: boolean;
+        order: number;
+        dimensions: Pick<AppDetails['dimensions'], 'width' | 'height'>;
+    };
+    features: {
+        hasReportsApp: boolean;
+        hasHeader: boolean;
+        sandboxMode: boolean;
+        initialServiceCode?: string;
+    };
+    segment: Pick<Segment, 'id' | 'brands' | 'countries'> & {
+        defaultCountry?: SegmentCountry;
+    };
+    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/table.d.ts

@@ -136,7 +136,7 @@ export interface IVirtualTable<R = any> {
         height: string | number;
         width: string | number;
     };
-    dragControls?: DragControls;
+    onStartDrag?: DragControls['start'];
     isSheetView?: boolean;
     isMinimized?: boolean;
 }

package/build/utils/color.d.ts

@@ -1,2 +1,13 @@
+import { ColorObject } from 'color';
 export declare function getRandomColor(): string;
 export declare function getRandomGradientColor(): string;
+export declare const hexa2Rgba: (value: string) => {
+    value: {
+        r: number;
+        g: number;
+        b: number;
+        alpha: number;
+    };
+    stringified: string;
+};
+export declare const rgba2Hexa: (value: ColorObject) => string;

package/build/utils/color.js

@@ -1,3 +1,4 @@
+import Color from 'color';
 export function getRandomColor() {
     const colors = [
         '#D6D6D6',
@@ -36,3 +37,29 @@ export function getRandomGradientColor() {
     ];
     return colors[Math.trunc(Math.random() * colors.length)];
 }
+const BLACK_RGBA_COLOR = {
+    r: 0,
+    g: 0,
+    b: 0,
+    alpha: 1,
+};
+export const hexa2Rgba = (value) => {
+    try {
+        const colorInstance = Color(value).rgb();
+        const { r, g, b, alpha = 1 } = colorInstance.object();
+        return {
+            value: { r, g, b, alpha },
+            stringified: `rgba(${r},${g},${b},${alpha})`,
+        };
+    }
+    catch (error) {
+        console.error(error);
+        console.warn(`Invalid hex color: "${value}". Falling back to black.`);
+        const { r, g, b, alpha } = BLACK_RGBA_COLOR;
+        return {
+            value: BLACK_RGBA_COLOR,
+            stringified: `rgba(${r},${g},${b},${alpha})`,
+        };
+    }
+};
+export const rgba2Hexa = (value) => Color(value).hexa();

package/build/utils/object.d.ts

@@ -1,6 +1,7 @@
 export declare function removeUndefinedValues(obj: Record<string, unknown>): {
     [k: string]: unknown;
 };
+export declare const isEmptyValue: (value: unknown) => boolean;
 export declare function removeUndefinedArrayValues(obj: Record<string, unknown>): {
     [k: string]: unknown;
 };

package/build/utils/object.js

@@ -1,14 +1,15 @@
 export function removeUndefinedValues(obj) {
     return Object.fromEntries(Object.entries(obj).filter(([, value]) => value !== undefined));
 }
+export const isEmptyValue = (value) => value === undefined || value === null || value === '';
 export function removeUndefinedArrayValues(obj) {
     return Object.fromEntries(Object.entries(obj).filter(([, value]) => {
         if (Array.isArray(value)) {
-            return value.length > 0 && (value === null || value === void 0 ? void 0 : value.some((v) => !!v));
+            return value.length > 0 && (value === null || value === void 0 ? void 0 : value.some((v) => !isEmptyValue(v)));
         }
         if (typeof value === 'object') {
-            return Object.values(value || {}).some((v) => !!v);
+            return Object.values(value || {}).some((v) => !isEmptyValue(v));
         }
-        return !!value;
+        return !isEmptyValue(value);
     }));
 }

package/build/utils/table.d.ts

@@ -6,9 +6,6 @@ export declare const getColumnWidthPercentage: (widthInPx: number, options?: {
 export declare const getCellWidth: ({ table, cellID, tableMode }: TableCellWidthProps) => string;
 export declare const calculateMaxAllowedRows: (isLoaded: boolean, isLoading: boolean) => number;
 export declare const isHeightNotFullyFilledByRows: (totalRows: number) => boolean;
-export declare const calculateSheetViewHeight: (totalRows: number, rowHeight?: number) => number;
-export declare const calculateSheetViewMaxRows: (availableHeight: number, rowHeight?: number) => number;
-export declare const isSheetViewScrollable: (totalRows: number, containerHeight: number, rowHeight?: number) => boolean;
-export declare const getSheetViewRowHeight: () => number;
-export declare const calculateSheetViewOptimalHeight: (totalRows: number, tableType: string, maxHeightPercentage?: number) => number;
-export declare const isTableDefaultMode: (tableMode?: TableMode) => boolean;
+export declare const isTableDefaultMode: (tableMode: TableMode) => boolean;
+export declare const isTableSheetMode: (tableMode: TableMode) => boolean;
+export declare const isTableTextMode: (tableMode: TableMode) => boolean;