@tap-payments/os-micro-frontend-shared 0.1.313 → 0.1.314

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

@@ -6,7 +6,7 @@ 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;
+    var _a, _b;
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const onOpen = (e) => {
@@ -15,8 +15,8 @@ export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneM
     const onClose = () => {
         setAnchorEl(null);
     };
-    const selectedBrandMerchants = useMemo(() => brand.merchants.filter((merchant) => merchantsIds.includes(merchant.legacy_id)), [merchantsIds, brand.merchants]);
-    const isAllBrandsSelected = useMemo(() => selectedBrandMerchants.length === brand.merchants.length, [selectedBrandMerchants.length, brand.merchants.length]);
+    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();
@@ -35,5 +35,5 @@ export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneM
             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) }))] }), ((_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.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 })] })));
+        }, 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/FlatMerchantsListMenu/FlatMerchantsListMenu.js

@@ -31,7 +31,7 @@ export default function FlatMerchantsListMenu({ brand, merchantsIds, onChangeMer
         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 && (_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) => {
+    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);

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Menu, MenuItem, Text } from '../../../index.js';
+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) => {
@@ -18,25 +20,41 @@ export default function MerchantItem({ brands, isLoading, onFilterChange, mercha
     const isAllSelected = useMemo(() => {
         if (!brands.length)
             return false;
-        return brands.every((brand) => brand.merchants.every(({ legacy_id }) => merchantsIds.includes(legacy_id)));
+        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) => brand.merchants.some((merchant) => merchantsIds === null || merchantsIds === void 0 ? void 0 : merchantsIds.includes(merchant.legacy_id))).length;
+        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) => brand.merchants.map(({ legacy_id }) => legacy_id));
+        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 })) : (_jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "right-start" }, { children: brands === null || brands === void 0 ? void 0 : brands.map((brand) => (_jsx(BrandItem, { isDisabled: brandsWithSelectedMerchants === 1 && atLeastOneMerchantSelected, brand: brand, merchantsIds: merchantsIds, onChangeMerchant: onFilterChange, atLeastOneMerchantSelected: atLeastOneMerchantSelected, showSearchInput: showSearchInput, renderBrandLogo: renderBrandLogo }, brand.id))) })))] })));
+        })), 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/MerchantsDropdown/MerchantsDropdown.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { MerchantsDropdownProps } from './type';
-declare function MerchantsDropdown({ brands, isLoading, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, }: Readonly<MerchantsDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare function MerchantsDropdown({ brands, isLoading, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, showSearchInput, }: Readonly<MerchantsDropdownProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof MerchantsDropdown>;
 export default _default;

package/build/components/MerchantsDropdown/MerchantsDropdown.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useCallback, useRef } from 'react';
+import { memo, useMemo, useCallback, useRef, useState } from 'react';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { Loader, LastRowContent } from '../index.js';
+import { Loader, LastRowContent, SearchListInput } from '../index.js';
 import { downArrowIcon } from '../../constants/index.js';
+import { getNameText } from '../../utils/index.js';
 import BrandItem from './BrandItem';
 import { SelectedBrand, Label, CollapseIcon, LoadingRow, StyledMenu } from './style';
 import { useDropdownMenu, useDefaultMerchantSelection, getIsSingleMerchant } from './hooks';
@@ -18,10 +19,11 @@ const DropdownArrowIcon = ({ isLoading, isSingleMerchant, isOpen }) => {
     }
     return null;
 };
-function MerchantsDropdown({ brands, isLoading = true, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, }) {
+function MerchantsDropdown({ brands, isLoading = true, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, showSearchInput, }) {
     var _a;
     const { anchorElement, isOpen, openMenu, closeMenu } = useDropdownMenu();
     const controllerRef = useRef(null);
+    const [searchInputValue, setSearchInputValue] = useState('');
     useDefaultMerchantSelection(brands, selectedValue, onValueChange);
     const isSingleMerchant = useMemo(() => getIsSingleMerchant(brands), [brands]);
     const shouldDisableInteraction = isSingleMerchant || isDisabled || isLoading;
@@ -35,15 +37,31 @@ function MerchantsDropdown({ brands, isLoading = true, label, sx, selectedValue,
             closeMenu();
         }
     }, [isOpen, closeMenu]);
+    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.trim().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 (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleClickAway }, { children: _jsxs(SelectedBrand, Object.assign({ isOpen: isOpen, onClick: handleContainerClick, sx: Object.assign(Object.assign({}, (shouldDisableInteraction && {
                 pointerEvents: 'none',
                 opacity: 0.7,
-            })), sx), ref: controllerRef }, { children: [_jsx(Label, Object.assign({ noWrap: true, sx: Object.assign({}, (label.length > 16 && {
+            })), sx), ref: controllerRef }, { children: [_jsx(Label, Object.assign({ noWrap: true, sx: Object.assign({}, ((label === null || label === void 0 ? void 0 : label.length) > 16 && {
                         width: 100,
                     })) }, { children: label })), _jsx(DropdownArrowIcon, { isLoading: isLoading, isSingleMerchant: isSingleMerchant, isOpen: isOpen }), _jsxs(StyledMenu, Object.assign({ open: isOpen, anchorEl: anchorElement, sx: {
-                        '& .MuiPopper-dropdown': Object.assign({ mt: '5px', overflowY: 'auto', maxHeight: 432 }, (controllerRef.current && {
+                        '& .MuiPopper-dropdown': Object.assign(Object.assign({ mt: '5px', overflowY: 'auto', maxHeight: 432 }, (controllerRef.current && {
                             width: (_a = controllerRef.current.offsetWidth) !== null && _a !== void 0 ? _a : 'auto',
-                        })),
-                    } }, { children: [brands === null || brands === void 0 ? void 0 : brands.map((brand) => (_jsx(BrandItem, { brand: brand, selectedValue: selectedValue, onClose: closeMenu, onValueChange: onValueChange, renderBrandLogo: renderBrandLogo }, brand.id))), isFetchingNextPage && (_jsx(LoadingRow, { children: _jsx(LastRowContent, { isLoadingRow: true }) }))] }))] })) })));
+                        })), { minWidth: 180 }),
+                    } }, { 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, { brand: brand, selectedValue: selectedValue, onClose: closeMenu, onValueChange: onValueChange, renderBrandLogo: renderBrandLogo }, brand.id))), isFetchingNextPage && (_jsx(LoadingRow, { children: _jsx(LastRowContent, { isLoadingRow: true }) }))] }))] })) })));
 }
 export default memo(MerchantsDropdown);

package/build/components/MerchantsDropdown/type.d.ts

@@ -11,4 +11,5 @@ export interface MerchantsDropdownProps {
     isDisabled?: boolean;
     onValueChange: (merchant: Required<MerchantInfo>) => void;
     renderBrandLogo: (fileId: string) => React.ReactNode;
+    showSearchInput?: boolean;
 }

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.313",
+  "version": "0.1.314",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",