@tap-payments/os-micro-frontend-shared 0.0.128 → 0.0.129-sheetview-component-ui-v2

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

@@ -1,3 +1,3 @@
 import type { CustomerCellProps } from '../type';
-declare function CustomerCell({ customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id, ...props }: Readonly<CustomerCellProps>): import("react/jsx-runtime").JSX.Element;
+declare function CustomerCell({ customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id, tableMode, ...props }: Readonly<CustomerCellProps>): import("react/jsx-runtime").JSX.Element;
 export default CustomerCell;

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

@@ -20,7 +20,7 @@ import { TableCell } from '../../../TableCells';
 import { AvatarStyled, StarBadgeWrapper } from '../style';
 function CustomerCell(_a) {
     var _b;
-    var { customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id } = _a, props = __rest(_a, ["customerInitiated", "children", "isTimezoneIconShown", "hasCustomerIcon", "customerIcon", "customerName", "hideCustomerInitiatedIcon", "hideTimezoneIcon", "phone", "email", "id"]);
+    var { customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id, tableMode } = _a, props = __rest(_a, ["customerInitiated", "children", "isTimezoneIconShown", "hasCustomerIcon", "customerIcon", "customerName", "hideCustomerInitiatedIcon", "hideTimezoneIcon", "phone", "email", "id", "tableMode"]);
     const { t } = useTranslation();
     const customerInitiatedTooltip = customerInitiated === false ? t('merchantInitiated') : '';
     const isArabicCustomerName = isArabic(customerName);
@@ -38,6 +38,9 @@ function CustomerCell(_a) {
             return null;
         return (_jsx("div", Object.assign({ "data-testid": "CustomerCell_customerTooltip" }, { children: tooltipOptions.map(({ name, value }) => value && (_jsx("div", Object.assign({ "data-testid": `CustomerCell_customerTooltip_${name}` }, { children: name === 'Name' ? value : `${name}: ${value}` }), value))) })));
     }, [tooltipOptions]);
+    if (tableMode === 'sheet') {
+        return (_jsx(StyledCustomerName, Object.assign({ tableMode: tableMode, "data-testid": "CustomerCell_StyledCustomerName", "data-is-arabic": isArabicCustomerName }, { children: children })));
+    }
     return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "CustomerCell_TableCell" }, { children: _jsxs(StyledCustomerCell, Object.assign({ "data-testid": "CustomerCell_StyledCustomerCell" }, { children: [customerShownIcon, _jsx(Tooltip, Object.assign({ title: customerTooltip }, { children: _jsx(StyledCustomerName, Object.assign({ "data-testid": "CustomerCell_StyledCustomerName", "data-is-arabic": isArabicCustomerName }, { children: children })) })), !hideTimezoneIcon && (_jsx(StyledCustomerIconContainer, Object.assign({ "data-testid": "CustomerCell_StyledCustomerIconContainer" }, { children: isTimezoneIconShown && _jsx(StyledCustomerIcon, { src: timezoneIcon, "data-testid": "CustomerCell_StyledCustomerIcon" }) }))), !hideCustomerInitiatedIcon && (_jsx(Tooltip, Object.assign({ title: customerInitiatedTooltip }, { children: _jsx(StarBadgeWrapper, Object.assign({ "data-testid": "CustomerCell_StarBadgeWrapper", className: "geography-box", isShown: !!customerInitiatedTooltip }, { children: customerInitiatedTooltip && (_jsx("img", { "data-testid": "CustomerCell_merchantInitiatedIcon", src: merchantInitiatedIcon, alt: "merchant", style: {
                                 width: '16px',
                                 height: '16px',

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
+import { TableMode } from '../../../../types/index.js';
 export declare const StyledCustomerCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledCustomerName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledCustomerName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    tableMode?: TableMode | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledCustomerIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledCustomerIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

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

@@ -5,13 +5,9 @@ export const StyledCustomerCell = styled('span')(({ theme }) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
 }));
-export const StyledCustomerName = styled('span')({
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    maxWidth: '25ch',
-    flex: 1,
-});
+export const StyledCustomerName = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'tableMode',
+})(({ tableMode }) => (Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '25ch', flex: 1 }, (tableMode === 'sheet' && { fontSize: '11px' }))));
 export const StyledCustomerIconContainer = styled('span')({
     width: '11.6px',
     height: '11.6px',

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

@@ -1,3 +1,3 @@
 import { DateCellProps } from '../type';
-declare function DateCell({ value, format: dateFormat, flagIcon, hasFlag, ...props }: DateCellProps): import("react/jsx-runtime").JSX.Element;
+declare function DateCell({ value, format: dateFormat, flagIcon, hasFlag, tableMode, ...props }: DateCellProps): import("react/jsx-runtime").JSX.Element;
 export default DateCell;

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

@@ -17,12 +17,13 @@ import CountryFlag from '../../../CountryFlag';
 import { formatCellDate, getCountryName } from '../../../../utils/index.js';
 import { DateCellContainer } from './style';
 import { GeographyBox } from '../style';
+import { Box } from '@mui/material';
 function DateCell(_a) {
-    var { value, format: dateFormat, flagIcon, hasFlag } = _a, props = __rest(_a, ["value", "format", "flagIcon", "hasFlag"]);
+    var { value, format: dateFormat, flagIcon, hasFlag, tableMode } = _a, props = __rest(_a, ["value", "format", "flagIcon", "hasFlag", "tableMode"]);
     const icon = flagIcon && (_jsx(Tooltip, Object.assign({ title: getCountryName(flagIcon || '') }, { children: _jsx(CountryFlag, { code: flagIcon }) })));
     const renderedValue = useMemo(() => formatCellDate(value, dateFormat), [value]);
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(DateCellContainer, { children: [hasFlag && (_jsx(GeographyBox, Object.assign({ sx: {
                         visibility: 'visible',
-                    }, className: "geography-box" }, { children: icon }))), renderedValue] }) })));
+                    }, className: "geography-box" }, { children: icon }))), _jsx(Box, Object.assign({ sx: Object.assign({}, (tableMode === 'sheet' && { fontSize: '11px' })) }, { children: renderedValue }))] }) })));
 }
 export default DateCell;

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

@@ -1,3 +1,3 @@
 import { DestinationCellProps } from '../type';
-declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
+declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
 export default DestinationCell;

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

@@ -19,7 +19,7 @@ import { TextLabel } from '../style';
 import { CurrencyIcon } from '../../../index.js';
 function DestinationCell(_a) {
     var _b, _c, _d, _e, _f;
-    var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection"]);
+    var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode"]);
     if (!destinationsCount || hidden) {
         return null;
     }
@@ -29,10 +29,11 @@ function DestinationCell(_a) {
     const textView = (_jsx(TextLabel, Object.assign({ sx: {
             textAlign: 'left',
             justifyContent: 'flex-start',
+            height: tableMode === 'sheet' ? '18px' : 'auto',
         } }, { children: destinationsCount > 1 ? (_jsxs("div", { children: ["Destination ", (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.id, " - ", _jsx(CurrencyIcon, { currency: (_d = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _d === void 0 ? void 0 : _d.currency }), ' ', firstDestinationFormattedAmount.integerAmount, ".", firstDestinationFormattedAmount.decimalAmount, " +", destinationsCount - 1] })) : (_jsxs("div", { children: ["Destination ", (_e = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _e === void 0 ? void 0 : _e.id, " - ", _jsx(CurrencyIcon, { currency: (_f = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _f === void 0 ? void 0 : _f.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] })) })));
     return (_jsx(TableCell, Object.assign({ sx: {
             width: 'fit-content',
             overflow: 'visible',
-        } }, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: !isTextShown ? (_jsxs(StyledDestinationCell, { children: [_jsx(StyledDestinationIcon, { src: destinationSolidIcon, pointLeft: iconDirection === 'left' }), destinationsCount > 1 && (_jsx(DestinationCellContainer, Object.assign({ destinationsCount: 1 }, { children: _jsx(DestinationCount, { children: destinationsCount }) })))] })) : (textView) })) })));
+        } }, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: !isTextShown ? (_jsxs(StyledDestinationCell, Object.assign({ tableMode: tableMode }, { children: [_jsx(StyledDestinationIcon, { src: destinationSolidIcon, pointLeft: iconDirection === 'left' }), destinationsCount > 1 && (_jsx(DestinationCellContainer, Object.assign({ destinationsCount: 1 }, { children: _jsx(DestinationCount, { children: destinationsCount }) })))] }))) : (textView) })) })));
 }
 export default DestinationCell;

package/build/components/TableCells/CustomCells/DestinationCell/styled.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+import { TableMode } from '../../../../types/index.js';
 export declare const DestinationCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     destinationsCount: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const DestinationCount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledDestinationCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledDestinationCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    tableMode?: TableMode | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledDestinationImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     order: number;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/TableCells/CustomCells/DestinationCell/styled.js

@@ -19,7 +19,9 @@ export const DestinationCount = styled('span')(({ theme }) => ({
     justifyContent: 'center',
     backgroundColor: `${theme.palette.info.dark}1A`,
 }));
-export const StyledDestinationCell = styled('span')(({ theme }) => ({
+export const StyledDestinationCell = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'tableMode',
+})(({ theme, tableMode }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
@@ -28,7 +30,7 @@ export const StyledDestinationCell = styled('span')(({ theme }) => ({
     border: `1px solid ${theme.palette.divider}`,
     paddingInline: theme.spacing(1),
     borderRadius: '56px',
-    height: '24px',
+    height: tableMode === 'sheet' ? '18px' : '24px',
 }));
 export const StyledDestinationImage = styled('img')(({ theme, order }) => ({
     borderRadius: '50%',

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

@@ -1,3 +1,3 @@
 import { OrderCellProps } from '../type';
-declare function OrderCell({ value, label, items, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
+declare function OrderCell({ value, label, items, tableMode, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
 export default OrderCell;

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

@@ -14,7 +14,7 @@ import { TableCell } from '../../../TableCells';
 import Tooltip from '../../../Tooltip';
 import { MAX_TOOLTIP_ITEM_LENGTH } from './constant';
 function OrderCell(_a) {
-    var { value, label, items } = _a, props = __rest(_a, ["value", "label", "items"]);
+    var { value, label, items, tableMode } = _a, props = __rest(_a, ["value", "label", "items", "tableMode"]);
     const orderDiscriminator = Number.isInteger(value) && Number(value) > 1 && label.charAt(label.length - 1) !== 's' ? `${label}s` : label;
     const orderLabel = `${value} ${orderDiscriminator}`;
     const orderTooltip = (_jsx(_Fragment, { children: items === null || items === void 0 ? void 0 : items.map((item) => {
@@ -22,6 +22,9 @@ function OrderCell(_a) {
             const truncatedItemContent = ((itemContent === null || itemContent === void 0 ? void 0 : itemContent.length) || 0) > MAX_TOOLTIP_ITEM_LENGTH ? `${itemContent === null || itemContent === void 0 ? void 0 : itemContent.slice(0, MAX_TOOLTIP_ITEM_LENGTH)}...` : itemContent;
             return _jsx("div", { children: truncatedItemContent }, item.id);
         }) }));
+    if (tableMode === 'sheet') {
+        return (_jsx(TableCell, Object.assign({ sx: { fontSize: '11px' } }, props, { children: orderLabel })));
+    }
     return (_jsx(Tooltip, Object.assign({ title: (items || []).length > 1 ? orderTooltip : undefined }, { children: _jsx(TableCell, Object.assign({}, props, { children: _jsx("span", { children: orderLabel }) })) })));
 }
 export default OrderCell;

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

@@ -1,4 +1,5 @@
-export declare const ReceiptCell: ({ receiptId, isTextShown }: {
+export declare const ReceiptCell: ({ receiptId, isTextShown, tableMode, }: {
     receiptId: string;
     isTextShown?: boolean | undefined;
+    tableMode?: "text" | "sheet" | "default" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableCell } from '@mui/material';
 import { TextTableCell } from '..';
-import { TextLabel } from '../style';
+import { StyledTextTableCell, TextLabel } from '../style';
 import Tooltip from '../../../Tooltip';
 import { receiptBillIcon } from '../../../../constants/index.js';
-export const ReceiptCell = ({ receiptId, isTextShown }) => {
+export const ReceiptCell = ({ receiptId, isTextShown, tableMode, }) => {
+    if (tableMode === 'sheet') {
+        return (_jsx(StyledTextTableCell, { children: _jsx("span", { children: receiptId }) }));
+    }
     return isTextShown ? (_jsx(TextTableCell, { children: _jsx("span", { children: receiptId }) })) : (_jsx(TableCell, Object.assign({ component: "div" }, { children: _jsx(Tooltip, Object.assign({ title: `Receipt - ${receiptId}` }, { children: _jsx(TextLabel, Object.assign({ sx: {
                     padding: '3px 8px',
                     maxWidth: '50px',

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

@@ -1,3 +1,3 @@
 import type { ReferenceCellProps } from './type';
-declare function ReferenceCell({ isTextShown, ...props }: ReferenceCellProps): import("react/jsx-runtime").JSX.Element;
+declare function ReferenceCell({ isTextShown, tableMode, ...props }: ReferenceCellProps): import("react/jsx-runtime").JSX.Element;
 export default ReferenceCell;

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

@@ -16,10 +16,12 @@ import startCase from 'lodash/startCase';
 import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
-import { referenceIcons } from './constant';
+import StatusChip from '../../../StatusChip';
+import { referenceIcons, REFERENCE_ORDER, REFERENCE_WIDTH_MAP } from './constant';
 import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, StyledSourceImage, referenceSourceAnimation, } from './style';
+import { Box } from '@mui/material';
 function ReferenceCell(_a) {
-    var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
+    var { isTextShown, tableMode } = _a, props = __rest(_a, ["isTextShown", "tableMode"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
     const theme = useTheme();
     const references = useMemo(() => Object.keys(referenceIcons).filter((key) => !!props[key]), [props]);
@@ -34,6 +36,27 @@ function ReferenceCell(_a) {
                 } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(reference) }) })) : (_jsx(StyledSourceImage, { src: referenceIcons[reference], alt: reference, sx: Object.assign({}, (reference === 'order' && { width: '11.82px' })) })) })) }), `${reference}-${index}`));
     }), [props, references, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
+    if (tableMode === 'sheet') {
+        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, Object.assign({ sx: { gap: '4px', display: 'flex', flexWrap: 'nowrap' } }, { children: REFERENCE_ORDER.map((referenceKey) => {
+                    const referenceValue = props[referenceKey];
+                    const hasValue = !!referenceValue;
+                    const widthConfig = REFERENCE_WIDTH_MAP[referenceKey];
+                    return (_jsx(Box, Object.assign({ sx: {
+                            width: widthConfig.width,
+                            minWidth: widthConfig.width,
+                            maxWidth: widthConfig.width,
+                            flexShrink: 0,
+                        } }, { children: hasValue ? (_jsx(StatusChip, Object.assign({ sx: {
+                                maxWidth: '100%',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                boxSizing: 'border-box',
+                                display: 'inline-block',
+                                padding: '0.75px 12px',
+                            } }, { children: `${startCase(referenceKey)}: ${referenceValue}` }))) : null }), referenceKey));
+                }) })) })));
+    }
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,
                 } }, { children: ReferenceSources }))) : null }) })));

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

@@ -4,3 +4,8 @@ export declare const referenceIcons: {
     payment: string;
     order: string;
 };
+export type ReferenceFields = 'order' | 'payment' | 'acquirer' | 'generic' | 'merchant' | 'customer';
+export declare const REFERENCE_ORDER: ReferenceFields[];
+export declare const REFERENCE_WIDTH_MAP: Record<ReferenceFields, {
+    width: string;
+}>;

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

@@ -5,3 +5,12 @@ export const referenceIcons = {
     payment: transactionIcon,
     order: orderIcon,
 };
+export const REFERENCE_ORDER = ['order', 'payment', 'acquirer', 'generic', 'merchant', 'customer'];
+export const REFERENCE_WIDTH_MAP = {
+    order: { width: '185px' },
+    payment: { width: '190px' },
+    acquirer: { width: '146px' },
+    generic: { width: '130px' },
+    merchant: { width: '140px' },
+    customer: { width: '140px' },
+};

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

@@ -267,6 +267,7 @@ export declare const ReferenceSourcesContainer: import("@emotion/styled").Styled
 }, {}, {}>;
 export declare const ReferenceTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ReferenceTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReferenceEmptyPlaceholder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const referenceSourceAnimation: (index: number, shadow: string, xDelta?: number) => {
     start: {
         x: number;

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

@@ -34,6 +34,9 @@ export const ReferenceTextWrapper = styled('div')(() => ({
     justifyContent: 'center',
     paddingInline: '4px',
 }));
+export const ReferenceEmptyPlaceholder = styled('div')(() => ({
+    height: '18px',
+}));
 export const referenceSourceAnimation = (index, shadow, xDelta) => ({
     start: {
         x: index * 6,

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

@@ -2,9 +2,12 @@ import { TableCellProps } from '@mui/material/TableCell';
 import { referenceIcons } from './constant';
 export type ReferenceType = keyof typeof referenceIcons;
 export interface ReferenceCellProps extends TableCellProps {
-    generic?: string;
-    acquirer?: string;
     order?: string;
+    merchant?: string;
+    customer?: string;
+    acquirer?: string;
+    generic?: string;
     payment?: string;
     isTextShown?: boolean;
+    tableMode?: 'default' | 'text' | 'sheet';
 }

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface SheetViewIDButtonI {
+    rowId?: string;
+}
+declare function SheetViewIDButton({ rowId }: SheetViewIDButtonI): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SheetViewIDButton>;
+export default _default;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../../../Tooltip';
+import { greenCheckIcon } from '../../../../constants/index.js';
+import { copyText } from '../../../../utils/index.js';
+import { RowId, Button } from './style';
+function SheetViewIDButton({ rowId }) {
+    const [showCopy, setShowCopy] = useState(false);
+    const { t } = useTranslation();
+    const handleCopyRowId = () => {
+        if (rowId && !showCopy) {
+            setShowCopy(true);
+            copyText(rowId);
+            const timer = setTimeout(() => {
+                setShowCopy(false);
+            }, 2000);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    };
+    return (_jsx(Tooltip, Object.assign({ title: t('copy') }, { children: _jsxs(Button, Object.assign({ sx: { minWidth: '213px' }, onClick: handleCopyRowId }, { children: [_jsx(RowId, Object.assign({ style: { visibility: showCopy ? 'hidden' : 'visible' } }, { children: rowId })), showCopy && (_jsx(Box, Object.assign({ sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    } }, { children: _jsx(Box, { component: "img", src: greenCheckIcon, alt: "copied", sx: { width: 14, height: 14 } }) })))] })) })));
+}
+export default memo(SheetViewIDButton);

package/build/components/TableCells/CustomCells/SheetViewIDButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SheetViewIDButton';

package/build/components/TableCells/CustomCells/SheetViewIDButton/index.js

@@ -0,0 +1 @@
+export { default } from './SheetViewIDButton';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RowId: 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/SheetViewIDButton/style.js

@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+export const Button = styled('div')(({ theme }) => ({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    cursor: 'pointer',
+    justifyContent: 'center',
+    paddingInline: '8px',
+    borderRadius: '24px',
+    border: `1px solid ${theme.palette.divider}`,
+}));
+export const RowId = styled('div')(({ theme }) => ({
+    fontSize: '11px',
+    height: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    fontWeight: 400,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+}));

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

@@ -1,3 +1,3 @@
 import { SourceMergedCellProps } from './type';
-declare function SourceMergedCell({ icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed, ...props }: Readonly<SourceMergedCellProps>): import("react/jsx-runtime").JSX.Element;
+declare function SourceMergedCell({ icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed, tableMode, ...props }: Readonly<SourceMergedCellProps>): import("react/jsx-runtime").JSX.Element;
 export default SourceMergedCell;

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

@@ -12,17 +12,20 @@ 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 } = _a, props = __rest(_a, ["icons", "isTextShown", "centerIconKey", "collapsedViewIcon", "isReversed"]);
+    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();
@@ -35,9 +38,16 @@ function SourceMergedCell(_a) {
             });
             setIconMeasurements(new Map([...iconMeasurements, ...newMeasurements]));
         }, 50);
-    }, [iconsList, isTextShown, isHovering]);
+    }, [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',

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

@@ -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/SourceMergedCell/type.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { TableCellProps } from '@mui/material/TableCell';
-import { SourceMergedCellIcons } from '../../../../types/index.js';
+import { SourceMergedCellIcons, TableMode } from '../../../../types/index.js';
 import type { SxProps } from '@mui/material';
 export interface SourceMergedCellProps extends TableCellProps {
     icons: {
@@ -15,4 +15,5 @@ export interface SourceMergedCellProps extends TableCellProps {
     };
     isReversed?: boolean;
     sx?: SxProps;
+    tableMode?: TableMode;
 }

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

@@ -1,5 +1,5 @@
 import type { StatusCellProps } from './type';
-declare function StatusCell({ statuses, isTextShown, centerIconKey, xGap, ...props }: Readonly<StatusCellProps & {
+declare function StatusCell({ statuses, isTextShown, centerIconKey, xGap, tableMode, ...props }: Readonly<StatusCellProps & {
     isChargesService?: boolean;
     isAuthorizationsService?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;

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

@@ -11,12 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableCell } from '../../../TableCells';
+import StatusChip from '../../../StatusChip';
 import { StatusIcon, StatusContainer, StatusWrapper } from './style';
 import { getStatusesFilteredObject } from './utils';
 function StatusCell(_a) {
-    var { statuses, isTextShown, centerIconKey, xGap } = _a, props = __rest(_a, ["statuses", "isTextShown", "centerIconKey", "xGap"]);
-    const statusesFilteredObject = getStatusesFilteredObject(statuses);
+    var { statuses, isTextShown, centerIconKey, xGap, tableMode } = _a, props = __rest(_a, ["statuses", "isTextShown", "centerIconKey", "xGap", "tableMode"]);
+    const statusesFilteredObject = statuses ? getStatusesFilteredObject(statuses) : {};
     const statusesList = Object.values(statusesFilteredObject).filter(Boolean);
+    if (tableMode === 'sheet') {
+        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StatusContainer, { children: statusesList.map((status, index) => (_jsx(StatusChip, Object.assign({ borderColor: "transparent", padding: '0px' }, { children: status }), index))) }) })));
+    }
     const xGapValue = isTextShown ? xGap || 120 : 40;
     const centerIconIndex = centerIconKey ? Object.entries(statusesFilteredObject).findIndex(([key]) => key === centerIconKey) : 0;
     return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {

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

@@ -38,6 +38,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

@@ -82,6 +82,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.js

@@ -58,6 +58,7 @@ export const StatusWrapper = styled(motion.div)(({ statusesCount }) => ({
 }));
 export const StatusContainer = styled(motion.div)(() => ({
     display: 'flex',
+    gap: '4px',
     justifyContent: 'flex-start',
     alignItems: 'center',
     position: 'relative',

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

@@ -9,4 +9,5 @@ export interface StatusCellProps extends TableCellProps {
     isTextShown?: boolean;
     centerIconKey?: string;
     xGap?: number;
+    tableMode?: 'default' | 'text' | 'sheet';
 }

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

@@ -42,6 +42,7 @@ export * from './ApplicationStatusCell';
 export * from './SegmentsCell';
 export * from './MarketPlaceCell';
 export * from './IndividualsCell';
+export * from './SheetViewIDButton';
 export * from './BrandsCell';
 export * from './type';
 export * from './style';

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

@@ -42,6 +42,7 @@ export * from './ApplicationStatusCell';
 export * from './SegmentsCell';
 export * from './MarketPlaceCell';
 export * from './IndividualsCell';
+export * from './SheetViewIDButton';
 export * from './BrandsCell';
 export * from './type';
 export * from './style';