@tap-payments/os-micro-frontend-shared 0.1.290-test.1 → 0.1.291-test.1

package/build/components/AmountConversionFilter/AmountConversionFilter.d.ts

@@ -0,0 +1,19 @@
+import { CustomColumnFilterProps } from '../VirtualTables';
+export interface AmountConversionFilterProps extends CustomColumnFilterProps {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    label: string;
+    onConfirm: () => void;
+    onClear: () => void;
+    selectedCurrencies: string[];
+    onCurrenciesChange: (currencies: string[]) => void;
+    selectedRadioValue: string;
+    onRadioButtonChange: (val: string) => void;
+    showCurrencyMenu: boolean;
+    merchantCurrencies: {
+        currencyCode: string;
+    }[];
+}
+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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle, ViewColumnRadioFilter } from '../index.js';
+import { FilterMenu } from './style';
+import MultiSelectCurrencyFilter from './MultiSelectCurrencyFilter';
+export default function AmountConversionFilter({ anchorEl, onCloseDropdown, options, label, onConfirm, onClear, selectedCurrencies, onCurrenciesChange, selectedRadioValue, onRadioButtonChange, showCurrencyMenu, merchantCurrencies, }) {
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const handleOkButtonClick = (e) => {
+        onConfirm();
+        onCloseDropdown(e);
+    };
+    const onCancel = (e) => {
+        onClear();
+        onCloseDropdown(e);
+    };
+    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') }))] })] })));
+}

package/build/components/AmountConversionFilter/MultiSelectCurrencyFilter.d.ts

@@ -0,0 +1,9 @@
+interface CurrencyFilterProps {
+    selectedCurrencies?: string[];
+    onCurrenciesChange: (currencies: string[]) => void;
+    merchantCurrencies: {
+        currencyCode: string;
+    }[];
+}
+export default function MultiSelectCurrencyFilter({ selectedCurrencies, onCurrenciesChange, merchantCurrencies: merchantCurrencyList, }: Readonly<CurrencyFilterProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/AmountConversionFilter/MultiSelectCurrencyFilter.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { useState, useRef, useMemo } from 'react';
+import { rightArrow } from '../../constants/index.js';
+import { CountryFlag } from '../index.js';
+import { CurrencySubMenu, FilterMenuItem, CurrencyMenuItem } from './style';
+export default function MultiSelectCurrencyFilter({ selectedCurrencies = [], onCurrenciesChange, merchantCurrencies: merchantCurrencyList, }) {
+    const { t } = useTranslation();
+    const [submenuAnchorElCurrency, setSubmenuAnchorElCurrency] = useState(null);
+    const menuItemRefCurrency = useRef(null);
+    const merchantCurrencies = useMemo(() => {
+        const uniqueCurrencies = [...new Set(merchantCurrencyList.map((item) => item.currencyCode))];
+        return uniqueCurrencies;
+    }, [merchantCurrencyList]);
+    const onOpenCurrency = (event) => {
+        setSubmenuAnchorElCurrency(event.currentTarget);
+    };
+    const onCloseCurrency = () => {
+        setSubmenuAnchorElCurrency(null);
+    };
+    const onSubmenuMouseEnter = () => {
+        // Keep the submenu open when hovering over it
+        if (menuItemRefCurrency.current) {
+            setSubmenuAnchorElCurrency(menuItemRefCurrency.current);
+        }
+    };
+    const handleCurrencyChange = (currencyCode) => {
+        const newCurrencies = selectedCurrencies.includes(currencyCode)
+            ? selectedCurrencies.filter((c) => c !== currencyCode)
+            : [...selectedCurrencies, currencyCode];
+        const finalCurrencies = newCurrencies.length > 0 ? newCurrencies : [];
+        onCurrenciesChange(finalCurrencies);
+    };
+    const isCurrencySelected = (currencyCode) => selectedCurrencies.includes(currencyCode);
+    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) => {
+                        e.stopPropagation();
+                        handleCurrencyChange(currencyCode);
+                    } }, { children: [_jsx(CountryFlag, { currencyCode: currencyCode }), currencyCode] }), currencyCode))) }))] })));
+}

package/build/components/AmountConversionFilter/index.d.ts

@@ -0,0 +1 @@
+export { default as AmountConversionFilter, type AmountConversionFilterProps } from './AmountConversionFilter';

package/build/components/AmountConversionFilter/index.js

@@ -0,0 +1 @@
+export { default as AmountConversionFilter } from './AmountConversionFilter';

package/build/components/AmountConversionFilter/style.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const MenuItemStyled: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+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>, {}, {}>;
+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>, {}, {}>;
+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>, {}, {}>;
+export declare const FilterMenuItem: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+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

@@ -0,0 +1,47 @@
+import { styled } from '@mui/material/styles';
+import { MenuItem, Menu } from '../index.js';
+export const MenuItemStyled = styled(MenuItem)(({ theme }) => ({
+    height: 40,
+    flex: 'unset',
+    paddingTop: 0,
+    paddingBottom: 0,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    '.label': {
+        flexGrow: 1,
+    },
+}));
+export const FilterMenu = styled(Menu)(() => ({
+    marginBottom: '8px',
+}));
+export const SubMenu = styled(Menu)(() => ({
+    marginTop: '-1px',
+    '&:hover': {
+        boxShadow: '0px 0px 16px 0px #00000021',
+    },
+}));
+export const CurrencySubMenu = styled(Menu)(() => ({
+    '& .MuiMenuItem-root:hover': {
+        boxShadow: '0px 0px 16px 0px #00000021',
+    },
+}));
+export const FilterMenuItem = styled(MenuItem)(({ theme }) => ({
+    height: 40,
+    flex: 'unset',
+    paddingTop: 0,
+    paddingBottom: 0,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    paddingLeft: '16px',
+    maxHeight: '35px',
+    '.label': {
+        flexGrow: 1,
+    },
+}));
+export const CurrencyMenuItem = styled(MenuItemStyled)(() => ({
+    gap: '8px',
+    paddingInline: '16px',
+    paddingY: '8px',
+    maxHeight: '35px',
+    '&:hover': {
+        boxShadow: '0px 0px 16px 0px #00000021',
+    },
+}));

package/build/components/CurrencyFilter/CurrencyFilter.d.ts

@@ -0,0 +1,10 @@
+import { CustomColumnFilterProps } from '../VirtualTables';
+export interface CurrencyFilterProps extends CustomColumnFilterProps {
+    onConfirm: (currencies?: string[]) => void;
+    currencies?: string[];
+    onCurrenciesChange: (currencies?: string[]) => void;
+    merchantCurrencies: {
+        currencyCode: string;
+    }[];
+}
+export default function CurrencyFilter({ currencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }: Readonly<CurrencyFilterProps>): import("react/jsx-runtime").JSX.Element;

package/build/components/CurrencyFilter/CurrencyFilter.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import uniqBy from 'lodash/uniqBy';
+import { useTranslation } from 'react-i18next';
+import { CountryFlag, Menu, MenuItem, FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle } from '../index.js';
+export default function CurrencyFilter({ currencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }) {
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const uniqueCurrencies = useMemo(() => uniqBy(merchantCurrencies, 'currencyCode'), [merchantCurrencies]);
+    const handleOkButtonClick = (e) => {
+        onConfirm(currencies);
+        onCloseDropdown(e);
+    };
+    const checkIsSelected = (currencyCode) => { var _a; return (_a = currencies === null || currencies === void 0 ? void 0 : currencies.includes(currencyCode)) !== null && _a !== void 0 ? _a : false; };
+    const onClickCurrency = (currencyCode) => {
+        var _a;
+        if ((currencies === null || currencies === void 0 ? void 0 : currencies.indexOf(currencyCode)) !== -1) {
+            const newCurrencies = (_a = currencies === null || currencies === void 0 ? void 0 : currencies.filter((currency) => currency !== currencyCode)) !== null && _a !== void 0 ? _a : [];
+            onCurrenciesChange(newCurrencies.length > 0 ? newCurrencies : []);
+            return;
+        }
+        onCurrenciesChange([...currencies, currencyCode]);
+    };
+    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: () => {
+                    onClickCurrency(currencyCode);
+                } }, { children: [_jsx(CountryFlag, { currencyCode: currencyCode }), currencyCode] }), currencyCode))), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCloseDropdown }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })));
+}

package/build/components/CurrencyFilter/index.d.ts

@@ -0,0 +1 @@
+export { default as CurrencyFilter, type CurrencyFilterProps } from './CurrencyFilter';

package/build/components/CurrencyFilter/index.js

@@ -0,0 +1 @@
+export { default as CurrencyFilter } from './CurrencyFilter';

package/build/components/StatusIcons/SourceIcons/components/SourceIcon.d.ts

@@ -1,8 +1,9 @@
-import { BoxProps } from '@mui/material/Box';
-interface SourceIconProps extends BoxProps {
+type SourceIconProps = {
     source: string;
     isTextShown?: boolean;
     title?: string;
-}
-export declare function SourceIcon({ source, isTextShown, title, ...props }: SourceIconProps): import("react/jsx-runtime").JSX.Element;
+    width?: number | string;
+    height?: number | string;
+};
+export declare function SourceIcon({ source, isTextShown, title, width, height }: SourceIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/SourceIcons/components/SourceIcon.js

@@ -1,29 +1,13 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
-import Box from '@mui/material/Box';
 import Tooltip from '../../../Tooltip';
 import { getPaymentMethodsIcon } from '../../../../constants/index.js';
-import { StyledBadgeTextWrapper, TextLabel } from '../style';
-export function SourceIcon(_a) {
-    var { source, isTextShown, title } = _a, props = __rest(_a, ["source", "isTextShown", "title"]);
+import { StyledBadgeTextWrapper, StyledSourceImage, TextLabel } from '../style';
+export function SourceIcon({ source, isTextShown, title, width, height }) {
     const { t } = useTranslation();
     const ImageSrc = getPaymentMethodsIcon(source);
-    if (isTextShown) {
-        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)) })) })) })));
-    }
-    return (_jsx(Tooltip, Object.assign({ title: title }, { children: _jsx(Box, Object.assign({}, props, { component: "img", src: ImageSrc, alt: source, onError: (e) => {
+    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) => {
                 e.currentTarget.src = getPaymentMethodsIcon('card');
             } })) })));
 }

package/build/components/StatusIcons/SourceIcons/style.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;
@@ -265,8 +266,6 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     sourcesCount: number;
 }, {}, {}>;
 export declare const TextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledBadgeTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBadgeTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SourceIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const CardNumber: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/StatusIcons/SourceIcons/style.js

@@ -1,4 +1,4 @@
-import { Box, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { motion } from 'framer-motion';
 export const StyledSourceCell = styled('span')(({ theme }) => ({
     display: 'flex',
@@ -6,6 +6,10 @@ export const StyledSourceCell = styled('span')(({ theme }) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
 }));
+export const StyledSourceImage = styled('img')(() => ({
+    maxWidth: '24px',
+    maxHeight: '16px',
+}));
 export const PaymentSourcesContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -25,7 +29,7 @@ export const TextLabel = styled('span')(({ theme }) => ({
     padding: '2px 0',
     color: theme.palette.text.primary,
 }));
-export const StyledBadgeTextWrapper = styled(Box)(() => ({
+export const StyledBadgeTextWrapper = styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',

package/build/components/index.d.ts

@@ -145,3 +145,5 @@ export { default as TableReports } from './TableReports';
 export * from './TableReports';
 export * from './PaymentSourceFilter';
 export * from './DateFilter';
+export * from './CurrencyFilter';
+export * from './AmountConversionFilter';

package/build/components/index.js

@@ -145,3 +145,5 @@ export { default as TableReports } from './TableReports';
 export * from './TableReports';
 export * from './PaymentSourceFilter';
 export * from './DateFilter';
+export * from './CurrencyFilter';
+export * from './AmountConversionFilter';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.290-test.1",
+  "version": "0.1.291-test.1",
   "testVersion": 1,
   "type": "module",
   "main": "build/index.js",