@tap-payments/os-micro-frontend-shared 0.1.294-test.1 → 0.1.295
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/AmountConversionFilter/AmountConversionFilter.d.ts +19 -0
- package/build/components/AmountConversionFilter/AmountConversionFilter.js +18 -0
- package/build/components/AmountConversionFilter/MultiSelectCurrencyFilter.d.ts +9 -0
- package/build/components/AmountConversionFilter/MultiSelectCurrencyFilter.js +39 -0
- package/build/components/AmountConversionFilter/index.d.ts +1 -0
- package/build/components/AmountConversionFilter/index.js +1 -0
- package/build/components/AmountConversionFilter/style.d.ts +7 -0
- package/build/components/AmountConversionFilter/style.js +47 -0
- package/build/components/AnimatedSpinnerIcon/style.d.ts +1 -0
- package/build/components/Chip/style.d.ts +1 -0
- package/build/components/CountBadge/style.d.ts +1 -0
- package/build/components/CurrencyFilter/CurrencyFilter.d.ts +2 -2
- package/build/components/CurrencyFilter/CurrencyFilter.js +6 -6
- package/build/components/Dialog/style.d.ts +1 -0
- package/build/components/FlippingCard/style.d.ts +1 -0
- package/build/components/ImageWrapper/ImageWrapper.d.ts +1 -0
- package/build/components/JSONViewer/style.d.ts +1 -0
- package/build/components/LeftPeekRightExpandingChip/style.d.ts +1 -0
- package/build/components/RightLeftExpandingCenterChip/style.d.ts +1 -0
- package/build/components/SearchButton/styles.d.ts +1 -0
- package/build/components/StatusIcons/AuthIcons/style.d.ts +1 -0
- package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts +1 -0
- package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts +1 -0
- package/build/components/StatusIcons/IssuerIcon/IssuerIcon.js +1 -2
- package/build/components/StatusIcons/SourceIcons/components/SourceIcon.d.ts +5 -4
- package/build/components/StatusIcons/SourceIcons/components/SourceIcon.js +3 -19
- package/build/components/StatusIcons/SourceIcons/style.d.ts +3 -3
- package/build/components/StatusIcons/SourceIcons/style.js +6 -2
- package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/IDButton/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/PayoutReportCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SourceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/style.d.ts +1 -0
- package/build/components/TableReports/components/DownloadButton/style.d.ts +1 -0
- package/build/components/TableReports/style.d.ts +1 -0
- package/build/components/VirtualTables/components/style.d.ts +1 -0
- package/build/components/index.d.ts +1 -0
- package/build/components/index.js +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CustomColumnFilterProps } from '../VirtualTables';
|
|
2
|
+
export interface AmountConversionFilterProps extends CustomColumnFilterProps {
|
|
3
|
+
options: {
|
|
4
|
+
value: string;
|
|
5
|
+
label: string;
|
|
6
|
+
}[];
|
|
7
|
+
label: string;
|
|
8
|
+
onConfirm: () => void;
|
|
9
|
+
onClear: () => void;
|
|
10
|
+
selectedCurrencies: string[];
|
|
11
|
+
onCurrenciesChange: (currencies: string[]) => void;
|
|
12
|
+
selectedRadioValue: string;
|
|
13
|
+
onRadioButtonChange: (val: string) => void;
|
|
14
|
+
showCurrencyMenu: boolean;
|
|
15
|
+
merchantCurrencies: {
|
|
16
|
+
currencyCode: string;
|
|
17
|
+
}[];
|
|
18
|
+
}
|
|
19
|
+
export default function AmountConversionFilter({ anchorEl, onCloseDropdown, options, label, onConfirm, onClear, selectedCurrencies, onCurrenciesChange, selectedRadioValue, onRadioButtonChange, showCurrencyMenu, merchantCurrencies, }: Readonly<AmountConversionFilterProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useTranslation } from 'react-i18next';
|
|
3
|
+
import { FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle, ViewColumnRadioFilter } from '../index.js';
|
|
4
|
+
import { FilterMenu } from './style';
|
|
5
|
+
import MultiSelectCurrencyFilter from './MultiSelectCurrencyFilter';
|
|
6
|
+
export default function AmountConversionFilter({ anchorEl, onCloseDropdown, options, label, onConfirm, onClear, selectedCurrencies, onCurrenciesChange, selectedRadioValue, onRadioButtonChange, showCurrencyMenu, merchantCurrencies, }) {
|
|
7
|
+
const open = Boolean(anchorEl);
|
|
8
|
+
const { t } = useTranslation();
|
|
9
|
+
const handleOkButtonClick = (e) => {
|
|
10
|
+
onConfirm();
|
|
11
|
+
onCloseDropdown(e);
|
|
12
|
+
};
|
|
13
|
+
const onCancel = (e) => {
|
|
14
|
+
onClear();
|
|
15
|
+
onCloseDropdown(e);
|
|
16
|
+
};
|
|
17
|
+
return (_jsxs(FilterMenu, Object.assign({ open: open, anchorEl: anchorEl }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), _jsx(ViewColumnRadioFilter, { menuLabel: label, options: options, selectedValue: selectedRadioValue, onValueChange: onRadioButtonChange }), showCurrencyMenu && (_jsx(MultiSelectCurrencyFilter, { selectedCurrencies: selectedCurrencies, onCurrenciesChange: onCurrenciesChange, merchantCurrencies: merchantCurrencies })), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCancel }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })));
|
|
18
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface CurrencyFilterProps {
|
|
2
|
+
selectedCurrencies?: string[];
|
|
3
|
+
onCurrenciesChange: (currencies: string[]) => void;
|
|
4
|
+
merchantCurrencies: {
|
|
5
|
+
currencyCode: string;
|
|
6
|
+
}[];
|
|
7
|
+
}
|
|
8
|
+
export default function MultiSelectCurrencyFilter({ selectedCurrencies, onCurrenciesChange, merchantCurrencies: merchantCurrencyList, }: Readonly<CurrencyFilterProps>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useTranslation } from 'react-i18next';
|
|
3
|
+
import { useState, useRef, useMemo } from 'react';
|
|
4
|
+
import { rightArrow } from '../../constants/index.js';
|
|
5
|
+
import { CountryFlag } from '../index.js';
|
|
6
|
+
import { CurrencySubMenu, FilterMenuItem, CurrencyMenuItem } from './style';
|
|
7
|
+
export default function MultiSelectCurrencyFilter({ selectedCurrencies = [], onCurrenciesChange, merchantCurrencies: merchantCurrencyList, }) {
|
|
8
|
+
const { t } = useTranslation();
|
|
9
|
+
const [submenuAnchorElCurrency, setSubmenuAnchorElCurrency] = useState(null);
|
|
10
|
+
const menuItemRefCurrency = useRef(null);
|
|
11
|
+
const merchantCurrencies = useMemo(() => {
|
|
12
|
+
const uniqueCurrencies = [...new Set(merchantCurrencyList.map((item) => item.currencyCode))];
|
|
13
|
+
return uniqueCurrencies;
|
|
14
|
+
}, [merchantCurrencyList]);
|
|
15
|
+
const onOpenCurrency = (event) => {
|
|
16
|
+
setSubmenuAnchorElCurrency(event.currentTarget);
|
|
17
|
+
};
|
|
18
|
+
const onCloseCurrency = () => {
|
|
19
|
+
setSubmenuAnchorElCurrency(null);
|
|
20
|
+
};
|
|
21
|
+
const onSubmenuMouseEnter = () => {
|
|
22
|
+
// Keep the submenu open when hovering over it
|
|
23
|
+
if (menuItemRefCurrency.current) {
|
|
24
|
+
setSubmenuAnchorElCurrency(menuItemRefCurrency.current);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
const handleCurrencyChange = (currencyCode) => {
|
|
28
|
+
const newCurrencies = selectedCurrencies.includes(currencyCode)
|
|
29
|
+
? selectedCurrencies.filter((c) => c !== currencyCode)
|
|
30
|
+
: [...selectedCurrencies, currencyCode];
|
|
31
|
+
const finalCurrencies = newCurrencies.length > 0 ? newCurrencies : [];
|
|
32
|
+
onCurrenciesChange(finalCurrencies);
|
|
33
|
+
};
|
|
34
|
+
const isCurrencySelected = (currencyCode) => selectedCurrencies.includes(currencyCode);
|
|
35
|
+
return (_jsxs(FilterMenuItem, Object.assign({ ref: menuItemRefCurrency, onMouseEnter: onOpenCurrency, onMouseLeave: onCloseCurrency, hideCheckbox: true }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: t('Currency') })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(CurrencySubMenu, Object.assign({ open: Boolean(submenuAnchorElCurrency), anchorEl: submenuAnchorElCurrency, placement: "right-start", onMouseEnter: onSubmenuMouseEnter, onMouseLeave: onCloseCurrency }, { children: merchantCurrencies.map((currencyCode) => (_jsxs(CurrencyMenuItem, Object.assign({ isSelected: isCurrencySelected(currencyCode), onClick: (e) => {
|
|
36
|
+
e.stopPropagation();
|
|
37
|
+
handleCurrencyChange(currencyCode);
|
|
38
|
+
} }, { children: [_jsx(CountryFlag, { currencyCode: currencyCode }), currencyCode] }), currencyCode))) }))] })));
|
|
39
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as AmountConversionFilter, type AmountConversionFilterProps } from './AmountConversionFilter';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as AmountConversionFilter } from './AmountConversionFilter';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const MenuItemStyled: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
3
|
+
export declare const FilterMenu: import("@emotion/styled").StyledComponent<Omit<import("../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
4
|
+
export declare const SubMenu: import("@emotion/styled").StyledComponent<Omit<import("../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
5
|
+
export declare const CurrencySubMenu: import("@emotion/styled").StyledComponent<Omit<import("../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
6
|
+
export declare const FilterMenuItem: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
7
|
+
export declare const CurrencyMenuItem: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { styled } from '@mui/material/styles';
|
|
2
|
+
import { MenuItem, Menu } from '../index.js';
|
|
3
|
+
export const MenuItemStyled = styled(MenuItem)(({ theme }) => ({
|
|
4
|
+
height: 40,
|
|
5
|
+
flex: 'unset',
|
|
6
|
+
paddingTop: 0,
|
|
7
|
+
paddingBottom: 0,
|
|
8
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
9
|
+
'.label': {
|
|
10
|
+
flexGrow: 1,
|
|
11
|
+
},
|
|
12
|
+
}));
|
|
13
|
+
export const FilterMenu = styled(Menu)(() => ({
|
|
14
|
+
marginBottom: '8px',
|
|
15
|
+
}));
|
|
16
|
+
export const SubMenu = styled(Menu)(() => ({
|
|
17
|
+
marginTop: '-1px',
|
|
18
|
+
'&:hover': {
|
|
19
|
+
boxShadow: '0px 0px 16px 0px #00000021',
|
|
20
|
+
},
|
|
21
|
+
}));
|
|
22
|
+
export const CurrencySubMenu = styled(Menu)(() => ({
|
|
23
|
+
'& .MuiMenuItem-root:hover': {
|
|
24
|
+
boxShadow: '0px 0px 16px 0px #00000021',
|
|
25
|
+
},
|
|
26
|
+
}));
|
|
27
|
+
export const FilterMenuItem = styled(MenuItem)(({ theme }) => ({
|
|
28
|
+
height: 40,
|
|
29
|
+
flex: 'unset',
|
|
30
|
+
paddingTop: 0,
|
|
31
|
+
paddingBottom: 0,
|
|
32
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
33
|
+
paddingLeft: '16px',
|
|
34
|
+
maxHeight: '35px',
|
|
35
|
+
'.label': {
|
|
36
|
+
flexGrow: 1,
|
|
37
|
+
},
|
|
38
|
+
}));
|
|
39
|
+
export const CurrencyMenuItem = styled(MenuItemStyled)(() => ({
|
|
40
|
+
gap: '8px',
|
|
41
|
+
paddingInline: '16px',
|
|
42
|
+
paddingY: '8px',
|
|
43
|
+
maxHeight: '35px',
|
|
44
|
+
'&:hover': {
|
|
45
|
+
boxShadow: '0px 0px 16px 0px #00000021',
|
|
46
|
+
},
|
|
47
|
+
}));
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
import { GetSourceAnimationFunction } from './type';
|
|
3
4
|
export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
4
5
|
variant?: import("./type").ChipVariant | undefined;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { CustomColumnFilterProps } from '../VirtualTables';
|
|
2
2
|
export interface CurrencyFilterProps extends CustomColumnFilterProps {
|
|
3
3
|
onConfirm: (currencies?: string[]) => void;
|
|
4
|
-
|
|
4
|
+
selectedCurrencies?: string[];
|
|
5
5
|
onCurrenciesChange: (currencies?: string[]) => void;
|
|
6
6
|
merchantCurrencies: {
|
|
7
7
|
currencyCode: string;
|
|
8
8
|
}[];
|
|
9
9
|
}
|
|
10
|
-
export default function CurrencyFilter({
|
|
10
|
+
export default function CurrencyFilter({ selectedCurrencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }: Readonly<CurrencyFilterProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,23 +3,23 @@ import { useMemo } from 'react';
|
|
|
3
3
|
import uniqBy from 'lodash/uniqBy';
|
|
4
4
|
import { useTranslation } from 'react-i18next';
|
|
5
5
|
import { CountryFlag, Menu, MenuItem, FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle } from '../index.js';
|
|
6
|
-
export default function CurrencyFilter({
|
|
6
|
+
export default function CurrencyFilter({ selectedCurrencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }) {
|
|
7
7
|
const open = Boolean(anchorEl);
|
|
8
8
|
const { t } = useTranslation();
|
|
9
9
|
const uniqueCurrencies = useMemo(() => uniqBy(merchantCurrencies, 'currencyCode'), [merchantCurrencies]);
|
|
10
10
|
const handleOkButtonClick = (e) => {
|
|
11
|
-
onConfirm(
|
|
11
|
+
onConfirm(selectedCurrencies);
|
|
12
12
|
onCloseDropdown(e);
|
|
13
13
|
};
|
|
14
|
-
const checkIsSelected = (currencyCode) => { var _a; return (_a =
|
|
14
|
+
const checkIsSelected = (currencyCode) => { var _a; return (_a = selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.includes(currencyCode)) !== null && _a !== void 0 ? _a : false; };
|
|
15
15
|
const onClickCurrency = (currencyCode) => {
|
|
16
16
|
var _a;
|
|
17
|
-
if ((
|
|
18
|
-
const newCurrencies = (_a =
|
|
17
|
+
if ((selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.indexOf(currencyCode)) !== -1) {
|
|
18
|
+
const newCurrencies = (_a = selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.filter((currency) => currency !== currencyCode)) !== null && _a !== void 0 ? _a : [];
|
|
19
19
|
onCurrenciesChange(newCurrencies.length > 0 ? newCurrencies : []);
|
|
20
20
|
return;
|
|
21
21
|
}
|
|
22
|
-
onCurrenciesChange([...
|
|
22
|
+
onCurrenciesChange([...selectedCurrencies, currencyCode]);
|
|
23
23
|
};
|
|
24
24
|
return (_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px' } }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), uniqueCurrencies.map(({ currencyCode }) => (_jsxs(MenuItem, Object.assign({ isSelected: checkIsSelected(currencyCode), onClick: () => {
|
|
25
25
|
onClickCurrency(currencyCode);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -5,6 +5,5 @@ import Tooltip from '../../Tooltip';
|
|
|
5
5
|
export default function IssuerIcon({ countryCode, isTextShown, cardNumber, bankName, tableMode }) {
|
|
6
6
|
const firstFourDigits = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.slice(0, 4);
|
|
7
7
|
const lastFourDigits = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.slice(-4);
|
|
8
|
-
return (_jsxs(IssuerIconContainer, Object.assign({ tableMode: tableMode }, { children: [countryCode && _jsx(GeographyIcon, { countryCode: countryCode, isTextShown: isTextShown }), firstFourDigits ||
|
|
9
|
-
(lastFourDigits && (_jsx(Tooltip, Object.assign({ title: `${bankName ? `Issuer - ${bankName}` : ''}` }, { children: _jsx(CardNumber, { children: `${firstFourDigits || ''} ${lastFourDigits || ''}` }) }))))] })));
|
|
8
|
+
return (_jsxs(IssuerIconContainer, Object.assign({ tableMode: tableMode }, { children: [countryCode && _jsx(GeographyIcon, { countryCode: countryCode, isTextShown: isTextShown }), _jsx(Tooltip, Object.assign({ title: `${bankName ? `Issuer - ${bankName}` : ''}` }, { children: _jsx(CardNumber, { children: `${firstFourDigits || ''} ${lastFourDigits || ''}` }) }))] })));
|
|
10
9
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
interface SourceIconProps extends BoxProps {
|
|
1
|
+
type SourceIconProps = {
|
|
3
2
|
source: string;
|
|
4
3
|
isTextShown?: boolean;
|
|
5
4
|
title?: string;
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
width?: number | string;
|
|
6
|
+
height?: number | string;
|
|
7
|
+
};
|
|
8
|
+
export declare function SourceIcon({ source, isTextShown, title, width, height }: SourceIconProps): import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -1,29 +1,13 @@
|
|
|
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
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
2
|
import camelCase from 'lodash/camelCase';
|
|
14
3
|
import { useTranslation } from 'react-i18next';
|
|
15
|
-
import Box from '@mui/material/Box';
|
|
16
4
|
import Tooltip from '../../../Tooltip';
|
|
17
5
|
import { getPaymentMethodsIcon } from '../../../../constants/index.js';
|
|
18
|
-
import { StyledBadgeTextWrapper, TextLabel } from '../style';
|
|
19
|
-
export function SourceIcon(
|
|
20
|
-
var { source, isTextShown, title } = _a, props = __rest(_a, ["source", "isTextShown", "title"]);
|
|
6
|
+
import { StyledBadgeTextWrapper, StyledSourceImage, TextLabel } from '../style';
|
|
7
|
+
export function SourceIcon({ source, isTextShown, title, width, height }) {
|
|
21
8
|
const { t } = useTranslation();
|
|
22
9
|
const ImageSrc = getPaymentMethodsIcon(source);
|
|
23
|
-
|
|
24
|
-
return (_jsx(Tooltip, Object.assign({ title: title }, { children: _jsx(StyledBadgeTextWrapper, Object.assign({ "data-testid": "SourceCell_BadgeTextWrapper" }, props, { children: _jsx(TextLabel, Object.assign({ "data-testid": "SourceCell_TextLabel", "data-source": source }, { children: t(camelCase(source)) })) })) })));
|
|
25
|
-
}
|
|
26
|
-
return (_jsx(Tooltip, Object.assign({ title: title }, { children: _jsx(Box, Object.assign({}, props, { component: "img", src: ImageSrc, alt: source, onError: (e) => {
|
|
10
|
+
return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StyledBadgeTextWrapper, Object.assign({ "data-testid": "SourceCell_BadgeTextWrapper" }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "SourceCell_TextLabel", "data-source": source }, { children: t(camelCase(source)) })) }))) : (_jsx(StyledSourceImage, { src: ImageSrc, alt: source, width: width, height: height, onError: (e) => {
|
|
27
11
|
e.currentTarget.src = getPaymentMethodsIcon('card');
|
|
28
12
|
} })) })));
|
|
29
13
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
|
+
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
3
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
4
6
|
hidden?: boolean | undefined;
|
|
5
7
|
color?: string | undefined;
|
|
@@ -265,8 +267,6 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
|
|
|
265
267
|
sourcesCount: number;
|
|
266
268
|
}, {}, {}>;
|
|
267
269
|
export declare const TextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
268
|
-
export declare const StyledBadgeTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").
|
|
269
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
270
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
270
|
+
export declare const StyledBadgeTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
271
271
|
export declare const SourceIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
272
272
|
export declare const CardNumber: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { styled } from '@mui/material';
|
|
2
2
|
import { motion } from 'framer-motion';
|
|
3
3
|
export const StyledSourceCell = styled('span')(({ theme }) => ({
|
|
4
4
|
display: 'flex',
|
|
@@ -6,6 +6,10 @@ export const StyledSourceCell = styled('span')(({ theme }) => ({
|
|
|
6
6
|
justifyContent: 'flex-start',
|
|
7
7
|
gap: theme.spacing(1),
|
|
8
8
|
}));
|
|
9
|
+
export const StyledSourceImage = styled('img')(() => ({
|
|
10
|
+
maxWidth: '24px',
|
|
11
|
+
maxHeight: '16px',
|
|
12
|
+
}));
|
|
9
13
|
export const PaymentSourcesContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
|
|
10
14
|
display: 'flex',
|
|
11
15
|
alignItems: 'center',
|
|
@@ -25,7 +29,7 @@ export const TextLabel = styled('span')(({ theme }) => ({
|
|
|
25
29
|
padding: '2px 0',
|
|
26
30
|
color: theme.palette.text.primary,
|
|
27
31
|
}));
|
|
28
|
-
export const StyledBadgeTextWrapper = styled(
|
|
32
|
+
export const StyledBadgeTextWrapper = styled('div')(() => ({
|
|
29
33
|
display: 'flex',
|
|
30
34
|
alignItems: 'center',
|
|
31
35
|
justifyContent: 'center',
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
import { TableMode } from '../../../../types/index.js';
|
|
3
4
|
export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
4
5
|
tableMode?: TableMode | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
3
4
|
export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledDownloadFileImageWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
3
4
|
isTextShown?: boolean | undefined;
|
|
4
5
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
3
4
|
variant?: "Global" | "Regional" | "Local" | undefined;
|
|
4
5
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
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.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.295",
|
|
5
|
+
"testVersion": 0,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -164,4 +164,4 @@
|
|
|
164
164
|
"publishConfig": {
|
|
165
165
|
"registry": "https://registry.npmjs.org/"
|
|
166
166
|
}
|
|
167
|
-
}
|
|
167
|
+
}
|