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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/build/components/AnimatedSpinnerIcon/style.d.ts +1 -0
  2. package/build/components/Chip/style.d.ts +1 -0
  3. package/build/components/CountBadge/style.d.ts +1 -0
  4. package/build/components/Dialog/style.d.ts +1 -0
  5. package/build/components/FilterDropdown/components/BrandItem/BrandItem.js +4 -4
  6. package/build/components/FilterDropdown/components/FlatMerchantsListMenu/FlatMerchantsListMenu.js +1 -1
  7. package/build/components/FilterDropdown/components/MerchantItem/MerchantItem.js +23 -5
  8. package/build/components/FlippingCard/style.d.ts +1 -0
  9. package/build/components/ImageWrapper/ImageWrapper.d.ts +1 -0
  10. package/build/components/JSONViewer/style.d.ts +1 -0
  11. package/build/components/LeftPeekRightExpandingChip/style.d.ts +1 -0
  12. package/build/components/MerchantsDropdown/MerchantsDropdown.d.ts +1 -1
  13. package/build/components/MerchantsDropdown/MerchantsDropdown.js +25 -7
  14. package/build/components/MerchantsDropdown/type.d.ts +1 -0
  15. package/build/components/RightLeftExpandingCenterChip/style.d.ts +1 -0
  16. package/build/components/SearchButton/styles.d.ts +1 -0
  17. package/build/components/StatusIcons/AuthIcons/style.d.ts +1 -0
  18. package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts +1 -0
  19. package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts +1 -0
  20. package/build/components/StatusIcons/SourceIcons/style.d.ts +1 -0
  21. package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -0
  22. package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts +1 -0
  23. package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts +1 -0
  24. package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts +1 -0
  25. package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts +1 -0
  26. package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts +1 -0
  27. package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts +1 -0
  28. package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts +1 -0
  29. package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts +1 -0
  30. package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts +1 -0
  31. package/build/components/TableCells/CustomCells/IDButton/style.d.ts +1 -0
  32. package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts +1 -0
  33. package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +1 -0
  34. package/build/components/TableCells/CustomCells/PayoutReportCell/style.d.ts +1 -0
  35. package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts +1 -0
  36. package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts +1 -0
  37. package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts +1 -0
  38. package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts +1 -0
  39. package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts +1 -0
  40. package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +1 -0
  41. package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts +1 -0
  42. package/build/components/TableCells/CustomCells/SourceCell/style.d.ts +1 -0
  43. package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -0
  44. package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts +1 -0
  45. package/build/components/TableCells/CustomCells/style.d.ts +1 -0
  46. package/build/components/TableReports/components/DownloadButton/style.d.ts +1 -0
  47. package/build/components/TableReports/style.d.ts +1 -0
  48. package/build/components/VirtualTables/components/style.d.ts +1 -0
  49. package/build/constants/apps.d.ts +0 -1
  50. package/build/constants/apps.js +0 -1
  51. package/build/types/apps.d.ts +1 -4
  52. package/package.json +3 -3
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  type AnimatedSpinnerIconProps = {
3
4
  width?: string;
4
5
  height?: string;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  import { GetSourceAnimationFunction } from './type';
3
4
  export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
4
5
  variant?: import("./type").ChipVariant | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const AgreementImageWrapper: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const DialogWrapper: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -6,7 +6,7 @@ import { getNameText } from '../../../../utils/index.js';
6
6
  import FlatMerchantsListMenu from '../FlatMerchantsListMenu';
7
7
  import { Brand } from './style';
8
8
  export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneMerchantSelected = false, showSearchInput = false, renderBrandLogo, onChangeMerchant, }) {
9
- var _a;
9
+ var _a, _b;
10
10
  const [anchorEl, setAnchorEl] = useState(null);
11
11
  const open = Boolean(anchorEl);
12
12
  const onOpen = (e) => {
@@ -15,8 +15,8 @@ export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneM
15
15
  const onClose = () => {
16
16
  setAnchorEl(null);
17
17
  };
18
- const selectedBrandMerchants = useMemo(() => brand.merchants.filter((merchant) => merchantsIds.includes(merchant.legacy_id)), [merchantsIds, brand.merchants]);
19
- const isAllBrandsSelected = useMemo(() => selectedBrandMerchants.length === brand.merchants.length, [selectedBrandMerchants.length, brand.merchants.length]);
18
+ 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]);
19
+ 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]);
20
20
  const isSomeSelected = useMemo(() => !isAllBrandsSelected && selectedBrandMerchants.length > 0, [isAllBrandsSelected, selectedBrandMerchants]);
21
21
  const onClickBrand = (e) => {
22
22
  e.stopPropagation();
@@ -35,5 +35,5 @@ export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneM
35
35
  if (isDisabled)
36
36
  return;
37
37
  onClickBrand(e);
38
- }, 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 })] })));
38
+ }, 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 })] })));
39
39
  }
@@ -31,7 +31,7 @@ export default function FlatMerchantsListMenu({ brand, merchantsIds, onChangeMer
31
31
  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()); });
32
32
  }, [searchInputValue, merchants]);
33
33
  const displayedMerchants = useMemo(() => (showSearchInput ? filteredMerchants : merchants), [filteredMerchants, merchants, showSearchInput]);
34
- 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) => {
34
+ 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) => {
35
35
  if (isLastMidToBeDisabled(merchant.legacy_id))
36
36
  return;
37
37
  onClickMerchant(e, merchant.legacy_id);
@@ -1,12 +1,14 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState, useMemo } from 'react';
3
3
  import { useTranslation } from 'react-i18next';
4
- import { Menu, MenuItem, Text } from '../../../index.js';
4
+ import { Menu, MenuItem, SearchListInput, Text } from '../../../index.js';
5
5
  import { rightArrow } from '../../../../constants/index.js';
6
+ import { getNameText } from '../../../../utils/index.js';
6
7
  import BrandItem from '../BrandItem';
7
8
  import FlatMerchantsListMenu from '../FlatMerchantsListMenu';
8
9
  export default function MerchantItem({ brands, isLoading, onFilterChange, merchantsIds = [], atLeastOneMerchantSelected = false, showSearchInput = false, hideCheckbox = false, renderBrandLogo, }) {
9
10
  const [anchorEl, setAnchorEl] = useState(null);
11
+ const [searchInputValue, setSearchInputValue] = useState('');
10
12
  const open = Boolean(anchorEl);
11
13
  const { t } = useTranslation();
12
14
  const onOpen = (e) => {
@@ -18,25 +20,41 @@ export default function MerchantItem({ brands, isLoading, onFilterChange, mercha
18
20
  const isAllSelected = useMemo(() => {
19
21
  if (!brands.length)
20
22
  return false;
21
- return brands.every((brand) => brand.merchants.every(({ legacy_id }) => merchantsIds.includes(legacy_id)));
23
+ return brands.every((brand) => { var _a; return (_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.every(({ legacy_id }) => merchantsIds.includes(legacy_id)); });
22
24
  }, [merchantsIds, brands, hideCheckbox]);
23
25
  const isSomeSelected = useMemo(() => !isAllSelected && merchantsIds.length > 0, [merchantsIds, isAllSelected]);
24
26
  // Count the number of brands that have selected merchants
25
27
  const brandsWithSelectedMerchants = useMemo(() => {
26
- return brands.filter((brand) => brand.merchants.some((merchant) => merchantsIds === null || merchantsIds === void 0 ? void 0 : merchantsIds.includes(merchant.legacy_id))).length;
28
+ 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;
27
29
  }, [brands, merchantsIds]);
28
30
  const onClick = () => {
29
31
  if (isAllSelected && !atLeastOneMerchantSelected) {
30
32
  onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
31
33
  return;
32
34
  }
33
- const allMerchants = brands.flatMap((brand) => brand.merchants.map(({ legacy_id }) => legacy_id));
35
+ const allMerchants = brands.flatMap((brand) => { var _a; return (_a = brand.merchants) === null || _a === void 0 ? void 0 : _a.map(({ legacy_id }) => legacy_id); });
34
36
  onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(allMerchants);
35
37
  };
36
38
  const isDisabled = isLoading || !(brands === null || brands === void 0 ? void 0 : brands.length);
39
+ const handleSearchInputChange = (value) => {
40
+ setSearchInputValue(value);
41
+ };
42
+ const handleSearchInputReset = () => {
43
+ setSearchInputValue('');
44
+ };
45
+ const filteredBrands = useMemo(() => {
46
+ if (!searchInputValue.trim())
47
+ return brands;
48
+ return brands.filter((brand) => {
49
+ var _a, _b, _c;
50
+ 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())) ||
51
+ ((_c = brand === null || brand === void 0 ? void 0 : brand.id) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchInputValue.trim().toLowerCase()));
52
+ });
53
+ }, [searchInputValue, brands]);
54
+ const displayBrands = useMemo(() => (showSearchInput ? filteredBrands : brands), [brands, filteredBrands, showSearchInput]);
37
55
  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 && {
38
56
  pointerEvents: 'none',
39
57
  opacity: 0.5,
40
58
  cursor: 'default',
41
- })), 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))) })))] })));
59
+ })), 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)))] })))] })));
42
60
  }
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const Wrapper: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const FOOTER_HEIGHT = 37;
3
4
  export declare const TITLE_BAR_HEIGHT = "32px";
4
5
  export declare const VIEWER_HEIGHT = 545;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  import type { SxProps, Theme } from '@mui/material/styles';
3
4
  export declare const CHIP_GAP = 3;
4
5
  export declare const DEFAULT_CHIP_MIN_WIDTH = 24;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { MerchantsDropdownProps } from './type';
3
- declare function MerchantsDropdown({ brands, isLoading, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, }: Readonly<MerchantsDropdownProps>): import("react/jsx-runtime").JSX.Element;
3
+ declare function MerchantsDropdown({ brands, isLoading, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, showSearchInput, }: Readonly<MerchantsDropdownProps>): import("react/jsx-runtime").JSX.Element;
4
4
  declare const _default: import("react").MemoExoticComponent<typeof MerchantsDropdown>;
5
5
  export default _default;
@@ -1,8 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { memo, useMemo, useCallback, useRef } from 'react';
2
+ import { memo, useMemo, useCallback, useRef, useState } from 'react';
3
3
  import ClickAwayListener from '@mui/material/ClickAwayListener';
4
- import { Loader, LastRowContent } from '../index.js';
4
+ import { Loader, LastRowContent, SearchListInput } from '../index.js';
5
5
  import { downArrowIcon } from '../../constants/index.js';
6
+ import { getNameText } from '../../utils/index.js';
6
7
  import BrandItem from './BrandItem';
7
8
  import { SelectedBrand, Label, CollapseIcon, LoadingRow, StyledMenu } from './style';
8
9
  import { useDropdownMenu, useDefaultMerchantSelection, getIsSingleMerchant } from './hooks';
@@ -18,10 +19,11 @@ const DropdownArrowIcon = ({ isLoading, isSingleMerchant, isOpen }) => {
18
19
  }
19
20
  return null;
20
21
  };
21
- function MerchantsDropdown({ brands, isLoading = true, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, }) {
22
+ function MerchantsDropdown({ brands, isLoading = true, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, showSearchInput, }) {
22
23
  var _a;
23
24
  const { anchorElement, isOpen, openMenu, closeMenu } = useDropdownMenu();
24
25
  const controllerRef = useRef(null);
26
+ const [searchInputValue, setSearchInputValue] = useState('');
25
27
  useDefaultMerchantSelection(brands, selectedValue, onValueChange);
26
28
  const isSingleMerchant = useMemo(() => getIsSingleMerchant(brands), [brands]);
27
29
  const shouldDisableInteraction = isSingleMerchant || isDisabled || isLoading;
@@ -35,15 +37,31 @@ function MerchantsDropdown({ brands, isLoading = true, label, sx, selectedValue,
35
37
  closeMenu();
36
38
  }
37
39
  }, [isOpen, closeMenu]);
40
+ const handleSearchInputChange = (value) => {
41
+ setSearchInputValue(value);
42
+ };
43
+ const handleSearchInputReset = () => {
44
+ setSearchInputValue('');
45
+ };
46
+ const filteredBrands = useMemo(() => {
47
+ if (!searchInputValue.trim())
48
+ return brands;
49
+ return brands.filter((brand) => {
50
+ var _a, _b, _c;
51
+ 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())) ||
52
+ ((_c = brand === null || brand === void 0 ? void 0 : brand.id) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchInputValue.trim().toLowerCase()));
53
+ });
54
+ }, [searchInputValue, brands]);
55
+ const displayBrands = useMemo(() => (showSearchInput ? filteredBrands : brands), [brands, filteredBrands, showSearchInput]);
38
56
  return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleClickAway }, { children: _jsxs(SelectedBrand, Object.assign({ isOpen: isOpen, onClick: handleContainerClick, sx: Object.assign(Object.assign({}, (shouldDisableInteraction && {
39
57
  pointerEvents: 'none',
40
58
  opacity: 0.7,
41
- })), sx), ref: controllerRef }, { children: [_jsx(Label, Object.assign({ noWrap: true, sx: Object.assign({}, (label.length > 16 && {
59
+ })), sx), ref: controllerRef }, { children: [_jsx(Label, Object.assign({ noWrap: true, sx: Object.assign({}, ((label === null || label === void 0 ? void 0 : label.length) > 16 && {
42
60
  width: 100,
43
61
  })) }, { children: label })), _jsx(DropdownArrowIcon, { isLoading: isLoading, isSingleMerchant: isSingleMerchant, isOpen: isOpen }), _jsxs(StyledMenu, Object.assign({ open: isOpen, anchorEl: anchorElement, sx: {
44
- '& .MuiPopper-dropdown': Object.assign({ mt: '5px', overflowY: 'auto', maxHeight: 432 }, (controllerRef.current && {
62
+ '& .MuiPopper-dropdown': Object.assign(Object.assign({ mt: '5px', overflowY: 'auto', maxHeight: 432 }, (controllerRef.current && {
45
63
  width: (_a = controllerRef.current.offsetWidth) !== null && _a !== void 0 ? _a : 'auto',
46
- })),
47
- } }, { 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 }) }))] }))] })) })));
64
+ })), { minWidth: 180 }),
65
+ } }, { 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 }) }))] }))] })) })));
48
66
  }
49
67
  export default memo(MerchantsDropdown);
@@ -11,4 +11,5 @@ export interface MerchantsDropdownProps {
11
11
  isDisabled?: boolean;
12
12
  onValueChange: (merchant: Required<MerchantInfo>) => void;
13
13
  renderBrandLogo: (fileId: string) => React.ReactNode;
14
+ showSearchInput?: boolean;
14
15
  }
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  import type { SxProps, Theme } from '@mui/material/styles';
3
4
  export declare const CHIP_GAP = 3;
4
5
  export declare const CenterIconWrapper: import("@emotion/styled").StyledComponent<{
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledInput: import("@emotion/styled").StyledComponent<{
3
4
  width?: string | number | undefined;
4
5
  height?: string | number | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
3
4
  export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
4
5
  export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
3
4
  export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
4
5
  export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  import { TableMode } from '../../../../types/index.js';
3
4
  export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
4
5
  tableMode?: TableMode | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
3
4
  export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
4
5
  hidden?: boolean | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
3
4
  export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
4
5
  hidden?: boolean | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
3
4
  export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
4
5
  export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const Button: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledDownloadFileImageWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
3
4
  isTextShown?: boolean | undefined;
4
5
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const ProductCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
3
4
  export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
4
5
  export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const RefundChargeCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const RefundCellContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
3
4
  export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
4
5
  export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
3
4
  export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
4
5
  hidden?: boolean | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
3
4
  export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
4
5
  export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<{
3
4
  width?: string | number | undefined;
4
5
  height?: string | number | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
3
4
  variant?: "Global" | "Regional" | "Local" | undefined;
4
5
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  export declare const Button: import("@emotion/styled").StyledComponent<{
3
4
  hidden?: boolean | undefined;
4
5
  color?: string | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  type ExportButtonProps = {
3
4
  notificationState?: {
4
5
  success: boolean;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  interface TableWrapperProps {
3
4
  showNoDataView?: boolean;
4
5
  }
@@ -1000,5 +1000,4 @@ export declare const excludedApps: string[];
1000
1000
  export declare const MF_APPS_MAPPER: Readonly<{
1001
1001
  TERMINALS: "TERMINALS";
1002
1002
  BILLING: "BILLING";
1003
- ACCOUNT: "ACCOUNT";
1004
1003
  }>;
@@ -484,5 +484,4 @@ export const excludedApps = ['login'];
484
484
  export const MF_APPS_MAPPER = Object.freeze({
485
485
  TERMINALS: 'TERMINALS',
486
486
  BILLING: 'BILLING',
487
- ACCOUNT: 'ACCOUNT',
488
487
  });
@@ -1,5 +1,5 @@
1
1
  import { ColumnsView } from './column';
2
- import { Segment, SegmentCountry, SegmentUser, SelectedBrand, SelectedCountry } from './user';
2
+ import { SegmentCountry, SelectedBrand, SelectedCountry } from './user';
3
3
  import { BusinessMerchant } from './merchant';
4
4
  import type { i18n } from 'i18next';
5
5
  import { Theme } from '@mui/material';
@@ -116,13 +116,10 @@ export type MFWidgetBaseProps = {
116
116
  defaultCountry: SegmentCountry;
117
117
  defaultEntity: Entity;
118
118
  apps: UserApp[];
119
- users: SegmentUser[];
120
- organizationId: string;
121
119
  isBusinessSegment: boolean;
122
120
  isAnyMerchantHasMarketplace: boolean;
123
121
  isSegmentHasMoreThanOneMerchant: boolean;
124
122
  };
125
- segments: Segment[];
126
123
  selectedSegment: {
127
124
  id: string;
128
125
  selectedBrands: SelectedBrand[];
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.313-test.1",
5
- "testVersion": 1,
4
+ "version": "0.1.314",
5
+ "testVersion": 0,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",
@@ -164,4 +164,4 @@
164
164
  "publishConfig": {
165
165
  "registry": "https://registry.npmjs.org/"
166
166
  }
167
- }
167
+ }