@tap-payments/os-micro-frontend-shared 0.0.197 → 0.0.199

package/build/components/StatusGroupChips/style.js

@@ -8,7 +8,6 @@ export const StyledContainer = styled(Box)(() => ({
 }));
 export const StyledStatusChip = styled(StatusChip)(() => ({
     padding: '0.75px 12px',
-    maxWidth: '120px',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',

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

@@ -1,3 +1,3 @@
 import { AmountCellProps } from '../type';
-declare function AmountCell({ conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode, ...props }: AmountCellProps): import("react/jsx-runtime").JSX.Element;
+declare function AmountCell({ conversionType, selectAmount, selectCurrency, requestAmount, requestCurrency, merchantAmount, merchantCurrency, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode, ...props }: AmountCellProps): import("react/jsx-runtime").JSX.Element;
 export default AmountCell;

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

@@ -17,10 +17,14 @@ import { getCurrenciesIcon } from '../../../../constants/index.js';
 import { formatAmountWithCurrency } from '../../../../utils/index.js';
 import { AmountCellContainer, ConversionBadge, CurrencySpan, DecimalSpan, FlagContainer } from './style';
 import { FlagIcon } from '../style';
+import { SheetviewAmountCell } from './SheetviewAmountCell';
 function AmountCell(_a) {
-    var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel", "isTextShown", "tableMode"]);
+    var { conversionType, selectAmount, selectCurrency, requestAmount, requestCurrency, merchantAmount, merchantCurrency, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode } = _a, props = __rest(_a, ["conversionType", "selectAmount", "selectCurrency", "requestAmount", "requestCurrency", "merchantAmount", "merchantCurrency", "amount", "currency", "tooltipLabel", "amountTooltipLabel", "isTextShown", "tableMode"]);
     const icon = currency && _jsx(FlagIcon, { src: getCurrenciesIcon(currency), alt: "customer icon" });
     const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, currency);
+    if (tableMode === 'sheet') {
+        return (_jsx(SheetviewAmountCell, { selectAmount: selectAmount, selectCurrency: selectCurrency, requestAmount: requestAmount, requestCurrency: requestCurrency, merchantAmount: merchantAmount, merchantCurrency: merchantCurrency }));
+    }
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionType && (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type" }, { children: conversionType }))) })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: isTextShown ? _jsx("span", {}) : _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencySpan, Object.assign({ tableMode: tableMode }, { children: amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, decimalAmount && (_jsxs(_Fragment, { children: [".", _jsx(DecimalSpan, { children: decimalAmount })] }))] })) : (_jsx("span", { children: "-" })) })) }))] }) })));
 }
 export default AmountCell;

package/build/components/TableCells/CustomCells/AmountCell/SheetviewAmountCell.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    selectAmount?: number;
+    selectCurrency?: string;
+    requestAmount?: number;
+    requestCurrency?: string;
+    merchantAmount?: number;
+    merchantCurrency?: string;
+};
+export declare const SheetviewAmountCell: ({ selectAmount, selectCurrency, requestAmount, requestCurrency, merchantAmount, merchantCurrency }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/TableCells/CustomCells/AmountCell/SheetviewAmountCell.js

@@ -0,0 +1,32 @@
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { formatAmountWithCurrency } from '../../../../utils/index.js';
+import { CurrencyIcon, StatusGroupChips } from '../../../index.js';
+export const SheetviewAmountCell = ({ selectAmount, selectCurrency, requestAmount, requestCurrency, merchantAmount, merchantCurrency }) => {
+    const customerSelectValue = formatAmountWithCurrency(selectAmount, selectCurrency);
+    const chargeValue = formatAmountWithCurrency(requestAmount, requestCurrency);
+    const settlementValue = formatAmountWithCurrency(merchantAmount, merchantCurrency);
+    const { t } = useTranslation();
+    const chipSx = {
+        backgroundColor: '#EFF1F2',
+        border: 'none',
+    };
+    const chips = [
+        {
+            key: 'selected',
+            content: (_jsxs(_Fragment, { children: [_jsxs("span", { children: [t('customerSelected'), ": ", selectCurrency] }), customerSelectValue.integerAmount, ".", customerSelectValue.decimalAmount] })),
+            sx: chipSx,
+        },
+        {
+            key: 'charge',
+            content: (_jsxs(_Fragment, { children: [_jsxs("span", { children: [t('charge'), ": ", requestCurrency] }), chargeValue.integerAmount, ".", chargeValue.decimalAmount] })),
+            sx: chipSx,
+        },
+        {
+            key: 'settlement',
+            content: (_jsxs(_Fragment, { children: [_jsxs("span", { children: [t('settled'), ":"] }), _jsx(CurrencyIcon, { currency: merchantCurrency }), settlementValue.integerAmount, ".", settlementValue.decimalAmount] })),
+            sx: chipSx,
+        },
+    ];
+    return _jsx(StatusGroupChips, { chips: chips });
+};

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

@@ -51,6 +51,12 @@ export interface AmountCellProps extends TableCellProps {
     currency?: string;
     conversionType?: 'fx' | 'dcc';
     amount?: number;
+    selectAmount?: number;
+    selectCurrency?: string;
+    requestAmount?: number;
+    requestCurrency?: string;
+    merchantAmount?: number;
+    merchantCurrency?: string;
     tooltipLabel?: React.ReactNode;
     amountTooltipLabel?: React.ReactNode;
     isTextShown?: boolean;

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

@@ -57,7 +57,7 @@ export declare const chargeTableCellWidth: {
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
-        readonly sheet: "141px";
+        readonly sheet: "550px";
     };
     readonly destinations: {
         readonly default: "70px";

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

@@ -57,7 +57,7 @@ export const chargeTableCellWidth = {
     amount: {
         default: '170px',
         text: '195px',
-        sheet: '141px',
+        sheet: '550px',
     },
     destinations: {
         default: '70px',

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.197",
+  "version": "0.0.199",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -90,7 +90,7 @@
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.2.2",
     "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "^7.7.0",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",