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

package/build/components/StatusChip/style.js

@@ -18,7 +18,7 @@ export const ChipStyled = styled(Box)((_a) => {
         alignItems: 'center',
         justifyContent: 'center',
         height: '18px',
-        padding: padding || `${theme.spacing(0.25)} ${theme.spacing(1.5)}`,
+        padding: padding || `${theme.spacing(0.5)} ${theme.spacing(1.5)}`,
         borderRadius: '30px',
         border: `1px solid ${borderColor}`,
         backgroundColor: bgColor,

package/build/components/StatusIcons/AuthorizedIcon/AuthorizedIcon.js

@@ -9,7 +9,7 @@ import { TextLabel } from '../../TableCells/CustomCells/style';
 export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode }) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (_jsx(Tooltip, Object.assign({ title: t(camelCase(authorizedStatus)) }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: Object.assign({ color: theme.palette.info.dark }, (tableMode === 'sheet' && {
+    return (_jsx(Tooltip, Object.assign({ title: tableMode === 'sheet' ? '' : t(camelCase(authorizedStatus)) }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: Object.assign({ color: theme.palette.info.dark }, (tableMode === 'sheet' && {
                 height: '18px',
             })) }, { children: t(camelCase(authorizedStatus)) }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
 };

package/build/components/StatusIcons/PayoutIcon/PayoutIcon.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { PayoutStatusType } from '../../TableCells';
+import { TableMode } from '../../../types/index.js';
 type PayoutIconProps = {
     iconStyles?: React.CSSProperties;
     payoutStatus?: PayoutStatusType;
     payoutTooltip?: React.ReactNode;
     isTextShown?: boolean;
+    tableMode?: TableMode;
 };
-export declare const PayoutIcon: ({ payoutStatus, isTextShown, payoutTooltip, iconStyles }: PayoutIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayoutIcon: ({ payoutStatus, tableMode, isTextShown, payoutTooltip, iconStyles }: PayoutIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/PayoutIcon/PayoutIcon.js

@@ -4,9 +4,14 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
 import { StatusIcon } from '../../TableCells/CustomCells/style';
 import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
-import { payoutStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
-export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles }) => {
+import { payoutStatusIcons, payoutStatusStyles } from '../../TableCells/CustomCells/StatusCell/constant';
+import { StatusChip } from '../../index.js';
+export const PayoutIcon = ({ payoutStatus = 'PENDING', tableMode, isTextShown, payoutTooltip, iconStyles }) => {
     const { t } = useTranslation();
+    const payoutStatusStyle = payoutStatusStyles[payoutStatus];
+    if (tableMode === 'sheet') {
+        return _jsx(StatusChip, Object.assign({ sx: Object.assign({}, payoutStatusStyle) }, { children: t(camelCase(payoutStatus)) }));
+    }
     const title = payoutTooltip ? payoutTooltip : t(camelCase(payoutStatus));
     return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_PayoutStatusLabel" }, { children: t(camelCase(payoutStatus)) }))) : (_jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon", "data-testid": "StatusCell_PayoutStatusIcon", style: iconStyles })) })));
 };

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

@@ -38,7 +38,10 @@ 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]);
-    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({ tableMode: tableMode, "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: {
+    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/OrderCell/OrderCell.js

@@ -23,7 +23,7 @@ function OrderCell(_a) {
             return _jsx("div", { children: truncatedItemContent }, item.id);
         }) }));
     if (tableMode === 'sheet') {
-        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx("span", { children: orderLabel }) })));
+        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 }) })) })));
 }

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

@@ -17,9 +17,9 @@ import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
 import StatusChip from '../../../StatusChip';
-import { referenceIcons } from './constant';
-import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, StyledSourceImage, ReferenceSheetContainer, ReferenceEmptyPlaceholder, referenceSourceAnimation, } from './style';
-const REFERENCE_ORDER = ['order', 'payment', 'acquirer', 'generic', 'merchant', 'customer'];
+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, tableMode } = _a, props = __rest(_a, ["isTextShown", "tableMode"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -37,11 +37,25 @@ function ReferenceCell(_a) {
     }), [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, { children: REFERENCE_ORDER.map((referenceKey) => {
+        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;
-                    return (_jsx(ReferenceSheetContainer, { children: hasValue ? _jsx(StatusChip, Object.assign({ width: '100%' }, { children: `${startCase(referenceKey)}: ${referenceValue}` })) : _jsx(ReferenceEmptyPlaceholder, {}) }, referenceKey));
-                }) }) })));
+                    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,

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,7 +267,6 @@ 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 ReferenceSheetContainer: 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: {

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

@@ -34,10 +34,6 @@ export const ReferenceTextWrapper = styled('div')(() => ({
     justifyContent: 'center',
     paddingInline: '4px',
 }));
-export const ReferenceSheetContainer = styled('div')(() => ({
-    minWidth: '200px',
-    maxWidth: '250px',
-}));
 export const ReferenceEmptyPlaceholder = styled('div')(() => ({
     height: '18px',
 }));

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/constants/table/cell/chargeTableCellWidth.d.ts

@@ -27,7 +27,7 @@ export declare const chargeTableCellWidth: {
     readonly reference: {
         readonly default: "95px";
         readonly text: "180px";
-        readonly sheet: "550px";
+        readonly sheet: "985px";
     };
     readonly order: {
         readonly default: "80px";

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

@@ -27,7 +27,7 @@ export const chargeTableCellWidth = {
     reference: {
         default: '95px',
         text: '180px',
-        sheet: '550px',
+        sheet: '985px',
     },
     order: {
         default: '80px',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.129-sheetview-component-ui-v1",
+  "version": "0.0.129-sheetview-component-ui-v2",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",