@tap-payments/os-micro-frontend-shared 0.0.59 → 0.0.62

package/build/components/ActivityAreaChart/components/ChartTooltip.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
+import Box from '@mui/material/Box';
 import { getCurrencyCodeFlag, getLocalizedUnitLabel } from '../../../utils/index.js';
 import { DATA_KEY } from '../../../constants/index.js';
 import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText, CurrencyIcon } from '../styles';
@@ -15,7 +16,7 @@ const ChartTooltip = ({ active, payload, dateRange, selectedCurrency }) => {
         const point = payload[0];
         const localizedUnitLabel = getLocalizedUnitLabel(point === null || point === void 0 ? void 0 : point.dataKey, point === null || point === void 0 ? void 0 : point.value);
         const formattedDate = ((_a = point === null || point === void 0 ? void 0 : point.payload) === null || _a === void 0 ? void 0 : _a.date) && getFormattedDateWithTimezone((_b = point === null || point === void 0 ? void 0 : point.payload) === null || _b === void 0 ? void 0 : _b.date, isSingleDay, (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.hour);
-        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsxs(ValueTypography, { children: [(point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CurrencyIcon, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _jsx(CurrencyText, { children: selectedCurrency })] })), `${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}`] })] })));
+        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsxs(ValueTypography, { children: [(point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CurrencyIcon, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _jsx(CurrencyText, { children: selectedCurrency })] })), _jsx(Box, { children: `${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}` })] })] })));
     }
     return null;
 };

package/build/components/ActivityAreaChart/styles.js

@@ -22,6 +22,7 @@ export const TimeTypography = styled(Typography)({
 export const ValueTypography = styled(Typography)({
     display: 'flex',
     alignItems: 'center',
+    gap: '5px',
     fontWeight: 600,
     color: '#4B4847',
     fontSize: 11,
@@ -34,7 +35,6 @@ export const CurrencyBox = styled(Box)({
     alignItems: 'center',
     height: '100%',
     gap: '2.6px',
-    marginLeft: '5px',
     maxHeight: '19px',
 });
 export const CurrencyText = styled(Typography)({

package/build/components/StatusButton/StatusButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { StatusButtonProps } from './type';
-declare function StatusButton({ variant, badgeCount, icon, label, dropdownOptions, onButtonBodyClick, ...props }: StatusButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusButton({ variant, badgeCount, icon, label, dropdownOptions, onButtonBodyClick, showDropdownIcon, ...props }: StatusButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof StatusButton>;
 export default _default;

package/build/components/StatusButton/StatusButton.js

@@ -19,7 +19,7 @@ import { ChevronContainer, Label, LabelWrapper, StatusIcon, StyledDropdown, stat
 import { statusButtonIcons } from './constant';
 function StatusButton(_a) {
     var _b, _c;
-    var { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = _a, props = __rest(_a, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
+    var { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick, showDropdownIcon } = _a, props = __rest(_a, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick", "showDropdownIcon"]);
     const [anchorEl, setAnchorEl] = useState(null);
     const buttonRef = useRef(null);
     const [lastActiveStatus, setLastActiveStatus] = useState((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status);
@@ -29,7 +29,7 @@ function StatusButton(_a) {
         setAnchorEl(null);
     };
     const Button = statusButtonVariants[variant];
-    const hasDropdown = dropdownOptions && dropdownOptions.length > 0;
+    const hasDropdown = (dropdownOptions && dropdownOptions.length > 0) || showDropdownIcon;
     const statusIcon = icon ? _jsx(StatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null;
     const statusBadge = badgeCount && !Number.isNaN(convertToNumber(badgeCount)) ? (_jsx(StyledBadge, Object.assign({ variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(Number(badgeCount)) }))) : null;
     const dropdownIcon = hasDropdown ? _jsx(ChevronIcon, { isActive: variant === 'active' }) : null;

package/build/components/StatusButton/type.d.ts

@@ -10,6 +10,7 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     hasDropdown?: boolean;
     icon?: StatusButtonIcon;
     label?: ReactNode | null;
+    showDropdownIcon?: boolean;
     totalCount?: number;
     onButtonBodyClick?: (status: TableHeaderStatus) => void;
     dropdownOptions?: Array<MenuItemI & {

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { acceptanceAppIcon, acceptanceAppDisabledIcon, payoutsAppIcon, payoutAppDisabledIcon } from '../../../../constants/index.js';
+import { acceptanceAppIcon, acceptanceDisabledRoundedIcon, payoutsAppIcon, payoutDisabledRoundedIcon } from '../../../../constants/index.js';
 import Tooltip from '../../../Tooltip';
 import TableCell from '../../TableCell';
 import { AppsWrapper, IconWrapper } from './style';
@@ -18,5 +18,5 @@ export default function ApplicationStatusCell(_a) {
     var { acceptance, payout } = _a, props = __rest(_a, ["acceptance", "payout"]);
     const isAcceptanceEnabled = (acceptance === null || acceptance === void 0 ? void 0 : acceptance.toLowerCase()) === 'enabled';
     const isPayoutEnabled = (payout === null || payout === void 0 ? void 0 : payout.toLowerCase()) === 'enabled';
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceAppIcon : acceptanceAppDisabledIcon, alt: acceptance }), ' '] }) }), acceptance), _jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutsAppIcon : payoutAppDisabledIcon, alt: payout }) }) }), payout)] }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceAppIcon : acceptanceDisabledRoundedIcon, alt: acceptance }), ' '] }) }), acceptance), _jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutsAppIcon : payoutDisabledRoundedIcon, alt: payout }) }) }), payout)] }) })));
 }

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

@@ -6,23 +6,17 @@ export const AppsWrapper = styled('div')(({ theme }) => ({
     borderRadius: '44px',
     lineHeight: '120%',
 }));
-export const IconWrapper = styled(Box)(() => ({
+export const IconWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '24px',
-    height: '24px',
-    borderRadius: '8px',
-    cursor: 'pointer',
-    boxSizing: 'border-box',
-    '&.colored': {
-        border: 'none',
-        width: '24px',
-        height: '24px',
-    },
+    width: '23px',
+    height: '23px',
+    borderRadius: '50%',
+    border: `1px solid ${theme.palette.divider}`,
     img: {
-        maxWidth: '24px',
-        maxHeight: '24px',
-        display: 'block',
+        width: '20px',
+        height: '20px',
+        borderRadius: '50%',
     },
 }));

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

@@ -20,5 +20,5 @@ export default function EntityCell(_a) {
     var { entity, country, verificationStatus, licenseNumber } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber"]);
     const countryIcon = getCountriesIcon(country);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(Tooltip, Object.assign({ title: licenseNumber }, { children: _jsx(EntityWrapper, { children: entity ? (_jsxs(EntityContainer, { children: [_jsxs(EntityInfoContainer, { children: [_jsx(Icon, { src: countryIcon, sx: { width: '16px', height: '11.73' } }), _jsx(EntityName, { children: entity })] }), _jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, { children: licenseNumber ? (_jsxs(EntityContainer, { children: [_jsxs(EntityInfoContainer, { children: [_jsx(Icon, { src: countryIcon, sx: { width: '16px', height: '11.73' } }), _jsx(EntityName, { children: licenseNumber })] }), _jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
 }

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

@@ -1,2 +1,2 @@
 import { IndividualCellProps } from './type';
-export default function IndividualsCell({ id, status, count, ...props }: IndividualCellProps): import("react/jsx-runtime").JSX.Element;
+export default function IndividualsCell({ id, status, count, name, ...props }: IndividualCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -15,7 +15,7 @@ import { verificationIcons } from './constants';
 import { IndividualsWrapper, IndividualName, VerificationIcon, Count, IndividualContainer, VerificationContainer, EmptyCell } from './style';
 import Tooltip from '../../../Tooltip';
 export default function IndividualsCell(_a) {
-    var { id, status, count } = _a, props = __rest(_a, ["id", "status", "count"]);
+    var { id, status, count, name } = _a, props = __rest(_a, ["id", "status", "count", "name"]);
     const icon = verificationIcons[status !== null && status !== void 0 ? status : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(IndividualsWrapper, { children: id ? (_jsxs(IndividualContainer, { children: [_jsx(Tooltip, Object.assign({ title: id }, { children: _jsx(IndividualName, { children: id }) })), _jsxs(VerificationContainer, { children: [_jsx(VerificationIcon, { src: icon }), count > 1 && (_jsx("div", { children: _jsxs(Count, { children: ["+", count] }) }))] })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(IndividualsWrapper, { children: id ? (_jsxs(IndividualContainer, { children: [_jsx(Tooltip, Object.assign({ title: name }, { children: _jsx(IndividualName, { children: id }) })), _jsxs(VerificationContainer, { children: [_jsx(VerificationIcon, { src: icon }), count > 1 && (_jsx("div", { children: _jsxs(Count, { children: ["+", count] }) }))] })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })));
 }

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

@@ -3,4 +3,5 @@ export type IndividualCellProps = TableCellProps & {
     id: string;
     status: 'incomplete' | 'complete' | 'reviewed' | 'verified';
     count: number;
+    name: string;
 };

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

@@ -24,7 +24,7 @@ function SegmentsCell(_a) {
     const theme = useTheme();
     const segments = useMemo(() => Object.keys(segmentsIcons).filter((key) => !!props[key]), [props]);
     const ReferenceSources = useMemo(() => segments.map((segment, index) => {
-        const sourceTooltip = `${startCase(segment)} - ${props[segment]}`;
+        const sourceTooltip = `${props[segment]}`;
         return (_jsx(Tooltip, Object.assign({ onOpen: () => {
                 setIsTooltipOpen(true);
             }, onClose: () => {

package/build/components/VirtualTable/components/TableHeader.js

@@ -61,7 +61,7 @@ function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columns
                     const { header, id, align, headerStyle, sortable, filter } = column;
                     const isFirst = id === columns[0].id;
                     const isLast = id === columns[columns.length - 1].id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'baseline', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header" }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'baseline', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
                 }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
                     {
                         label: 'Sort A-Z',

package/build/constants/assets.d.ts

@@ -103,6 +103,7 @@ export declare const blueZigzagCheckIcon: string;
 export declare const greenZigzagCheckIcon: string;
 export declare const dimmedZigzagCheckIcon: string;
 export declare const marketPlaceBlueIcon: string;
+export declare const marketPlaceBlackIcon: string;
 export declare const marketPlaceDimmedIcon: string;
 export declare const moneyOutIcon: string;
 export declare const moneyOutDimmedIcon: string;
@@ -132,6 +133,8 @@ export declare const newReceiptIcon: string;
 export declare const acceptanceAppIcon: string;
 export declare const acceptanceAppDisabledIcon: string;
 export declare const payoutAppDisabledIcon: string;
+export declare const payoutDisabledRoundedIcon: string;
+export declare const acceptanceDisabledRoundedIcon: string;
 export declare const authenticationAppIcon: string;
 export declare const walletAppIcon: string;
 export declare const payoutsAppIcon: string;

package/build/constants/assets.js

@@ -104,6 +104,7 @@ export const blueZigzagCheckIcon = `${lightUrl}/blueCheckIconZigzag.svg`;
 export const greenZigzagCheckIcon = `${lightUrl}/greenCheckIconZigzag.svg`;
 export const dimmedZigzagCheckIcon = `${lightUrl}/dimmedCheckIconZigzag.svg`;
 export const marketPlaceBlueIcon = `${lightUrl}/marketPlaceBlue.svg`;
+export const marketPlaceBlackIcon = `${lightUrl}/marketplaceBlackIcon.svg`;
 export const marketPlaceDimmedIcon = `${lightUrl}/marketPlaceDimmed.svg`;
 export const moneyOutIcon = `${lightUrl}/moneyOut.svg`;
 export const moneyOutDimmedIcon = `${lightUrl}/moneyOutDimmed.svg`;
@@ -133,6 +134,8 @@ export const newReceiptIcon = `${lightUrl}/newReceiptIcon.svg`;
 export const acceptanceAppIcon = `${lightUrl}/other/acceptance.svg`;
 export const acceptanceAppDisabledIcon = `${lightUrl}/other/acceptanceAppIconDisabled.svg`;
 export const payoutAppDisabledIcon = `${lightUrl}/other/payoutsAppIconDisabled.svg`;
+export const payoutDisabledRoundedIcon = `${lightUrl}/payoutDisabledRounded.svg`;
+export const acceptanceDisabledRoundedIcon = `${lightUrl}/acceptanceDisabledRounded.svg`;
 export const authenticationAppIcon = `${lightUrl}/other/AuthenticationApp.svg`;
 export const walletAppIcon = `${lightUrl}/other/walletApp.svg`;
 export const payoutsAppIcon = `${lightUrl}/other/payouts.svg`;

package/build/types/merchant.d.ts

@@ -9,7 +9,7 @@ export interface Merchant {
     display_name: string;
 }
 export type VerificationStatus = 'incomplete' | 'complete' | 'reviewed' | 'verified';
-export type MerchantStatus = 'completed' | 'all';
+export type MerchantStatus = 'completed' | 'all' | 'country';
 export interface BusinessMerchant {
     id: string;
     status: MerchantStatus;

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.59",
+  "version": "0.0.62",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",