@tap-payments/os-micro-frontend-shared 0.0.180 → 0.0.184

package/build/components/CountryFlag/CountryFlag.js

@@ -15,6 +15,8 @@ import Box from '@mui/material/Box';
 import { defaultCountryIcon, getCountriesIcon } from '../../constants/index.js';
 function CountryFlag(_a) {
     var { code = '' } = _a, props = __rest(_a, ["code"]);
-    return (_jsx(Box, Object.assign({}, props, { component: "img", src: getCountriesIcon(code) || defaultCountryIcon, alt: code, sx: Object.assign(Object.assign({ width: 16 }, (code && { height: 12, borderRadius: '3px' })), props.sx), loading: "lazy" })));
+    return (_jsx(Box, Object.assign({}, props, { component: "img", src: getCountriesIcon(code) || defaultCountryIcon, alt: code, sx: Object.assign(Object.assign({ width: 16 }, (code && { height: 12, borderRadius: '3px' })), props.sx), loading: "lazy", onError: (e) => {
+            e.currentTarget.src = defaultCountryIcon;
+        } })));
 }
 export default memo(CountryFlag);

package/build/components/SearchButton/styles.d.ts

@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/ActionCell/ActionCell.d.ts

@@ -5,6 +5,6 @@ type Props = Readonly<ActionCellProps> & {
     onJsonViewClick?: () => void;
     tableMode?: TableMode;
 };
-declare function ActionCell({ flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, tableMode, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+declare function ActionCell({ flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, tableMode, renderDropdown, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ActionCell>;
 export default _default;

package/build/components/TableCells/CustomCells/ActionCell/ActionCell.js

@@ -27,9 +27,9 @@ import { BadgeWrapper, IdButtonContainer, TextLabel, TransparentButton } from '.
 import SheetViewIDButton from '../SheetViewIDButton/SheetViewIDButton';
 function ActionCell(_a) {
     var _b, _c;
-    var { flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown = true, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, tableMode } = _a, props = __rest(_a, ["flag", "actions", "flagTooltip", "flagsCount", "dropdownAction", "onCloseDropdown", "isDropdownShown", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "tableMode"]);
+    var { flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown = true, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, tableMode, renderDropdown } = _a, props = __rest(_a, ["flag", "actions", "flagTooltip", "flagsCount", "dropdownAction", "onCloseDropdown", "isDropdownShown", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "tableMode", "renderDropdown"]);
     const { t } = useTranslation();
-    const { open, anchorEl, filteredActions, isAnyActionLoading, isAnyActionHasError, isAnyActionSuccessful, areThereAnyShownActions, handleClick, handleClose, } = useActionCell({ actions, isDropdownShown, onCloseDropdown });
+    const { open, anchorEl, filteredActions, isAnyActionLoading, isAnyActionHasError, isAnyActionSuccessful, areThereAnyShownActions, handleClick, handleClose, setAnchorEl, } = useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown });
     return (_jsx(TableCell, Object.assign({}, props, { sx: {
             overflow: 'visible',
         } }, { children: _jsxs(ActionCellContainer, Object.assign({ "data-testid": "ActionCell_ActionCellContainer", tableMode: tableMode }, { children: [flag && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "ActionCell_FlagLabel", sx: {
@@ -81,16 +81,16 @@ function ActionCell(_a) {
                                 pointerEvents: 'none',
                             })) }, { children: [_jsx(TransparentButton, Object.assign({ onClick: handleClick, "data-testid": "ActionCell_ActionsIconContainer_TransparentButton", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
                                         pointerEvents: 'none',
-                                    })) }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(ActionIconsVariants, { isAnyActionLoading: isAnyActionLoading, isAnyActionHasError: isAnyActionHasError, isAnyActionSuccessful: isAnyActionSuccessful, areThereAnyShownActions: areThereAnyShownActions }) })) })), dropdownAction, areThereAnyShownActions && (_jsx(Dropdown, { style: { zIndex: 2000 }, open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: filteredActions.map((action) => (Object.assign(Object.assign({}, action), { onClick: (e) => {
-                                            var _a;
-                                            (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-                                            if (!action.hasActionMenu) {
-                                                handleClose();
-                                            }
-                                        }, onRightClick: (e) => {
-                                            var _a;
-                                            (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-                                            handleClose();
-                                        }, icon: (_jsx(ActionIcon, { icon: action.icon, src: actionIcons[action.icon], initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }))) }))] }))] }))] })) })));
+                                    })) }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(ActionIconsVariants, { isAnyActionLoading: isAnyActionLoading, isAnyActionHasError: isAnyActionHasError, isAnyActionSuccessful: isAnyActionSuccessful, areThereAnyShownActions: areThereAnyShownActions }) })) })), renderDropdown ? (renderDropdown(anchorEl, setAnchorEl)) : (_jsxs(_Fragment, { children: [dropdownAction, areThereAnyShownActions && (_jsx(Dropdown, { style: { zIndex: 2000 }, open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: filteredActions.map((action) => (Object.assign(Object.assign({}, action), { onClick: (e) => {
+                                                    var _a;
+                                                    (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
+                                                    if (!action.hasActionMenu) {
+                                                        handleClose();
+                                                    }
+                                                }, onRightClick: (e) => {
+                                                    var _a;
+                                                    (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
+                                                    handleClose();
+                                                }, icon: (_jsx(ActionIcon, { icon: action.icon, src: actionIcons[action.icon], initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }))) }))] }))] }))] }))] })) })));
 }
 export default memo(ActionCell);

package/build/components/TableCells/CustomCells/ActionCell/hooks/useActionCell.d.ts

@@ -4,8 +4,9 @@ interface UseActionCellProps {
     actions: ActionCellProps['actions'];
     isDropdownShown?: ActionCellProps['isDropdownShown'];
     onCloseDropdown?: ActionCellProps['onCloseDropdown'];
+    renderDropdown?: ActionCellProps['renderDropdown'];
 }
-export declare function useActionCell({ actions, isDropdownShown, onCloseDropdown }: Readonly<UseActionCellProps>): {
+export declare function useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown }: Readonly<UseActionCellProps>): {
     anchorEl: HTMLElement | null;
     open: boolean;
     filteredActions: {
@@ -25,5 +26,6 @@ export declare function useActionCell({ actions, isDropdownShown, onCloseDropdow
     areThereAnyShownActions: boolean;
     handleClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     handleClose: () => void;
+    setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
 };
 export {};

package/build/components/TableCells/CustomCells/ActionCell/hooks/useActionCell.js

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-export function useActionCell({ actions, isDropdownShown, onCloseDropdown }) {
+export function useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
-    const filteredActions = actions.filter((a) => a.isShown !== false);
+    const filteredActions = (actions || []).filter((a) => a.isShown !== false);
     const isAnyActionLoading = filteredActions.some((a) => a.isLoading);
     const isAnyActionHasError = filteredActions.some((a) => a.isError);
     const isAnyActionSuccessful = filteredActions.some((a) => a.isSuccess);
-    const areThereAnyShownActions = filteredActions.length > 0;
+    const areThereAnyShownActions = filteredActions.length > 0 || !!renderDropdown;
     const handleClick = (event) => {
         if (isAnyActionLoading || !areThereAnyShownActions) {
             return;
@@ -32,5 +32,6 @@ export function useActionCell({ actions, isDropdownShown, onCloseDropdown }) {
         areThereAnyShownActions,
         handleClick,
         handleClose,
+        setAnchorEl,
     };
 }

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -272,9 +272,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/ActionCell/style.js

@@ -11,7 +11,7 @@ export const ActionCellContainer = styled('section', {
     gap: tableMode === 'sheet' ? '4px' : theme.spacing(1),
     overflow: 'visible',
 }));
-export const ActionsIconContainer = styled('span')(({ selected }) => (Object.assign(Object.assign({ overflow: 'visible', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', '&:hover': {
+export const ActionsIconContainer = styled('span')(({ selected }) => (Object.assign(Object.assign({ overflow: 'visible', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', '&:hover': {
         boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.18);',
     } }, (selected && {
     boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.18);',

package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/type.d.ts

@@ -89,7 +89,7 @@ export interface DestinationCellProps extends TableCellProps {
 export interface ActionCellProps extends TableCellProps {
     row?: unknown;
     flag?: FlagType;
-    actions: Array<{
+    actions?: Array<{
         label: string;
         onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
         onRightClick?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
@@ -109,6 +109,7 @@ export interface ActionCellProps extends TableCellProps {
     showJsonViewer?: boolean;
     isTextShown?: boolean;
     showIdButton?: boolean;
+    renderDropdown?: (anchorEl: HTMLElement | null, setAnchorEl: (anchorEl: HTMLElement | null) => void) => React.ReactNode;
 }
 export interface DeviceCellProps extends TableCellProps {
     deviceType?: 'DESKTOP' | 'PHONE' | 'TABLET';

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -52,7 +52,7 @@ function ColumnFilter(filter) {
     }, [open, filter, anchorEl, setAnchorEl]);
     return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
                                 filter.onClear(filterApiKeys);
-                            } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { marginInlineStart: '8px', cursor: 'pointer' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
+                            } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
                         zIndex: 9999,
                     } }, { children: renderFilter }))] })) })));
 }

package/build/components/VirtualTable/style.d.ts

@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/constants/assets.d.ts

@@ -493,3 +493,14 @@ export declare const navigationPointerBlack: string;
 export declare const addIconWhite: string;
 export declare const greyUpArrowIcon: string;
 export declare const greyDownArrowIcon: string;
+export declare const brandServiceIcon: string;
+export declare const authorizationServiceIcon: string;
+export declare const chargebacksServiceIcon: string;
+export declare const chargesServiceIcon: string;
+export declare const destinationsServiceIcon: string;
+export declare const entityServiceIcon: string;
+export declare const invoiceServiceIcon: string;
+export declare const payoutServiceIcon: string;
+export declare const refundsServiceIcon: string;
+export declare const usersServiceIcon: string;
+export declare const walletServiceIcon: string;

package/build/constants/assets.js

@@ -497,3 +497,14 @@ export const navigationPointerBlack = `${lightUrl}/navigationPointerBlack.svg`;
 export const addIconWhite = `${lightUrl}/addIconWhite.svg`;
 export const greyUpArrowIcon = `${lightUrl}/greyUpArrow.svg`;
 export const greyDownArrowIcon = `${lightUrl}/greyDownArrow.svg`;
+export const brandServiceIcon = `${lightUrl}/services/brandService.svg`;
+export const authorizationServiceIcon = `${lightUrl}/services/authorizationService.svg`;
+export const chargebacksServiceIcon = `${lightUrl}/services/chargebacksService.svg`;
+export const chargesServiceIcon = `${lightUrl}/services/chargesService.svg`;
+export const destinationsServiceIcon = `${lightUrl}/services/destinationsService.svg`;
+export const entityServiceIcon = `${lightUrl}/services/entityService.svg`;
+export const invoiceServiceIcon = `${lightUrl}/services/invoiceService.svg`;
+export const payoutServiceIcon = `${lightUrl}/services/payoutService.svg`;
+export const refundsServiceIcon = `${lightUrl}/services/refundsService.svg`;
+export const usersServiceIcon = `${lightUrl}/services/usersService.svg`;
+export const walletServiceIcon = `${lightUrl}/services/walletService.svg`;

package/build/types/api.d.ts

@@ -16,6 +16,7 @@ export interface HttpMethodFilters {
     startAfter?: string;
     keyword?: string;
     merchants?: string[];
+    merchantIds?: string[];
 }
 export interface QueryConfig extends Omit<HttpMethodConfig, 'signal'> {
 }

package/package.json

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