@tap-payments/os-micro-frontend-shared 0.1.140-test.11 → 0.1.140-test.2
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/StatusButton/constant.d.ts +1 -0
- package/build/components/StatusButton/constant.js +2 -1
- package/build/components/StatusButton/style.d.ts +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/build/constants/assets.d.ts +1 -0
- package/build/constants/assets.js +1 -0
- package/package.json +2 -2
- 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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon,
|
|
1
|
+
import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, dashedCheckIcon,
|
|
2
2
|
// trashBinIcon,
|
|
3
3
|
} from '../../constants/index.js';
|
|
4
4
|
export const statusButtonIcons = {
|
|
@@ -22,4 +22,5 @@ export const statusButtonIcons = {
|
|
|
22
22
|
paidOut: paidOutFilterIcon,
|
|
23
23
|
scheduled: scheduledFilterIcon,
|
|
24
24
|
checked: completedBlackIcon,
|
|
25
|
+
dashedChecked: dashedCheckIcon,
|
|
25
26
|
};
|
|
@@ -21,7 +21,7 @@ export declare const CountBadge: import("@emotion/styled").StyledComponent<impor
|
|
|
21
21
|
}, {}, {}>;
|
|
22
22
|
export declare const StatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
|
|
23
23
|
variant: StatusButtonVariant;
|
|
24
|
-
icon?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
|
|
24
|
+
icon?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | "dashedChecked" | undefined;
|
|
25
25
|
}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
26
26
|
export declare const StyledFilterName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
27
27
|
export declare const StyledDropdown: import("@emotion/styled").StyledComponent<import("../DropdownMenu").IProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
|
|
@@ -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;
|
|
@@ -72,6 +72,7 @@ export declare const percentage100Icon: string;
|
|
|
72
72
|
export declare const maximizeIcon: string;
|
|
73
73
|
export declare const minimizeIcon: string;
|
|
74
74
|
export declare const closeIcon: string;
|
|
75
|
+
export declare const dashedCheckIcon: string;
|
|
75
76
|
export declare const topUpIcon: string;
|
|
76
77
|
export declare const deMaximizeIcon: string;
|
|
77
78
|
export declare const pendingFlag: string;
|
|
@@ -77,6 +77,7 @@ export const percentage100Icon = `${lightUrl}/percentage100.svg`;
|
|
|
77
77
|
export const maximizeIcon = `${lightUrl}/maximize.svg`;
|
|
78
78
|
export const minimizeIcon = `${lightUrl}/minimize.svg`;
|
|
79
79
|
export const closeIcon = `${lightUrl}/close.svg`;
|
|
80
|
+
export const dashedCheckIcon = `${lightUrl}/dashedCheckIcon.svg`;
|
|
80
81
|
export const topUpIcon = `${lightUrl}/topup.svg`;
|
|
81
82
|
export const deMaximizeIcon = `${appBaseUrl}/demaximize.svg`;
|
|
82
83
|
export const pendingFlag = `${lightUrl}/pendingFlag.svg`;
|
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.140-test.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.140-test.2",
|
|
5
|
+
"testVersion": 2,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -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 {};
|