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

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

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
 import { type ChargeStatus } from '../../TableCells';
-export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, }: Readonly<{
+import { TableMode } from '../../../types/index.js';
+export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, tableMode, showBadge, }: Readonly<{
     chargeStatus?: ChargeStatus;
     gatewayTooltip?: string;
     showAuthorizedStatus?: boolean;
@@ -17,4 +18,5 @@ export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquire
     gatewayContainerStyles?: CSSProperties;
     gateWayIconStyles?: CSSProperties;
     showBadge?: boolean;
+    tableMode?: TableMode;
 }>): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.js

@@ -5,17 +5,22 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
 import { unCapturedStatuses } from '../../../constants/index.js';
 import { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
-import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
+import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons, sheetViewChipStyles, } from '../../TableCells/CustomCells/StatusCell/constant';
 import { StatusIcon, StatusIconWrapper, TextLabel } from '../../TableCells/CustomCells/style';
-export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, }) {
+import StatusChip from '../../StatusChip';
+export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, tableMode, showBadge = true, }) {
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const captureStatusStyle = chargeStatus ? capturedStatusesStyles[chargeStatus] : null;
+    const sheetViewStatusStyle = chargeStatus ? sheetViewChipStyles[chargeStatus] : null;
     const theme = useTheme();
     const { t } = useTranslation();
     const chargeTooltipTitle = chargeTooltip && (_jsx(_Fragment, { children: _jsx("div", { children: chargeTooltip }) }));
     const acquirerTooltipTitle = acquirerTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Acquirer" }), _jsx("div", { children: acquirerTooltip })] }));
     const gatewayTooltipTitle = gatewayTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Gateway" }), _jsx("div", { children: gatewayTooltip })] }));
     const chargeIcon = chargeStatus && statusIcons[chargeStatus] && (_jsx("div", Object.assign({ "data-testid": "ChargeStatusIcon_ChargeIcon", style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '16px', height: '16px', borderRadius: unCapturedStatusStyle ? '50%' : '' }, iconWrapperStyles) }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", "data-testid": "ChargeStatusIcon_StatusIcon", style: Object.assign({ borderRadius: unCapturedStatusStyle ? '50%' : '', width: '16px', height: '16px' }, iconStyles) }) })));
+    if (tableMode === 'sheet') {
+        return _jsx(StatusChip, Object.assign({ sx: Object.assign({}, sheetViewStatusStyle) }, { children: t(camelCase(chargeStatus)) }));
+    }
     if (isTextShown) {
         return (_jsxs(TextViewWrapper, { children: [_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle }, { children: _jsxs(StatusTextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(chargeStatus), sx: {
                             background: (unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background) || (captureStatusStyle === null || captureStatusStyle === void 0 ? void 0 : captureStatusStyle.background) || 'transparent',

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

@@ -7,7 +7,7 @@ export const StyledCustomerCell = styled('span')(({ theme }) => ({
 }));
 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' }))));
+})(({ theme, tableMode }) => (Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '25ch', flex: 1 }, (tableMode === 'sheet' && { fontSize: '11px', color: theme.palette.text.primary }))));
 export const StyledCustomerIconContainer = styled('span')({
     width: '11.6px',
     height: '11.6px',

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

@@ -8,9 +8,9 @@ export const referenceIcons = {
 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' },
+    payment: { width: '205px' },
+    acquirer: { width: '155px' },
+    generic: { width: '166px' },
     merchant: { width: '140px' },
     customer: { width: '140px' },
 };

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;

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,

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

@@ -72,7 +72,7 @@ export declare const chargeTableCellWidth: {
     readonly status: {
         readonly default: "70px";
         readonly text: "300px";
-        readonly sheet: "400px";
+        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

@@ -72,7 +72,7 @@ export const chargeTableCellWidth = {
     status: {
         default: '70px',
         text: '300px',
-        sheet: '400px',
+        sheet: '385px',
     },
     merchant: {
         default: '100px',
@@ -107,7 +107,7 @@ export const chargeTableCellWidth = {
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '235px',
+        sheet: '245px',
     },
     settlement: {
         default: '200px',

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-v2",
+  "version": "0.0.129-sheetview-component-ui-v4",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",