@tap-payments/os-micro-frontend-shared 0.1.248-test.2 → 0.1.249-test.1
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.
- package/build/components/MenuItem/MenuItem.d.ts +1 -1
- package/build/components/Window/Window.d.ts +3 -2
- package/build/components/Window/Window.js +3 -3
- package/build/components/index.d.ts +0 -1
- package/build/components/index.js +0 -1
- package/build/constants/table/cell/walletTableCellWidth.d.ts +1 -1
- package/build/constants/table/cell/walletTableCellWidth.js +1 -1
- package/build/types/destination.d.ts +0 -14
- package/build/types/index.d.ts +0 -1
- package/build/types/index.js +0 -1
- package/package.json +2 -2
- package/build/components/FilterDropdown/FilterDropdown.d.ts +0 -10
- package/build/components/FilterDropdown/FilterDropdown.js +0 -54
- package/build/components/FilterDropdown/components/BrandItem/BrandItem.d.ts +0 -12
- package/build/components/FilterDropdown/components/BrandItem/BrandItem.js +0 -39
- package/build/components/FilterDropdown/components/BrandItem/index.d.ts +0 -2
- package/build/components/FilterDropdown/components/BrandItem/index.js +0 -2
- package/build/components/FilterDropdown/components/BrandItem/style.d.ts +0 -4
- package/build/components/FilterDropdown/components/BrandItem/style.js +0 -9
- package/build/components/FilterDropdown/components/CountriesItem/CountriesItem.d.ts +0 -12
- package/build/components/FilterDropdown/components/CountriesItem/CountriesItem.js +0 -54
- package/build/components/FilterDropdown/components/CountriesItem/index.d.ts +0 -1
- package/build/components/FilterDropdown/components/CountriesItem/index.js +0 -1
- package/build/components/FilterDropdown/components/CurrenciesItem/CurrenciesItem.d.ts +0 -12
- package/build/components/FilterDropdown/components/CurrenciesItem/CurrenciesItem.js +0 -59
- package/build/components/FilterDropdown/components/CurrenciesItem/index.d.ts +0 -1
- package/build/components/FilterDropdown/components/CurrenciesItem/index.js +0 -1
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/FlatMerchantsListMenu.d.ts +0 -11
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/FlatMerchantsListMenu.js +0 -39
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/index.d.ts +0 -2
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/index.js +0 -2
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/style.d.ts +0 -12
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/style.js +0 -23
- package/build/components/FilterDropdown/components/MerchantItem/MerchantItem.d.ts +0 -13
- package/build/components/FilterDropdown/components/MerchantItem/MerchantItem.js +0 -46
- package/build/components/FilterDropdown/components/MerchantItem/index.d.ts +0 -2
- package/build/components/FilterDropdown/components/MerchantItem/index.js +0 -2
- package/build/components/FilterDropdown/components/RetailersItem/RetailersItem.d.ts +0 -14
- package/build/components/FilterDropdown/components/RetailersItem/RetailersItem.js +0 -70
- package/build/components/FilterDropdown/components/RetailersItem/index.d.ts +0 -1
- package/build/components/FilterDropdown/components/RetailersItem/index.js +0 -1
- package/build/components/FilterDropdown/components/RetailersItem/style.d.ts +0 -4
- package/build/components/FilterDropdown/components/RetailersItem/style.js +0 -8
- package/build/components/FilterDropdown/components/index.d.ts +0 -4
- package/build/components/FilterDropdown/components/index.js +0 -4
- package/build/components/FilterDropdown/index.d.ts +0 -3
- package/build/components/FilterDropdown/index.js +0 -3
- package/build/components/FilterDropdown/style.d.ts +0 -20
- package/build/components/FilterDropdown/style.js +0 -60
- package/build/components/FilterDropdown/type.d.ts +0 -4
- package/build/components/FilterDropdown/type.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, type CSSProperties } from 'react';
|
|
2
2
|
import { DragControls } from 'framer-motion';
|
|
3
3
|
interface WindowWrapperProps {
|
|
4
4
|
children: ReactNode;
|
|
@@ -19,7 +19,8 @@ interface WindowWrapperProps {
|
|
|
19
19
|
openOrder?: number;
|
|
20
20
|
};
|
|
21
21
|
sandboxMode?: boolean;
|
|
22
|
+
style?: CSSProperties;
|
|
22
23
|
}
|
|
23
|
-
declare function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder }, sandboxMode, }: Readonly<WindowWrapperProps>): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder }, sandboxMode, style, }: Readonly<WindowWrapperProps>): import("react/jsx-runtime").JSX.Element;
|
|
24
25
|
declare const _default: import("react").MemoExoticComponent<typeof WindowWrapper>;
|
|
25
26
|
export default _default;
|
|
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
|
|
|
5
5
|
import { Resizable } from 're-resizable';
|
|
6
6
|
import { APP_WINDOW_Z_INDEX, FOOTER_HEIGHT, HEADER_HEIGHT } from '../../constants/index.js';
|
|
7
7
|
import { contentStyle, ContentWrapper, initalStyle, resizableMainStyle, AppContainerWrapper, AppContainerContainer } from './style';
|
|
8
|
-
function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, sandboxMode = false, }) {
|
|
8
|
+
function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, sandboxMode = false, style, }) {
|
|
9
9
|
const theme = useTheme();
|
|
10
10
|
const [isDrag, setIsDrag] = useState(true);
|
|
11
11
|
const modalRef = useRef(null);
|
|
@@ -34,9 +34,9 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
|
|
|
34
34
|
left: 48 * (openOrder - 1),
|
|
35
35
|
})), animate: Object.assign(Object.assign({ width }, (isMaximized && {
|
|
36
36
|
width: '100vw',
|
|
37
|
-
})), { scale: Number(!isMinimized), top: isMaximized ? 0 : HEADER_HEIGHT + FOOTER_HEIGHT * (openOrder - 1), left: isMaximized ? 0 : 48 * (openOrder - 1) }), ref: modalRef, maximized: isMaximized, transition: { duration: isMaximized ? 0.3 : 0 } }, { children: _jsx(Resizable, Object.assign({ ref: (c) => {
|
|
37
|
+
})), { scale: Number(!isMinimized), top: isMaximized ? 0 : HEADER_HEIGHT + FOOTER_HEIGHT * (openOrder - 1), left: isMaximized ? 0 : 48 * (openOrder - 1) }), ref: modalRef, maximized: isMaximized, transition: { duration: isMaximized ? 0.3 : 0 } }, { children: _jsx(Resizable, Object.assign({ "data-id": id, ref: (c) => {
|
|
38
38
|
resizableRef.current = c;
|
|
39
|
-
}, style: resizableStyle, minHeight: minHeight, minWidth: minWidth, maxHeight: maxHeight, maxWidth: maxWidth, onResizeStart: onResizeStart, onResizeStop: onResizeStop, onResize: (_, __, element) => {
|
|
39
|
+
}, style: Object.assign(Object.assign({}, resizableStyle), style), minHeight: minHeight, minWidth: minWidth, maxHeight: maxHeight, maxWidth: maxWidth, onResizeStart: onResizeStart, onResizeStop: onResizeStop, onResize: (_, __, element) => {
|
|
40
40
|
onResize === null || onResize === void 0 ? void 0 : onResize(element);
|
|
41
41
|
} }, { children: children })) })) })) })) })));
|
|
42
42
|
}
|
|
@@ -1,15 +1 @@
|
|
|
1
1
|
export type DestinationStatus = 'PROCESSED' | 'FAILED';
|
|
2
|
-
export interface RetailersDestination {
|
|
3
|
-
id: string;
|
|
4
|
-
status: string;
|
|
5
|
-
created: number;
|
|
6
|
-
display_name: string;
|
|
7
|
-
business_entity_id: string;
|
|
8
|
-
wallet_id: string;
|
|
9
|
-
business_id: string;
|
|
10
|
-
brand: {
|
|
11
|
-
id: string;
|
|
12
|
-
name: Record<string, string>;
|
|
13
|
-
logo: string;
|
|
14
|
-
};
|
|
15
|
-
}
|
package/build/types/index.d.ts
CHANGED
package/build/types/index.js
CHANGED
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.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.249-test.1",
|
|
5
|
+
"testVersion": 1,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface FilterDropdownProps {
|
|
3
|
-
children?: React.ReactNode;
|
|
4
|
-
onConfirm: () => void;
|
|
5
|
-
onCancel: () => void;
|
|
6
|
-
isOkayButDisabled?: boolean;
|
|
7
|
-
isDisabled?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Box from '@mui/material/Box';
|
|
3
|
-
import { useTranslation } from 'react-i18next';
|
|
4
|
-
import { useState, useEffect } from 'react';
|
|
5
|
-
import { ClickAwayListener } from '@mui/material';
|
|
6
|
-
import { darkFilterIcon } from '../../constants/index.js';
|
|
7
|
-
import { Menu, CustomBackdrop } from '../index.js';
|
|
8
|
-
import { CancelButton, FilterButton, Footer, OkayButton, TitleStyled } from './style';
|
|
9
|
-
export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }) {
|
|
10
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
11
|
-
const open = Boolean(anchorEl);
|
|
12
|
-
const { t } = useTranslation();
|
|
13
|
-
// Lock body scroll when filter dropdown is open (Safari fix)
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
if (open) {
|
|
16
|
-
const scrollY = window.scrollY;
|
|
17
|
-
document.body.style.position = 'fixed';
|
|
18
|
-
document.body.style.top = `-${scrollY}px`;
|
|
19
|
-
document.body.style.width = '100%';
|
|
20
|
-
document.body.style.overflow = 'hidden';
|
|
21
|
-
return () => {
|
|
22
|
-
document.body.style.position = '';
|
|
23
|
-
document.body.style.top = '';
|
|
24
|
-
document.body.style.width = '';
|
|
25
|
-
document.body.style.overflow = '';
|
|
26
|
-
window.scrollTo(0, scrollY);
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
}, [open]);
|
|
30
|
-
const onOpen = (e) => {
|
|
31
|
-
if (isDisabled)
|
|
32
|
-
return;
|
|
33
|
-
if (!open) {
|
|
34
|
-
setAnchorEl(e.currentTarget);
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
onClose();
|
|
38
|
-
};
|
|
39
|
-
const onClose = () => {
|
|
40
|
-
setAnchorEl(null);
|
|
41
|
-
onCancel();
|
|
42
|
-
};
|
|
43
|
-
const handleCancel = () => {
|
|
44
|
-
if (!open)
|
|
45
|
-
return;
|
|
46
|
-
onCancel();
|
|
47
|
-
onClose();
|
|
48
|
-
};
|
|
49
|
-
const handleConfirm = () => {
|
|
50
|
-
onConfirm();
|
|
51
|
-
onClose();
|
|
52
|
-
};
|
|
53
|
-
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, { children: [_jsx(FilterButton, Object.assign({ isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.5 })) }, { children: _jsx(Box, { component: "img", src: darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: { marginTop: '8px', marginBottom: '8px', width: 193 }, placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] }) })));
|
|
54
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { MerchantItemProps } from '../MerchantItem';
|
|
3
|
-
import { BrandProps } from '../../type';
|
|
4
|
-
interface BrandItemProps extends Pick<MerchantItemProps, 'atLeastOneMerchantSelected' | 'merchantsIds'> {
|
|
5
|
-
brand: BrandProps;
|
|
6
|
-
isDisabled?: boolean;
|
|
7
|
-
showSearchInput?: boolean;
|
|
8
|
-
renderBrandLogo: (logo: string) => React.ReactNode;
|
|
9
|
-
onChangeMerchant?: (value: string[]) => void;
|
|
10
|
-
}
|
|
11
|
-
export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneMerchantSelected, showSearchInput, renderBrandLogo, onChangeMerchant, }: Readonly<BrandItemProps>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export {};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useMemo } from 'react';
|
|
3
|
-
import { MenuItem, Text } from '../../../index.js';
|
|
4
|
-
import { rightArrow } from '../../../../constants/index.js';
|
|
5
|
-
import { getNameText } from '../../../../utils/index.js';
|
|
6
|
-
import FlatMerchantsListMenu from '../FlatMerchantsListMenu';
|
|
7
|
-
import { Brand } from './style';
|
|
8
|
-
export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneMerchantSelected = false, showSearchInput = false, renderBrandLogo, onChangeMerchant, }) {
|
|
9
|
-
var _a;
|
|
10
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
11
|
-
const open = Boolean(anchorEl);
|
|
12
|
-
const onOpen = (e) => {
|
|
13
|
-
setAnchorEl(e.currentTarget);
|
|
14
|
-
};
|
|
15
|
-
const onClose = () => {
|
|
16
|
-
setAnchorEl(null);
|
|
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]);
|
|
20
|
-
const isSomeSelected = useMemo(() => !isAllBrandsSelected && selectedBrandMerchants.length > 0, [isAllBrandsSelected, selectedBrandMerchants]);
|
|
21
|
-
const onClickBrand = (e) => {
|
|
22
|
-
e.stopPropagation();
|
|
23
|
-
if (isAllBrandsSelected) {
|
|
24
|
-
onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant(merchantsIds.filter((merchantId) => !brand.merchants.some(({ legacy_id }) => merchantId === legacy_id)));
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
if (isSomeSelected) {
|
|
28
|
-
const uniqueMids = [...new Set([...merchantsIds, ...selectedBrandMerchants.map(({ legacy_id }) => legacy_id)])];
|
|
29
|
-
onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant(uniqueMids);
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant([...merchantsIds, ...brand.merchants.map(({ legacy_id }) => legacy_id)]);
|
|
33
|
-
};
|
|
34
|
-
return (_jsxs(MenuItem, Object.assign({ isSelected: isAllBrandsSelected, isIndeterminate: isSomeSelected, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: (e) => {
|
|
35
|
-
if (isDisabled)
|
|
36
|
-
return;
|
|
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.id), _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 })] })));
|
|
39
|
-
}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const Brand: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface CountriesItemProps {
|
|
3
|
-
countries: string[];
|
|
4
|
-
isLoading?: boolean;
|
|
5
|
-
countriesIds: string[];
|
|
6
|
-
onFilterChange?: (value: string[]) => void;
|
|
7
|
-
atLeastOneCountrySelected?: boolean;
|
|
8
|
-
hideCheckbox?: boolean;
|
|
9
|
-
}
|
|
10
|
-
declare function CountriesItem({ countriesIds, isLoading, countries, onFilterChange, atLeastOneCountrySelected, hideCheckbox, }: Readonly<CountriesItemProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
declare const _default: import("react").MemoExoticComponent<typeof CountriesItem>;
|
|
12
|
-
export default _default;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CountryFlag, Menu, MenuItem, Text } from '../../../index.js';
|
|
3
|
-
import { rightArrow } from '../../../../constants/index.js';
|
|
4
|
-
import { getCountryNameByISO } from '../../../../utils/index.js';
|
|
5
|
-
import { memo, useCallback, useMemo, useState } from 'react';
|
|
6
|
-
import { useTranslation } from 'react-i18next';
|
|
7
|
-
function CountriesItem({ countriesIds = [], isLoading, countries = [], onFilterChange, atLeastOneCountrySelected = false, hideCheckbox = false, }) {
|
|
8
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
9
|
-
const open = Boolean(anchorEl);
|
|
10
|
-
const { t } = useTranslation();
|
|
11
|
-
const onOpen = (e) => {
|
|
12
|
-
if (!open)
|
|
13
|
-
setAnchorEl(e.currentTarget);
|
|
14
|
-
};
|
|
15
|
-
const onClose = () => {
|
|
16
|
-
if (open)
|
|
17
|
-
setAnchorEl(null);
|
|
18
|
-
};
|
|
19
|
-
const isCountrySelected = useCallback((countryCode) => countriesIds === null || countriesIds === void 0 ? void 0 : countriesIds.includes(countryCode), [countriesIds]);
|
|
20
|
-
const isAllSelected = useMemo(() => {
|
|
21
|
-
if (!countries.length)
|
|
22
|
-
return false;
|
|
23
|
-
return countries.every((country) => isCountrySelected(country));
|
|
24
|
-
}, [countries, isCountrySelected]);
|
|
25
|
-
const isSomeSelected = useMemo(() => !isAllSelected && countriesIds.length > 0, [countriesIds, isAllSelected]);
|
|
26
|
-
const onClick = () => {
|
|
27
|
-
if (atLeastOneCountrySelected)
|
|
28
|
-
return;
|
|
29
|
-
if (isAllSelected) {
|
|
30
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(countries);
|
|
34
|
-
};
|
|
35
|
-
const isLastCountryToBeDisabled = (currMid) => {
|
|
36
|
-
return countriesIds.length === 1 && countriesIds[0] === currMid && atLeastOneCountrySelected;
|
|
37
|
-
};
|
|
38
|
-
const onClickCountry = (e, countryCode) => {
|
|
39
|
-
e.stopPropagation();
|
|
40
|
-
if (isLastCountryToBeDisabled(countryCode))
|
|
41
|
-
return;
|
|
42
|
-
if (isCountrySelected(countryCode)) {
|
|
43
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(countriesIds.filter((country) => country !== countryCode));
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
const uniqueMids = [...new Set([...countriesIds, countryCode])];
|
|
47
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(uniqueMids);
|
|
48
|
-
};
|
|
49
|
-
const isDisabled = isLoading || (countries === null || countries === void 0 ? void 0 : countries.length) <= 0 || atLeastOneCountrySelected;
|
|
50
|
-
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) => {
|
|
51
|
-
onClickCountry(e, country);
|
|
52
|
-
}, 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}`))) }))] })));
|
|
53
|
-
}
|
|
54
|
-
export default memo(CountriesItem);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './CountriesItem';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './CountriesItem';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface CurrenciesItemProps {
|
|
3
|
-
currencies: string[];
|
|
4
|
-
isLoading?: boolean;
|
|
5
|
-
currenciesIds: string[];
|
|
6
|
-
atLeastOneCurrencySelected?: boolean;
|
|
7
|
-
hideCheckbox?: boolean;
|
|
8
|
-
onFilterChange?: (value: string[]) => void;
|
|
9
|
-
}
|
|
10
|
-
declare function CurrenciesItem({ currenciesIds, isLoading, currencies, onFilterChange, atLeastOneCurrencySelected, hideCheckbox, }: Readonly<CurrenciesItemProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
declare const _default: import("react").MemoExoticComponent<typeof CurrenciesItem>;
|
|
12
|
-
export default _default;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CountryFlag, Menu, MenuItem, Text } from '../../../index.js';
|
|
3
|
-
import { rightArrow, SUPPORTED_CURRENCY_DETAILS } from '../../../../constants/index.js';
|
|
4
|
-
import { memo, useCallback, useMemo, useState } from 'react';
|
|
5
|
-
import { useTranslation } from 'react-i18next';
|
|
6
|
-
function CurrenciesItem({ currenciesIds = [], isLoading, currencies = [], onFilterChange, atLeastOneCurrencySelected = false, hideCheckbox = false, }) {
|
|
7
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
8
|
-
const open = Boolean(anchorEl);
|
|
9
|
-
const { t } = useTranslation();
|
|
10
|
-
const onOpen = (e) => {
|
|
11
|
-
if (!open)
|
|
12
|
-
setAnchorEl(e.currentTarget);
|
|
13
|
-
};
|
|
14
|
-
const onClose = () => {
|
|
15
|
-
if (open)
|
|
16
|
-
setAnchorEl(null);
|
|
17
|
-
};
|
|
18
|
-
const isCurrencySelected = useCallback((currencyCode) => currenciesIds === null || currenciesIds === void 0 ? void 0 : currenciesIds.includes(currencyCode), [currenciesIds]);
|
|
19
|
-
const isAllSelected = useMemo(() => {
|
|
20
|
-
if (!currencies.length)
|
|
21
|
-
return false;
|
|
22
|
-
return currencies.every((currency) => isCurrencySelected(currency));
|
|
23
|
-
}, [currencies, isCurrencySelected]);
|
|
24
|
-
const isSomeSelected = useMemo(() => !isAllSelected && currenciesIds.length > 0, [currenciesIds, isAllSelected]);
|
|
25
|
-
const onClick = () => {
|
|
26
|
-
if (atLeastOneCurrencySelected)
|
|
27
|
-
return;
|
|
28
|
-
if (isAllSelected) {
|
|
29
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(currencies);
|
|
33
|
-
};
|
|
34
|
-
const isLastCurrencyToBeDisabled = (currMid) => {
|
|
35
|
-
return currenciesIds.length === 1 && currenciesIds[0] === currMid && atLeastOneCurrencySelected;
|
|
36
|
-
};
|
|
37
|
-
const onClickCurrency = (e, currencyCode) => {
|
|
38
|
-
e.stopPropagation();
|
|
39
|
-
if (isLastCurrencyToBeDisabled(currencyCode))
|
|
40
|
-
return;
|
|
41
|
-
if (isCurrencySelected(currencyCode)) {
|
|
42
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(currenciesIds.filter((currency) => currency !== currencyCode));
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
const uniqueMids = [...new Set([...currenciesIds, currencyCode])];
|
|
46
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(uniqueMids);
|
|
47
|
-
};
|
|
48
|
-
const isDisabled = isLoading || (currencies === null || currencies === void 0 ? void 0 : currencies.length) <= 0 || atLeastOneCurrencySelected;
|
|
49
|
-
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) => {
|
|
50
|
-
var _a;
|
|
51
|
-
const countryCode = (_a = SUPPORTED_CURRENCY_DETAILS[currency]) === null || _a === void 0 ? void 0 : _a.country;
|
|
52
|
-
if (!countryCode)
|
|
53
|
-
return null;
|
|
54
|
-
return (_jsxs(MenuItem, Object.assign({ isSelected: isCurrencySelected(currency), isDisabled: isLoading || isLastCurrencyToBeDisabled(currency), onClick: (e) => {
|
|
55
|
-
onClickCurrency(e, currency);
|
|
56
|
-
}, 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}`));
|
|
57
|
-
}) }))] })));
|
|
58
|
-
}
|
|
59
|
-
export default memo(CurrenciesItem);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './CurrenciesItem';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './CurrenciesItem';
|
package/build/components/FilterDropdown/components/FlatMerchantsListMenu/FlatMerchantsListMenu.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { BrandProps } from '../../type';
|
|
2
|
-
type FlatMerchantsListMenuProps = {
|
|
3
|
-
brand: BrandProps;
|
|
4
|
-
merchantsIds: string[];
|
|
5
|
-
onChangeMerchant?: (value: string[]) => void;
|
|
6
|
-
atLeastOneMerchantSelected: boolean;
|
|
7
|
-
showSearchInput?: boolean;
|
|
8
|
-
anchorEl: HTMLElement | null;
|
|
9
|
-
};
|
|
10
|
-
export default function FlatMerchantsListMenu({ brand, merchantsIds, onChangeMerchant, atLeastOneMerchantSelected, showSearchInput, anchorEl, }: Readonly<FlatMerchantsListMenuProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export {};
|
package/build/components/FilterDropdown/components/FlatMerchantsListMenu/FlatMerchantsListMenu.js
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useMemo, useCallback } from 'react';
|
|
3
|
-
import { Menu, SearchListInput } from '../../../index.js';
|
|
4
|
-
import { MerchantMenuItemStyled, MerchantWrapper, MerchantID, MerchantName } from './style';
|
|
5
|
-
export default function FlatMerchantsListMenu({ brand, merchantsIds, onChangeMerchant, atLeastOneMerchantSelected = false, showSearchInput = false, anchorEl, }) {
|
|
6
|
-
const [searchInputValue, setSearchInputValue] = useState('');
|
|
7
|
-
const open = Boolean(anchorEl);
|
|
8
|
-
const isMerchantSelected = useCallback((merchantId) => merchantsIds.includes(merchantId), [merchantsIds]);
|
|
9
|
-
const onClickMerchant = (e, merchantId) => {
|
|
10
|
-
e.stopPropagation();
|
|
11
|
-
if (isMerchantSelected(merchantId)) {
|
|
12
|
-
onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant(merchantsIds.filter((merchant) => merchant !== merchantId));
|
|
13
|
-
return;
|
|
14
|
-
}
|
|
15
|
-
const uniqueMids = [...new Set([...merchantsIds, merchantId])];
|
|
16
|
-
onChangeMerchant === null || onChangeMerchant === void 0 ? void 0 : onChangeMerchant(uniqueMids);
|
|
17
|
-
};
|
|
18
|
-
const isLastMidToBeDisabled = (currMid) => {
|
|
19
|
-
return merchantsIds.length === 1 && merchantsIds[0] === currMid && atLeastOneMerchantSelected;
|
|
20
|
-
};
|
|
21
|
-
const handleSearchInputChange = (value) => {
|
|
22
|
-
setSearchInputValue(value);
|
|
23
|
-
};
|
|
24
|
-
const handleSearchInputReset = () => {
|
|
25
|
-
setSearchInputValue('');
|
|
26
|
-
};
|
|
27
|
-
const merchants = useMemo(() => { var _a; return (_a = brand.merchants) !== null && _a !== void 0 ? _a : []; }, [brand.merchants]);
|
|
28
|
-
const filteredMerchants = useMemo(() => {
|
|
29
|
-
if (!(searchInputValue === null || searchInputValue === void 0 ? void 0 : searchInputValue.trim()))
|
|
30
|
-
return merchants;
|
|
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
|
-
}, [searchInputValue, merchants]);
|
|
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) => {
|
|
35
|
-
if (isLastMidToBeDisabled(merchant.legacy_id))
|
|
36
|
-
return;
|
|
37
|
-
onClickMerchant(e, merchant.legacy_id);
|
|
38
|
-
}, 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)))] })));
|
|
39
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { MenuItemProps } from '../../../MenuItem/MenuItem';
|
|
3
|
-
export declare const MerchantMenuItemStyled: import("@emotion/styled").StyledComponent<MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
4
|
-
export declare const MerchantWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
5
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
6
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
7
|
-
export declare const MerchantID: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
8
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
9
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
10
|
-
export declare const MerchantName: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
11
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
12
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import Box from '@mui/material/Box';
|
|
2
|
-
import { styled, alpha } from '@mui/material/styles';
|
|
3
|
-
import { MenuItem } from '../../../index.js';
|
|
4
|
-
export const MerchantMenuItemStyled = styled(MenuItem)(() => ({
|
|
5
|
-
padding: '12px 16px',
|
|
6
|
-
border: 'none !important',
|
|
7
|
-
'&:hover': { boxShadow: '0px 0px 16px 0px #00000021' },
|
|
8
|
-
}));
|
|
9
|
-
export const MerchantWrapper = styled(Box)(() => ({
|
|
10
|
-
display: 'flex',
|
|
11
|
-
flexDirection: 'column',
|
|
12
|
-
gap: '2px',
|
|
13
|
-
}));
|
|
14
|
-
export const MerchantID = styled(Box)(({ theme }) => ({
|
|
15
|
-
color: alpha(theme.palette.text.primary, 0.5),
|
|
16
|
-
fontSize: '9px',
|
|
17
|
-
}));
|
|
18
|
-
export const MerchantName = styled(Box)(() => ({
|
|
19
|
-
whiteSpace: 'nowrap',
|
|
20
|
-
overflow: 'hidden',
|
|
21
|
-
textOverflow: 'ellipsis',
|
|
22
|
-
maxWidth: '178px',
|
|
23
|
-
}));
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { BrandProps } from '../../type';
|
|
3
|
-
export interface MerchantItemProps {
|
|
4
|
-
brands: BrandProps[];
|
|
5
|
-
isLoading: boolean;
|
|
6
|
-
merchantsIds: string[];
|
|
7
|
-
atLeastOneMerchantSelected?: boolean;
|
|
8
|
-
showSearchInput?: boolean;
|
|
9
|
-
hideCheckbox?: boolean;
|
|
10
|
-
onFilterChange?: (value: string[]) => void;
|
|
11
|
-
renderBrandLogo: (logo: string) => React.ReactNode;
|
|
12
|
-
}
|
|
13
|
-
export default function MerchantItem({ brands, isLoading, onFilterChange, merchantsIds, atLeastOneMerchantSelected, showSearchInput, hideCheckbox, renderBrandLogo, }: Readonly<MerchantItemProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useMemo } from 'react';
|
|
3
|
-
import { useTranslation } from 'react-i18next';
|
|
4
|
-
import { Menu, MenuItem, Text } from '../../../index.js';
|
|
5
|
-
import { rightArrow } from '../../../../constants/index.js';
|
|
6
|
-
import BrandItem from '../BrandItem';
|
|
7
|
-
import FlatMerchantsListMenu from '../FlatMerchantsListMenu';
|
|
8
|
-
export default function MerchantItem({ brands, isLoading, onFilterChange, merchantsIds = [], atLeastOneMerchantSelected = false, showSearchInput = false, hideCheckbox = false, renderBrandLogo, }) {
|
|
9
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
10
|
-
const open = Boolean(anchorEl);
|
|
11
|
-
const { t } = useTranslation();
|
|
12
|
-
const onOpen = (e) => {
|
|
13
|
-
setAnchorEl(e.currentTarget);
|
|
14
|
-
};
|
|
15
|
-
const onClose = () => {
|
|
16
|
-
setAnchorEl(null);
|
|
17
|
-
};
|
|
18
|
-
const isAllSelected = useMemo(() => {
|
|
19
|
-
if (!brands.length)
|
|
20
|
-
return false;
|
|
21
|
-
return brands.every((brand) => brand.merchants.every(({ legacy_id }) => merchantsIds.includes(legacy_id)));
|
|
22
|
-
}, [merchantsIds, brands, hideCheckbox]);
|
|
23
|
-
const isSomeSelected = useMemo(() => !isAllSelected && merchantsIds.length > 0, [merchantsIds, isAllSelected]);
|
|
24
|
-
// Count the number of brands that have selected merchants
|
|
25
|
-
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;
|
|
27
|
-
}, [brands, merchantsIds]);
|
|
28
|
-
const onClick = () => {
|
|
29
|
-
if (atLeastOneMerchantSelected)
|
|
30
|
-
return;
|
|
31
|
-
if (isAllSelected) {
|
|
32
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
const allMerchants = brands
|
|
36
|
-
.map((brand) => brand.merchants)
|
|
37
|
-
.flat()
|
|
38
|
-
.map(({ legacy_id }) => legacy_id);
|
|
39
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(allMerchants);
|
|
40
|
-
};
|
|
41
|
-
return (_jsxs(MenuItem, Object.assign({ isDisabled: atLeastOneMerchantSelected, 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' })), ((isLoading || brands.length <= 0) && {
|
|
42
|
-
pointerEvents: 'none',
|
|
43
|
-
opacity: 0.5,
|
|
44
|
-
cursor: 'default',
|
|
45
|
-
})), 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))) })))] })));
|
|
46
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { RetailersDestination } from 'src/types';
|
|
3
|
-
interface RetailersItemProps {
|
|
4
|
-
retailers: RetailersDestination[];
|
|
5
|
-
isLoading?: boolean;
|
|
6
|
-
retailersIds: string[];
|
|
7
|
-
onFilterChange?: (value: string[]) => void;
|
|
8
|
-
atLeastOneRetailerSelected?: boolean;
|
|
9
|
-
showSearchInput?: boolean;
|
|
10
|
-
hideCheckbox?: boolean;
|
|
11
|
-
}
|
|
12
|
-
declare function RetailersItem({ retailersIds, isLoading, retailers, onFilterChange, atLeastOneRetailerSelected, showSearchInput, hideCheckbox, }: Readonly<RetailersItemProps>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
declare const _default: import("react").MemoExoticComponent<typeof RetailersItem>;
|
|
14
|
-
export default _default;
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Menu, MenuItem, Text, SearchListInput } from '../../../index.js';
|
|
3
|
-
import { rightArrow } from '../../../../constants/index.js';
|
|
4
|
-
import { memo, useCallback, useMemo, useState } from 'react';
|
|
5
|
-
import { useTranslation } from 'react-i18next';
|
|
6
|
-
import { RetailerName } from './style';
|
|
7
|
-
function RetailersItem({ retailersIds = [], isLoading, retailers = [], onFilterChange, atLeastOneRetailerSelected = false, showSearchInput = false, hideCheckbox = false, }) {
|
|
8
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
9
|
-
const open = Boolean(anchorEl);
|
|
10
|
-
const { t, i18n } = useTranslation();
|
|
11
|
-
const [searchInputValue, setSearchInputValue] = useState('');
|
|
12
|
-
const onOpen = (e) => {
|
|
13
|
-
setAnchorEl(e.currentTarget);
|
|
14
|
-
};
|
|
15
|
-
const onClose = () => {
|
|
16
|
-
setAnchorEl(null);
|
|
17
|
-
};
|
|
18
|
-
const isRetailerSelected = useCallback((retailerId) => retailersIds === null || retailersIds === void 0 ? void 0 : retailersIds.includes(retailerId), [retailersIds]);
|
|
19
|
-
const isAllSelected = useMemo(() => {
|
|
20
|
-
if (!retailers.length)
|
|
21
|
-
return false;
|
|
22
|
-
return retailers.every((retailer) => isRetailerSelected(retailer.id));
|
|
23
|
-
}, [retailers, isRetailerSelected, hideCheckbox]);
|
|
24
|
-
const isSomeSelected = useMemo(() => !isAllSelected && retailersIds.length > 0, [retailersIds, isAllSelected]);
|
|
25
|
-
const onClick = () => {
|
|
26
|
-
if (atLeastOneRetailerSelected)
|
|
27
|
-
return;
|
|
28
|
-
if (isAllSelected) {
|
|
29
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(retailers.map((brand) => brand.id));
|
|
33
|
-
};
|
|
34
|
-
const isLastRetailerToBeDisabled = (currMid) => {
|
|
35
|
-
return retailersIds.length === 1 && retailersIds[0] === currMid && atLeastOneRetailerSelected;
|
|
36
|
-
};
|
|
37
|
-
const onClickRetailer = (e, retailerId) => {
|
|
38
|
-
e.stopPropagation();
|
|
39
|
-
if (isLastRetailerToBeDisabled(retailerId))
|
|
40
|
-
return;
|
|
41
|
-
if (isRetailerSelected(retailerId)) {
|
|
42
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(retailersIds.filter((retailer) => retailer !== retailerId));
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
const uniqueMids = [...new Set([...retailersIds, retailerId])];
|
|
46
|
-
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(uniqueMids);
|
|
47
|
-
};
|
|
48
|
-
const isDisabled = isLoading || (retailers === null || retailers === void 0 ? void 0 : retailers.length) <= 0 || atLeastOneRetailerSelected;
|
|
49
|
-
const handleSearchInputChange = (value) => {
|
|
50
|
-
setSearchInputValue(value);
|
|
51
|
-
};
|
|
52
|
-
const handleSearchInputReset = () => {
|
|
53
|
-
setSearchInputValue('');
|
|
54
|
-
};
|
|
55
|
-
const filteredRetailers = useMemo(() => {
|
|
56
|
-
if (!(searchInputValue === null || searchInputValue === void 0 ? void 0 : searchInputValue.trim()))
|
|
57
|
-
return retailers;
|
|
58
|
-
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()); });
|
|
59
|
-
}, [searchInputValue, retailers, i18n.language]);
|
|
60
|
-
const displayedRetailers = useMemo(() => (showSearchInput ? filteredRetailers : retailers), [filteredRetailers, retailers, showSearchInput]);
|
|
61
|
-
return (_jsxs(MenuItem, Object.assign({ isDisabled: isDisabled,
|
|
62
|
-
// TODO: the checkbox ui should be controlled using a state not through the isAllSelected variable
|
|
63
|
-
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' })), (!(retailers === null || retailers === void 0 ? void 0 : retailers.length) && { opacity: 0.5, pointerEvents: 'none' })), 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) => {
|
|
64
|
-
var _a, _b, _c, _d, _e;
|
|
65
|
-
return (_jsx(MenuItem, Object.assign({ isSelected: isRetailerSelected(retailer.id), isDisabled: isLoading || isLastRetailerToBeDisabled(retailer.id), onClick: (e) => {
|
|
66
|
-
onClickRetailer(e, retailer.id);
|
|
67
|
-
}, 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}`));
|
|
68
|
-
})] }))] })));
|
|
69
|
-
}
|
|
70
|
-
export default memo(RetailersItem);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './RetailersItem';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './RetailersItem';
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const RetailerName: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const FilterButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
5
|
-
isActive?: boolean | undefined;
|
|
6
|
-
}, {}, {}>;
|
|
7
|
-
export declare const TitleStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
8
|
-
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
9
|
-
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
|
|
10
|
-
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
11
|
-
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
12
|
-
export declare const Footer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
13
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
14
|
-
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
15
|
-
export declare const OkayButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
16
|
-
ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
17
|
-
}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
18
|
-
export declare const CancelButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
19
|
-
ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
20
|
-
}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import Box from '@mui/material/Box';
|
|
2
|
-
import { styled } from '@mui/material/styles';
|
|
3
|
-
import Button from '@mui/material/Button';
|
|
4
|
-
import { Text } from '../index.js';
|
|
5
|
-
export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
|
|
6
|
-
opacity: 0.7,
|
|
7
|
-
} }, (isActive && {
|
|
8
|
-
boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
|
|
9
|
-
border: `1px solid ${theme.palette.info.dark}`,
|
|
10
|
-
}))));
|
|
11
|
-
export const TitleStyled = styled(Text)(({ theme }) => ({
|
|
12
|
-
fontWeight: theme.typography.fontWeightMedium,
|
|
13
|
-
fontSize: theme.typography.subtitle1.fontSize,
|
|
14
|
-
color: theme.palette.grey[700],
|
|
15
|
-
paddingInlineStart: theme.spacing(2),
|
|
16
|
-
paddingTop: theme.spacing(1),
|
|
17
|
-
paddingBottom: theme.spacing(1),
|
|
18
|
-
paddingInlineEnd: theme.spacing(1),
|
|
19
|
-
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
20
|
-
}));
|
|
21
|
-
export const Footer = styled(Box)(({ theme }) => ({
|
|
22
|
-
padding: '8px 16px',
|
|
23
|
-
display: 'flex',
|
|
24
|
-
gap: '8px',
|
|
25
|
-
justifyContent: 'flex-end',
|
|
26
|
-
backgroundColor: theme.palette.common.white,
|
|
27
|
-
borderTop: `1px solid ${theme.palette.divider}`,
|
|
28
|
-
}));
|
|
29
|
-
export const OkayButton = styled(Button)(({ theme }) => ({
|
|
30
|
-
textTransform: 'capitalize',
|
|
31
|
-
minWidth: 'auto',
|
|
32
|
-
width: 70,
|
|
33
|
-
borderRadius: '4px',
|
|
34
|
-
border: `1px solid ${theme.palette.info.dark}`,
|
|
35
|
-
backgroundColor: theme.palette.info.dark,
|
|
36
|
-
fontWeight: 700,
|
|
37
|
-
fontSize: '11px',
|
|
38
|
-
color: theme.palette.common.white,
|
|
39
|
-
'&:hover': {
|
|
40
|
-
backgroundColor: theme.palette.info.dark,
|
|
41
|
-
},
|
|
42
|
-
'&.Mui-disabled': {
|
|
43
|
-
color: '#fff !important',
|
|
44
|
-
opacity: 0.5,
|
|
45
|
-
},
|
|
46
|
-
}));
|
|
47
|
-
export const CancelButton = styled(Button)(({ theme }) => ({
|
|
48
|
-
textTransform: 'capitalize',
|
|
49
|
-
minWidth: 'auto',
|
|
50
|
-
width: 70,
|
|
51
|
-
borderRadius: '4px',
|
|
52
|
-
border: `1px solid ${theme.palette.divider}`,
|
|
53
|
-
backgroundColor: theme.palette.common.white,
|
|
54
|
-
fontWeight: 500,
|
|
55
|
-
fontSize: '11px',
|
|
56
|
-
color: theme.palette.text.primary,
|
|
57
|
-
'&:hover': {
|
|
58
|
-
background: 'transparent',
|
|
59
|
-
},
|
|
60
|
-
}));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|