@tap-payments/os-micro-frontend-shared 0.1.145-test.4 → 0.1.145
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/AppServices/AppServices.js +3 -3
- package/build/components/AppServicesBar/AppServicesBar.js +1 -1
- package/build/components/TableCells/CustomCells/AmountCell/AmountCell.d.ts +2 -2
- package/build/components/TableCells/CustomCells/AmountCell/AmountCell.js +19 -7
- package/build/components/TableCells/CustomCells/AmountCell/{components/AmountConversionTooltipLabel.js → AmountConversionTooltipLabel.js} +3 -3
- package/build/components/TableCells/CustomCells/AmountCell/index.d.ts +1 -3
- package/build/components/TableCells/CustomCells/AmountCell/index.js +1 -3
- package/build/components/TableCells/CustomCells/BalanceCell/BalanceCell.d.ts +1 -1
- package/build/components/TableCells/CustomCells/BalanceCell/BalanceCell.js +15 -10
- package/build/components/TableCells/CustomCells/BalanceCell/index.d.ts +0 -2
- package/build/components/TableCells/CustomCells/BalanceCell/index.js +0 -2
- package/build/components/TableCells/CustomCells/BalanceCell/type.d.ts +5 -7
- package/build/components/TableCells/CustomCells/CustomerCell/CustomerCell.d.ts +2 -2
- package/build/components/TableCells/CustomCells/CustomerCell/CustomerCell.js +5 -2
- package/build/components/TableCells/CustomCells/CustomerCell/index.d.ts +0 -1
- package/build/components/TableCells/CustomCells/CustomerCell/index.js +0 -1
- package/build/components/TableCells/CustomCells/CustomerCell/type.d.ts +0 -15
- package/build/components/TableCells/CustomCells/DestinationCell/DestinationCell.d.ts +2 -2
- package/build/components/TableCells/CustomCells/DestinationCell/DestinationCell.js +31 -5
- package/build/components/TableCells/CustomCells/DestinationCell/index.d.ts +0 -2
- package/build/components/TableCells/CustomCells/DestinationCell/index.js +0 -2
- package/build/components/TableCells/CustomCells/OrderCell/OrderCell.d.ts +1 -1
- package/build/components/TableCells/CustomCells/OrderCell/OrderCell.js +4 -1
- package/build/components/TableCells/CustomCells/OrderCell/index.d.ts +0 -1
- package/build/components/TableCells/CustomCells/OrderCell/index.js +0 -1
- package/build/components/TableCells/CustomCells/ReceiptCell/ReceiptCell.d.ts +5 -2
- package/build/components/TableCells/CustomCells/ReceiptCell/ReceiptCell.js +7 -3
- package/build/components/TableCells/CustomCells/ReceiptCell/index.d.ts +0 -2
- package/build/components/TableCells/CustomCells/ReceiptCell/index.js +0 -2
- package/build/components/TableCells/CustomCells/type.d.ts +65 -2
- package/package.json +3 -3
- package/build/components/TableCells/CustomCells/AmountCell/AmountCellSheet.d.ts +0 -3
- package/build/components/TableCells/CustomCells/AmountCell/AmountCellSheet.js +0 -10
- package/build/components/TableCells/CustomCells/AmountCell/AmountCellText.d.ts +0 -3
- package/build/components/TableCells/CustomCells/AmountCell/AmountCellText.js +0 -23
- package/build/components/TableCells/CustomCells/AmountCell/components/ConversionTypeLabel.d.ts +0 -7
- package/build/components/TableCells/CustomCells/AmountCell/components/ConversionTypeLabel.js +0 -7
- package/build/components/TableCells/CustomCells/AmountCell/components/CurrencyInfo.d.ts +0 -7
- package/build/components/TableCells/CustomCells/AmountCell/components/CurrencyInfo.js +0 -8
- package/build/components/TableCells/CustomCells/AmountCell/components/index.d.ts +0 -3
- package/build/components/TableCells/CustomCells/AmountCell/components/index.js +0 -3
- package/build/components/TableCells/CustomCells/AmountCell/type.d.ts +0 -22
- package/build/components/TableCells/CustomCells/AmountCell/type.js +0 -1
- package/build/components/TableCells/CustomCells/BalanceCell/BalanceCellSheet.d.ts +0 -3
- package/build/components/TableCells/CustomCells/BalanceCell/BalanceCellSheet.js +0 -12
- package/build/components/TableCells/CustomCells/BalanceCell/BalanceCellText.d.ts +0 -3
- package/build/components/TableCells/CustomCells/BalanceCell/BalanceCellText.js +0 -44
- package/build/components/TableCells/CustomCells/CustomerCell/CustomerCellSheet.d.ts +0 -3
- package/build/components/TableCells/CustomCells/CustomerCell/CustomerCellSheet.js +0 -8
- package/build/components/TableCells/CustomCells/DestinationCell/DestinationCellSheet.d.ts +0 -3
- package/build/components/TableCells/CustomCells/DestinationCell/DestinationCellSheet.js +0 -31
- package/build/components/TableCells/CustomCells/DestinationCell/DestinationCellText.d.ts +0 -3
- package/build/components/TableCells/CustomCells/DestinationCell/DestinationCellText.js +0 -35
- package/build/components/TableCells/CustomCells/DestinationCell/type.d.ts +0 -34
- package/build/components/TableCells/CustomCells/DestinationCell/type.js +0 -1
- package/build/components/TableCells/CustomCells/OrderCell/OrderCellSheet.d.ts +0 -3
- package/build/components/TableCells/CustomCells/OrderCell/OrderCellSheet.js +0 -20
- package/build/components/TableCells/CustomCells/ReceiptCell/ReceiptCellSheet.d.ts +0 -2
- package/build/components/TableCells/CustomCells/ReceiptCell/ReceiptCellSheet.js +0 -5
- package/build/components/TableCells/CustomCells/ReceiptCell/ReceiptCellText.d.ts +0 -2
- package/build/components/TableCells/CustomCells/ReceiptCell/ReceiptCellText.js +0 -5
- package/build/components/TableCells/CustomCells/ReceiptCell/type.d.ts +0 -3
- package/build/components/TableCells/CustomCells/ReceiptCell/type.js +0 -1
- /package/build/components/TableCells/CustomCells/AmountCell/{components/AmountConversionTooltipLabel.d.ts → AmountConversionTooltipLabel.d.ts} +0 -0
|
@@ -47,14 +47,14 @@ function AppServices({ isMaximized, serviceCode, dimensions, appCode, services,
|
|
|
47
47
|
setInitServicesWidth(((_a = servicesRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) + iconSize + iconGap + iconMargin);
|
|
48
48
|
}, []);
|
|
49
49
|
useEffect(() => {
|
|
50
|
-
setIsDropdown(Number(dimensions
|
|
51
|
-
}, [dimensions
|
|
50
|
+
setIsDropdown(Number(dimensions.width) < initServicesWidth + 10);
|
|
51
|
+
}, [dimensions.width, initServicesWidth]);
|
|
52
52
|
const navigateToService = (newServiceCode) => {
|
|
53
53
|
onChangeServiceCode === null || onChangeServiceCode === void 0 ? void 0 : onChangeServiceCode(newServiceCode);
|
|
54
54
|
setOpenDropdown(false);
|
|
55
55
|
};
|
|
56
56
|
const renderValue = (selected) => _jsx(StyledSelectComponent, { children: selected });
|
|
57
|
-
return (_jsxs(Wrapper, Object.assign({ maximized: isMaximized }, { children: [!!
|
|
57
|
+
return (_jsxs(Wrapper, Object.assign({ maximized: isMaximized }, { children: [!!services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { activeCode: serviceCode, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), !!services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
|
|
58
58
|
anchorOrigin: {
|
|
59
59
|
vertical: 40,
|
|
60
60
|
horizontal: 83,
|
|
@@ -11,7 +11,7 @@ function AppServicesBar({ appCode, services, isMaximized, dimensions, serviceCod
|
|
|
11
11
|
const onPointerUp = () => {
|
|
12
12
|
setIsDragging(false);
|
|
13
13
|
};
|
|
14
|
-
if (!appCode || !
|
|
14
|
+
if (!appCode || !services.length)
|
|
15
15
|
return null;
|
|
16
16
|
return (_jsx(StyledAppHeaderWrapper, Object.assign({ id: "app-header-wrapper", onPointerDown: onPointerDown, onPointerUp: onPointerUp, isDragging: isDragging, sx: sx }, { children: _jsx(AppServices, { onClickServiceItem: onClickServiceItem, dimensions: { width: dimensions.width }, serviceCode: serviceCode, services: services, isMaximized: isMaximized, appCode: appCode, onChangeServiceCode: onChangeServiceCode }) })));
|
|
17
17
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { AmountCellProps } from '
|
|
2
|
-
declare function AmountCell({ conversionType, amount, currency, tooltipLabel, amountTooltipLabel, ...props }: AmountCellProps): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { AmountCellProps } from '../type';
|
|
2
|
+
declare function AmountCell({ conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode, selectionProps, chipIndex, ...props }: AmountCellProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default AmountCell;
|
|
@@ -9,18 +9,30 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { useMemo } from 'react';
|
|
13
14
|
import { TableCell } from '../../../TableCells';
|
|
14
15
|
import Tooltip from '../../../Tooltip';
|
|
15
|
-
import { CurrencyIcon } from '../../../index.js';
|
|
16
|
+
import { CurrencyIcon, StatusChipWithCopy } from '../../../index.js';
|
|
16
17
|
import { getCurrenciesIcon } from '../../../../constants/index.js';
|
|
17
|
-
import {
|
|
18
|
+
import { formatAmountWithCurrency } from '../../../../utils/index.js';
|
|
19
|
+
import { AmountCellContainer, ConversionBadge, CurrencySpan, DecimalSpan, FlagContainer } from './style';
|
|
18
20
|
import { FlagIcon } from '../style';
|
|
19
|
-
import { ConversionTypeLabel, CurrencyInfo } from './components';
|
|
20
|
-
const tableMode = 'default';
|
|
21
21
|
function AmountCell(_a) {
|
|
22
|
-
var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel"]);
|
|
22
|
+
var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel, isTextShown, tableMode, selectionProps = {}, chipIndex = 0 } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel", "isTextShown", "tableMode", "selectionProps", "chipIndex"]);
|
|
23
23
|
const icon = currency && _jsx(FlagIcon, { src: getCurrenciesIcon(currency), alt: "customer icon" });
|
|
24
|
-
|
|
24
|
+
const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, currency);
|
|
25
|
+
const conversionTypeLabel = useMemo(() => {
|
|
26
|
+
if (!conversionType)
|
|
27
|
+
return _jsx(_Fragment, {});
|
|
28
|
+
return (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type" }, { children: conversionType })));
|
|
29
|
+
}, [conversionType, tableMode]);
|
|
30
|
+
const currencyInfo = useMemo(() => {
|
|
31
|
+
return (_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: "-" })) })));
|
|
32
|
+
}, [amount, tableMode, currency, integerAmount, decimalAmount]);
|
|
33
|
+
if (tableMode === 'sheet') {
|
|
34
|
+
return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: amount ? `${integerAmount}.${decimalAmount}` : '-', selectionProps: selectionProps }, { children: [conversionTypeLabel, currencyInfo] })));
|
|
35
|
+
}
|
|
36
|
+
return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionTypeLabel })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: isTextShown ? _jsx("span", {}) : _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: currencyInfo }))] }) })));
|
|
25
37
|
}
|
|
26
38
|
export default AmountCell;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { conversionTypesLabels, formatAmountWithCurrency } from '
|
|
3
|
-
import { CurrencyIcon } from '
|
|
4
|
-
import { ConversionTooltip, ConversionTooltipRow } from '
|
|
2
|
+
import { conversionTypesLabels, formatAmountWithCurrency } from '../../../../utils/index.js';
|
|
3
|
+
import { CurrencyIcon } from '../../../index.js';
|
|
4
|
+
import { ConversionTooltip, ConversionTooltipRow } from './style';
|
|
5
5
|
export const AmountConversionTooltipLabel = ({ type, selectAmount, selectCurrency, requestAmount, requestCurrency, merchantAmount, merchantCurrency, }) => {
|
|
6
6
|
const customerSelectValue = formatAmountWithCurrency(selectAmount, selectCurrency);
|
|
7
7
|
const chargeValue = formatAmountWithCurrency(requestAmount, requestCurrency);
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
export { default as AmountCell } from './AmountCell';
|
|
2
|
-
export { AmountConversionTooltipLabel } from './
|
|
3
|
-
export { default as AmountCellText } from './AmountCellText';
|
|
4
|
-
export { default as AmountCellSheet } from './AmountCellSheet';
|
|
2
|
+
export { AmountConversionTooltipLabel } from './AmountConversionTooltipLabel';
|
|
5
3
|
export * from './style';
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
export { default as AmountCell } from './AmountCell';
|
|
2
|
-
export { AmountConversionTooltipLabel } from './
|
|
3
|
-
export { default as AmountCellText } from './AmountCellText';
|
|
4
|
-
export { default as AmountCellSheet } from './AmountCellSheet';
|
|
2
|
+
export { AmountConversionTooltipLabel } from './AmountConversionTooltipLabel';
|
|
5
3
|
export * from './style';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { BalanceCellProps } from './type';
|
|
2
|
-
declare function BalanceCell({ percentage, days, remainingAmount, currency, ...props }: BalanceCellProps): import("react/jsx-runtime").JSX.Element | null;
|
|
2
|
+
declare function BalanceCell({ percentage, days, remainingAmount, currency, isTextShown, isSheetViewShown, selectionProps, ...props }: BalanceCellProps): import("react/jsx-runtime").JSX.Element | null;
|
|
3
3
|
export default BalanceCell;
|
|
@@ -15,13 +15,13 @@ import { useTheme } from '@mui/material/styles';
|
|
|
15
15
|
import { motion } from 'framer-motion';
|
|
16
16
|
import Tooltip from '../../../Tooltip';
|
|
17
17
|
import { TableCell } from '../../../TableCells';
|
|
18
|
-
import { CurrencyIcon } from '../../../index.js';
|
|
18
|
+
import { CurrencyIcon, StatusChipWithCopy } from '../../../index.js';
|
|
19
19
|
import { formatAmountWithCurrency } from '../../../../utils/index.js';
|
|
20
20
|
import { BalanceCellContainer, PercentageContainer } from './style';
|
|
21
21
|
import { formatPercentage } from './utils';
|
|
22
|
-
import { PiePercentage } from '../style';
|
|
22
|
+
import { TextLabel, PiePercentage } from '../style';
|
|
23
23
|
function BalanceCell(_a) {
|
|
24
|
-
var { percentage, days, remainingAmount, currency } = _a, props = __rest(_a, ["percentage", "days", "remainingAmount", "currency"]);
|
|
24
|
+
var { percentage, days, remainingAmount, currency, isTextShown, isSheetViewShown, selectionProps = {} } = _a, props = __rest(_a, ["percentage", "days", "remainingAmount", "currency", "isTextShown", "isSheetViewShown", "selectionProps"]);
|
|
25
25
|
const theme = useTheme();
|
|
26
26
|
const currencyIcon = _jsx(CurrencyIcon, { currency: currency });
|
|
27
27
|
const { integerAmount, decimalAmount } = formatAmountWithCurrency(remainingAmount, currency);
|
|
@@ -29,20 +29,25 @@ function BalanceCell(_a) {
|
|
|
29
29
|
const generatedTooltip = useMemo(() => {
|
|
30
30
|
return (_jsxs(_Fragment, { children: ["Remaining Authorized Balance - ", currencyIcon, " ", amount] }));
|
|
31
31
|
}, [remainingAmount, currency]);
|
|
32
|
-
if (
|
|
33
|
-
|
|
32
|
+
if (isSheetViewShown) {
|
|
33
|
+
if (percentage === 0)
|
|
34
|
+
return null;
|
|
35
|
+
return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: 0, copyText: `${integerAmount}.${decimalAmount}`, selectionProps: selectionProps }, { children: [percentage, "% | Remaining balance - ", currencyIcon, " ", amount] })));
|
|
36
|
+
}
|
|
34
37
|
return (_jsx(TableCell, Object.assign({}, props, { children: _jsx("div", Object.assign({ style: {
|
|
35
38
|
display: 'flex',
|
|
36
39
|
alignItems: 'center',
|
|
37
40
|
justifyContent: 'flex-start',
|
|
38
41
|
gap: '8px',
|
|
39
|
-
} }, { children: _jsx(Tooltip, Object.assign({ title: generatedTooltip }, { children: _jsxs(BalanceCellContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", sx: {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
} }, { children: percentage !== 0 ? (_jsx(Tooltip, Object.assign({ title: generatedTooltip }, { children: _jsxs(BalanceCellContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", sx: Object.assign({ zIndex: 22 }, (isTextShown && {
|
|
43
|
+
height: 'auto',
|
|
44
|
+
padding: '0',
|
|
45
|
+
backgroundColor: `${theme.palette.grey.A700}1a`,
|
|
46
|
+
})), variants: Object.assign({}, (!isTextShown && {
|
|
42
47
|
animate: {
|
|
43
48
|
boxShadow: theme.shadows[4],
|
|
44
49
|
},
|
|
45
|
-
} }, { children: [_jsxs(PercentageContainer, Object.assign({ percentage: percentage }, { children: [percentage, "% ", _jsx(PiePercentage, { percentage: formatPercentage(percentage) })] })), _jsx(motion.div, Object.assign({ style: {
|
|
50
|
+
})) }, { children: [isTextShown ? (_jsxs(TextLabel, { children: [percentage, "%"] })) : (_jsxs(PercentageContainer, Object.assign({ percentage: percentage }, { children: [percentage, "% ", _jsx(PiePercentage, { percentage: formatPercentage(percentage) })] }))), !isTextShown && (_jsx(motion.div, Object.assign({ style: {
|
|
46
51
|
display: 'none',
|
|
47
52
|
alignItems: 'center',
|
|
48
53
|
justifyContent: 'center',
|
|
@@ -66,6 +71,6 @@ function BalanceCell(_a) {
|
|
|
66
71
|
},
|
|
67
72
|
opacity: 1,
|
|
68
73
|
},
|
|
69
|
-
} }, { children: days && _jsxs("span", { children: [days, " days left"] }) }))] })) })) })) })));
|
|
74
|
+
} }, { children: days && _jsxs("span", { children: [days, " days left"] }) })))] })) }))) : null })) })));
|
|
70
75
|
}
|
|
71
76
|
export default BalanceCell;
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { TableCellProps } from '@mui/material';
|
|
2
2
|
import { SelectionProps } from '../../../../types/index.js';
|
|
3
|
-
export interface
|
|
3
|
+
export interface BalanceCellProps extends TableCellProps {
|
|
4
4
|
percentage: number;
|
|
5
|
+
days?: number;
|
|
5
6
|
remainingAmount?: number;
|
|
6
7
|
currency?: string;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
export interface BalanceCellSheetProps extends BalanceCellCommonProps {
|
|
12
|
-
selectionProps: SelectionProps;
|
|
8
|
+
isTextShown?: boolean;
|
|
9
|
+
isSheetViewShown?: boolean;
|
|
10
|
+
selectionProps?: SelectionProps;
|
|
13
11
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type { CustomerCellProps } from '
|
|
2
|
-
declare function CustomerCell({ customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id, ...props }: Readonly<CustomerCellProps>): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import type { CustomerCellProps } from '../type';
|
|
2
|
+
declare function CustomerCell({ customerInitiated, children, isTimezoneIconShown, hasCustomerIcon, customerIcon, customerName, hideCustomerInitiatedIcon, hideTimezoneIcon, phone, email, id, tableMode, ...props }: Readonly<CustomerCellProps>): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default CustomerCell;
|
|
@@ -15,12 +15,12 @@ import { useTranslation } from 'react-i18next';
|
|
|
15
15
|
import Tooltip from '../../../Tooltip';
|
|
16
16
|
import { merchantInitiatedIcon, timezoneIcon } from '../../../../constants/index.js';
|
|
17
17
|
import { getRandomGradientColor, isArabic } from '../../../../utils/index.js';
|
|
18
|
-
import { TableCell } from '../../../TableCells';
|
|
19
18
|
import { StyledCustomerCell, StyledCustomerIcon, StyledCustomerIconContainer, StyledCustomerName } from './style';
|
|
19
|
+
import { TableCell } from '../../../TableCells';
|
|
20
20
|
import { AvatarStyled, StarBadgeWrapper } from '../style';
|
|
21
21
|
function CustomerCell(_a) {
|
|
22
22
|
var _b;
|
|
23
|
-
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"]);
|
|
23
|
+
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"]);
|
|
24
24
|
const { t } = useTranslation();
|
|
25
25
|
const customerInitiatedTooltip = customerInitiated === false ? t('merchantInitiated') : '';
|
|
26
26
|
const isArabicCustomerName = isArabic(customerName);
|
|
@@ -38,6 +38,9 @@ function CustomerCell(_a) {
|
|
|
38
38
|
return null;
|
|
39
39
|
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))) })));
|
|
40
40
|
}, [tooltipOptions]);
|
|
41
|
+
if (tableMode === 'sheet') {
|
|
42
|
+
return (_jsx(StyledCustomerName, Object.assign({ tableMode: tableMode, "data-testid": "CustomerCell_StyledCustomerName", "data-is-arabic": isArabicCustomerName }, { children: children })));
|
|
43
|
+
}
|
|
41
44
|
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: {
|
|
42
45
|
width: '16px',
|
|
43
46
|
height: '16px',
|
|
@@ -1,19 +1,4 @@
|
|
|
1
|
-
import type { TableCellProps } from '@mui/material';
|
|
2
1
|
export type TooltipOption = {
|
|
3
2
|
name: string;
|
|
4
3
|
value?: string;
|
|
5
4
|
};
|
|
6
|
-
export interface CustomerCellProps extends TableCellProps {
|
|
7
|
-
customerInitiated?: boolean;
|
|
8
|
-
flagIcon?: string;
|
|
9
|
-
isTimezoneIconShown?: boolean;
|
|
10
|
-
hasCustomerIcon?: boolean;
|
|
11
|
-
customerIcon?: string;
|
|
12
|
-
customerName: string;
|
|
13
|
-
hideCustomerInitiatedIcon?: boolean;
|
|
14
|
-
hideTimezoneIcon?: boolean;
|
|
15
|
-
email?: string;
|
|
16
|
-
phone?: string;
|
|
17
|
-
id?: string;
|
|
18
|
-
}
|
|
19
|
-
export type CustomerCellSheetProps = Pick<CustomerCellProps, 'customerName' | 'children'>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { DestinationCellProps } from '
|
|
2
|
-
declare function DestinationCell({ destinationsCount, destinationsTooltip, destination, destinationsAmount, hidden, iconDirection, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
|
|
1
|
+
import { DestinationCellProps } from '../type';
|
|
2
|
+
declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode, selectionProps, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
|
|
3
3
|
export default DestinationCell;
|
|
@@ -9,19 +9,45 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx,
|
|
12
|
+
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
13
|
import Box from '@mui/material/Box';
|
|
14
14
|
import Tooltip from '../../../Tooltip';
|
|
15
15
|
import { destinationSolidIcon } from '../../../../constants/index.js';
|
|
16
|
+
import { formatAmount } from '../../../../utils/index.js';
|
|
16
17
|
import { DestinationCellContainer, DestinationCount, StyledDestinationCell, StyledDestinationIcon } from './styled';
|
|
17
|
-
|
|
18
|
+
import { TextLabel } from '../style';
|
|
19
|
+
import { CurrencyIcon, StatusGroupChips } from '../../../index.js';
|
|
18
20
|
function DestinationCell(_a) {
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
+
var _b, _c, _d, _e, _f;
|
|
22
|
+
var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode, selectionProps } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode", "selectionProps"]);
|
|
23
|
+
const destinations = (destination === null || destination === void 0 ? void 0 : destination.destination) || [];
|
|
24
|
+
const formattedAmount = formatAmount(destinationsAmount || 0);
|
|
25
|
+
const firstDestinationFormattedAmount = formatAmount(((_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.amount) || 0);
|
|
26
|
+
const isSheetView = tableMode === 'sheet';
|
|
27
|
+
if (isSheetView) {
|
|
28
|
+
const sheetViewChips = destinations === null || destinations === void 0 ? void 0 : destinations.map((dest, index) => {
|
|
29
|
+
const formattedDestAmount = formatAmount((dest === null || dest === void 0 ? void 0 : dest.amount) || 0);
|
|
30
|
+
return {
|
|
31
|
+
key: `destination-${(dest === null || dest === void 0 ? void 0 : dest.id) || index}`,
|
|
32
|
+
content: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [dest === null || dest === void 0 ? void 0 : dest.id, " |"] }), _jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), _jsxs("span", { children: [formattedDestAmount.integerAmount, ".", formattedDestAmount.decimalAmount] })] })),
|
|
33
|
+
chipIndex: index,
|
|
34
|
+
selectionProps: selectionProps !== null && selectionProps !== void 0 ? selectionProps : {},
|
|
35
|
+
copyText: `${formattedDestAmount.integerAmount}.${formattedDestAmount.decimalAmount}`,
|
|
36
|
+
};
|
|
37
|
+
}, [selectionProps]);
|
|
38
|
+
return (_jsx(Box, Object.assign({}, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
|
|
39
|
+
}
|
|
40
|
+
if (!destinationsCount || hidden) {
|
|
21
41
|
return null;
|
|
42
|
+
}
|
|
43
|
+
const textView = (_jsx(TextLabel, Object.assign({ sx: {
|
|
44
|
+
textAlign: 'left',
|
|
45
|
+
justifyContent: 'flex-start',
|
|
46
|
+
height: 'auto',
|
|
47
|
+
} }, { 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] })) })));
|
|
22
48
|
return (_jsx(Box, Object.assign({ sx: {
|
|
23
49
|
width: 'fit-content',
|
|
24
50
|
overflow: 'visible',
|
|
25
|
-
} }, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: _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 }) })))] })) })) })));
|
|
51
|
+
} }, 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) })) })));
|
|
26
52
|
}
|
|
27
53
|
export default DestinationCell;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { OrderCellProps } from '../type';
|
|
2
|
-
declare function OrderCell({ value, label, items, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare function OrderCell({ value, label, items, tableMode, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default OrderCell;
|
|
@@ -14,7 +14,7 @@ import { TableCell } from '../../../TableCells';
|
|
|
14
14
|
import Tooltip from '../../../Tooltip';
|
|
15
15
|
import { MAX_TOOLTIP_ITEM_LENGTH } from './constant';
|
|
16
16
|
function OrderCell(_a) {
|
|
17
|
-
var { value, label, items } = _a, props = __rest(_a, ["value", "label", "items"]);
|
|
17
|
+
var { value, label, items, tableMode } = _a, props = __rest(_a, ["value", "label", "items", "tableMode"]);
|
|
18
18
|
const orderDiscriminator = Number.isInteger(value) && Number(value) > 1 && label.charAt(label.length - 1) !== 's' ? `${label}s` : label;
|
|
19
19
|
const orderLabel = `${value} ${orderDiscriminator}`;
|
|
20
20
|
const orderTooltip = (_jsx(_Fragment, { children: items === null || items === void 0 ? void 0 : items.map((item) => {
|
|
@@ -22,6 +22,9 @@ function OrderCell(_a) {
|
|
|
22
22
|
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;
|
|
23
23
|
return _jsx("div", { children: truncatedItemContent }, item.id);
|
|
24
24
|
}) }));
|
|
25
|
+
if (tableMode === 'sheet') {
|
|
26
|
+
return (_jsx(TableCell, Object.assign({ sx: { fontSize: '11px' } }, props, { children: orderLabel })));
|
|
27
|
+
}
|
|
25
28
|
return (_jsx(Tooltip, Object.assign({ title: (items || []).length > 1 ? orderTooltip : undefined }, { children: _jsx(TableCell, Object.assign({}, props, { children: _jsx("span", { children: orderLabel }) })) })));
|
|
26
29
|
}
|
|
27
30
|
export default OrderCell;
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
export declare const ReceiptCell: ({ receiptId, isTextShown, tableMode, }: {
|
|
2
|
+
receiptId: string;
|
|
3
|
+
isTextShown?: boolean | undefined;
|
|
4
|
+
tableMode?: "default" | "sheet" | "text" | undefined;
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { TableCell } from '@mui/material';
|
|
3
|
+
import { TextTableCell } from '..';
|
|
4
|
+
import { StyledTextTableCell, TextLabel } from '../style';
|
|
3
5
|
import Tooltip from '../../../Tooltip';
|
|
4
6
|
import { receiptBillIcon } from '../../../../constants/index.js';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
export const ReceiptCell = ({ receiptId, isTextShown, tableMode, }) => {
|
|
8
|
+
if (tableMode === 'sheet') {
|
|
9
|
+
return (_jsx(StyledTextTableCell, { children: _jsx("span", { children: receiptId }) }));
|
|
10
|
+
}
|
|
11
|
+
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: {
|
|
8
12
|
padding: '3px 8px',
|
|
9
13
|
maxWidth: '50px',
|
|
10
14
|
} }, { children: _jsx("img", { src: receiptBillIcon, alt: "receipt" }) })) })) })));
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { TableCellProps } from '@mui/material';
|
|
3
|
-
import type { Charge, TableMode } from '../../../types/index.js';
|
|
4
|
-
import { getGeographyBoxColor } from '../../../utils/index.js';
|
|
3
|
+
import type { Charge, SelectionProps, TableMode } from '../../../types/index.js';
|
|
5
4
|
import type { ActionType, FlagType } from './ActionCell';
|
|
5
|
+
import { getGeographyBoxColor } from '../../../utils/index.js';
|
|
6
6
|
export type GeographyBoxVariant = keyof ReturnType<typeof getGeographyBoxColor>;
|
|
7
7
|
export type PaymentMethod = 'VISA' | 'card' | 'MASTERCARD' | 'APPLE_PAY' | 'KNET' | 'MADA';
|
|
8
8
|
export interface DateCellProps extends TableCellProps {
|
|
@@ -20,6 +20,21 @@ export interface OrderCellProps extends TableCellProps {
|
|
|
20
20
|
description?: string;
|
|
21
21
|
name?: string;
|
|
22
22
|
}>;
|
|
23
|
+
tableMode?: TableMode;
|
|
24
|
+
}
|
|
25
|
+
export interface CustomerCellProps extends TableCellProps {
|
|
26
|
+
customerInitiated?: boolean;
|
|
27
|
+
flagIcon?: string;
|
|
28
|
+
isTimezoneIconShown?: boolean;
|
|
29
|
+
hasCustomerIcon?: boolean;
|
|
30
|
+
customerIcon?: string;
|
|
31
|
+
customerName: string;
|
|
32
|
+
hideCustomerInitiatedIcon?: boolean;
|
|
33
|
+
hideTimezoneIcon?: boolean;
|
|
34
|
+
email?: string;
|
|
35
|
+
phone?: string;
|
|
36
|
+
id?: string;
|
|
37
|
+
tableMode?: TableMode;
|
|
23
38
|
}
|
|
24
39
|
export interface SourceCellProps extends TableCellProps {
|
|
25
40
|
geographyVariant?: 'G' | 'L' | 'R';
|
|
@@ -32,6 +47,54 @@ export interface SourceCellProps extends TableCellProps {
|
|
|
32
47
|
showGeographyBox?: boolean;
|
|
33
48
|
customerInitiated?: boolean;
|
|
34
49
|
}
|
|
50
|
+
export interface AmountCellProps extends TableCellProps {
|
|
51
|
+
currency?: string;
|
|
52
|
+
conversionType?: 'fx' | 'dcc';
|
|
53
|
+
amount?: number;
|
|
54
|
+
selectAmount?: number;
|
|
55
|
+
selectCurrency?: string;
|
|
56
|
+
requestAmount?: number;
|
|
57
|
+
requestCurrency?: string;
|
|
58
|
+
merchantAmount?: number;
|
|
59
|
+
merchantCurrency?: string;
|
|
60
|
+
tooltipLabel?: React.ReactNode;
|
|
61
|
+
amountTooltipLabel?: React.ReactNode;
|
|
62
|
+
isTextShown?: boolean;
|
|
63
|
+
tableMode?: TableMode;
|
|
64
|
+
selectionProps?: SelectionProps;
|
|
65
|
+
chipIndex?: number;
|
|
66
|
+
}
|
|
67
|
+
export interface DestinationCellProps extends TableCellProps {
|
|
68
|
+
destinationsCount?: number;
|
|
69
|
+
flagIcon?: string;
|
|
70
|
+
destinationsTooltip?: React.ReactNode;
|
|
71
|
+
isTextShown?: boolean;
|
|
72
|
+
destinationsAmount?: number;
|
|
73
|
+
destination?: {
|
|
74
|
+
reverse_destinations?: boolean;
|
|
75
|
+
amount: number;
|
|
76
|
+
currency: string;
|
|
77
|
+
count: number;
|
|
78
|
+
destination: Array<{
|
|
79
|
+
id: string;
|
|
80
|
+
amount: number;
|
|
81
|
+
currency: string;
|
|
82
|
+
transfer?: {
|
|
83
|
+
id: string;
|
|
84
|
+
amount: number;
|
|
85
|
+
currency: string;
|
|
86
|
+
};
|
|
87
|
+
reverse_transfer?: {
|
|
88
|
+
id: string;
|
|
89
|
+
amount: number;
|
|
90
|
+
currency: string;
|
|
91
|
+
};
|
|
92
|
+
}>;
|
|
93
|
+
};
|
|
94
|
+
iconDirection?: 'left' | 'right';
|
|
95
|
+
tableMode?: TableMode;
|
|
96
|
+
selectionProps?: SelectionProps;
|
|
97
|
+
}
|
|
35
98
|
export interface ActionCellProps extends TableCellProps {
|
|
36
99
|
row?: unknown;
|
|
37
100
|
flag?: FlagType;
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/os-micro-frontend-shared",
|
|
3
3
|
"description": "Shared components and utilities for Tap Payments micro frontends",
|
|
4
|
-
"version": "0.1.145
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.145",
|
|
5
|
+
"testVersion": 0,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -163,4 +163,4 @@
|
|
|
163
163
|
"publishConfig": {
|
|
164
164
|
"registry": "https://registry.npmjs.org/"
|
|
165
165
|
}
|
|
166
|
-
}
|
|
166
|
+
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { StatusChipWithCopy } from '../../../index.js';
|
|
3
|
-
import { formatAmountWithCurrency } from '../../../../utils/index.js';
|
|
4
|
-
import { ConversionTypeLabel, CurrencyInfo } from './components';
|
|
5
|
-
const tableMode = 'sheet';
|
|
6
|
-
function AmountCellSheet({ conversionType, amount, currency, selectionProps = {}, chipIndex = 0 }) {
|
|
7
|
-
const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, currency);
|
|
8
|
-
return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: amount ? `${integerAmount}.${decimalAmount}` : '-', selectionProps: selectionProps }, { children: [_jsx(ConversionTypeLabel, { tableMode: tableMode, conversionType: conversionType }), _jsx(CurrencyInfo, { tableMode: tableMode, amount: amount, currency: currency })] })));
|
|
9
|
-
}
|
|
10
|
-
export default AmountCellSheet;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { TableCell } from '../../../TableCells';
|
|
14
|
-
import Tooltip from '../../../Tooltip';
|
|
15
|
-
import { CurrencyIcon } from '../../../index.js';
|
|
16
|
-
import { AmountCellContainer } from './style';
|
|
17
|
-
import { ConversionTypeLabel, CurrencyInfo } from './components';
|
|
18
|
-
const tableMode = 'text';
|
|
19
|
-
function AmountCellText(_a) {
|
|
20
|
-
var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel"]);
|
|
21
|
-
return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: _jsx(ConversionTypeLabel, { tableMode: tableMode, conversionType: conversionType }) })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: _jsx("span", {}) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencyInfo, { tableMode: tableMode, amount: amount, currency: currency }) }))] }) })));
|
|
22
|
-
}
|
|
23
|
-
export default AmountCellText;
|
package/build/components/TableCells/CustomCells/AmountCell/components/ConversionTypeLabel.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { TableMode } from '../../../../../types/index.js';
|
|
2
|
-
import { AmountCellProps } from '../type';
|
|
3
|
-
interface ConversionTypeLabelProps extends Pick<AmountCellProps, 'conversionType'> {
|
|
4
|
-
tableMode: TableMode;
|
|
5
|
-
}
|
|
6
|
-
export declare const ConversionTypeLabel: ({ tableMode, conversionType }: ConversionTypeLabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
package/build/components/TableCells/CustomCells/AmountCell/components/ConversionTypeLabel.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { ConversionBadge } from '../style';
|
|
3
|
-
export const ConversionTypeLabel = ({ tableMode, conversionType }) => {
|
|
4
|
-
if (!conversionType)
|
|
5
|
-
return _jsx(_Fragment, {});
|
|
6
|
-
return (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type" }, { children: conversionType })));
|
|
7
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { TableMode } from '../../../../../types/index.js';
|
|
2
|
-
import { AmountCellProps } from '../type';
|
|
3
|
-
interface CurrencyInfoProps extends Pick<AmountCellProps, 'amount' | 'currency'> {
|
|
4
|
-
tableMode: TableMode;
|
|
5
|
-
}
|
|
6
|
-
export declare const CurrencyInfo: ({ tableMode, amount, currency }: CurrencyInfoProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CurrencyIcon } from '../../../../index.js';
|
|
3
|
-
import { CurrencySpan, DecimalSpan } from '../style';
|
|
4
|
-
import { formatAmountWithCurrency } from '../../../../../utils/index.js';
|
|
5
|
-
export const CurrencyInfo = ({ tableMode, amount, currency }) => {
|
|
6
|
-
const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, currency);
|
|
7
|
-
return (_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: "-" })) })));
|
|
8
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { TableCellProps } from '@mui/material';
|
|
3
|
-
import { SelectionProps } from '../../../../types/index.js';
|
|
4
|
-
export interface AmountCellCommonProps extends TableCellProps {
|
|
5
|
-
currency?: string;
|
|
6
|
-
conversionType?: 'fx' | 'dcc';
|
|
7
|
-
amount?: number;
|
|
8
|
-
}
|
|
9
|
-
export interface AmountCellSheetProps extends AmountCellCommonProps {
|
|
10
|
-
selectionProps?: SelectionProps;
|
|
11
|
-
chipIndex?: number;
|
|
12
|
-
}
|
|
13
|
-
export interface AmountCellProps extends AmountCellCommonProps {
|
|
14
|
-
selectAmount?: number;
|
|
15
|
-
selectCurrency?: string;
|
|
16
|
-
requestAmount?: number;
|
|
17
|
-
requestCurrency?: string;
|
|
18
|
-
merchantAmount?: number;
|
|
19
|
-
merchantCurrency?: string;
|
|
20
|
-
tooltipLabel?: React.ReactNode;
|
|
21
|
-
amountTooltipLabel?: React.ReactNode;
|
|
22
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CurrencyIcon, StatusChipWithCopy } from '../../../index.js';
|
|
3
|
-
import { formatAmountWithCurrency } from '../../../../utils/index.js';
|
|
4
|
-
function BalanceCellSheet({ percentage, remainingAmount, currency, selectionProps }) {
|
|
5
|
-
const currencyIcon = _jsx(CurrencyIcon, { currency: currency });
|
|
6
|
-
const { integerAmount, decimalAmount } = formatAmountWithCurrency(remainingAmount, currency);
|
|
7
|
-
const amount = `${integerAmount}.${decimalAmount}`;
|
|
8
|
-
if (percentage === 0)
|
|
9
|
-
return null;
|
|
10
|
-
return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: 0, copyText: `${integerAmount}.${decimalAmount}`, selectionProps: selectionProps }, { children: [percentage, "% | Remaining balance - ", currencyIcon, " ", amount] })));
|
|
11
|
-
}
|
|
12
|
-
export default BalanceCellSheet;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { useMemo } from 'react';
|
|
14
|
-
import { useTheme } from '@mui/material/styles';
|
|
15
|
-
import Tooltip from '../../../Tooltip';
|
|
16
|
-
import { TableCell } from '../../../TableCells';
|
|
17
|
-
import { CurrencyIcon } from '../../../index.js';
|
|
18
|
-
import { formatAmountWithCurrency } from '../../../../utils/index.js';
|
|
19
|
-
import { BalanceCellContainer } from './style';
|
|
20
|
-
import { TextLabel } from '../style';
|
|
21
|
-
function BalanceCellText(_a) {
|
|
22
|
-
var { percentage, days, remainingAmount, currency } = _a, props = __rest(_a, ["percentage", "days", "remainingAmount", "currency"]);
|
|
23
|
-
const theme = useTheme();
|
|
24
|
-
const currencyIcon = _jsx(CurrencyIcon, { currency: currency });
|
|
25
|
-
const { integerAmount, decimalAmount } = formatAmountWithCurrency(remainingAmount, currency);
|
|
26
|
-
const amount = `${integerAmount}.${decimalAmount}`;
|
|
27
|
-
const generatedTooltip = useMemo(() => {
|
|
28
|
-
return (_jsxs(_Fragment, { children: ["Remaining Authorized Balance - ", currencyIcon, " ", amount] }));
|
|
29
|
-
}, [remainingAmount, currency]);
|
|
30
|
-
if (percentage === 0)
|
|
31
|
-
return null;
|
|
32
|
-
return (_jsx(TableCell, Object.assign({}, props, { children: _jsx("div", Object.assign({ style: {
|
|
33
|
-
display: 'flex',
|
|
34
|
-
alignItems: 'center',
|
|
35
|
-
justifyContent: 'flex-start',
|
|
36
|
-
gap: '8px',
|
|
37
|
-
} }, { children: _jsx(Tooltip, Object.assign({ title: generatedTooltip }, { children: _jsx(BalanceCellContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", sx: {
|
|
38
|
-
zIndex: 22,
|
|
39
|
-
height: 'auto',
|
|
40
|
-
padding: '0',
|
|
41
|
-
backgroundColor: `${theme.palette.grey.A700}1a`,
|
|
42
|
-
} }, { children: _jsxs(TextLabel, { children: [percentage, "%"] }) })) })) })) })));
|
|
43
|
-
}
|
|
44
|
-
export default BalanceCellText;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { isArabic } from '../../../../utils/index.js';
|
|
3
|
-
import { StyledCustomerName } from './style';
|
|
4
|
-
function CustomerCellSheet({ children, customerName }) {
|
|
5
|
-
const isArabicCustomerName = isArabic(customerName);
|
|
6
|
-
return (_jsx(StyledCustomerName, Object.assign({ tableMode: "sheet", "data-testid": "CustomerCell_StyledCustomerName", "data-is-arabic": isArabicCustomerName }, { children: children })));
|
|
7
|
-
}
|
|
8
|
-
export default CustomerCellSheet;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { DestinationCellSheetProps } from './type';
|
|
2
|
-
declare function DestinationCellSheet({ destinationsCount, destinationsTooltip, destination, destinationsAmount, hidden, iconDirection, selectionProps, ...props }: DestinationCellSheetProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
export default DestinationCellSheet;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
-
import Box from '@mui/material/Box';
|
|
14
|
-
import { formatAmount } from '../../../../utils/index.js';
|
|
15
|
-
import { CurrencyIcon, StatusGroupChips } from '../../../index.js';
|
|
16
|
-
function DestinationCellSheet(_a) {
|
|
17
|
-
var { destinationsCount, destinationsTooltip, destination, destinationsAmount, hidden, iconDirection, selectionProps } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "destination", "destinationsAmount", "hidden", "iconDirection", "selectionProps"]);
|
|
18
|
-
const destinations = (destination === null || destination === void 0 ? void 0 : destination.destination) || [];
|
|
19
|
-
const sheetViewChips = destinations === null || destinations === void 0 ? void 0 : destinations.map((dest, index) => {
|
|
20
|
-
const formattedDestAmount = formatAmount((dest === null || dest === void 0 ? void 0 : dest.amount) || 0);
|
|
21
|
-
return {
|
|
22
|
-
key: `destination-${(dest === null || dest === void 0 ? void 0 : dest.id) || index}`,
|
|
23
|
-
content: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [dest === null || dest === void 0 ? void 0 : dest.id, " |"] }), _jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), _jsxs("span", { children: [formattedDestAmount.integerAmount, ".", formattedDestAmount.decimalAmount] })] })),
|
|
24
|
-
chipIndex: index,
|
|
25
|
-
selectionProps: selectionProps !== null && selectionProps !== void 0 ? selectionProps : {},
|
|
26
|
-
copyText: `${formattedDestAmount.integerAmount}.${formattedDestAmount.decimalAmount}`,
|
|
27
|
-
};
|
|
28
|
-
}, [selectionProps]);
|
|
29
|
-
return (_jsx(Box, Object.assign({}, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
|
|
30
|
-
}
|
|
31
|
-
export default DestinationCellSheet;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { DestinationCellProps } from './type';
|
|
2
|
-
declare function DestinationCell({ destinationsCount, destinationsTooltip, destination, destinationsAmount, hidden, iconDirection, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
|
|
3
|
-
export default DestinationCell;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import Box from '@mui/material/Box';
|
|
14
|
-
import Tooltip from '../../../Tooltip';
|
|
15
|
-
import { formatAmount } from '../../../../utils/index.js';
|
|
16
|
-
import { CurrencyIcon } from '../../../index.js';
|
|
17
|
-
import { TextLabel } from '../style';
|
|
18
|
-
function DestinationCell(_a) {
|
|
19
|
-
var _b, _c, _d, _e, _f;
|
|
20
|
-
var { destinationsCount, destinationsTooltip, destination, destinationsAmount, hidden, iconDirection } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "destination", "destinationsAmount", "hidden", "iconDirection"]);
|
|
21
|
-
const destinations = (destination === null || destination === void 0 ? void 0 : destination.destination) || [];
|
|
22
|
-
const formattedAmount = formatAmount(destinationsAmount || 0);
|
|
23
|
-
const firstDestinationFormattedAmount = formatAmount(((_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.amount) || 0);
|
|
24
|
-
if (!destinationsCount || hidden)
|
|
25
|
-
return null;
|
|
26
|
-
return (_jsx(Box, Object.assign({ sx: {
|
|
27
|
-
width: 'fit-content',
|
|
28
|
-
overflow: 'visible',
|
|
29
|
-
} }, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: _jsx(TextLabel, Object.assign({ sx: {
|
|
30
|
-
textAlign: 'left',
|
|
31
|
-
justifyContent: 'flex-start',
|
|
32
|
-
height: 'auto',
|
|
33
|
-
} }, { 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] })) })) })) })));
|
|
34
|
-
}
|
|
35
|
-
export default DestinationCell;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { TableCellProps } from '@mui/material';
|
|
3
|
-
import { SelectionProps } from '../../../../types/index.js';
|
|
4
|
-
export interface DestinationCellProps extends TableCellProps {
|
|
5
|
-
destinationsCount?: number;
|
|
6
|
-
flagIcon?: string;
|
|
7
|
-
destinationsTooltip?: React.ReactNode;
|
|
8
|
-
destinationsAmount?: number;
|
|
9
|
-
destination?: {
|
|
10
|
-
reverse_destinations?: boolean;
|
|
11
|
-
amount: number;
|
|
12
|
-
currency: string;
|
|
13
|
-
count: number;
|
|
14
|
-
destination: Array<{
|
|
15
|
-
id: string;
|
|
16
|
-
amount: number;
|
|
17
|
-
currency: string;
|
|
18
|
-
transfer?: {
|
|
19
|
-
id: string;
|
|
20
|
-
amount: number;
|
|
21
|
-
currency: string;
|
|
22
|
-
};
|
|
23
|
-
reverse_transfer?: {
|
|
24
|
-
id: string;
|
|
25
|
-
amount: number;
|
|
26
|
-
currency: string;
|
|
27
|
-
};
|
|
28
|
-
}>;
|
|
29
|
-
};
|
|
30
|
-
iconDirection?: 'left' | 'right';
|
|
31
|
-
}
|
|
32
|
-
export interface DestinationCellSheetProps extends DestinationCellProps {
|
|
33
|
-
selectionProps?: SelectionProps;
|
|
34
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { TableCell } from '../../../TableCells';
|
|
14
|
-
function OrderCellSheet(_a) {
|
|
15
|
-
var { value, label, items } = _a, props = __rest(_a, ["value", "label", "items"]);
|
|
16
|
-
const orderDiscriminator = Number.isInteger(value) && Number(value) > 1 && label.charAt(label.length - 1) !== 's' ? `${label}s` : label;
|
|
17
|
-
const orderLabel = `${value} ${orderDiscriminator}`;
|
|
18
|
-
return (_jsx(TableCell, Object.assign({ sx: { fontSize: '11px' } }, props, { children: orderLabel })));
|
|
19
|
-
}
|
|
20
|
-
export default OrderCellSheet;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|