@tap-payments/os-micro-frontend-shared 0.0.139 → 0.0.141

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

@@ -12,104 +12,91 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { TableCell } from '../../../TableCells';
-import { StatusContainer, StatusWrapper, StatusIcon } from './style';
+import { StatusContainer, StatusWrapper, StatusIcon, SheetModeContainer, SheetModeStatusWrapper, SheetModeIconContainer } from './style';
 import { getIconXTranslation } from './utils';
 import CollapsedViewIcon from './CollapsedViewIcon';
 function SourceMergedCell(_a) {
     var { icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed = false, tableMode } = _a, props = __rest(_a, ["icons", "isTextShown", "centerIconKey", "collapsedViewIcon", "isReversed", "tableMode"]);
-    const iconsList = useMemo(() => icons.filter((icon) => Boolean(icon.icon)), [icons]);
-    const [isHovering, setIsHovering] = useState(false);
-    const centerIconIndex = Math.max(centerIconKey ? iconsList.findIndex((icon) => icon.key === centerIconKey) : 0, 0);
-    const iconRefs = useRef([]);
-    const [iconMeasurements, setIconMeasurements] = useState(new Map());
-    const isSheetMode = tableMode === 'sheet';
-    useEffect(() => {
-        if (isSheetMode)
-            return;
-        setTimeout(() => {
-            const tableMode = isTextShown ? 'text' : 'default';
-            const newMeasurements = new Map();
-            iconRefs.current.forEach((ref, index) => {
-                if (ref) {
-                    const width = ref.getBoundingClientRect().width;
-                    const existingMeasurement = iconMeasurements.get(index) || { default: 0, text: 0 };
-                    newMeasurements.set(index, Object.assign(Object.assign({}, existingMeasurement), { [tableMode]: width }));
-                }
-            });
-            setIconMeasurements(new Map([...iconMeasurements, ...newMeasurements]));
-        }, 50);
-    }, [iconsList, isTextShown, isHovering, isSheetMode]);
-    const hasPreviousIcon = (isReversed && iconsList.length > 1) || centerIconIndex > 0;
-    const hasNextIcon = !isReversed && centerIconIndex < iconsList.length - 1;
-    if (isSheetMode) {
+    function SourceMergedCell(_a) {
+        var { icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed = false, tableMode } = _a, props = __rest(_a, ["icons", "isTextShown", "centerIconKey", "collapsedViewIcon", "isReversed", "tableMode"]);
+        const iconsList = useMemo(() => icons.filter((icon) => Boolean(icon.icon)), [icons]);
+        const [isHovering, setIsHovering] = useState(false);
+        const centerIconIndex = Math.max(centerIconKey ? iconsList.findIndex((icon) => icon.key === centerIconKey) : 0, 0);
+        const iconRefs = useRef([]);
+        const [iconMeasurements, setIconMeasurements] = useState(new Map());
+        const isSheetMode = tableMode === 'sheet';
+        useEffect(() => {
+            if (isSheetMode)
+                return;
+            setTimeout(() => {
+                const tableMode = isTextShown ? 'text' : 'default';
+                const newMeasurements = new Map();
+                iconRefs.current.forEach((ref, index) => {
+                    if (ref) {
+                        const width = ref.getBoundingClientRect().width;
+                        const existingMeasurement = iconMeasurements.get(index) || { default: 0, text: 0 };
+                        newMeasurements.set(index, Object.assign(Object.assign({}, existingMeasurement), { [tableMode]: width }));
+                    }
+                });
+                setIconMeasurements(new Map([...iconMeasurements, ...newMeasurements]));
+            }, 50);
+        }, [iconsList, isTextShown, isHovering, isSheetMode]);
+        const hasPreviousIcon = (isReversed && iconsList.length > 1) || centerIconIndex > 0;
+        const hasNextIcon = !isReversed && centerIconIndex < iconsList.length - 1;
+        if (isSheetMode) {
+            return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
+                    position: 'relative',
+                    overflow: 'visible',
+                    zIndex: 101,
+                } }, { children: _jsx(SheetModeContainer, { children: iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => (_jsx(SheetModeStatusWrapper, Object.assign({ "data-testid": `StatusWrapper-${icon.key}` }, { children: _jsx(SheetModeIconContainer, { children: icon.icon }) }), `StatusWrapper-${icon.key}-${index}`))) }) })));
+        }
         return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
                 position: 'relative',
                 overflow: 'visible',
                 zIndex: 101,
-            } }, { children: _jsx("div", Object.assign({ style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                    height: '18px',
-                } }, { children: iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => (_jsx("div", Object.assign({ "data-testid": `StatusWrapper-${icon.key}`, style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        opacity: 1,
-                        border: '1px solid #F2F2F2',
-                        borderRadius: '24px',
-                        padding: '0px 8px',
-                    } }, { children: _jsx("div", Object.assign({ style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            opacity: 1,
-                        } }, { children: icon.icon })) }), `StatusWrapper-${icon.key}-${index}`))) })) })));
-    }
-    return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
-            position: 'relative',
-            overflow: 'visible',
-            zIndex: 101,
-        } }, { children: _jsx(StatusContainer, Object.assign({ animate: isHovering ? 'hover' : 'initial', onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), initial: "initial", sx: {
-                minHeight: '20px',
-                maxWidth: '55px',
-            }, isReversed: isReversed }, { children: _jsxs(_Fragment, { children: [_jsx(CollapsedViewIcon, { hasPreviousIcon: hasPreviousIcon, hasNextIcon: hasNextIcon, isTextShown: isTextShown, collapsedViewIcon: collapsedViewIcon, sx: props.sx }, 'collapsedViewIcon'), iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => {
-                        if (!icon)
-                            return;
-                        const tableMode = isTextShown ? 'text' : 'default';
-                        const xHoverPosition = getIconXTranslation({
-                            iconsList: iconsList.map((iconObj, i) => {
-                                const measurements = iconMeasurements.get(i);
-                                return Object.assign(Object.assign({}, iconObj), { width: {
-                                        default: (measurements === null || measurements === void 0 ? void 0 : measurements.default) || 0,
-                                        text: (measurements === null || measurements === void 0 ? void 0 : measurements.text) || 0,
-                                    } });
-                            }),
-                            tableMode: tableMode,
-                            centerIndex: centerIconIndex,
-                            iconIndex: index,
-                        });
-                        return (_jsx(StatusWrapper, Object.assign({ ref: (el) => (iconRefs.current[index] = el), "data-testid": `StatusWrapper-${icon.key}`, variants: {
-                                initial: {
-                                    x: 0,
-                                    opacity: 0,
-                                },
-                                hover: {
-                                    x: isReversed ? -xHoverPosition : xHoverPosition,
-                                    zIndex: 100 - Math.abs(centerIconIndex - index),
-                                    opacity: 1,
-                                },
-                            }, transition: {
-                                default: { duration: 0.3, ease: 'easeInOut' },
-                                opacity: { duration: 0.0, ease: 'linear' },
-                            } }, { children: _jsx(StatusIcon, Object.assign({ isTextShown: isTextShown, variants: {
+            } }, { children: _jsx(StatusContainer, Object.assign({ animate: isHovering ? 'hover' : 'initial', onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), initial: "initial", sx: {
+                    minHeight: '20px',
+                    maxWidth: '55px',
+                }, isReversed: isReversed }, { children: _jsxs(_Fragment, { children: [_jsx(CollapsedViewIcon, { hasPreviousIcon: hasPreviousIcon, hasNextIcon: hasNextIcon, isTextShown: isTextShown, collapsedViewIcon: collapsedViewIcon, sx: props.sx }, 'collapsedViewIcon'), iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => {
+                            if (!icon)
+                                return;
+                            const tableMode = isTextShown ? 'text' : 'default';
+                            const xHoverPosition = getIconXTranslation({
+                                iconsList: iconsList.map((iconObj, i) => {
+                                    const measurements = iconMeasurements.get(i);
+                                    return Object.assign(Object.assign({}, iconObj), { width: {
+                                            default: (measurements === null || measurements === void 0 ? void 0 : measurements.default) || 0,
+                                            text: (measurements === null || measurements === void 0 ? void 0 : measurements.text) || 0,
+                                        } });
+                                }),
+                                tableMode: tableMode,
+                                centerIndex: centerIconIndex,
+                                iconIndex: index,
+                            });
+                            return (_jsx(StatusWrapper, Object.assign({ ref: (el) => (iconRefs.current[index] = el), "data-testid": `StatusWrapper-${icon.key}`, variants: {
                                     initial: {
+                                        x: 0,
                                         opacity: 0,
                                     },
                                     hover: {
+                                        x: isReversed ? -xHoverPosition : xHoverPosition,
+                                        zIndex: 100 - Math.abs(centerIconIndex - index),
                                         opacity: 1,
                                     },
                                 }, transition: {
+                                    default: { duration: 0.3, ease: 'easeInOut' },
                                     opacity: { duration: 0.0, ease: 'linear' },
-                                } }, { children: icon.icon })) }), `StatusWrapper-${icon.key}-${index}`));
-                    })] }) })) })));
+                                } }, { children: _jsx(StatusIcon, Object.assign({ isTextShown: isTextShown, variants: {
+                                        initial: {
+                                            opacity: 0,
+                                        },
+                                        hover: {
+                                            opacity: 1,
+                                        },
+                                    }, transition: {
+                                        opacity: { duration: 0.0, ease: 'linear' },
+                                    } }, { children: icon.icon })) }), `StatusWrapper-${icon.key}-${index}`));
+                        })] }) })) })));
+    }
 }
 export default SourceMergedCell;

package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;
@@ -1617,3 +1617,6 @@ export declare const StatusContainer: import("@emotion/styled").StyledComponent<
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isReversed?: boolean | undefined;
 }, {}, {}>;
+export declare const SheetModeContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SheetModeStatusWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SheetModeIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/components/TableCells/CustomCells/SourceMergedCell/style.js

@@ -74,3 +74,22 @@ export const StatusContainer = styled(motion.div)(({ isReversed }) => ({
     position: 'relative',
     overflow: 'visible',
 }));
+export const SheetModeContainer = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    height: '18px',
+}));
+export const SheetModeStatusWrapper = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    opacity: 1,
+    border: '1px solid #F2F2F2',
+    borderRadius: '24px',
+    padding: '0px 8px',
+}));
+export const SheetModeIconContainer = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    opacity: 1,
+}));

package/build/components/TableCells/CustomCells/StatusCell/constant.d.ts

@@ -13,6 +13,18 @@ export declare const statusIcons: {
     UNKNOWN: string;
     AUTHORIZED: string;
 };
+export declare const sheetViewChipStyles: {
+    ABANDONED: {
+        color: string;
+        background: string;
+        border: string;
+    };
+    CANCELLED: {
+        color: string;
+        background: string;
+        border: string;
+    };
+};
 export declare const unCapturedStatusesStyles: Record<(typeof unCapturedStatuses)[number], {
     gatewayIcon: string;
     acquirerIcon: string;
@@ -38,6 +50,23 @@ export declare const payoutStatusIcons: {
     SETTLED: string;
     PENDING: string;
 };
+export declare const payoutStatusStyles: {
+    PAID_OUT: {
+        color: string;
+        background: string;
+        border: string;
+    };
+    SETTLED: {
+        color: string;
+        background: string;
+        border: string;
+    };
+    PENDING: {
+        color: string;
+        background: string;
+        border: string;
+    };
+};
 export declare const authorizedStatusIcons: {
     AUTHORIZED: string;
 };

package/build/components/TableCells/CustomCells/StatusCell/constant.js

@@ -13,6 +13,18 @@ export const statusIcons = {
     UNKNOWN: unknownIcon,
     AUTHORIZED: authorizedIcon,
 };
+export const sheetViewChipStyles = {
+    ABANDONED: {
+        color: '#FFD600',
+        background: 'transparent',
+        border: '1px solid #FFD60080',
+    },
+    CANCELLED: {
+        color: '#EDC806',
+        background: '#FFD6001A',
+        border: 'none',
+    },
+};
 export const unCapturedStatusesStyles = {
     UNKNOWN: {
         gatewayIcon: gatewayOrangeIcon,
@@ -82,6 +94,23 @@ export const payoutStatusIcons = {
     SETTLED: settledIcon,
     PENDING: settlementInitiatedIcon,
 };
+export const payoutStatusStyles = {
+    PAID_OUT: {
+        color: '#2ACE00',
+        background: '#2ACE001A',
+        border: 'none',
+    },
+    SETTLED: {
+        color: '#2ACE00',
+        background: 'transparent',
+        border: '1px solid #2ACE0066',
+    },
+    PENDING: {
+        color: '#FF7A00',
+        background: '#FF7A000D',
+        border: 'none',
+    },
+};
 export const authorizedStatusIcons = {
     AUTHORIZED: authorizedIcon,
 };

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/type.d.ts

@@ -10,6 +10,7 @@ export interface DateCellProps extends TableCellProps {
     format?: object;
     flagIcon?: string;
     hasFlag?: boolean;
+    tableMode?: TableMode;
 }
 export interface OrderCellProps extends TableCellProps {
     label: string;
@@ -19,6 +20,7 @@ export interface OrderCellProps extends TableCellProps {
         description?: string;
         name?: string;
     }>;
+    tableMode?: TableMode;
 }
 export interface CustomerCellProps extends TableCellProps {
     customerInitiated?: boolean;
@@ -32,6 +34,7 @@ export interface CustomerCellProps extends TableCellProps {
     email?: string;
     phone?: string;
     id?: string;
+    tableMode?: TableMode;
 }
 export interface SourceCellProps extends TableCellProps {
     geographyVariant?: 'G' | 'L' | 'R';
@@ -51,6 +54,7 @@ export interface AmountCellProps extends TableCellProps {
     tooltipLabel?: React.ReactNode;
     amountTooltipLabel?: React.ReactNode;
     isTextShown?: boolean;
+    tableMode?: TableMode;
 }
 export interface DestinationCellProps extends TableCellProps {
     destinationsCount?: number;

package/build/components/VirtualTable/components/TableRowLoading.js

@@ -8,6 +8,7 @@ import { areEqual } from 'react-window';
 const StyledSkeleton = styled(Skeleton)(({ theme }) => ({
     backgroundColor: theme.palette.grey[100],
     borderRadius: '64px',
+    minWidth: '20px',
 }));
 function TableRowLoading({ columns, style, index, animationType }) {
     return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #e3e8ee', '&:hover': {

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

@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -22,12 +22,12 @@ export declare const chargeTableCellWidth: {
     readonly date: {
         readonly default: "170px";
         readonly text: "170px";
-        readonly sheet: "170px";
+        readonly sheet: "129px";
     };
     readonly reference: {
         readonly default: "95px";
         readonly text: "180px";
-        readonly sheet: "550px";
+        readonly sheet: "985px";
     };
     readonly order: {
         readonly default: "80px";
@@ -42,7 +42,7 @@ export declare const chargeTableCellWidth: {
     readonly source: {
         readonly default: "114px";
         readonly text: "125px";
-        readonly sheet: "410px";
+        readonly sheet: "450px";
     };
     readonly authenticate: {
         readonly default: "55px";
@@ -72,7 +72,7 @@ export declare const chargeTableCellWidth: {
     readonly status: {
         readonly default: "70px";
         readonly text: "300px";
-        readonly sheet: "185px";
+        readonly sheet: "385px";
     };
     readonly merchant: {
         readonly default: "100px";
@@ -107,7 +107,7 @@ export declare const chargeTableCellWidth: {
     readonly metadata: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "235px";
+        readonly sheet: "245px";
     };
     readonly settlement: {
         readonly default: "200px";

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

@@ -22,12 +22,12 @@ export const chargeTableCellWidth = {
     date: {
         default: '170px',
         text: '170px',
-        sheet: '170px',
+        sheet: '129px',
     },
     reference: {
         default: '95px',
         text: '180px',
-        sheet: '550px',
+        sheet: '985px',
     },
     order: {
         default: '80px',
@@ -42,7 +42,7 @@ export const chargeTableCellWidth = {
     source: {
         default: '114px',
         text: '125px',
-        sheet: '410px',
+        sheet: '450px',
     },
     authenticate: {
         default: '55px',
@@ -72,7 +72,7 @@ export const chargeTableCellWidth = {
     status: {
         default: '70px',
         text: '300px',
-        sheet: '185px',
+        sheet: '385px',
     },
     merchant: {
         default: '100px',
@@ -107,7 +107,7 @@ export const chargeTableCellWidth = {
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '235px',
+        sheet: '245px',
     },
     settlement: {
         default: '200px',