@tap-payments/os-micro-frontend-shared 0.0.259 → 0.0.260-test.6
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/StatusButton/StatusButton.js +4 -3
- package/build/components/StatusButton/type.d.ts +0 -1
- package/build/components/TableCells/CustomCells/SegmentsCell/SegmentsCell.js +6 -3
- package/build/components/TableCells/CustomCells/SegmentsCell/type.d.ts +9 -5
- package/build/types/merchant.d.ts +1 -0
- package/package.json +3 -3
|
@@ -19,12 +19,12 @@ import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown
|
|
|
19
19
|
import { statusButtonIcons } from './constant';
|
|
20
20
|
const StatusButton = memo((props) => {
|
|
21
21
|
var _a;
|
|
22
|
-
const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick
|
|
22
|
+
const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
|
|
23
23
|
const [buttonClicks, setButtonClicks] = useState(0);
|
|
24
24
|
const { t } = useTranslation();
|
|
25
25
|
const buttonRef = useRef(null);
|
|
26
26
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
27
|
-
const [selectedStatus, setSelectedStatus] = useState(
|
|
27
|
+
const [selectedStatus, setSelectedStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
|
|
28
28
|
const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
|
|
29
29
|
const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
|
|
30
30
|
const isActiveVariant = variant === 'active';
|
|
@@ -66,8 +66,9 @@ const StatusButton = memo((props) => {
|
|
|
66
66
|
}, [handleDropdownClose]);
|
|
67
67
|
const menuItems = useMemo(() => (dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((item) => (Object.assign(Object.assign({}, item), { onClick: handleMenuItemClick(item) })))) || [], [dropdownOptions, handleMenuItemClick]);
|
|
68
68
|
const ButtonComponent = statusButtonVariants[variant];
|
|
69
|
+
const displayLabel = selectedStatus ? t(selectedStatus) : label;
|
|
69
70
|
return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick, sx: Object.assign({}, (hasDropdown && {
|
|
70
71
|
paddingInlineEnd: '27px',
|
|
71
|
-
})) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon,
|
|
72
|
+
})) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, displayLabel, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), isDropdownOpen && hasDropdown && (_jsx(StyledDropdown, { open: isDropdownOpen, onClose: handleDropdownClose, anchorEl: anchorEl, menuItems: menuItems }))] }));
|
|
72
73
|
});
|
|
73
74
|
export default StatusButton;
|
|
@@ -13,7 +13,6 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
|
|
|
13
13
|
showDropdownIcon?: boolean;
|
|
14
14
|
totalCount?: number;
|
|
15
15
|
onButtonBodyClick?: (status: TableHeaderStatus) => void;
|
|
16
|
-
defaultSelectedStatus?: TableHeaderStatus;
|
|
17
16
|
dropdownOptions?: Array<MenuItemI & {
|
|
18
17
|
status: TableHeaderStatus;
|
|
19
18
|
}>;
|
|
@@ -22,17 +22,20 @@ function SegmentsCell(_a) {
|
|
|
22
22
|
var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
|
|
23
23
|
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
|
|
24
24
|
const theme = useTheme();
|
|
25
|
-
const segments = useMemo(() => Object.keys(segmentsIcons).filter((key) => !!props[key]), [props]);
|
|
25
|
+
const segments = useMemo(() => Object.keys(segmentsIcons).filter((key) => { var _a; return !!((_a = props[key]) === null || _a === void 0 ? void 0 : _a.name); }), [props]);
|
|
26
26
|
const ReferenceSources = useMemo(() => segments.map((segment, index) => {
|
|
27
27
|
const prefixKey = ['technology', 'institution'].includes(segment) ? 'Payment' : '';
|
|
28
|
-
const
|
|
28
|
+
const segmentData = props[segment];
|
|
29
|
+
const sourceTooltip = `${prefixKey} ${startCase(segment)} - ${segmentData === null || segmentData === void 0 ? void 0 : segmentData.name}`;
|
|
29
30
|
return (_jsx(Tooltip, Object.assign({ onOpen: () => {
|
|
30
31
|
setIsTooltipOpen(true);
|
|
31
32
|
}, onClose: () => {
|
|
32
33
|
setIsTooltipOpen(false);
|
|
33
34
|
}, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: referenceSourceAnimation(index, theme.shadows[4], isTextShown ? 83 : 0), sx: {
|
|
34
35
|
width: isTextShown ? '79px' : '24px',
|
|
35
|
-
} }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(StyledSourceImage, { src: segmentsIcons[segment], alt: segment, sx: Object.assign({}, (segment === 'order' && { width: '11.82px' }))
|
|
36
|
+
} }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(StyledSourceImage, { src: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], alt: segment, sx: Object.assign({}, (segment === 'order' && { width: '11.82px' })), onError: (e) => {
|
|
37
|
+
e.currentTarget.src = segmentsIcons[segment];
|
|
38
|
+
} })) })) }), `${segment}-${index}`));
|
|
36
39
|
}), [props, segments, isTextShown, theme]);
|
|
37
40
|
const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
|
|
38
41
|
return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { TableCellProps } from '@mui/material/TableCell';
|
|
2
2
|
import { segmentsIcons } from './constant';
|
|
3
3
|
export type SegmentsType = keyof typeof segmentsIcons;
|
|
4
|
+
export interface SegmentInfo {
|
|
5
|
+
name?: string;
|
|
6
|
+
icon?: string;
|
|
7
|
+
}
|
|
4
8
|
export interface SegmentsCellProps extends TableCellProps {
|
|
5
|
-
technology?:
|
|
6
|
-
institution?:
|
|
7
|
-
payment?:
|
|
8
|
-
developmentHouse?:
|
|
9
|
-
platform?:
|
|
9
|
+
technology?: SegmentInfo;
|
|
10
|
+
institution?: SegmentInfo;
|
|
11
|
+
payment?: SegmentInfo;
|
|
12
|
+
developmentHouse?: SegmentInfo;
|
|
13
|
+
platform?: SegmentInfo;
|
|
10
14
|
isTextShown?: boolean;
|
|
11
15
|
}
|
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.0.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.0.260-test.6",
|
|
5
|
+
"testVersion": 6,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -131,4 +131,4 @@
|
|
|
131
131
|
"publishConfig": {
|
|
132
132
|
"registry": "https://registry.npmjs.org/"
|
|
133
133
|
}
|
|
134
|
-
}
|
|
134
|
+
}
|