@tap-payments/os-micro-frontend-shared 0.1.264 → 0.1.266
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/Menu/Menu.d.ts +1 -1
- package/build/components/MerchantsDropdown/BrandItem.d.ts +13 -0
- package/build/components/MerchantsDropdown/BrandItem.js +71 -0
- package/build/components/MerchantsDropdown/EntityItem.d.ts +14 -0
- package/build/components/MerchantsDropdown/EntityItem.js +69 -0
- package/build/components/MerchantsDropdown/EntityList.d.ts +11 -0
- package/build/components/MerchantsDropdown/EntityList.js +7 -0
- package/build/components/MerchantsDropdown/MerchantItem.d.ts +13 -0
- package/build/components/MerchantsDropdown/MerchantItem.js +27 -0
- package/build/components/MerchantsDropdown/MerchantsDropdown.d.ts +5 -0
- package/build/components/MerchantsDropdown/MerchantsDropdown.js +49 -0
- package/build/components/MerchantsDropdown/MerchantsList.d.ts +12 -0
- package/build/components/MerchantsDropdown/MerchantsList.js +18 -0
- package/build/components/MerchantsDropdown/hooks.d.ts +19 -0
- package/build/components/MerchantsDropdown/hooks.js +54 -0
- package/build/components/MerchantsDropdown/index.d.ts +1 -0
- package/build/components/MerchantsDropdown/index.js +1 -0
- package/build/components/MerchantsDropdown/style.d.ts +38 -0
- package/build/components/MerchantsDropdown/style.js +155 -0
- package/build/components/MerchantsDropdown/type.d.ts +14 -0
- package/build/components/MerchantsDropdown/type.js +1 -0
- package/build/components/ReceiptsViewer/ReceiptViewer.d.ts +2 -0
- package/build/components/ReceiptsViewer/ReceiptViewer.js +16 -0
- package/build/components/ReceiptsViewer/ReceiptsViewer.d.ts +11 -0
- package/build/components/ReceiptsViewer/ReceiptsViewer.js +7 -0
- package/build/components/ReceiptsViewer/index.d.ts +1 -0
- package/build/components/ReceiptsViewer/index.js +1 -0
- package/build/components/ReceiptsViewer/style.d.ts +4 -0
- package/build/components/ReceiptsViewer/style.js +7 -0
- package/build/components/ReceiptsViewer/type.d.ts +11 -0
- package/build/components/ReceiptsViewer/type.js +1 -0
- package/build/components/index.d.ts +2 -0
- package/build/components/index.js +2 -0
- package/build/hooks/index.d.ts +1 -0
- package/build/hooks/index.js +1 -0
- package/build/hooks/useSelectedMerchantDetails.d.ts +10 -0
- package/build/hooks/useSelectedMerchantDetails.js +15 -0
- package/build/types/index.d.ts +1 -1
- package/build/types/index.js +1 -1
- package/build/types/merchant.d.ts +6 -0
- package/build/types/receipt.d.ts +4 -0
- package/build/types/receipt.js +1 -0
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { PopperProps } from '@mui/material/Popper';
|
|
3
3
|
import { BoxProps, SxProps, Theme } from '@mui/material';
|
|
4
|
-
interface MenuProps extends PopperProps {
|
|
4
|
+
export interface MenuProps extends PopperProps {
|
|
5
5
|
children: ReactNode;
|
|
6
6
|
popperSx?: SxProps<Theme>;
|
|
7
7
|
dropdownProps?: BoxProps;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Brand } from '../../types/index.js';
|
|
3
|
+
import { MerchantsDropdownProps } from './type';
|
|
4
|
+
interface BrandItemProps {
|
|
5
|
+
brand: Brand;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
selectedValue?: MerchantsDropdownProps['selectedValue'];
|
|
8
|
+
onValueChange: MerchantsDropdownProps['onValueChange'];
|
|
9
|
+
renderBrandLogo: (fileId: string) => React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
declare function BrandItem({ brand, onClose, selectedValue, onValueChange, renderBrandLogo }: Readonly<BrandItemProps>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare const _default: import("react").MemoExoticComponent<typeof BrandItem>;
|
|
13
|
+
export default _default;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useState, useCallback, useMemo } from 'react';
|
|
3
|
+
import Typography from '@mui/material/Typography';
|
|
4
|
+
import Box from '@mui/material/Box';
|
|
5
|
+
import { useTranslation } from 'react-i18next';
|
|
6
|
+
import { blackRightArrowIcon, blueCheckIcon } from '../../constants/index.js';
|
|
7
|
+
import { getNameText } from '../../utils/index.js';
|
|
8
|
+
import { Content, Counter, CountingInfo, MenuItemStatusClasses, StyledMenu, StyledMenuItem } from './style';
|
|
9
|
+
import MerchantsList from './MerchantsList';
|
|
10
|
+
import EntityList from './EntityList';
|
|
11
|
+
function BrandItem({ brand, onClose, selectedValue, onValueChange, renderBrandLogo }) {
|
|
12
|
+
var _a, _b, _c, _d;
|
|
13
|
+
const [entitiesAnchorElement, setEntitiesAnchorElement] = useState(null);
|
|
14
|
+
const { i18n } = useTranslation();
|
|
15
|
+
const [subMenuFlipped, setSubMenuFlipped] = useState(false);
|
|
16
|
+
const isMenuOpen = Boolean(entitiesAnchorElement);
|
|
17
|
+
const hasEntities = ((_b = (_a = brand.entities) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
|
|
18
|
+
const isSelected = brand.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.brandId);
|
|
19
|
+
const handleMouseEnter = useCallback((event) => {
|
|
20
|
+
if (hasEntities) {
|
|
21
|
+
setEntitiesAnchorElement(event.currentTarget);
|
|
22
|
+
}
|
|
23
|
+
}, [hasEntities]);
|
|
24
|
+
const handleMouseLeave = useCallback(() => {
|
|
25
|
+
if (entitiesAnchorElement) {
|
|
26
|
+
setEntitiesAnchorElement(null);
|
|
27
|
+
}
|
|
28
|
+
}, [entitiesAnchorElement]);
|
|
29
|
+
const menuClasses = useMemo(() => {
|
|
30
|
+
const classNames = [];
|
|
31
|
+
if (isSelected)
|
|
32
|
+
classNames.push(MenuItemStatusClasses.SELECTED);
|
|
33
|
+
if (isMenuOpen)
|
|
34
|
+
classNames.push(MenuItemStatusClasses.SUBMENU_OPEN);
|
|
35
|
+
if (subMenuFlipped)
|
|
36
|
+
classNames.push(MenuItemStatusClasses.SUBMENU_FLIPPED);
|
|
37
|
+
return classNames.join(' ');
|
|
38
|
+
}, [isSelected, isMenuOpen, subMenuFlipped]);
|
|
39
|
+
const hasOneEntity = ((_c = brand.entities) === null || _c === void 0 ? void 0 : _c.length) === 1;
|
|
40
|
+
const onlyEntity = (_d = brand.entities) === null || _d === void 0 ? void 0 : _d[0];
|
|
41
|
+
const handleSelectMerchant = useCallback((entityId, merchant) => {
|
|
42
|
+
onValueChange({
|
|
43
|
+
merchantId: merchant.id,
|
|
44
|
+
brandId: brand.id,
|
|
45
|
+
entityId,
|
|
46
|
+
legacyId: merchant.legacy_id,
|
|
47
|
+
});
|
|
48
|
+
onClose();
|
|
49
|
+
}, [brand.id, onValueChange, onClose]);
|
|
50
|
+
return (_jsxs(StyledMenuItem, Object.assign({ "data-testid": "BrandItem", className: menuClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, hideCheckbox: true }, { children: [_jsxs(Content, Object.assign({ sx: { gap: '2.5px' }, "data-testid": "Content" }, { children: [isSelected ? _jsx("img", { src: blueCheckIcon, alt: "Selected" }) : _jsx(Box, { width: 15 }), renderBrandLogo === null || renderBrandLogo === void 0 ? void 0 : renderBrandLogo(brand.logo), _jsx(Typography, Object.assign({ flex: 1, noWrap: true, fontSize: "inherit", component: "span" }, { children: getNameText(brand.name, i18n.language) })), hasEntities && (_jsxs(CountingInfo, { children: [_jsx(Counter, { children: brand.entities.length }), _jsx("img", { src: blackRightArrowIcon, height: 10, className: "arrow-icon", alt: "Expand" })] }))] })), _jsx(StyledMenu, Object.assign({ open: isMenuOpen, anchorEl: entitiesAnchorElement, placement: "right-start", modifiers: [
|
|
51
|
+
{
|
|
52
|
+
name: 'placementTracker',
|
|
53
|
+
enabled: true,
|
|
54
|
+
phase: 'write',
|
|
55
|
+
fn({ state }) {
|
|
56
|
+
setSubMenuFlipped(state.placement === 'left-start');
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
], sx: {
|
|
60
|
+
'& .MuiPopper-dropdown': {
|
|
61
|
+
minWidth: '157px',
|
|
62
|
+
},
|
|
63
|
+
} }, { children: hasOneEntity ? (_jsx(MerchantsList, { items: (onlyEntity === null || onlyEntity === void 0 ? void 0 : onlyEntity.merchants) || [], onItemClick: (event, selected) => {
|
|
64
|
+
event.stopPropagation();
|
|
65
|
+
handleSelectMerchant(onlyEntity === null || onlyEntity === void 0 ? void 0 : onlyEntity.id, selected);
|
|
66
|
+
}, menuFlipped: subMenuFlipped, value: selectedValue })) : (_jsx(EntityList, { items: brand.entities, value: selectedValue, onChange: (merchant) => {
|
|
67
|
+
onClose();
|
|
68
|
+
onValueChange(merchant);
|
|
69
|
+
}, brand: brand, menuFlipped: subMenuFlipped })) }))] })));
|
|
70
|
+
}
|
|
71
|
+
export default memo(BrandItem);
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Entity } from '../../types/index.js';
|
|
3
|
+
import { MerchantsDropdownProps } from './type';
|
|
4
|
+
interface EntityProps {
|
|
5
|
+
entity: Entity;
|
|
6
|
+
brandId: string;
|
|
7
|
+
selectedValue?: MerchantsDropdownProps['selectedValue'];
|
|
8
|
+
onValueChange: MerchantsDropdownProps['onValueChange'];
|
|
9
|
+
onlyOne?: boolean;
|
|
10
|
+
menuFlipped?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare function EntityItem(props: Readonly<EntityProps>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare const _default: import("react").MemoExoticComponent<typeof EntityItem>;
|
|
14
|
+
export default _default;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useState, useCallback, useMemo } from 'react';
|
|
3
|
+
import Box from '@mui/material/Box';
|
|
4
|
+
import { useTranslation } from 'react-i18next';
|
|
5
|
+
import { CountryFlag } from '../index.js';
|
|
6
|
+
import { blueCheckIcon, rightArrow } from '../../constants/index.js';
|
|
7
|
+
import { getNameText } from '../../utils/index.js';
|
|
8
|
+
import { Counter, CountingInfo, Content, StyledMenu, StyledChildMenuItem, MenuItemStatusClasses } from './style';
|
|
9
|
+
import MerchantsList from './MerchantsList';
|
|
10
|
+
function EntityItem(props) {
|
|
11
|
+
var _a, _b, _c;
|
|
12
|
+
const { entity, brandId, selectedValue, onValueChange, onlyOne, menuFlipped } = props;
|
|
13
|
+
const [merchantAnchorElement, setMerchantAnchorElement] = useState(null);
|
|
14
|
+
const { i18n } = useTranslation();
|
|
15
|
+
const [subMenuFlipped, setSubMenuFlipped] = useState(false);
|
|
16
|
+
const isMenuOpen = Boolean(merchantAnchorElement);
|
|
17
|
+
const hasMerchants = ((_b = (_a = entity.merchants) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
|
|
18
|
+
const isSelected = brandId === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.brandId) && entity.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.entityId);
|
|
19
|
+
const handleMouseEnter = useCallback((event) => {
|
|
20
|
+
if (hasMerchants) {
|
|
21
|
+
setMerchantAnchorElement(event.currentTarget);
|
|
22
|
+
}
|
|
23
|
+
}, [hasMerchants]);
|
|
24
|
+
const handleMouseLeave = useCallback(() => {
|
|
25
|
+
if (merchantAnchorElement) {
|
|
26
|
+
setMerchantAnchorElement(null);
|
|
27
|
+
}
|
|
28
|
+
}, [merchantAnchorElement]);
|
|
29
|
+
const handleSelectMerchant = useCallback((entityId, merchant) => {
|
|
30
|
+
onValueChange({
|
|
31
|
+
merchantId: merchant.id,
|
|
32
|
+
brandId,
|
|
33
|
+
entityId,
|
|
34
|
+
legacyId: merchant.legacy_id,
|
|
35
|
+
});
|
|
36
|
+
}, [brandId, onValueChange]);
|
|
37
|
+
const menuItemClassNames = useMemo(() => {
|
|
38
|
+
const classNames = [];
|
|
39
|
+
if (isSelected)
|
|
40
|
+
classNames.push(MenuItemStatusClasses.SELECTED);
|
|
41
|
+
if (onlyOne)
|
|
42
|
+
classNames.push(MenuItemStatusClasses.ONLY_ONE);
|
|
43
|
+
if (menuFlipped)
|
|
44
|
+
classNames.push(MenuItemStatusClasses.FLIPPED);
|
|
45
|
+
if (isMenuOpen)
|
|
46
|
+
classNames.push(MenuItemStatusClasses.SUBMENU_OPEN);
|
|
47
|
+
if (subMenuFlipped)
|
|
48
|
+
classNames.push(MenuItemStatusClasses.SUBMENU_FLIPPED);
|
|
49
|
+
return classNames.join(' ');
|
|
50
|
+
}, [isSelected, isMenuOpen, subMenuFlipped, onlyOne, menuFlipped]);
|
|
51
|
+
return (_jsxs(StyledChildMenuItem, Object.assign({ "data-testid": "EntityItem", className: menuItemClassNames, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, hideCheckbox: true }, { children: [_jsxs(Content, { children: [_jsxs(CountingInfo, { children: [isSelected ? _jsx("img", { src: blueCheckIcon, alt: "Selected" }) : _jsx(Box, { width: 15 }), _jsx(CountryFlag, { countryCode: entity.country }), _jsx("span", { children: getNameText(entity.legal_name, i18n.language) })] }), hasMerchants && (_jsxs(CountingInfo, { children: [_jsx(Counter, { children: (_c = entity.merchants) === null || _c === void 0 ? void 0 : _c.length }), _jsx("img", { src: rightArrow, className: "arrow-icon", alt: "Expand" })] }))] }), _jsx(StyledMenu, Object.assign({ open: isMenuOpen, anchorEl: merchantAnchorElement, placement: "right-start", modifiers: [
|
|
52
|
+
{
|
|
53
|
+
name: 'placementTracker',
|
|
54
|
+
enabled: true,
|
|
55
|
+
phase: 'write',
|
|
56
|
+
fn({ state }) {
|
|
57
|
+
setSubMenuFlipped(state.placement === 'left-start');
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
], sx: {
|
|
61
|
+
'& .MuiPopper-dropdown': {
|
|
62
|
+
minWidth: '141px',
|
|
63
|
+
},
|
|
64
|
+
} }, { children: _jsx(MerchantsList, { items: entity.merchants || [], onItemClick: (event, selected) => {
|
|
65
|
+
event.stopPropagation();
|
|
66
|
+
handleSelectMerchant(entity.id, selected);
|
|
67
|
+
}, menuFlipped: subMenuFlipped, value: selectedValue }) }))] })));
|
|
68
|
+
}
|
|
69
|
+
export default memo(EntityItem);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Brand, Entity as EntityType, EntityDetails, MerchantInfo } from '../../types/index.js';
|
|
2
|
+
import { MerchantsDropdownProps } from './type';
|
|
3
|
+
type EntityListProps = {
|
|
4
|
+
items: (EntityDetails & EntityType)[];
|
|
5
|
+
brand: Brand;
|
|
6
|
+
menuFlipped?: boolean;
|
|
7
|
+
value?: MerchantInfo;
|
|
8
|
+
onChange: MerchantsDropdownProps['onValueChange'];
|
|
9
|
+
};
|
|
10
|
+
declare const EntityList: (props: EntityListProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default EntityList;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import EntityItem from './EntityItem';
|
|
3
|
+
const EntityList = (props) => {
|
|
4
|
+
const { items, brand, value, onChange, menuFlipped } = props;
|
|
5
|
+
return (_jsx(_Fragment, { children: items.map((entity) => (_jsx(EntityItem, { entity: entity, brandId: brand.id, selectedValue: value, onValueChange: onChange, onlyOne: items.length === 1, menuFlipped: menuFlipped }, entity.id))) }));
|
|
6
|
+
};
|
|
7
|
+
export default EntityList;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { MenuItem } from '../index.js';
|
|
3
|
+
import { Merchant, MerchantInfo as MerchantInfoType } from '../../types/index.js';
|
|
4
|
+
type MerchantItemProps = {
|
|
5
|
+
merchant: Merchant;
|
|
6
|
+
selectedValue?: MerchantInfoType;
|
|
7
|
+
onClick: React.ComponentProps<typeof MenuItem>['onClick'];
|
|
8
|
+
onlyOne?: boolean;
|
|
9
|
+
menuFlipped?: boolean;
|
|
10
|
+
className?: string;
|
|
11
|
+
};
|
|
12
|
+
declare const MerchantItem: (props: MerchantItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default MerchantItem;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import Typography from '@mui/material/Typography';
|
|
4
|
+
import Box from '@mui/material/Box';
|
|
5
|
+
import { alpha } from '@mui/material/styles';
|
|
6
|
+
import { blueCheckIcon } from '../../constants/index.js';
|
|
7
|
+
import { MenuItemStatusClasses, MerchantInfo, StyledChildMenuItem } from './style';
|
|
8
|
+
const MerchantItem = (props) => {
|
|
9
|
+
const { merchant, selectedValue, onClick, onlyOne, menuFlipped } = props;
|
|
10
|
+
const isSelected = merchant.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId);
|
|
11
|
+
const menuItemClassNames = useMemo(() => {
|
|
12
|
+
const classNames = [];
|
|
13
|
+
if (isSelected)
|
|
14
|
+
classNames.push(MenuItemStatusClasses.SELECTED);
|
|
15
|
+
if (onlyOne)
|
|
16
|
+
classNames.push(MenuItemStatusClasses.ONLY_ONE);
|
|
17
|
+
if (menuFlipped)
|
|
18
|
+
classNames.push(MenuItemStatusClasses.FLIPPED);
|
|
19
|
+
return classNames.join(' ');
|
|
20
|
+
}, [isSelected, onlyOne, menuFlipped]);
|
|
21
|
+
return (_jsxs(StyledChildMenuItem, Object.assign({ "data-testid": "MerchantItem", className: menuItemClassNames, sx: {
|
|
22
|
+
py: '4.5px',
|
|
23
|
+
pl: 1,
|
|
24
|
+
pr: 2,
|
|
25
|
+
}, onClick: onClick, hideCheckbox: true }, { children: [isSelected ? _jsx("img", { src: blueCheckIcon, alt: "Selected" }) : _jsx(Box, { width: 15 }), _jsxs(MerchantInfo, { children: [_jsx(Typography, Object.assign({ component: "span", fontSize: 11 }, { children: merchant.display_name })), _jsx(Typography, Object.assign({ color: (theme) => alpha(theme.palette.text.primary, 0.5), fontSize: 8 }, { children: merchant.legacy_id }))] })] }), merchant.id));
|
|
26
|
+
};
|
|
27
|
+
export default MerchantItem;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
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;
|
|
4
|
+
declare const _default: import("react").MemoExoticComponent<typeof MerchantsDropdown>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useMemo, useCallback, useRef } from 'react';
|
|
3
|
+
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
4
|
+
import { Loader, LastRowContent } from '../index.js';
|
|
5
|
+
import { downArrowIcon } from '../../constants/index.js';
|
|
6
|
+
import BrandItem from './BrandItem';
|
|
7
|
+
import { SelectedBrand, Label, CollapseIcon, LoadingRow, StyledMenu } from './style';
|
|
8
|
+
import { useDropdownMenu, useDefaultMerchantSelection, getIsSingleMerchant } from './hooks';
|
|
9
|
+
/**
|
|
10
|
+
* Renders the arrow icon based on loading state and merchant count
|
|
11
|
+
*/
|
|
12
|
+
const DropdownArrowIcon = ({ isLoading, isSingleMerchant, isOpen }) => {
|
|
13
|
+
if (isLoading) {
|
|
14
|
+
return _jsx(Loader, {});
|
|
15
|
+
}
|
|
16
|
+
if (!isSingleMerchant) {
|
|
17
|
+
return _jsx(CollapseIcon, { src: downArrowIcon, alt: "Toggle dropdown", expanded: isOpen });
|
|
18
|
+
}
|
|
19
|
+
return null;
|
|
20
|
+
};
|
|
21
|
+
function MerchantsDropdown({ brands, isLoading = true, label, sx, selectedValue, isDisabled, isFetchingNextPage, renderBrandLogo, onValueChange, }) {
|
|
22
|
+
var _a;
|
|
23
|
+
const { anchorElement, isOpen, openMenu, closeMenu } = useDropdownMenu();
|
|
24
|
+
const controllerRef = useRef(null);
|
|
25
|
+
useDefaultMerchantSelection(brands, selectedValue, onValueChange);
|
|
26
|
+
const isSingleMerchant = useMemo(() => getIsSingleMerchant(brands), [brands]);
|
|
27
|
+
const shouldDisableInteraction = isSingleMerchant || isDisabled || isLoading;
|
|
28
|
+
const handleContainerClick = useCallback((event) => {
|
|
29
|
+
if (!shouldDisableInteraction) {
|
|
30
|
+
openMenu(event);
|
|
31
|
+
}
|
|
32
|
+
}, [shouldDisableInteraction, openMenu]);
|
|
33
|
+
const handleClickAway = useCallback(() => {
|
|
34
|
+
if (isOpen) {
|
|
35
|
+
closeMenu();
|
|
36
|
+
}
|
|
37
|
+
}, [isOpen, closeMenu]);
|
|
38
|
+
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleClickAway }, { children: _jsxs(SelectedBrand, Object.assign({ isOpen: isOpen, onClick: handleContainerClick, sx: Object.assign(Object.assign({}, (shouldDisableInteraction && {
|
|
39
|
+
pointerEvents: 'none',
|
|
40
|
+
opacity: 0.7,
|
|
41
|
+
})), sx), ref: controllerRef }, { children: [_jsx(Label, Object.assign({ noWrap: true, sx: Object.assign({}, (label.length > 16 && {
|
|
42
|
+
width: 100,
|
|
43
|
+
})) }, { 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 && {
|
|
45
|
+
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 }) }))] }))] })) })));
|
|
48
|
+
}
|
|
49
|
+
export default memo(MerchantsDropdown);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Merchant, MerchantInfo as MerchantInfoType } from '../../types/index.js';
|
|
3
|
+
import MerchantItem from './MerchantItem';
|
|
4
|
+
type OnItemClick = Exclude<React.ComponentProps<typeof MerchantItem>['onClick'], undefined>;
|
|
5
|
+
type MerchantsListProps = {
|
|
6
|
+
items: Merchant[];
|
|
7
|
+
onItemClick?: (event: Parameters<OnItemClick>[0], selected: Merchant) => void;
|
|
8
|
+
menuFlipped?: boolean;
|
|
9
|
+
value?: MerchantInfoType;
|
|
10
|
+
};
|
|
11
|
+
declare const MerchantsList: (props: MerchantsListProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default MerchantsList;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import MerchantItem from './MerchantItem';
|
|
4
|
+
import { MenuItemStatusClasses } from './style';
|
|
5
|
+
const MerchantsList = (props) => {
|
|
6
|
+
const { items, value, onItemClick, menuFlipped } = props;
|
|
7
|
+
const onlyOne = items.length === 1;
|
|
8
|
+
const menuItemClassNames = useMemo(() => {
|
|
9
|
+
const classNames = [];
|
|
10
|
+
if (onlyOne)
|
|
11
|
+
classNames.push(MenuItemStatusClasses.ONLY_ONE);
|
|
12
|
+
if (menuFlipped)
|
|
13
|
+
classNames.push(MenuItemStatusClasses.FLIPPED);
|
|
14
|
+
return classNames.join(' ');
|
|
15
|
+
}, [onlyOne, menuFlipped]);
|
|
16
|
+
return (_jsx(_Fragment, { children: items.map((merchant) => (_jsx(MerchantItem, { className: menuItemClassNames, onlyOne: items.length === 1, selectedValue: value, merchant: merchant, onClick: (e) => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(e, merchant), menuFlipped: menuFlipped }, merchant.id))) }));
|
|
17
|
+
};
|
|
18
|
+
export default MerchantsList;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
import { Brand, MerchantInfo } from '../../types/index.js';
|
|
3
|
+
/**
|
|
4
|
+
* Custom hook to handle dropdown menu state
|
|
5
|
+
*/
|
|
6
|
+
export declare const useDropdownMenu: () => {
|
|
7
|
+
anchorElement: HTMLElement | null;
|
|
8
|
+
isOpen: boolean;
|
|
9
|
+
openMenu: (event: MouseEvent<HTMLElement>) => void;
|
|
10
|
+
closeMenu: () => void;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Custom hook to handle default merchant selection
|
|
14
|
+
*/
|
|
15
|
+
export declare const useDefaultMerchantSelection: (brandsList: Brand[], selectedValue: MerchantInfo | undefined, onValueChange: (merchant: Required<MerchantInfo>) => void) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Check if only one merchant exists across all brands
|
|
18
|
+
*/
|
|
19
|
+
export declare const getIsSingleMerchant: (brandsList: Brand[]) => boolean;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useState, useEffect, useCallback } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Custom hook to handle dropdown menu state
|
|
4
|
+
*/
|
|
5
|
+
export const useDropdownMenu = () => {
|
|
6
|
+
const [anchorElement, setAnchorElement] = useState(null);
|
|
7
|
+
const isOpen = Boolean(anchorElement);
|
|
8
|
+
const openMenu = useCallback((event) => {
|
|
9
|
+
setAnchorElement(event.currentTarget);
|
|
10
|
+
}, []);
|
|
11
|
+
const closeMenu = useCallback(() => {
|
|
12
|
+
setAnchorElement(null);
|
|
13
|
+
}, []);
|
|
14
|
+
return {
|
|
15
|
+
anchorElement,
|
|
16
|
+
isOpen,
|
|
17
|
+
openMenu,
|
|
18
|
+
closeMenu,
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Custom hook to handle default merchant selection
|
|
23
|
+
*/
|
|
24
|
+
export const useDefaultMerchantSelection = (brandsList, selectedValue, onValueChange) => {
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
var _a;
|
|
27
|
+
// Skip if a merchant is already selected
|
|
28
|
+
if (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId)
|
|
29
|
+
return;
|
|
30
|
+
// Find the first brand with entities that have merchants
|
|
31
|
+
const defaultBrand = brandsList.find((brand) => { var _a; return ((_a = brand.entities) === null || _a === void 0 ? void 0 : _a.length) > 0 && brand.entities.some((entity) => { var _a, _b; return ((_b = (_a = entity.merchants) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; }); });
|
|
32
|
+
if (!defaultBrand)
|
|
33
|
+
return;
|
|
34
|
+
// Find the first entity with merchants
|
|
35
|
+
const defaultEntity = defaultBrand.entities.find((entity) => { var _a, _b; return ((_b = (_a = entity.merchants) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; });
|
|
36
|
+
if (!((_a = defaultEntity === null || defaultEntity === void 0 ? void 0 : defaultEntity.merchants) === null || _a === void 0 ? void 0 : _a[0]))
|
|
37
|
+
return;
|
|
38
|
+
// Set the default selection
|
|
39
|
+
const defaultMerchant = defaultEntity.merchants[0];
|
|
40
|
+
onValueChange({
|
|
41
|
+
merchantId: defaultMerchant.id,
|
|
42
|
+
brandId: defaultBrand.id,
|
|
43
|
+
entityId: defaultEntity.id,
|
|
44
|
+
legacyId: defaultMerchant.legacy_id,
|
|
45
|
+
});
|
|
46
|
+
}, [brandsList, selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId, onValueChange]);
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Check if only one merchant exists across all brands
|
|
50
|
+
*/
|
|
51
|
+
export const getIsSingleMerchant = (brandsList) => {
|
|
52
|
+
var _a, _b;
|
|
53
|
+
return brandsList.length === 1 && ((_a = brandsList[0].entities) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_b = brandsList[0].entities[0].merchants) === null || _b === void 0 ? void 0 : _b.length) === 1;
|
|
54
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as MerchantsDropdown } from './MerchantsDropdown';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as MerchantsDropdown } from './MerchantsDropdown';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Counter: 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
|
+
export declare const CountingInfo: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
6
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
7
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
8
|
+
export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
9
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
10
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
11
|
+
export declare const MerchantInfo: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
12
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
13
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
14
|
+
export declare const SelectedBrand: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
15
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
16
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
17
|
+
isOpen: boolean;
|
|
18
|
+
}, {}, {}>;
|
|
19
|
+
export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
20
|
+
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
21
|
+
}, "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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
22
|
+
export declare const CollapseIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
23
|
+
expanded: boolean;
|
|
24
|
+
}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
25
|
+
export declare const LoadingRow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
26
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
27
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
28
|
+
export declare const StyledMenu: import("@emotion/styled").StyledComponent<Omit<import("../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
29
|
+
export declare enum MenuItemStatusClasses {
|
|
30
|
+
SELECTED = "Mui-selected",
|
|
31
|
+
ONLY_ONE = "Mui-only-one",
|
|
32
|
+
FLIPPED = "Mui-flipped",
|
|
33
|
+
SUBMENU_OPEN = "Mui-Submenu-open",
|
|
34
|
+
SUBMENU_FLIPPED = "Mui-Submenu-flipped"
|
|
35
|
+
}
|
|
36
|
+
export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
37
|
+
export declare const StyledChildMenuItem: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
38
|
+
export declare const StyledMenuItemHeader: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import Typography from '@mui/material/Typography';
|
|
2
|
+
import Box from '@mui/material/Box';
|
|
3
|
+
import { styled } from '@mui/material/styles';
|
|
4
|
+
import { Menu, MenuItem } from '../index.js';
|
|
5
|
+
export const Counter = styled(Box)(({ theme }) => ({
|
|
6
|
+
borderRadius: '50%',
|
|
7
|
+
background: theme.palette.divider,
|
|
8
|
+
width: 13,
|
|
9
|
+
height: 14,
|
|
10
|
+
fontSize: '8px',
|
|
11
|
+
fontWeight: 700,
|
|
12
|
+
display: 'flex',
|
|
13
|
+
alignItems: 'center',
|
|
14
|
+
justifyContent: 'center',
|
|
15
|
+
lineHeight: '10px',
|
|
16
|
+
}));
|
|
17
|
+
export const CountingInfo = styled(Box)(() => ({
|
|
18
|
+
display: 'flex',
|
|
19
|
+
alignItems: 'center',
|
|
20
|
+
gap: '4px',
|
|
21
|
+
'.arrow-icon': {
|
|
22
|
+
height: 12,
|
|
23
|
+
},
|
|
24
|
+
}));
|
|
25
|
+
export const Content = styled(Box)(() => ({
|
|
26
|
+
display: 'flex',
|
|
27
|
+
gap: '12px',
|
|
28
|
+
justifyContent: 'space-between',
|
|
29
|
+
flexGrow: 1,
|
|
30
|
+
width: '100%',
|
|
31
|
+
alignItems: 'center',
|
|
32
|
+
}));
|
|
33
|
+
export const MerchantInfo = styled(Box)(() => ({
|
|
34
|
+
display: 'flex',
|
|
35
|
+
flexDirection: 'column',
|
|
36
|
+
}));
|
|
37
|
+
export const SelectedBrand = styled(Box, { shouldForwardProp: (prop) => prop !== 'isOpen' })(({ isOpen, theme }) => (Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '5px', cursor: 'pointer', padding: '8px', border: `1px solid ${theme.palette.divider}`, color: theme.palette.text.primary, background: theme.palette.common.white, borderRadius: '4px', height: 32, width: 'fit-content', minWidth: '89px', img: {
|
|
38
|
+
marginTop: '1px',
|
|
39
|
+
} }, (isOpen && {
|
|
40
|
+
borderColor: theme.palette.info.dark,
|
|
41
|
+
})), { '&:hover': {
|
|
42
|
+
background: theme.palette.divider,
|
|
43
|
+
} })));
|
|
44
|
+
export const Label = styled(Typography)(({ theme }) => ({
|
|
45
|
+
fontSize: '11px',
|
|
46
|
+
fontWeight: 500,
|
|
47
|
+
color: theme.palette.text.primary,
|
|
48
|
+
}));
|
|
49
|
+
export const CollapseIcon = styled('img', { shouldForwardProp: (props) => props !== 'expanded' })(({ theme, expanded }) => ({
|
|
50
|
+
transform: !expanded ? 'rotate(0deg)' : 'rotate(180deg)',
|
|
51
|
+
marginLeft: 'auto',
|
|
52
|
+
transition: theme.transitions.create('transform', {
|
|
53
|
+
duration: theme.transitions.duration.shortest,
|
|
54
|
+
}),
|
|
55
|
+
}));
|
|
56
|
+
export const LoadingRow = styled(Box)(() => ({
|
|
57
|
+
display: 'flex',
|
|
58
|
+
justifyContent: 'center',
|
|
59
|
+
alignItems: 'center',
|
|
60
|
+
paddingBlock: '4px',
|
|
61
|
+
borderTop: '1px solid #F2F2F2',
|
|
62
|
+
}));
|
|
63
|
+
export const StyledMenu = styled(Menu)({
|
|
64
|
+
'& .MuiPopper-dropdown': {
|
|
65
|
+
maxHeight: 700,
|
|
66
|
+
overflow: 'visible',
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
export var MenuItemStatusClasses;
|
|
70
|
+
(function (MenuItemStatusClasses) {
|
|
71
|
+
MenuItemStatusClasses["SELECTED"] = "Mui-selected";
|
|
72
|
+
MenuItemStatusClasses["ONLY_ONE"] = "Mui-only-one";
|
|
73
|
+
MenuItemStatusClasses["FLIPPED"] = "Mui-flipped";
|
|
74
|
+
MenuItemStatusClasses["SUBMENU_OPEN"] = "Mui-Submenu-open";
|
|
75
|
+
MenuItemStatusClasses["SUBMENU_FLIPPED"] = "Mui-Submenu-flipped";
|
|
76
|
+
})(MenuItemStatusClasses || (MenuItemStatusClasses = {}));
|
|
77
|
+
export const StyledMenuItem = styled(MenuItem)({
|
|
78
|
+
'--menuitem-border-rad': '4px',
|
|
79
|
+
backgroundColor: '#fff',
|
|
80
|
+
minHeight: 36,
|
|
81
|
+
'&:first-of-type': {
|
|
82
|
+
borderTopLeftRadius: 'var(--menuitem-border-rad)',
|
|
83
|
+
borderTopRightRadius: 'var(--menuitem-border-rad)',
|
|
84
|
+
},
|
|
85
|
+
'&:last-of-type': {
|
|
86
|
+
borderBottomLeftRadius: 'var(--menuitem-border-rad)',
|
|
87
|
+
borderBottomRightRadius: 'var(--menuitem-border-rad)',
|
|
88
|
+
},
|
|
89
|
+
'&.Mui-Submenu-open': {
|
|
90
|
+
borderTopRightRadius: 0,
|
|
91
|
+
borderBottomRightRadius: 0,
|
|
92
|
+
'&.Mui-Submenu-flipped': {
|
|
93
|
+
borderTopLeftRadius: 0,
|
|
94
|
+
borderBottomLeftRadius: 0,
|
|
95
|
+
borderTopRightRadius: 'var(--menuitem-border-rad)',
|
|
96
|
+
borderBottomRightRadius: 'var(--menuitem-border-rad)',
|
|
97
|
+
},
|
|
98
|
+
},
|
|
99
|
+
'&.Mui-selected': {
|
|
100
|
+
boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.13)',
|
|
101
|
+
zIndex: 1,
|
|
102
|
+
},
|
|
103
|
+
});
|
|
104
|
+
export const StyledChildMenuItem = styled(StyledMenuItem)({
|
|
105
|
+
'&:first-of-type': {
|
|
106
|
+
borderTopLeftRadius: 0,
|
|
107
|
+
borderTopRightRadius: 'var(--menuitem-border-rad)',
|
|
108
|
+
'&.Mui-flipped': {
|
|
109
|
+
borderTopLeftRadius: 'var(--menuitem-border-rad)',
|
|
110
|
+
borderTopRightRadius: 0,
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
'&:last-of-type': {
|
|
114
|
+
borderBottomLeftRadius: 'var(--menuitem-border-rad)',
|
|
115
|
+
borderBottomRightRadius: 'var(--menuitem-border-rad)',
|
|
116
|
+
},
|
|
117
|
+
'&.Mui-Submenu-open': {
|
|
118
|
+
borderTopRightRadius: 0,
|
|
119
|
+
borderBottomRightRadius: 0,
|
|
120
|
+
'&.Mui-Submenu-flipped': {
|
|
121
|
+
borderTopLeftRadius: 0,
|
|
122
|
+
borderBottomLeftRadius: 0,
|
|
123
|
+
borderTopRightRadius: 'var(--menuitem-border-rad)',
|
|
124
|
+
borderBottomRightRadius: 'var(--menuitem-border-rad)',
|
|
125
|
+
},
|
|
126
|
+
},
|
|
127
|
+
'&.Mui-only-one': {
|
|
128
|
+
borderTopLeftRadius: 0,
|
|
129
|
+
borderBottomLeftRadius: 0,
|
|
130
|
+
borderTopRightRadius: 'var(--menuitem-border-rad)',
|
|
131
|
+
borderBottomRightRadius: 'var(--menuitem-border-rad)',
|
|
132
|
+
'&.Mui-flipped': {
|
|
133
|
+
borderTopLeftRadius: 'var(--menuitem-border-rad)',
|
|
134
|
+
borderBottomLeftRadius: 'var(--menuitem-border-rad)',
|
|
135
|
+
borderTopRightRadius: 0,
|
|
136
|
+
borderBottomRightRadius: 0,
|
|
137
|
+
},
|
|
138
|
+
'&.Mui-Submenu-open': {
|
|
139
|
+
borderTopRightRadius: 0,
|
|
140
|
+
borderBottomRightRadius: 0,
|
|
141
|
+
'&.Mui-Submenu-flipped': {
|
|
142
|
+
borderTopLeftRadius: 0,
|
|
143
|
+
borderBottomLeftRadius: 0,
|
|
144
|
+
borderTopRightRadius: 'var(--menuitem-border-rad)',
|
|
145
|
+
borderBottomRightRadius: 'var(--menuitem-border-rad)',
|
|
146
|
+
},
|
|
147
|
+
},
|
|
148
|
+
},
|
|
149
|
+
});
|
|
150
|
+
export const StyledMenuItemHeader = styled(StyledChildMenuItem)({
|
|
151
|
+
backgroundColor: '#FAFAFA',
|
|
152
|
+
color: '#8D8D94',
|
|
153
|
+
padding: '10px 16px',
|
|
154
|
+
borderBottom: '1px solid #F2F2F2',
|
|
155
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { SxProps } from '@mui/material/styles';
|
|
3
|
+
import { Brand, MerchantInfo } from '../../types/index.js';
|
|
4
|
+
export interface MerchantsDropdownProps {
|
|
5
|
+
brands: Brand[];
|
|
6
|
+
label: string;
|
|
7
|
+
sx?: SxProps;
|
|
8
|
+
selectedValue?: MerchantInfo;
|
|
9
|
+
isLoading?: boolean;
|
|
10
|
+
isFetchingNextPage?: boolean;
|
|
11
|
+
isDisabled?: boolean;
|
|
12
|
+
onValueChange: (merchant: Required<MerchantInfo>) => void;
|
|
13
|
+
renderBrandLogo: (fileId: string) => React.ReactNode;
|
|
14
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import Box from '@mui/material/Box';
|
|
3
|
+
import { AppWindowWrapper } from '../index.js';
|
|
4
|
+
import { Wrapper } from './style';
|
|
5
|
+
export default function ReceiptViewer({ isOpen, receipt, order, appWindow, onClose }) {
|
|
6
|
+
return (_jsx(AppWindowWrapper, Object.assign({ isOpen: isOpen, onClose: () => {
|
|
7
|
+
onClose(receipt.id);
|
|
8
|
+
}, initialPosition: {
|
|
9
|
+
x: 1000 - 20 * order,
|
|
10
|
+
}, windowProps: {
|
|
11
|
+
titleBarText: 'Receipt',
|
|
12
|
+
mainAppIsMinimized: appWindow === null || appWindow === void 0 ? void 0 : appWindow.isMinimized,
|
|
13
|
+
mainAppOrder: appWindow === null || appWindow === void 0 ? void 0 : appWindow.order,
|
|
14
|
+
showSectionsButton: false,
|
|
15
|
+
}, defaultWindowWidth: 502, defaultWindowHeight: 745 }, { children: _jsx(Wrapper, { children: _jsx(Box, { sx: { height: 715, overflow: 'auto' }, dangerouslySetInnerHTML: { __html: receipt.content } }) }) })));
|
|
16
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Receipt } from '../../types/index.js';
|
|
2
|
+
type ReceiptsViewerProps = {
|
|
3
|
+
receipts: Receipt[];
|
|
4
|
+
appWindow?: {
|
|
5
|
+
isMinimized?: boolean;
|
|
6
|
+
order?: number;
|
|
7
|
+
};
|
|
8
|
+
onCloseReceipt: (id: string) => void;
|
|
9
|
+
};
|
|
10
|
+
export default function ReceiptsViewer({ receipts, onCloseReceipt, appWindow }: Readonly<ReceiptsViewerProps>): import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import ReceiptViewer from './ReceiptViewer';
|
|
3
|
+
export default function ReceiptsViewer({ receipts, onCloseReceipt, appWindow }) {
|
|
4
|
+
if (!receipts.length)
|
|
5
|
+
return null;
|
|
6
|
+
return (_jsx(_Fragment, { children: receipts.map((receipt, index) => (_jsx(ReceiptViewer, { order: index, isOpen: true, onClose: (id) => onCloseReceipt(id), receipt: receipt, appWindow: appWindow }, receipt.id))) }));
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ReceiptsViewer } from './ReceiptsViewer';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ReceiptsViewer } from './ReceiptsViewer';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/build/hooks/index.d.ts
CHANGED
package/build/hooks/index.js
CHANGED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Brand, Entity, Merchant, MerchantInfo } from '../types/index.js';
|
|
2
|
+
/**
|
|
3
|
+
* Custom hook to get selected merchant details
|
|
4
|
+
*/
|
|
5
|
+
export declare const useSelectedMerchantDetails: (selectedValue: MerchantInfo | undefined, selectedBrand?: Brand) => {
|
|
6
|
+
selectedBrand: Brand | undefined;
|
|
7
|
+
selectedEntity: (import("../types/index.js").EntityDetails & Entity) | undefined;
|
|
8
|
+
selectedMerchant: Merchant | undefined;
|
|
9
|
+
displayName: string;
|
|
10
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Custom hook to get selected merchant details
|
|
4
|
+
*/
|
|
5
|
+
export const useSelectedMerchantDetails = (selectedValue, selectedBrand) => {
|
|
6
|
+
const selectedEntity = useMemo(() => selectedBrand === null || selectedBrand === void 0 ? void 0 : selectedBrand.entities.find((entity) => entity.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.entityId)), [selectedBrand, selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.entityId]);
|
|
7
|
+
const selectedMerchant = useMemo(() => { var _a; return (_a = selectedEntity === null || selectedEntity === void 0 ? void 0 : selectedEntity.merchants) === null || _a === void 0 ? void 0 : _a.find((merchant) => merchant.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId)); }, [selectedEntity, selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId]);
|
|
8
|
+
const displayName = useMemo(() => { var _a, _b; return (_b = (_a = selectedMerchant === null || selectedMerchant === void 0 ? void 0 : selectedMerchant.display_name) !== null && _a !== void 0 ? _a : selectedMerchant === null || selectedMerchant === void 0 ? void 0 : selectedMerchant.legacy_id) !== null && _b !== void 0 ? _b : 'Select'; }, [selectedMerchant]);
|
|
9
|
+
return {
|
|
10
|
+
selectedBrand,
|
|
11
|
+
selectedEntity,
|
|
12
|
+
selectedMerchant,
|
|
13
|
+
displayName,
|
|
14
|
+
};
|
|
15
|
+
};
|
package/build/types/index.d.ts
CHANGED
package/build/types/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED