@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

package/build/components/FileUpload/FileUpload.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import { useDropzone } from 'react-dropzone';
+import { useTranslation } from 'react-i18next';
+import Icon from '../Icon';
+import { blueCircleCheckIcon, redVerifyIcon, trashBinIcon, uploadBlueIcon } from '../../constants/index.js';
+import { readableFileSize } from '../../utils/index.js';
+import { Wrapper, Title, Format, FileUploader, Content, Upload, TextWrapper, Maximum, UploadAgain, StyledButton, SendBulkContainer } from './style';
+import CircularProgressWithLabel from '../CircularProgressWithLabel';
+import Button from '../Button/StyledButton';
+function FileUpload({ accept, footer, options, isCreateLoading, progress, error, subtitleComponent, isSuccess: isUploadSuccess, onConfirm, isSendDisabled, }) {
+    const { t } = useTranslation();
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const { getRootProps, getInputProps, open, acceptedFiles, isDragReject, fileRejections } = useDropzone(options);
+    useEffect(() => {
+        setSelectedFiles(acceptedFiles);
+    }, [acceptedFiles]);
+    const maxFileSize = readableFileSize((options === null || options === void 0 ? void 0 : options.maxSize) || 0, 0).toUpperCase();
+    const errorMessage = useMemo(() => {
+        const rejectedTypeFiles = fileRejections.length && fileRejections[0].errors.some((file) => file.code === 'file-invalid-type');
+        const rejectedFileSize = fileRejections.length && fileRejections[0].errors.some((file) => file.code === 'file-too-large');
+        if (isDragReject || rejectedTypeFiles)
+            return t('invalidFileType');
+        if (rejectedFileSize)
+            return `File is larger than ${maxFileSize}`;
+        return error;
+    }, [isDragReject, error, fileRejections]);
+    if (isUploadSuccess && selectedFiles.length && !isCreateLoading) {
+        return (_jsxs(Wrapper, { children: [_jsxs(Box, { children: [_jsx(Title, { children: "File uploaded" }), subtitleComponent] }), _jsx(FileUploader, { children: _jsxs(Content, { children: [isUploadSuccess && _jsx(Box, { component: "img", src: blueCircleCheckIcon, width: 56, height: 56 }), _jsxs(TextWrapper, Object.assign({ sx: { fontWeight: 600 } }, { children: [_jsx(Box, { children: selectedFiles[0].name }), _jsx(Maximum, { children: readableFileSize(selectedFiles[0].size) })] }))] }) }), _jsxs(SendBulkContainer, { children: [_jsx(Button, Object.assign({ onClick: () => {
+                                setSelectedFiles([]);
+                            } }, { children: _jsx(Icon, { src: trashBinIcon, alt: "delete", sx: { width: 14, height: 14 } }) })), _jsx(StyledButton, Object.assign({ disabled: isSendDisabled, onClick: () => {
+                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(selectedFiles);
+                            } }, { children: "Bulk Send" }))] })] }));
+    }
+    if (isCreateLoading && selectedFiles.length) {
+        return (_jsxs(Wrapper, { children: [_jsxs(Box, { children: [_jsx(Title, { children: t('uploading') }), _jsx(Format, { children: t('wait') }), subtitleComponent] }), _jsx(FileUploader, { children: _jsxs(Content, { children: [isCreateLoading && _jsx(CircularProgressWithLabel, { size: 56, value: progress }), _jsxs(TextWrapper, Object.assign({ sx: { fontWeight: 600 } }, { children: [_jsx(Box, { children: selectedFiles[0].name }), _jsx(Maximum, { children: readableFileSize(selectedFiles[0].size) })] }))] }) }), footer && footer] }));
+    }
+    return (_jsxs(Wrapper, { children: [_jsxs(Box, { children: [_jsx(Title, Object.assign({ isError: !!errorMessage }, { children: errorMessage || t('uploadBulkFile') })), !!errorMessage && _jsx(Format, { children: "Supported formats: xls, xlxs" }), subtitleComponent] }), _jsxs(FileUploader, Object.assign({}, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), _jsxs(Content, { children: [_jsx(Box, { component: "img", src: errorMessage ? redVerifyIcon : uploadBlueIcon, width: 56, height: 56 }), errorMessage ? (_jsx(_Fragment, { children: _jsx(UploadAgain, Object.assign({ onClick: open }, { children: t('uploadAgain') })) })) : (_jsxs(TextWrapper, { children: [_jsxs(Box, { children: [_jsx(Upload, Object.assign({ onClick: open }, { children: "Click to upload" })), " or drag and drop"] }), _jsxs(Maximum, { children: ["Maximum file size ", maxFileSize] }), accept && _jsx(Format, { children: t('supportedFormats', { accept }) })] }))] })] })), footer && footer] }));
+}
+export default memo(FileUpload);

package/build/components/FileUpload/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-OFBKWUDT.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import FileUpload from './FileUpload';
+export default FileUpload;

package/build/components/FileUpload/style.js

@@ -0,0 +1,106 @@
+import { Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled, alpha } from '@mui/material/styles';
+import Text from '../Text';
+export const Wrapper = styled(Box)(() => ({
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '32px',
+}));
+export const Title = styled(Text, { shouldForwardProp: (props) => props !== 'isError' })(({ theme, isError }) => ({
+    color: isError ? '#FF2000' : theme.palette.text.primary,
+    fontSize: '18px',
+    fontWeight: 600,
+    lineHeight: '20px',
+    marginBottom: '8px',
+}));
+export const UploadAgain = styled(Box)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: '12px',
+    fontWeight: 500,
+    lineHeight: '20px',
+    padding: '4px 12px',
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+    background: theme.palette.common.white,
+    cursor: 'pointer',
+}));
+export const Format = styled(Text)(({ theme }) => ({
+    color: alpha(theme.palette.text.primary, 0.7),
+    fontSize: '12px',
+    fontWeight: 500,
+    lineHeight: '20px',
+}));
+export const FileUploader = styled(Box)(({ theme }) => ({
+    width: 431,
+    height: 176,
+    border: `1px dashed ${theme.palette.secondary.light}`,
+    borderRadius: '8px',
+    padding: '24px 0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const Content = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '24px',
+    color: theme.palette.text.primary,
+    fontSize: '14px',
+    lineHeight: '20px',
+    cursor: 'default',
+}));
+export const Upload = styled('span')(() => ({
+    fontWeight: 600,
+    textDecorationLine: 'underline',
+    cursor: 'pointer',
+}));
+export const TextWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px',
+    color: theme.palette.text.primary,
+}));
+export const Maximum = styled(Box)(({ theme }) => ({
+    color: alpha(theme.palette.text.primary, 0.7),
+    fontSize: '12px',
+    fontWeight: 500,
+    lineHeight: '20px',
+}));
+export const StyledButton = styled(Button)(({ theme, disabled }) => ({
+    borderRadius: '4px',
+    minWidth: '105px',
+    background: disabled ? alpha(theme.palette.info.dark, 0.4) : theme.palette.info.dark,
+    color: theme.palette.common.white,
+    padding: '4px 8px',
+    fontSize: '9px',
+    fontWeight: 600,
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textTransform: 'none',
+    '&:hover': {
+        background: theme.palette.info.dark,
+        opacity: 0.8,
+    },
+    '&.Mui-disabled': {
+        color: theme.palette.common.white,
+    },
+}));
+export const SendBulkContainer = styled(Box)(() => ({
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '6px',
+    boxShadow: '0px 4px 40px 0px rgba(0, 0, 0, 0.19)',
+    borderRadius: '4px',
+}));

package/build/components/FileUploader/FileUploader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { redVerifyIcon, uploadBlueIcon } from '../../constants/index.js';
+import { Content, ErrorMessage, StyledFileUploader, IconWrapper, Maximum, TextWrapper, Upload } from './style';
+const FileUploader = ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, label = 'Click to upload', hintText, sx, }) => {
+    return (_jsxs(StyledFileUploader, Object.assign({}, getRootProps(), { sx: sx, onClick: open }, { children: [_jsx("input", Object.assign({ "data-slot": "input" }, getInputProps(), { onChange: (e) => {
+                    const processedFiles = processFiles(Array.from(e.target.files || []));
+                    if (processedFiles.length > 0 || !preventDuplicates) {
+                        onChangeFiles(processedFiles);
+                    }
+                }, disabled: disabled })), _jsxs(Content, Object.assign({ "data-slot": "content" }, { children: [_jsx(IconWrapper, Object.assign({ "data-slot": "icon-wrapper" }, { children: _jsx(Box, { component: "img", src: errorMessage ? redVerifyIcon : uploadBlueIcon, width: 16, height: 16 }) })), errorMessage ? (_jsxs(TextWrapper, { children: [_jsx(ErrorMessage, { children: errorMessage }), _jsx(Upload, { children: "Click to upload again" })] })) : (_jsxs(TextWrapper, { children: [_jsx(Upload, { children: label }), _jsx(Maximum, { children: hintText || `PDF, JPG or PNG files up to ${maxFileSize}` })] }))] }))] })));
+};
+export default FileUploader;

package/build/components/FileUploader/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-NQVCWKMH.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import FileUploader from './FileUploader';
+export default FileUploader;

package/build/components/FileUploader/style.js

@@ -0,0 +1,55 @@
+import { Box } from '@mui/material';
+import { styled, alpha } from '@mui/material/styles';
+import Text from '../Text';
+export const StyledFileUploader = styled(Box)(({ theme }) => ({
+    width: '100%',
+    borderRadius: '4px',
+    padding: '4px 8px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    background: theme.palette.grey[400],
+    gap: '8px',
+    cursor: 'pointer',
+}));
+export const Content = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    color: theme.palette.text.primary,
+    cursor: 'pointer',
+    gap: '8px',
+}));
+export const Upload = styled('span')(({ theme }) => ({
+    fontWeight: 500,
+    color: theme.palette.text.primary,
+    cursor: 'pointer',
+    fontSize: '9px',
+}));
+export const TextWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap: '4px',
+    color: theme.palette.text.primary,
+}));
+export const Maximum = styled(Box)(({ theme }) => ({
+    color: alpha(theme.palette.text.primary, 0.3),
+    fontSize: '8px',
+    fontWeight: 500,
+}));
+export const IconWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '8px',
+    background: theme.palette.common.white,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+}));
+export const ErrorMessage = styled(Text)(({ theme }) => ({
+    color: theme.palette.error.main,
+    fontSize: '8px',
+    fontWeight: 500,
+}));

package/build/components/FileUploader/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/FilterDropdown/FilterDropdown.js

@@ -0,0 +1,58 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { useTranslation } from 'react-i18next';
+import { StyledMenu as Menu } from './style';
+import { darkFilterIcon } from '../../constants/index.js';
+import { CustomBackdrop } from '../index.js';
+import { CancelButton, FilterButton, Footer, OkayButton, TitleStyled } from './style';
+export default function FilterDropdown(_a) {
+    var { onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, hideTitle = false, renderButton, onOpenChange, menuProps } = _a, props = __rest(_a, ["onConfirm", "onCancel", "isOkayButDisabled", "children", "isDisabled", "icon", "title", "menuStyle", "hideTitle", "renderButton", "onOpenChange", "menuProps"]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const onOpen = (e) => {
+        if (isDisabled)
+            return;
+        if (!open) {
+            setAnchorEl(e.currentTarget);
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+            return;
+        }
+        onClose();
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+        onCancel();
+    };
+    const handleCancel = () => {
+        if (!open)
+            return;
+        onCancel();
+        onClose();
+    };
+    const handleConfirm = () => {
+        onConfirm();
+        onClose();
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, Object.assign({}, props, { children: [_jsx(FilterButton, Object.assign({ className: "filter-button", isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && Object.assign({ pointerEvents: 'none', opacity: 0.5 }, props.sx))) }, { children: renderButton !== null && renderButton !== void 0 ? renderButton : _jsx(Box, { component: "img", src: icon !== null && icon !== void 0 ? icon : darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, onClose: handleCancel, anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'right',
+                    }, transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'right',
+                    }, sx: Object.assign({ marginTop: '8px', marginBottom: '8px', width: 193 }, menuStyle) }, menuProps, { children: [!hideTitle && _jsx(TitleStyled, Object.assign({ component: "span" }, { children: title !== null && title !== void 0 ? title : t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] })) })));
+}

package/build/components/FilterDropdown/components/BrandItem/BrandItem.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { MenuItem, Text } from '../../../index.js';
+import { rightArrow } from '../../../../constants/index.js';
+import { getNameText } from '../../../../utils/index.js';
+import FlatMerchantsListMenu from '../FlatMerchantsListMenu';
+import { Brand } from './style';
+export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneMerchantSelected = false, showSearchInput = false, renderBrandLogo, onChangeMerchant, }) {
+    var _a, _b;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const selectedBrandMerchants = useMemo(() => { var _a; return (_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.filter((merchant) => merchantsIds.includes(merchant.legacy_id)); }, [merchantsIds, brand.merchants]);
+    const isAllBrandsSelected = useMemo(() => { var _a; return (selectedBrandMerchants === null || selectedBrandMerchants === void 0 ? void 0 : selectedBrandMerchants.length) === ((_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.length); }, [selectedBrandMerchants === null || selectedBrandMerchants === void 0 ? void 0 : selectedBrandMerchants.length, (_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.length]);
+    const isSomeSelected = useMemo(() => !isAllBrandsSelected && selectedBrandMerchants.length > 0, [isAllBrandsSelected, selectedBrandMerchants]);
+    const onClickBrand = (e) => {
+        e.stopPropagation();
+        if (isAllBrandsSelected) {
+            onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant(merchantsIds.filter((merchantId) => !brand.merchants.some(({ legacy_id }) => merchantId === legacy_id)));
+            return;
+        }
+        if (isSomeSelected) {
+            const uniqueMids = [...new Set([...merchantsIds, ...selectedBrandMerchants.map(({ legacy_id }) => legacy_id)])];
+            onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant(uniqueMids);
+            return;
+        }
+        onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant([...merchantsIds, ...brand.merchants.map(({ legacy_id }) => legacy_id)]);
+    };
+    return (_jsxs(MenuItem, Object.assign({ isSelected: isAllBrandsSelected, isIndeterminate: isSomeSelected, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: (e) => {
+            if (isDisabled)
+                return;
+            onClickBrand(e);
+        }, isDisabled: isDisabled, sx: Object.assign({ maxHeight: 35, minHeight: 35 }, (open && { boxShadow: '0px 0px 16px 0px #00000021' })) }, { children: [_jsxs(Brand, { children: [renderBrandLogo === null || renderBrandLogo === void 0 ? void 0 : renderBrandLogo(brand.logo), _jsx(Text, Object.assign({ sx: { fontSize: '11px' } }, { children: getNameText(brand.name) }))] }), ((_b = brand.merchants) === null || _b === void 0 ? void 0 : _b.length) > 0 && _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(FlatMerchantsListMenu, { anchorEl: anchorEl, brand: brand, merchantsIds: merchantsIds, onChangeMerchant: onChangeMerchant, atLeastOneMerchantSelected: atLeastOneMerchantSelected, showSearchInput: showSearchInput })] })));
+}

package/build/components/FilterDropdown/components/BrandItem/index.js

@@ -0,0 +1,2 @@
+import BrandItem from './BrandItem';
+export default BrandItem;

package/build/components/FilterDropdown/components/BrandItem/style.js

@@ -0,0 +1,9 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Brand = styled(Box)(() => ({
+    display: 'flex',
+    gap: '4px',
+    alignItems: 'center',
+    flex: 1,
+    marginInlineEnd: '8px',
+}));

package/build/components/FilterDropdown/components/CountriesItem/CountriesItem.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CountryFlag, Menu, MenuItem, Text } from '../../../index.js';
+import { rightArrow } from '../../../../constants/index.js';
+import { getCountryNameByISO } from '../../../../utils/index.js';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+function CountriesItem({ countriesIds = [], isLoading, countries = [], onFilterChange, atLeastOneCountrySelected = false, hideCheckbox = false, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const onOpen = (e) => {
+        if (!open)
+            setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        if (open)
+            setAnchorEl(null);
+    };
+    const isCountrySelected = useCallback((countryCode) => countriesIds === null || countriesIds === void 0 ? void 0 : countriesIds.includes(countryCode), [countriesIds]);
+    const isAllSelected = useMemo(() => {
+        if (!countries.length)
+            return false;
+        return countries.every((country) => isCountrySelected(country));
+    }, [countries, isCountrySelected]);
+    const isSomeSelected = useMemo(() => !isAllSelected && countriesIds.length > 0, [countriesIds, isAllSelected]);
+    const onClick = () => {
+        if (atLeastOneCountrySelected)
+            return;
+        if (isAllSelected) {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
+            return;
+        }
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(countries);
+    };
+    const isLastCountryToBeDisabled = (currMid) => {
+        return countriesIds.length === 1 && countriesIds[0] === currMid && atLeastOneCountrySelected;
+    };
+    const onClickCountry = (e, countryCode) => {
+        e.stopPropagation();
+        if (isLastCountryToBeDisabled(countryCode))
+            return;
+        if (isCountrySelected(countryCode)) {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(countriesIds.filter((country) => country !== countryCode));
+            return;
+        }
+        const uniqueMids = [...new Set([...countriesIds, countryCode])];
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(uniqueMids);
+    };
+    const isDisabled = isLoading || (countries === null || countries === void 0 ? void 0 : countries.length) <= 0 || atLeastOneCountrySelected;
+    return (_jsxs(MenuItem, Object.assign({ isDisabled: isDisabled, isSelected: isAllSelected, hideCheckbox: hideCheckbox, isIndeterminate: isSomeSelected, sx: Object.assign(Object.assign({ maxHeight: 35, minHeight: 35, padding: '12px 8px 12px 16px' }, (open && { boxShadow: '0px 0px 16px 0px #00000021' })), (!(countries === null || countries === void 0 ? void 0 : countries.length) && { opacity: 0.5, pointerEvents: 'none' })), onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx(Text, Object.assign({ sx: { fontSize: '11px', flex: 1 } }, { children: t('walletCountry') })), (countries === null || countries === void 0 ? void 0 : countries.length) > 0 && _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "right-start", sx: { width: 200, overflow: 'auto' } }, { children: countries === null || countries === void 0 ? void 0 : countries.map((country, index) => (_jsxs(MenuItem, Object.assign({ isSelected: isCountrySelected(country), isDisabled: isLoading || isLastCountryToBeDisabled(country), onClick: (e) => {
+                        onClickCountry(e, country);
+                    }, sx: { maxHeight: 35, minHeight: 35 } }, { children: [_jsx(CountryFlag, { countryCode: country }), _jsx(Text, Object.assign({ sx: { fontSize: '11px !important', fontWeight: '500 !important' } }, { children: getCountryNameByISO(country) }))] }), `key-${country}-${index}`))) }))] })));
+}
+export default memo(CountriesItem);

package/build/components/FilterDropdown/components/CountriesItem/index.js

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

package/build/components/FilterDropdown/components/CurrenciesItem/CurrenciesItem.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CountryFlag, Menu, MenuItem, Text } from '../../../index.js';
+import { rightArrow, SUPPORTED_CURRENCY_DETAILS } from '../../../../constants/index.js';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+function CurrenciesItem({ currenciesIds = [], isLoading, currencies = [], onFilterChange, atLeastOneCurrencySelected = false, hideCheckbox = false, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const onOpen = (e) => {
+        if (!open)
+            setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        if (open)
+            setAnchorEl(null);
+    };
+    const isCurrencySelected = useCallback((currencyCode) => currenciesIds === null || currenciesIds === void 0 ? void 0 : currenciesIds.includes(currencyCode), [currenciesIds]);
+    const isAllSelected = useMemo(() => {
+        if (!currencies.length)
+            return false;
+        return currencies.every((currency) => isCurrencySelected(currency));
+    }, [currencies, isCurrencySelected]);
+    const isSomeSelected = useMemo(() => !isAllSelected && currenciesIds.length > 0, [currenciesIds, isAllSelected]);
+    const onClick = () => {
+        if (atLeastOneCurrencySelected)
+            return;
+        if (isAllSelected) {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
+            return;
+        }
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(currencies);
+    };
+    const isLastCurrencyToBeDisabled = (currMid) => {
+        return currenciesIds.length === 1 && currenciesIds[0] === currMid && atLeastOneCurrencySelected;
+    };
+    const onClickCurrency = (e, currencyCode) => {
+        e.stopPropagation();
+        if (isLastCurrencyToBeDisabled(currencyCode))
+            return;
+        if (isCurrencySelected(currencyCode)) {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(currenciesIds.filter((currency) => currency !== currencyCode));
+            return;
+        }
+        const uniqueMids = [...new Set([...currenciesIds, currencyCode])];
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(uniqueMids);
+    };
+    const isDisabled = isLoading || (currencies === null || currencies === void 0 ? void 0 : currencies.length) <= 0 || atLeastOneCurrencySelected;
+    return (_jsxs(MenuItem, Object.assign({ isDisabled: isDisabled, isSelected: isAllSelected, hideCheckbox: hideCheckbox, isIndeterminate: isSomeSelected, sx: Object.assign(Object.assign({ maxHeight: 35, minHeight: 35, padding: '12px 8px 12px 16px' }, (open && { boxShadow: '0px 0px 16px 0px #00000021' })), (!(currencies === null || currencies === void 0 ? void 0 : currencies.length) && { opacity: 0.5, pointerEvents: 'none' })), onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx(Text, Object.assign({ sx: { fontSize: '11px', flex: 1 } }, { children: t('currency') })), (currencies === null || currencies === void 0 ? void 0 : currencies.length) > 0 && _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "right-start", sx: { width: 200, overflow: 'auto' } }, { children: currencies === null || currencies === void 0 ? void 0 : currencies.map((currency, index) => {
+                    var _a;
+                    const countryCode = (_a = SUPPORTED_CURRENCY_DETAILS[currency]) === null || _a === void 0 ? void 0 : _a.country;
+                    if (!countryCode)
+                        return null;
+                    return (_jsxs(MenuItem, Object.assign({ isSelected: isCurrencySelected(currency), isDisabled: isLoading || isLastCurrencyToBeDisabled(currency), onClick: (e) => {
+                            onClickCurrency(e, currency);
+                        }, sx: { maxHeight: 35, minHeight: 35 } }, { children: [_jsx(CountryFlag, { countryCode: SUPPORTED_CURRENCY_DETAILS[currency].country }), ' ', _jsx(Text, Object.assign({ sx: { fontSize: '11px !important', fontWeight: '500 !important' } }, { children: currency }))] }), `key-${currency}-${index}`));
+                }) }))] })));
+}
+export default memo(CurrenciesItem);

package/build/components/FilterDropdown/components/CurrenciesItem/index.js

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

package/build/components/FilterDropdown/components/FlatMerchantsListMenu/FlatMerchantsListMenu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
+import { Menu, SearchListInput } from '../../../index.js';
+import { MerchantMenuItemStyled, MerchantWrapper, MerchantID, MerchantName } from './style';
+export default function FlatMerchantsListMenu({ brand, merchantsIds, onChangeMerchant, atLeastOneMerchantSelected = false, showSearchInput = false, anchorEl, }) {
+    const [searchInputValue, setSearchInputValue] = useState('');
+    const open = Boolean(anchorEl);
+    const isMerchantSelected = useCallback((merchantId) => merchantsIds.includes(merchantId), [merchantsIds]);
+    const onClickMerchant = (e, merchantId) => {
+        e.stopPropagation();
+        if (isMerchantSelected(merchantId)) {
+            onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant(merchantsIds.filter((merchant) => merchant !== merchantId));
+            return;
+        }
+        const uniqueMids = [...new Set([...merchantsIds, merchantId])];
+        onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant(uniqueMids);
+    };
+    const isLastMidToBeDisabled = (currMid) => {
+        return merchantsIds.length === 1 && merchantsIds[0] === currMid && atLeastOneMerchantSelected;
+    };
+    const handleSearchInputChange = (value) => {
+        setSearchInputValue(value);
+    };
+    const handleSearchInputReset = () => {
+        setSearchInputValue('');
+    };
+    const merchants = useMemo(() => { var _a; return (_a = brand.merchants) !== null && _a !== void 0 ? _a : []; }, [brand.merchants]);
+    const filteredMerchants = useMemo(() => {
+        if (!(searchInputValue === null || searchInputValue === void 0 ? void 0 : searchInputValue.trim()))
+            return merchants;
+        return merchants === null || merchants === void 0 ? void 0 : merchants.filter((merchant) => { var _a; return ((_a = merchant === null || merchant === void 0 ? void 0 : merchant.display_name) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(searchInputValue.trim().toLowerCase()); });
+    }, [searchInputValue, merchants]);
+    const displayedMerchants = useMemo(() => (showSearchInput ? filteredMerchants : merchants), [filteredMerchants, merchants, showSearchInput]);
+    return (_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "right-start" }, { children: [showSearchInput && merchants.length > 1 && (_jsx(SearchListInput, { placeholder: "Merchants", name: "merchants", value: searchInputValue, onSearchChange: handleSearchInputChange, onSearchReset: handleSearchInputReset, sx: { px: '8px' } })), displayedMerchants === null || displayedMerchants === void 0 ? void 0 : displayedMerchants.map((merchant) => (_jsx(MerchantMenuItemStyled, Object.assign({ isDisabled: isLastMidToBeDisabled(merchant.legacy_id), isSelected: isMerchantSelected(merchant.legacy_id), onClick: (e) => {
+                    if (isLastMidToBeDisabled(merchant.legacy_id))
+                        return;
+                    onClickMerchant(e, merchant.legacy_id);
+                }, sx: { maxHeight: 36, minHeight: 36 } }, { children: _jsxs(MerchantWrapper, { children: [_jsx(MerchantName, Object.assign({ component: "span" }, { children: merchant.display_name })), _jsx(MerchantID, Object.assign({ component: "span" }, { children: merchant.legacy_id }))] }) }), merchant === null || merchant === void 0 ? void 0 : merchant.legacy_id)))] })));
+}

package/build/components/FilterDropdown/components/FlatMerchantsListMenu/index.js

@@ -0,0 +1,2 @@
+import FlatMerchantsListMenu from './FlatMerchantsListMenu';
+export default FlatMerchantsListMenu;

package/build/components/FilterDropdown/components/FlatMerchantsListMenu/style.js

@@ -0,0 +1,23 @@
+import Box from '@mui/material/Box';
+import { styled, alpha } from '@mui/material/styles';
+import { MenuItem } from '../../../index.js';
+export const MerchantMenuItemStyled = styled(MenuItem)(() => ({
+    padding: '12px 16px',
+    border: 'none !important',
+    '&:hover': { boxShadow: '0px 0px 16px 0px #00000021' },
+}));
+export const MerchantWrapper = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px',
+}));
+export const MerchantID = styled(Box)(({ theme }) => ({
+    color: alpha(theme.palette.text.primary, 0.5),
+    fontSize: '9px',
+}));
+export const MerchantName = styled(Box)(() => ({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '178px',
+}));

package/build/components/FilterDropdown/components/MerchantItem/MerchantItem.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Menu, MenuItem, SearchListInput, Text } from '../../../index.js';
+import { rightArrow } from '../../../../constants/index.js';
+import { getNameText } from '../../../../utils/index.js';
+import BrandItem from '../BrandItem';
+import FlatMerchantsListMenu from '../FlatMerchantsListMenu';
+export default function MerchantItem({ brands, isLoading, onFilterChange, merchantsIds = [], atLeastOneMerchantSelected = false, showSearchInput = false, hideCheckbox = false, renderBrandLogo, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [searchInputValue, setSearchInputValue] = useState('');
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const isAllSelected = useMemo(() => {
+        if (!brands.length)
+            return false;
+        return brands.every((brand) => { var _a; return (_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.every(({ legacy_id }) => merchantsIds.includes(legacy_id)); });
+    }, [merchantsIds, brands, hideCheckbox]);
+    const isSomeSelected = useMemo(() => !isAllSelected && merchantsIds.length > 0, [merchantsIds, isAllSelected]);
+    // Count the number of brands that have selected merchants
+    const brandsWithSelectedMerchants = useMemo(() => {
+        return brands.filter((brand) => { var _a; return (_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.some((merchant) => merchantsIds === null || merchantsIds === void 0 ? void 0 : merchantsIds.includes(merchant.legacy_id)); }).length;
+    }, [brands, merchantsIds]);
+    const onClick = () => {
+        if (isAllSelected && !atLeastOneMerchantSelected) {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
+            return;
+        }
+        const allMerchants = brands.flatMap((brand) => { var _a; return (_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.map(({ legacy_id }) => legacy_id); });
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(allMerchants);
+    };
+    const isDisabled = isLoading || !(brands === null || brands === void 0 ? void 0 : brands.length);
+    const handleSearchInputChange = (value) => {
+        setSearchInputValue(value);
+    };
+    const handleSearchInputReset = () => {
+        setSearchInputValue('');
+    };
+    const filteredBrands = useMemo(() => {
+        if (!searchInputValue.trim())
+            return brands;
+        return brands.filter((brand) => {
+            var _a, _b, _c;
+            return ((_b = (_a = getNameText(brand.name)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(searchInputValue.trim().toLowerCase())) ||
+                ((_c = brand === null || brand === void 0 ? void 0 : brand.id) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchInputValue.trim().toLowerCase()));
+        });
+    }, [searchInputValue, brands]);
+    const displayBrands = useMemo(() => (showSearchInput ? filteredBrands : brands), [brands, filteredBrands, showSearchInput]);
+    return (_jsxs(MenuItem, Object.assign({ isDisabled: isDisabled, isSelected: isAllSelected, hideCheckbox: hideCheckbox, isIndeterminate: isSomeSelected, sx: Object.assign(Object.assign({ maxHeight: 36, minHeight: 36, padding: '12px 8px 12px 16px' }, (open && { boxShadow: '0px 0px 16px 0px #00000021' })), (isDisabled && {
+            pointerEvents: 'none',
+            opacity: 0.5,
+            cursor: 'default',
+        })), onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx(Text, Object.assign({ sx: { fontSize: '11px', flex: 1 } }, { children: t('merchant') })), brands.length > 0 && _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), (brands === null || brands === void 0 ? void 0 : brands.length) === 1 ? (_jsx(FlatMerchantsListMenu, { anchorEl: anchorEl, brand: brands[0], merchantsIds: merchantsIds, onChangeMerchant: onFilterChange, atLeastOneMerchantSelected: atLeastOneMerchantSelected, showSearchInput: showSearchInput })) : (_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "right-start" }, { children: [showSearchInput && brands.length > 1 && (_jsx(SearchListInput, { placeholder: "Brands", name: "brands", value: searchInputValue, onSearchChange: handleSearchInputChange, onSearchReset: handleSearchInputReset, sx: { px: '8px' } })), displayBrands === null || displayBrands === void 0 ? void 0 : displayBrands.map((brand) => (_jsx(BrandItem, { isDisabled: brandsWithSelectedMerchants === 1 && atLeastOneMerchantSelected, brand: brand, merchantsIds: merchantsIds, onChangeMerchant: onFilterChange, atLeastOneMerchantSelected: atLeastOneMerchantSelected, showSearchInput: showSearchInput, renderBrandLogo: renderBrandLogo }, brand.id)))] })))] })));
+}

package/build/components/FilterDropdown/components/MerchantItem/index.js

@@ -0,0 +1,2 @@
+export { default } from './MerchantItem';
+export * from './MerchantItem';