@tap-payments/os-micro-frontend-shared 0.1.254-test.5 → 0.1.255
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/Chip/style.d.ts +1 -0
- package/build/components/CountBadge/style.d.ts +1 -0
- package/build/components/Dialog/style.d.ts +1 -0
- package/build/components/FlippingCard/style.d.ts +1 -0
- package/build/components/ImageWrapper/ImageWrapper.d.ts +1 -0
- package/build/components/JSONViewer/style.d.ts +1 -0
- package/build/components/LeftPeekRightExpandingChip/style.d.ts +1 -0
- package/build/components/Menu/Menu.d.ts +1 -1
- package/build/components/RightLeftExpandingCenterChip/style.d.ts +1 -0
- package/build/components/SearchButton/styles.d.ts +1 -0
- package/build/components/StatusIcons/AuthIcons/style.d.ts +1 -0
- package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts +1 -0
- package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts +1 -0
- package/build/components/StatusIcons/SourceIcons/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/IDButton/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SourceCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts +1 -0
- package/build/components/TableCells/CustomCells/style.d.ts +1 -0
- package/build/components/VirtualTables/components/style.d.ts +1 -0
- package/build/components/index.d.ts +0 -1
- package/build/components/index.js +0 -1
- package/build/constants/assets.d.ts +16 -0
- package/build/constants/assets.js +16 -0
- package/build/hooks/index.d.ts +0 -1
- package/build/hooks/index.js +0 -1
- package/build/types/merchant.d.ts +0 -6
- package/package.json +3 -3
- package/build/components/MerchantsDropdown/BrandItem.d.ts +0 -13
- package/build/components/MerchantsDropdown/BrandItem.js +0 -71
- package/build/components/MerchantsDropdown/EntityItem.d.ts +0 -14
- package/build/components/MerchantsDropdown/EntityItem.js +0 -69
- package/build/components/MerchantsDropdown/EntityList.d.ts +0 -11
- package/build/components/MerchantsDropdown/EntityList.js +0 -7
- package/build/components/MerchantsDropdown/MerchantItem.d.ts +0 -13
- package/build/components/MerchantsDropdown/MerchantItem.js +0 -27
- package/build/components/MerchantsDropdown/MerchantsDropdown.d.ts +0 -5
- package/build/components/MerchantsDropdown/MerchantsDropdown.js +0 -49
- package/build/components/MerchantsDropdown/MerchantsList.d.ts +0 -12
- package/build/components/MerchantsDropdown/MerchantsList.js +0 -18
- package/build/components/MerchantsDropdown/hooks.d.ts +0 -19
- package/build/components/MerchantsDropdown/hooks.js +0 -54
- package/build/components/MerchantsDropdown/index.d.ts +0 -1
- package/build/components/MerchantsDropdown/index.js +0 -1
- package/build/components/MerchantsDropdown/style.d.ts +0 -38
- package/build/components/MerchantsDropdown/style.js +0 -155
- package/build/components/MerchantsDropdown/type.d.ts +0 -14
- package/build/components/MerchantsDropdown/type.js +0 -1
- package/build/hooks/useSelectedMerchantDetails.d.ts +0 -10
- package/build/hooks/useSelectedMerchantDetails.js +0 -15
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
import { GetSourceAnimationFunction } from './type';
|
|
3
4
|
export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
4
5
|
variant?: import("./type").ChipVariant | undefined;
|
|
@@ -1,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
|
-
|
|
4
|
+
interface MenuProps extends PopperProps {
|
|
5
5
|
children: ReactNode;
|
|
6
6
|
popperSx?: SxProps<Theme>;
|
|
7
7
|
dropdownProps?: BoxProps;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
import { TableMode } from '../../../../types/index.js';
|
|
3
4
|
export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
4
5
|
tableMode?: TableMode | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
3
4
|
export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
4
5
|
hidden?: boolean | undefined;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
3
4
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
5
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
3
4
|
variant?: "Global" | "Regional" | "Local" | undefined;
|
|
4
5
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -561,3 +561,19 @@ export declare const blackSettingsVariant2Icon: string;
|
|
|
561
561
|
export declare const exclamationWhiteIcon: string;
|
|
562
562
|
export declare const paymentTechnologySubSegmentIcon: string;
|
|
563
563
|
export declare const paymentGatewayProviderSubSegmentIcon: string;
|
|
564
|
+
export declare const paymentTechnologyV2SubSegmentIcon: string;
|
|
565
|
+
export declare const paymentTerminalProviderSubSegmentIcon: string;
|
|
566
|
+
export declare const merchantServiceProviderSubSegmentIcon: string;
|
|
567
|
+
export declare const paymentProcessorSubSegmentIcon: string;
|
|
568
|
+
export declare const paymentSchemeSubSegmentIcon: string;
|
|
569
|
+
export declare const paymentIssuerSubSegmentIcon: string;
|
|
570
|
+
export declare const paymentAcquirerSubSegmentIcon: string;
|
|
571
|
+
export declare const paymentMethodSubSegmentIcon: string;
|
|
572
|
+
export declare const paymentFacilitatorSubSegmentIcon: string;
|
|
573
|
+
export declare const commercialRegulatorSubSegmentIcon: string;
|
|
574
|
+
export declare const appPlatformSubSegmentIcon: string;
|
|
575
|
+
export declare const retailPlatformSubSegmentIcon: string;
|
|
576
|
+
export declare const commercePlatformSubSegmentIcon: string;
|
|
577
|
+
export declare const billingPlatformSubSegmentIcon: string;
|
|
578
|
+
export declare const authenticationGatewaySubSegmentIcon: string;
|
|
579
|
+
export declare const retailerSubSegmentIcon: string;
|
|
@@ -569,3 +569,19 @@ export const blackSettingsVariant2Icon = `${lightUrl}/blackSettingsVariant2Icon.
|
|
|
569
569
|
export const exclamationWhiteIcon = `${lightUrl}/exclamationWhite.svg`;
|
|
570
570
|
export const paymentTechnologySubSegmentIcon = `${appBaseUrl}/paymentTechnology.svg`;
|
|
571
571
|
export const paymentGatewayProviderSubSegmentIcon = `${appBaseUrl}/paymentGatewayProvider.svg`;
|
|
572
|
+
export const paymentTechnologyV2SubSegmentIcon = `${appBaseUrl}/paymentTechnologyV2.svg`;
|
|
573
|
+
export const paymentTerminalProviderSubSegmentIcon = `${appBaseUrl}/paymentTerminalProvider.svg`;
|
|
574
|
+
export const merchantServiceProviderSubSegmentIcon = `${appBaseUrl}/merchantServiceProvider.svg`;
|
|
575
|
+
export const paymentProcessorSubSegmentIcon = `${appBaseUrl}/paymentProcessor.svg`;
|
|
576
|
+
export const paymentSchemeSubSegmentIcon = `${appBaseUrl}/paymentScheme.svg`;
|
|
577
|
+
export const paymentIssuerSubSegmentIcon = `${appBaseUrl}/paymentIssuer.svg`;
|
|
578
|
+
export const paymentAcquirerSubSegmentIcon = `${appBaseUrl}/paymentAcquirer.svg`;
|
|
579
|
+
export const paymentMethodSubSegmentIcon = `${appBaseUrl}/paymentMethod.svg`;
|
|
580
|
+
export const paymentFacilitatorSubSegmentIcon = `${appBaseUrl}/paymentFacilitator.svg`;
|
|
581
|
+
export const commercialRegulatorSubSegmentIcon = `${appBaseUrl}/commercialRegulator.svg`;
|
|
582
|
+
export const appPlatformSubSegmentIcon = `${appBaseUrl}/appPlatform.svg`;
|
|
583
|
+
export const retailPlatformSubSegmentIcon = `${appBaseUrl}/retailPlatform.svg`;
|
|
584
|
+
export const commercePlatformSubSegmentIcon = `${appBaseUrl}/commercePlatform.svg`;
|
|
585
|
+
export const billingPlatformSubSegmentIcon = `${appBaseUrl}/billingPlatform.svg`;
|
|
586
|
+
export const authenticationGatewaySubSegmentIcon = `${appBaseUrl}/authenticationGateway.svg`;
|
|
587
|
+
export const retailerSubSegmentIcon = `${appBaseUrl}/retailer.svg`;
|
package/build/hooks/index.d.ts
CHANGED
package/build/hooks/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.255",
|
|
5
|
+
"testVersion": 0,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -163,4 +163,4 @@
|
|
|
163
163
|
"publishConfig": {
|
|
164
164
|
"registry": "https://registry.npmjs.org/"
|
|
165
165
|
}
|
|
166
|
-
}
|
|
166
|
+
}
|
|
@@ -1,13 +0,0 @@
|
|
|
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;
|
|
@@ -1,71 +0,0 @@
|
|
|
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);
|
|
@@ -1,14 +0,0 @@
|
|
|
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;
|
|
@@ -1,69 +0,0 @@
|
|
|
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);
|
|
@@ -1,11 +0,0 @@
|
|
|
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;
|
|
@@ -1,7 +0,0 @@
|
|
|
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;
|
|
@@ -1,13 +0,0 @@
|
|
|
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;
|
|
@@ -1,27 +0,0 @@
|
|
|
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;
|
|
@@ -1,5 +0,0 @@
|
|
|
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;
|
|
@@ -1,49 +0,0 @@
|
|
|
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);
|
|
@@ -1,12 +0,0 @@
|
|
|
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;
|
|
@@ -1,18 +0,0 @@
|
|
|
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;
|
|
@@ -1,19 +0,0 @@
|
|
|
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;
|
|
@@ -1,54 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as MerchantsDropdown } from './MerchantsDropdown';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as MerchantsDropdown } from './MerchantsDropdown';
|
|
@@ -1,38 +0,0 @@
|
|
|
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>, {}, {}>;
|
|
@@ -1,155 +0,0 @@
|
|
|
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
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
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
|
-
};
|