@tap-payments/os-micro-frontend-shared 0.1.415-test.1 → 0.1.415-test.10

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

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import Popper from '@mui/material/Popper';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { DateObject } from 'react-multi-date-picker';
+import isEqual from 'lodash/isEqual';
 import { CustomBackdrop, Error } from '../index.js';
 import GroupBy from './components/GroupBy';
 import Hijri from './components/Hijri';
@@ -40,6 +41,12 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
             setValues(getDateRange(defaultDate));
         }
     }, [open]);
+    useEffect(() => {
+        if (!isEqual(defaultDate, dates)) {
+            console.log('defaultDate', defaultDate);
+            setDates(getDateRange(defaultDate));
+        }
+    }, [defaultDate]);
     useEffect(() => {
         setSelectedTimezone(timezone);
     }, [timezone, open]);
@@ -57,11 +64,11 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
         onCalendarGroupChange === null || onCalendarGroupChange === void 0 ? void 0 : onCalendarGroupChange(selectedGroupBy || 'day');
         onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(selectedTimezone);
     };
-    const getSelectedDate = () => {
+    const getSelectedDate = useCallback(() => {
         const startSelectedTime = dates[0].format('MMM D');
         const endSelectedTime = dates[1] ? dates[1].format('MMM D') : dates[0].format('MMM D');
         return startSelectedTime === endSelectedTime && !noTimezone ? startSelectedTime : `${startSelectedTime} - ${endSelectedTime}`;
-    };
+    }, [dates, noTimezone]);
     const onChange = (newDate) => {
         if (newDate.length < 2 || !maxDateRange) {
             setValues(newDate);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.415-test.1",
-  "testVersion": 1,
+  "version": "0.1.415-test.10",
+  "testVersion": 10,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

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

@@ -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.d.ts

@@ -1,4 +0,0 @@
-import MerchantsFilterItem from './MerchantsFilterItem';
-export * from './type';
-export * from './utils';
-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.d.ts

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

@@ -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.d.ts

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

@@ -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],
-        },
-    }));
-};