@tap-payments/os-micro-frontend-shared 0.1.294 → 0.1.296

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.
Files changed (15) hide show
  1. package/build/components/AmountConversionFilter/AmountConversionFilter.d.ts +19 -0
  2. package/build/components/AmountConversionFilter/AmountConversionFilter.js +18 -0
  3. package/build/components/AmountConversionFilter/MultiSelectCurrencyFilter.d.ts +9 -0
  4. package/build/components/AmountConversionFilter/MultiSelectCurrencyFilter.js +39 -0
  5. package/build/components/AmountConversionFilter/index.d.ts +1 -0
  6. package/build/components/AmountConversionFilter/index.js +1 -0
  7. package/build/components/AmountConversionFilter/style.d.ts +7 -0
  8. package/build/components/AmountConversionFilter/style.js +47 -0
  9. package/build/components/CurrencyFilter/CurrencyFilter.d.ts +2 -2
  10. package/build/components/CurrencyFilter/CurrencyFilter.js +6 -6
  11. package/build/components/index.d.ts +1 -0
  12. package/build/components/index.js +1 -0
  13. package/build/constants/table/cell/payoutsTableCellWidth.d.ts +2 -2
  14. package/build/constants/table/cell/payoutsTableCellWidth.js +2 -2
  15. package/package.json +1 -1
package/build/components/AmountConversionFilter/AmountConversionFilter.d.ts ADDED
@@ -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;
package/build/components/AmountConversionFilter/AmountConversionFilter.js ADDED
@@ -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
+ }
package/build/components/AmountConversionFilter/MultiSelectCurrencyFilter.d.ts ADDED
@@ -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 {};
package/build/components/AmountConversionFilter/MultiSelectCurrencyFilter.js ADDED
@@ -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
+ }
package/build/components/AmountConversionFilter/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as AmountConversionFilter, type AmountConversionFilterProps } from './AmountConversionFilter';
package/build/components/AmountConversionFilter/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as AmountConversionFilter } from './AmountConversionFilter';
package/build/components/AmountConversionFilter/style.d.ts ADDED
@@ -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>, {}, {}>;
package/build/components/AmountConversionFilter/style.js ADDED
@@ -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
+ }));
package/build/components/CurrencyFilter/CurrencyFilter.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { CustomColumnFilterProps } from '../VirtualTables';
2
2
  export interface CurrencyFilterProps extends CustomColumnFilterProps {
3
3
  onConfirm: (currencies?: string[]) => void;
4
- currencies?: string[];
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({ currencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }: Readonly<CurrencyFilterProps>): import("react/jsx-runtime").JSX.Element;
10
+ export default function CurrencyFilter({ selectedCurrencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }: Readonly<CurrencyFilterProps>): import("react/jsx-runtime").JSX.Element;
package/build/components/CurrencyFilter/CurrencyFilter.js CHANGED
@@ -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({ currencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }) {
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(currencies);
11
+ onConfirm(selectedCurrencies);
12
12
  onCloseDropdown(e);
13
13
  };
14
- const checkIsSelected = (currencyCode) => { var _a; return (_a = currencies === null || currencies === void 0 ? void 0 : currencies.includes(currencyCode)) !== null && _a !== void 0 ? _a : false; };
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 ((currencies === null || currencies === void 0 ? void 0 : currencies.indexOf(currencyCode)) !== -1) {
18
- const newCurrencies = (_a = currencies === null || currencies === void 0 ? void 0 : currencies.filter((currency) => currency !== currencyCode)) !== null && _a !== void 0 ? _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([...currencies, currencyCode]);
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);
package/build/components/index.d.ts CHANGED
@@ -147,3 +147,4 @@ export * from './TableReports';
147
147
  export * from './PaymentSourceFilter';
148
148
  export * from './DateFilter';
149
149
  export * from './CurrencyFilter';
150
+ export * from './AmountConversionFilter';
package/build/components/index.js CHANGED
@@ -147,3 +147,4 @@ export * from './TableReports';
147
147
  export * from './PaymentSourceFilter';
148
148
  export * from './DateFilter';
149
149
  export * from './CurrencyFilter';
150
+ export * from './AmountConversionFilter';
package/build/constants/table/cell/payoutsTableCellWidth.d.ts CHANGED
@@ -25,7 +25,7 @@ export declare const payoutsTableCellWidth: {
25
25
  readonly sheet: "210px";
26
26
  };
27
27
  readonly status: {
28
- readonly default: "50px";
28
+ readonly default: "51px";
29
29
  readonly text: "250px";
30
30
  readonly sheet: "250px";
31
31
  };
@@ -40,7 +40,7 @@ export declare const payoutsTableCellWidth: {
40
40
  readonly sheet: "100px";
41
41
  };
42
42
  readonly referenceId: {
43
- readonly default: "71px";
43
+ readonly default: "72px";
44
44
  readonly text: "140px";
45
45
  readonly sheet: "100px";
46
46
  };
package/build/constants/table/cell/payoutsTableCellWidth.js CHANGED
@@ -25,7 +25,7 @@ export const payoutsTableCellWidth = {
25
25
  sheet: '210px',
26
26
  },
27
27
  status: {
28
- default: '50px',
28
+ default: '51px',
29
29
  text: '250px',
30
30
  sheet: '250px',
31
31
  },
@@ -40,7 +40,7 @@ export const payoutsTableCellWidth = {
40
40
  sheet: '100px',
41
41
  },
42
42
  referenceId: {
43
- default: '71px',
43
+ default: '72px',
44
44
  text: '140px',
45
45
  sheet: '100px',
46
46
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
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.294",
4
+ "version": "0.1.296",
5
5
  "testVersion": 0,
6
6
  "type": "module",
7
7
  "main": "build/index.js",