@tap-payments/os-micro-frontend-shared 0.0.148 → 0.0.150-dropdown-flag-v1

package/build/components/CountryFlag/CountryFlag.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import Box from '@mui/material/Box';
-import { defaultCountryIcon } from '../../constants/index.js';
+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: code || defaultCountryIcon, alt: code, sx: Object.assign(Object.assign({ width: 16 }, (code && { height: 12, borderRadius: '3px' })), props.sx), loading: "lazy" })));
+    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" })));
 }
 export default memo(CountryFlag);

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -5,7 +5,7 @@ import { Typography, Checkbox } from '@mui/material';
 import { ChevronIcon } from '../TableHeader_V2/components/StatusButtons/ChevronIcon';
 import StyledBadge, { BadgeVariants } from '../CountBadge';
 import CountryFlag from '../CountryFlag';
-import { formatNumber, getCurrencyCodeFlag } from '../../utils/index.js';
+import { formatNumber } from '../../utils/index.js';
 import { closeXIcon } from '../../constants/index.js';
 import { ChevronContainer, Label, LabelWrapper, StyledDropdown, MenuItemContainer, CheckboxStyles, StyledStatusButton, ClearIcon, ChevronIconWrapper, } from './style';
 function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChange, label, variant = 'inActive' }) {
@@ -85,7 +85,7 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
                                     var _a;
                                     e.stopPropagation();
                                     handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
-                                } }), _jsx(CountryFlag, { code: getCurrencyCodeFlag(option.code), sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
+                                } }), _jsx(CountryFlag, { code: option.code, sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
                     onClick: (e) => {
                         var _a;
                         e.preventDefault();

package/build/components/StatusButton/StatusButton.js

@@ -33,7 +33,7 @@ function StatusButton(_a) {
     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;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, props, { onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, props, { ref: buttonRef, onClick: (e) => {
                     var _a, _b;
                     (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
                     onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(lastActiveStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');

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

@@ -22,6 +22,6 @@ function AmountCell(_a) {
     const icon = currency && _jsx(FlagIcon, { src: getCurrenciesIcon(currency), alt: "customer icon" });
     const { fullAmount } = formatAmountWithCurrency(amount, currency);
     const [integerAmount, decimalAmount] = fullAmount.toString().split('.');
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionType && (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type" }, { children: conversionType }))) })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: isTextShown ? _jsx("span", {}) : _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencySpan, Object.assign({ tableMode: tableMode }, { children: integerAmount && decimalAmount && amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, ".", _jsx(DecimalSpan, { children: decimalAmount })] })) : (_jsx("span", { children: "-" })) })) }))] }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: conversionType && (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type" }, { children: conversionType }))) })), _jsx(Tooltip, Object.assign({ title: _jsx(CurrencyIcon, { currency: currency }) }, { children: isTextShown ? _jsx("span", {}) : _jsx(FlagContainer, { children: icon }) })), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencySpan, Object.assign({ tableMode: tableMode }, { children: amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, decimalAmount && (_jsxs(_Fragment, { children: [".", _jsx(DecimalSpan, { children: decimalAmount })] }))] })) : (_jsx("span", { children: "-" })) })) }))] }) })));
 }
 export default AmountCell;

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

@@ -1,2 +1,2 @@
 import { MarketPlaceCellProps } from './type';
-export default function MarketPlaceCell({ isMarketPlace, ...props }: MarketPlaceCellProps): import("react/jsx-runtime").JSX.Element;
+export default function MarketPlaceCell({ marketPlaceIcon, marketPlaceName, isTextShown, ...props }: MarketPlaceCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,16 +13,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from '../../../Tooltip';
 import TableCell from '../../TableCell';
 import { Box } from '@mui/material';
-import { marketPlaceBlueIcon, marketPlaceDimmedIcon } from '../../../../constants/index.js';
+import { marketPlaceBlueIcon } from '../../../../constants/index.js';
+import { TextLabel } from '../style';
 export default function MarketPlaceCell(_a) {
-    var { isMarketPlace } = _a, props = __rest(_a, ["isMarketPlace"]);
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: isMarketPlace ? 'Market Place' : 'No Market Place' }, { children: _jsx(Box, Object.assign({ sx: {
-                    width: 36.25,
-                    height: 24.17,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    border: '1.03px solid #F2F2F2',
-                    borderRadius: '23.26px',
-                } }, { children: _jsx(Box, { component: "img", src: isMarketPlace ? marketPlaceBlueIcon : marketPlaceDimmedIcon }) })) })) })));
+    var { marketPlaceIcon, marketPlaceName, isTextShown } = _a, props = __rest(_a, ["marketPlaceIcon", "marketPlaceName", "isTextShown"]);
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: marketPlaceName }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: isTextShown ? (_jsx(TextLabel, { children: marketPlaceName })) : (_jsx(Box, Object.assign({ sx: {
+                        width: '24px',
+                        height: '24px',
+                        border: '1px solid #F2F2F2',
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    } }, { children: _jsx("img", { src: marketPlaceIcon || marketPlaceBlueIcon, alt: "marketplace", style: { maxWidth: '18px', maxHeight: '18px', objectFit: 'cover' } }) }))) })) })) })));
 }

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

@@ -1,4 +1,6 @@
 import { TableCellProps } from '@mui/material';
 export type MarketPlaceCellProps = TableCellProps & {
-    isMarketPlace: boolean;
+    marketPlaceIcon?: string;
+    marketPlaceName?: string;
+    isTextShown?: boolean;
 };

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

@@ -62,7 +62,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: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle), isSheetView: isSheetView }, { 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}`));
+                    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: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle), isSheetView: isSheetView }, { 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/types/merchant.d.ts

@@ -21,6 +21,18 @@ export interface BusinessMerchant {
     comments_count: number;
     reference_id: string;
     control_by: string;
+    marketplace: {
+        id: string;
+        brand: {
+            id: string;
+            status: VerificationStatus;
+            name: {
+                textId: string;
+                en: string;
+            };
+            logo: string;
+        };
+    };
     business: {
         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.148",
+  "version": "0.0.150-dropdown-flag-v1",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",