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

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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

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

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

@@ -1,59 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

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

package/build/components/FilterDropdown/components/MerchantsFilterItem/MerchantsFilterItem.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MenuItem, SelectedState, Text, TreeDropdown, TreeManager } from '../../../index.js';
-import { useState, useMemo, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { createTreeDefinitions } from './utils';
-import { TreeLevel } from './type';
-import { rightArrow } from '../../../../constants/index.js';
-const MerchantsFilterItem = (props) => {
-    const { brands, isLoading, initialValue, onFilterChange, BrandLogoComponent } = props;
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [merchantSelectStatus, setMerchantSelectStatus] = useState(SelectedState.UNCHECKED);
-    const treeDropdownRef = useRef(null);
-    const open = Boolean(anchorEl);
-    const { t, i18n } = useTranslation();
-    const treeDefinition = useMemo(() => createTreeDefinitions(brands, initialValue, i18n.language), [brands, initialValue, i18n.language]);
-    const brandsTreeItems = treeDefinition.children;
-    const isDisabled = isLoading || !brandsTreeItems.length;
-    const getMerchantSelectStatus = useCallback((selectedTree) => {
-        const checkedBrands = selectedTree.filter((brand) => brand.status === SelectedState.CHECKED);
-        const indeterminateBrands = selectedTree.filter((brand) => brand.status === SelectedState.INDETERMINATE);
-        return checkedBrands.length === brandsTreeItems.length
-            ? SelectedState.CHECKED
-            : indeterminateBrands.length > 0 || checkedBrands.length > 0
-                ? SelectedState.INDETERMINATE
-                : SelectedState.UNCHECKED;
-    }, [brandsTreeItems]);
-    const handleTreeMounted = useCallback(({ selectedTree }) => {
-        setMerchantSelectStatus(getMerchantSelectStatus(selectedTree));
-    }, [getMerchantSelectStatus]);
-    const handleTreeChange = useCallback((nextTree) => {
-        setMerchantSelectStatus(getMerchantSelectStatus(nextTree));
-        const mids = TreeManager.filterNodesByLevelKey(nextTree, TreeLevel.MERCHANT).map(({ id }) => id);
-        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(mids);
-    }, [onFilterChange, getMerchantSelectStatus]);
-    const handleClick = useCallback(() => {
-        var _a;
-        (_a = treeDropdownRef.current) === null || _a === void 0 ? void 0 : _a.toggleAll(merchantSelectStatus !== SelectedState.CHECKED);
-    }, [merchantSelectStatus]);
-    return (_jsxs(MenuItem, Object.assign({ isSelected: merchantSelectStatus === SelectedState.CHECKED, isIndeterminate: merchantSelectStatus === SelectedState.INDETERMINATE, isDisabled: isDisabled, onMouseEnter: (e) => setAnchorEl(e.currentTarget), onMouseLeave: () => setAnchorEl(null), onClick: handleClick, 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',
-        })) }, { 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 } }), !isLoading && (_jsx(TreeDropdown, { ref: treeDropdownRef, placement: "right-start", anchorEl: anchorEl, exposeOnlySelectedTree: true, treeDefinition: treeDefinition, onChange: handleTreeChange, onMounted: handleTreeMounted, IconComponent: BrandLogoComponent }))] })));
-};
-export default MerchantsFilterItem;

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

@@ -1,4 +0,0 @@
-import MerchantsFilterItem from './MerchantsFilterItem';
-export * from './type';
-export * from './utils';
-export default MerchantsFilterItem;

package/build/components/FilterDropdown/components/MerchantsFilterItem/type.js

@@ -1,7 +0,0 @@
-export var TreeLevel;
-(function (TreeLevel) {
-    TreeLevel["BRAND"] = "BRAND";
-    TreeLevel["COUNTRY"] = "COUNTRY";
-    TreeLevel["ENTITY"] = "ENTITY";
-    TreeLevel["MERCHANT"] = "MERCHANT";
-})(TreeLevel || (TreeLevel = {}));

package/build/components/FilterDropdown/components/MerchantsFilterItem/utils.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CountryFlag, SelectedState } from '../../../index.js';
-import { getNameText } from '../../../../utils/index.js';
-import { TreeLevel } from './type';
-export const ID_SEPERATOR = '/';
-export const generateIdFromParts = (...args) => args.join(ID_SEPERATOR);
-export const createTreeDefinitions = (brands, selectedMerchantIds, language) => {
-    const children = brands.map((brand) => {
-        var _a, _b;
-        const entities = (_a = brand.entities) !== null && _a !== void 0 ? _a : [];
-        // level 2: unique countries per brand
-        const countries = Array.from(new Set(entities.map((entity) => entity.country).filter(Boolean)));
-        const countryNodes = countries.map((countryCode) => {
-            const entitiesInCountry = entities.filter((entity) => entity.country === countryCode);
-            // level 3: entities per country
-            const entityNodes = entitiesInCountry.map((entity) => {
-                var _a, _b;
-                const merchants = (_a = entity.merchants) !== null && _a !== void 0 ? _a : [];
-                // level 4: merchants per entity
-                const merchantNodes = merchants.map((merchant) => ({
-                    id: merchant.legacy_id,
-                    label: merchant.display_name,
-                    levelKey: TreeLevel.MERCHANT,
-                    status: selectedMerchantIds.includes(merchant.legacy_id) ? SelectedState.CHECKED : SelectedState.UNCHECKED,
-                    hintText: merchant.legacy_id,
-                }));
-                return Object.assign({ id: generateIdFromParts(brand.id, countryCode, entity.id), label: (_b = getNameText(entity.legal_name, language)) !== null && _b !== void 0 ? _b : entity.id, levelKey: TreeLevel.ENTITY, children: merchantNodes, header: 'Merchants' }, (merchantNodes.length > 10 && {
-                    searchProps: {
-                        getValues: (item) => [item.label, item.id],
-                    },
-                }));
-            });
-            return Object.assign({ id: generateIdFromParts(brand.id, countryCode), label: countryCode, levelKey: TreeLevel.COUNTRY, children: entityNodes, header: 'Entities', iconComponent: _jsx(CountryFlag, { countryCode: countryCode, width: 14 }) }, (entityNodes.length > 10 && {
-                searchProps: {
-                    getValues: (item) => [item.label, item.id],
-                },
-            }));
-        });
-        return {
-            id: brand.id,
-            label: (_b = getNameText(brand.name, language)) !== null && _b !== void 0 ? _b : brand.id,
-            levelKey: TreeLevel.BRAND,
-            children: countryNodes,
-            header: 'Countries',
-            icon: {
-                fileId: brand.logo,
-            },
-        };
-    });
-    return Object.assign({ levelKey: TreeLevel.BRAND, children, header: 'Brands' }, (children.length > 10 && {
-        searchProps: {
-            getValues: (item) => [item.label, item.id],
-        },
-    }));
-};

package/build/components/FilterDropdown/components/RetailersItem/RetailersItem.js

@@ -1,68 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu, MenuItem, Text, SearchListInput } from '../../../index.js';
-import { rightArrow } from '../../../../constants/index.js';
-import { memo, useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { RetailerName } from './style';
-function RetailersItem({ retailersIds = [], isLoading, retailers = [], onFilterChange, atLeastOneRetailerSelected = false, showSearchInput = false, hideCheckbox = false, }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const { t, i18n } = useTranslation();
-    const [searchInputValue, setSearchInputValue] = useState('');
-    const onOpen = (e) => {
-        setAnchorEl(e.currentTarget);
-    };
-    const onClose = () => {
-        setAnchorEl(null);
-    };
-    const isRetailerSelected = useCallback((retailerId) => retailersIds === null || retailersIds === void 0 ? void 0 : retailersIds.includes(retailerId), [retailersIds]);
-    const isAllSelected = useMemo(() => {
-        if (!retailers.length)
-            return false;
-        return retailers.every((retailer) => isRetailerSelected(retailer.id));
-    }, [retailers, isRetailerSelected, hideCheckbox]);
-    const isSomeSelected = useMemo(() => !isAllSelected && retailersIds.length > 0, [retailersIds, isAllSelected]);
-    const onClick = () => {
-        if (isAllSelected && !atLeastOneRetailerSelected) {
-            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
-            return;
-        }
-        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(retailers.map((brand) => brand.id));
-    };
-    const isLastRetailerToBeDisabled = (currMid) => {
-        return retailersIds.length === 1 && retailersIds[0] === currMid && atLeastOneRetailerSelected;
-    };
-    const onClickRetailer = (e, retailerId) => {
-        e.stopPropagation();
-        if (isLastRetailerToBeDisabled(retailerId))
-            return;
-        if (isRetailerSelected(retailerId)) {
-            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(retailersIds.filter((retailer) => retailer !== retailerId));
-            return;
-        }
-        const uniqueMids = [...new Set([...retailersIds, retailerId])];
-        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(uniqueMids);
-    };
-    const isDisabled = isLoading || !(retailers === null || retailers === void 0 ? void 0 : retailers.length);
-    const handleSearchInputChange = (value) => {
-        setSearchInputValue(value);
-    };
-    const handleSearchInputReset = () => {
-        setSearchInputValue('');
-    };
-    const filteredRetailers = useMemo(() => {
-        if (!(searchInputValue === null || searchInputValue === void 0 ? void 0 : searchInputValue.trim()))
-            return retailers;
-        return retailers === null || retailers === void 0 ? void 0 : retailers.filter((retailer) => { var _a, _b, _c, _d, _e, _f; return ((_f = (_c = (_b = (_a = retailer === null || retailer === void 0 ? void 0 : retailer.brand) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b[i18n.language]) !== null && _c !== void 0 ? _c : (_e = (_d = retailer === null || retailer === void 0 ? void 0 : retailer.brand) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.en) !== null && _f !== void 0 ? _f : '').toLowerCase().includes(searchInputValue.trim().toLowerCase()); });
-    }, [searchInputValue, retailers, i18n.language]);
-    const displayedRetailers = useMemo(() => (showSearchInput ? filteredRetailers : retailers), [filteredRetailers, retailers, showSearchInput]);
-    return (_jsxs(MenuItem, Object.assign({ isDisabled: isDisabled, 
-        // TODO: the checkbox ui should be controlled using a state not through the isAllSelected variable
-        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' })), (isDisabled && { opacity: 0.5, pointerEvents: 'none', cursor: 'default' })), onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx(Text, Object.assign({ sx: { fontSize: '11px', flex: 1 } }, { children: t('retailers') })), (retailers === null || retailers === void 0 ? void 0 : retailers.length) > 0 && _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "right-start", sx: { height: 300, width: 200, overflow: 'auto' } }, { children: [showSearchInput && (_jsx(SearchListInput, { placeholder: "Retailers", name: "retailers", value: searchInputValue, onSearchChange: handleSearchInputChange, onSearchReset: handleSearchInputReset, sx: { px: '8px' } })), displayedRetailers === null || displayedRetailers === void 0 ? void 0 : displayedRetailers.map((retailer, index) => {
-                        var _a, _b, _c, _d, _e;
-                        return (_jsx(MenuItem, Object.assign({ isSelected: isRetailerSelected(retailer.id), isDisabled: isLoading || isLastRetailerToBeDisabled(retailer.id), onClick: (e) => {
-                                onClickRetailer(e, retailer.id);
-                            }, sx: { maxHeight: 35, minHeight: 35 } }, { children: _jsx(RetailerName, { children: (_c = (_b = (_a = retailer === null || retailer === void 0 ? void 0 : retailer.brand) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b[i18n.language]) !== null && _c !== void 0 ? _c : (_e = (_d = retailer === null || retailer === void 0 ? void 0 : retailer.brand) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.en }) }), `key-${retailer === null || retailer === void 0 ? void 0 : retailer.id}-${index}`));
-                    })] }))] })));
-}
-export default memo(RetailersItem);

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

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

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

@@ -1,8 +0,0 @@
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-export const RetailerName = styled(Box)(() => ({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    maxWidth: '164px',
-}));

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

@@ -1,6 +0,0 @@
-export { default as MerchantItem } from './MerchantItem';
-export { default as RetailersItem } from './RetailersItem';
-export { default as CountriesItem } from './CountriesItem';
-export { default as CurrenciesItem } from './CurrenciesItem';
-export { default as MerchantsFilterItem } from './MerchantsFilterItem';
-export * from './MerchantsFilterItem';

package/build/components/FilterDropdown/style.js

@@ -1,73 +0,0 @@
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import { Text } from '../index.js';
-export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, minHeight: 32, minWidth: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
-        opacity: 0.7,
-    } }, (isActive && {
-    boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
-    border: `1px solid ${theme.palette.info.dark}`,
-}))));
-export const StyledMenu = styled(Menu)(({ theme }) => ({
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
-    minWidth: 193,
-    '& .MuiPaper-root': {
-        borderRadius: theme.spacing(0.5),
-        '&>.MuiList-root': {
-            padding: 0,
-        },
-    },
-}));
-export const TitleStyled = styled(Text)(({ theme }) => ({
-    fontWeight: theme.typography.fontWeightMedium,
-    fontSize: theme.typography.subtitle1.fontSize,
-    color: theme.palette.grey[700],
-    paddingInlineStart: theme.spacing(2),
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    paddingInlineEnd: theme.spacing(1),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    display: 'block',
-}));
-export const Footer = styled(Box)(({ theme }) => ({
-    padding: '8px 16px',
-    display: 'flex',
-    gap: '8px',
-    justifyContent: 'flex-end',
-    backgroundColor: theme.palette.common.white,
-    borderTop: `1px solid ${theme.palette.divider}`,
-}));
-export const OkayButton = styled(Button)(({ theme }) => ({
-    textTransform: 'capitalize',
-    minWidth: 'auto',
-    width: 70,
-    borderRadius: '4px',
-    border: `1px solid ${theme.palette.info.dark}`,
-    backgroundColor: theme.palette.info.dark,
-    fontWeight: 700,
-    fontSize: '11px',
-    color: theme.palette.common.white,
-    '&:hover': {
-        backgroundColor: theme.palette.info.dark,
-    },
-    '&.Mui-disabled': {
-        color: '#fff !important',
-        opacity: 0.5,
-    },
-}));
-export const CancelButton = styled(Button)(({ theme }) => ({
-    textTransform: 'capitalize',
-    minWidth: 'auto',
-    width: 70,
-    borderRadius: '4px',
-    border: `1px solid ${theme.palette.divider}`,
-    backgroundColor: theme.palette.common.white,
-    fontWeight: 500,
-    fontSize: '11px',
-    color: theme.palette.text.primary,
-    '&:hover': {
-        background: 'transparent',
-    },
-}));

package/build/components/FilterDropdown/type.js

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

package/build/components/FilteredIds/FilteredIds.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import { whiteCloseIcon } from '../../constants/index.js';
-import { FilteredIdsContainer } from './style';
-import StyledBadge, { BadgeVariants } from '../CountBadge';
-import { StyledFilterName } from '../StatusButton/style';
-function FilteredIds({ Ids, onCancelClick, isShown, cardNumber }) {
-    var _a;
-    if (!isShown)
-        return null;
-    return (_jsxs(FilteredIdsContainer, Object.assign({ isLongerString: ((_a = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.length) !== null && _a !== void 0 ? _a : 0) > 11 }, { children: [cardNumber ? _jsx(StyledFilterName, { children: cardNumber }) : _jsx("span", { children: Ids === null || Ids === void 0 ? void 0 : Ids.join(',') }), _jsx(StyledBadge, Object.assign({ pointer: true, round: true, onClick: onCancelClick, variant: BadgeVariants.ACTIVE, sx: { position: 'absolute', right: '8px' } }, { children: _jsx("img", { src: whiteCloseIcon, alt: "close", style: {
-                        width: '8px',
-                        height: '7px',
-                    } }) }))] })));
-}
-export default memo(FilteredIds);