@tap-payments/os-micro-frontend-shared 0.1.415 → 0.1.416

package/build/components/FilterDropdown/components/MerchantsFilterItem/MerchantsFilterItem.d.ts

@@ -0,0 +1,3 @@
+import { MerchantsFilterItemProps } from './type';
+declare const MerchantsFilterItem: (props: Readonly<MerchantsFilterItemProps>) => import("react/jsx-runtime").JSX.Element;
+export default MerchantsFilterItem;

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

@@ -0,0 +1,45 @@
+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.d.ts

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

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

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

package/build/components/FilterDropdown/components/MerchantsFilterItem/type.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { Brand } from '../../../../types/index.js';
+export declare enum TreeLevel {
+    BRAND = "BRAND",
+    COUNTRY = "COUNTRY",
+    ENTITY = "ENTITY",
+    MERCHANT = "MERCHANT"
+}
+export type MerchantsFilterItemProps = {
+    brands: Brand[];
+    isLoading: boolean;
+    initialValue: string[];
+    atLeastOneMerchantSelected?: boolean | undefined;
+    showSearchInput?: boolean | undefined;
+    hideCheckbox?: boolean | undefined;
+    onFilterChange?: ((value: string[]) => void) | undefined;
+    BrandLogoComponent: React.ComponentType<{
+        fileId: string;
+    }>;
+};

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

@@ -0,0 +1,7 @@
+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.d.ts

@@ -0,0 +1,5 @@
+import { TreeDefinition } from '../../../index.js';
+import { Brand } from '../../../../types/index.js';
+export declare const ID_SEPERATOR = "/";
+export declare const generateIdFromParts: (...args: string[]) => string;
+export declare const createTreeDefinitions: (brands: Brand[], selectedMerchantIds: string[], language: string) => TreeDefinition;

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

@@ -0,0 +1,55 @@
+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/index.d.ts

@@ -2,3 +2,5 @@ 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/components/index.js

@@ -2,3 +2,5 @@ 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/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.415",
+  "version": "0.1.416",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",