@tap-payments/os-micro-frontend-shared 0.1.66 → 0.1.67

package/build/components/FilteredIds/FilteredIds.js

@@ -8,7 +8,7 @@ function FilteredIds({ Ids, onCancelClick, isShown, cardNumber }) {
     var _a;
     if (!isShown)
         return null;
-    return (_jsxs(FilteredIdsContainer, Object.assign({ isLongerString: ((_a = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.length) !== null && _a !== void 0 ? _a : 0) > 11 }, { children: [cardNumber ? _jsx(StyledFilterName, { children: cardNumber }) : _jsx("span", { children: Ids === null || Ids === void 0 ? void 0 : Ids.join(',') }), _jsx(StyledBadge, Object.assign({ pointer: true, round: true, onClick: onCancelClick, variant: BadgeVariants.ACTIVE, sx: { position: 'absolute', right: '8px' } }, { children: _jsx("img", { src: whiteCloseIcon, alt: "close", style: {
+    return (_jsxs(FilteredIdsContainer, Object.assign({ centered: !!cardNumber, isLongerString: ((_a = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.length) !== null && _a !== void 0 ? _a : 0) > 11 }, { children: [cardNumber ? _jsx(StyledFilterName, { children: cardNumber }) : _jsx("span", { children: Ids === null || Ids === void 0 ? void 0 : Ids.join(',') }), _jsx(StyledBadge, Object.assign({ pointer: true, round: true, onClick: onCancelClick, variant: BadgeVariants.ACTIVE }, { children: _jsx("img", { src: whiteCloseIcon, alt: "close", style: {
                         width: '8px',
                         height: '7px',
                     } }) }))] })));

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 interface FilteredIdsContainerProps {
+    centered: boolean;
     isLongerString: boolean;
 }
 export declare const FilteredIdsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/build/components/FilteredIds/style.js

@@ -1,11 +1,12 @@
 import { Box, styled } from '@mui/material';
 export const FilteredIdsContainer = styled(Box, {
-    shouldForwardProp: (props) => props !== 'isLongerString',
-})(({ theme, isLongerString }) => ({
+    shouldForwardProp: (props) => props !== 'centered' && props !== 'isLongerString',
+})(({ theme, centered, isLongerString }) => ({
     display: 'flex',
-    justifyContent: 'center',
+    justifyContent: centered ? 'space-between' : 'flex-start',
     alignItems: 'center',
-    padding: '6px 16px',
+    paddingRight: theme.spacing(1.3),
+    paddingLeft: theme.spacing(3),
     height: '32px',
     background: theme.palette.background.gradient.shadedBlue,
     color: theme.palette.common.white,

package/build/components/RadioGroup/style.js

@@ -5,7 +5,6 @@ export const StyledFormControlLabel = styled(FormControlLabel, {
 })(({ size = 'small', showHoverEffects = true, labelSx }) => (Object.assign(Object.assign({ margin: '0', width: '100%', cursor: 'pointer', padding: size === 'small' ? '7.5px 16px 7.5px 8px' : size === 'medium' ? '9px 16px 9px 10px' : '11px 16px 11px 12px', maxHeight: size === 'small' ? '35px' : size === 'medium' ? '40px' : '45px' }, (showHoverEffects && {
     '&:hover': {
         boxShadow: '0px 0px 16px 0px #00000021',
-        borderLeft: '1px solid transparent',
     },
 })), { '& .MuiFormControlLabel-label': Object.assign({ fontSize: size === 'small' ? '11px' : size === 'medium' ? '13px' : '15px', fontWeight: '500', color: '#20232B', width: '100%', cursor: 'pointer' }, labelSx), '& .MuiRadio-root': {
         cursor: 'pointer',

package/build/components/StatusIcons/SourceIcons/components/SourceIcon.d.ts

@@ -1,5 +1,9 @@
-export declare function SourceIcon({ source, isTextShown, title }: {
+type SourceIconProps = {
     source: string;
     isTextShown?: boolean;
     title?: string;
-}): import("react/jsx-runtime").JSX.Element;
+    width?: number | string;
+    height?: number | string;
+};
+export declare function SourceIcon({ source, isTextShown, title, width, height }: SourceIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/StatusIcons/SourceIcons/components/SourceIcon.js

@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '../../../Tooltip';
 import { getPaymentMethodsIcon } from '../../../../constants/index.js';
 import { StyledBadgeTextWrapper, StyledSourceImage, TextLabel } from '../style';
-export function SourceIcon({ source, isTextShown, title }) {
+export function SourceIcon({ source, isTextShown, title, width, height }) {
     const { t } = useTranslation();
     const ImageSrc = getPaymentMethodsIcon(source);
-    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StyledBadgeTextWrapper, Object.assign({ "data-testid": "SourceCell_BadgeTextWrapper" }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "SourceCell_TextLabel", "data-source": source }, { children: t(camelCase(source)) })) }))) : (_jsx(StyledSourceImage, { src: ImageSrc, alt: source, onError: (e) => {
+    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StyledBadgeTextWrapper, Object.assign({ "data-testid": "SourceCell_BadgeTextWrapper" }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "SourceCell_TextLabel", "data-source": source }, { children: t(camelCase(source)) })) }))) : (_jsx(StyledSourceImage, { src: ImageSrc, alt: source, width: width, height: height, onError: (e) => {
                 e.currentTarget.src = getPaymentMethodsIcon('card');
             } })) })));
 }

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

@@ -19,5 +19,5 @@ import IconWithBadge from '../../../IconWithBadge';
 export default function BrandsCell(_a) {
     var { brand, verificationStatus, hideStatus } = _a, props = __rest(_a, ["brand", "verificationStatus", "hideStatus"]);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(IconWithBadge, { mainIcon: brand.logo, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }), _jsx(Label, Object.assign({ sx: Object.assign({}, (!brand.name && { color: '#B1B1B1' })) }, { children: brand.name || 'Not Available' })), !hideStatus && (_jsx(IconWithBadge, { mainIcon: icon, mainIconSize: 10, containerSize: 10, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] })) })) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(IconWithBadge, { mainIcon: brand.logo, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }), _jsx(Label, Object.assign({ sx: Object.assign({}, (!brand.name && { color: '#B1B1B1' })) }, { children: brand.name || 'Not Available' })), !hideStatus && (_jsx(IconWithBadge, { mainIcon: icon, mainIconSize: 16, containerSize: 16, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] })) })) })) })));
 }

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

@@ -17,5 +17,5 @@ import Tooltip from '../../../Tooltip';
 export default function IndividualsCell(_a) {
     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: name }, { children: _jsx(IndividualName, { children: id }) })), _jsxs(VerificationContainer, { children: [_jsx(VerificationIcon, { src: icon }), count > 0 && (_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/TerminalsPlatformCell/TerminalsPlatformCell.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { StackProps } from '@mui/material/Stack';
 import { TextAndLang } from '../../../../types/index.js';
-type TerminalsPlatformCellProps = {
+type TerminalsPlatformCellProps = StackProps & {
     name: TextAndLang[];
     icon?: React.ReactNode;
     displayRules?: {
@@ -8,5 +9,5 @@ type TerminalsPlatformCellProps = {
         showLabel?: boolean;
     };
 };
-declare const _default: import("react").MemoExoticComponent<({ name, icon, displayRules }: TerminalsPlatformCellProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const _default: import("react").MemoExoticComponent<({ name, icon, displayRules, ...props }: TerminalsPlatformCellProps) => import("react/jsx-runtime").JSX.Element | null>;
 export default _default;

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

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,7 +17,8 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import { Chip, Tooltip } from '../../../index.js';
 import { getNameText } from '../../../../utils/index.js';
-const TerminalsPlatformCell = ({ name, icon, displayRules }) => {
+const TerminalsPlatformCell = (_a) => {
+    var { name, icon, displayRules } = _a, props = __rest(_a, ["name", "icon", "displayRules"]);
     const { i18n } = useTranslation();
     const { showIcon = true, showLabel = true } = displayRules || {};
     const platformName = getNameText(name, i18n.language);
@@ -14,6 +26,6 @@ const TerminalsPlatformCell = ({ name, icon, displayRules }) => {
     const displayLabel = showLabel || !!platformName;
     if (!displayIcon && !displayLabel)
         return null;
-    return (_jsxs(Stack, Object.assign({ "data-testid": "TerminalsPlatformCell", direction: "row", alignItems: "center", spacing: 1, color: "text.primary" }, { children: [displayIcon && (_jsx(Chip, Object.assign({ variant: "circular", sx: { '&.CustomVariant_circular': { minWidth: 32, height: 32 } } }, { children: icon }))), displayLabel && (_jsx(Tooltip, Object.assign({ title: platformName }, { children: _jsx(Typography, Object.assign({ noWrap: true, fontSize: 12, fontWeight: 500 }, { children: platformName || (_jsx(Box, Object.assign({ component: "span", sx: { opacity: 0.2 } }, { children: "Unavailable" }))) })) })))] })));
+    return (_jsxs(Stack, Object.assign({ "data-testid": "TerminalsPlatformCell", direction: "row", alignItems: "center", spacing: 1, color: "text.primary" }, props, { children: [displayIcon && (_jsx(Chip, Object.assign({ variant: "circular", sx: { '&.CustomVariant_circular': { minWidth: 32, height: 32 } } }, { children: icon }))), displayLabel && (_jsx(Tooltip, Object.assign({ title: platformName }, { children: _jsx(Typography, Object.assign({ noWrap: true, fontSize: 12, fontWeight: 500 }, { children: platformName || (_jsx(Box, Object.assign({ component: "span", sx: { opacity: 0.2 } }, { children: "Unavailable" }))) })) })))] })));
 };
 export default memo(TerminalsPlatformCell);

package/build/constants/assets.d.ts

@@ -534,3 +534,7 @@ export declare const gradientSettings: string;
 export declare const gradientWallet: string;
 export declare const manyCurrencyCoin: string;
 export declare const manyCurrencyCoinGradient: string;
+export declare const blackMobileBatteryIcon: string;
+export declare const blackMobileSignalIcon: string;
+export declare const emptyMobileWifiIcon: string;
+export declare const deemaWithLabel: string;

package/build/constants/assets.js

@@ -538,3 +538,7 @@ export const gradientSettings = `${lightUrl}/gradientSettings.svg`;
 export const gradientWallet = `${lightUrl}/gradientWallet.svg`;
 export const manyCurrencyCoin = `${lightUrl}/manyCurrencyCoin.svg`;
 export const manyCurrencyCoinGradient = `${lightUrl}/manyCurrencyCoinGradient.svg`;
+export const blackMobileBatteryIcon = `${lightUrl}/blackMobileBatteryIcon.svg`;
+export const blackMobileSignalIcon = `${lightUrl}/blackMobileSignalIcon.svg`;
+export const emptyMobileWifiIcon = `${lightUrl}/emptyMobileWifiIcon.svg`;
+export const deemaWithLabel = `${lightUrl}/deemaWithLabel.svg`;

package/build/constants/table/cell/merchantsTableCellWidth.d.ts

@@ -5,19 +5,19 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "225px";
     };
     readonly entity: {
-        readonly default: "146px";
+        readonly default: "150px";
         readonly text: "180px";
         readonly sheet: "180px";
     };
     readonly created: {
-        readonly default: "160px";
+        readonly default: "170px";
         readonly text: "170px";
         readonly sheet: "170px";
     };
     readonly brands: {
-        readonly default: "140px";
-        readonly text: "140px";
-        readonly sheet: "140px";
+        readonly default: "116px";
+        readonly text: "120px";
+        readonly sheet: "120px";
     };
     readonly marketplace: {
         readonly default: "110px";
@@ -25,9 +25,9 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "110px";
     };
     readonly individuals: {
-        readonly default: "185px";
-        readonly text: "185px";
-        readonly sheet: "185px";
+        readonly default: "116px";
+        readonly text: "120px";
+        readonly sheet: "120px";
     };
     readonly segments: {
         readonly default: "70px";
@@ -35,17 +35,17 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "180px";
     };
     readonly psp: {
-        readonly default: "70px";
+        readonly default: "60px";
         readonly text: "180px";
         readonly sheet: "180px";
     };
     readonly status: {
-        readonly default: "64px";
+        readonly default: "80px";
         readonly text: "100px";
         readonly sheet: "100px";
     };
     readonly partners: {
-        readonly default: "88px";
+        readonly default: "75px";
         readonly text: "100px";
         readonly sheet: "100px";
     };
@@ -65,13 +65,8 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "180px";
     };
     readonly channels: {
-        readonly default: "94px";
+        readonly default: "110px";
         readonly text: "120px";
         readonly sheet: "120px";
     };
-    readonly merchant: {
-        readonly default: "175px";
-        readonly text: "180px";
-        readonly sheet: "180px";
-    };
 };

package/build/constants/table/cell/merchantsTableCellWidth.js

@@ -5,19 +5,19 @@ export const merchantsTableCellWidth = {
         sheet: '225px',
     },
     entity: {
-        default: '146px',
+        default: '150px',
         text: '180px',
         sheet: '180px',
     },
     created: {
-        default: '160px',
+        default: '170px',
         text: '170px',
         sheet: '170px',
     },
     brands: {
-        default: '140px',
-        text: '140px',
-        sheet: '140px',
+        default: '116px',
+        text: '120px',
+        sheet: '120px',
     },
     marketplace: {
         default: '110px',
@@ -25,9 +25,9 @@ export const merchantsTableCellWidth = {
         sheet: '110px',
     },
     individuals: {
-        default: '185px',
-        text: '185px',
-        sheet: '185px',
+        default: '116px',
+        text: '120px',
+        sheet: '120px',
     },
     segments: {
         default: '70px',
@@ -35,17 +35,17 @@ export const merchantsTableCellWidth = {
         sheet: '180px',
     },
     psp: {
-        default: '70px',
+        default: '60px',
         text: '180px',
         sheet: '180px',
     },
     status: {
-        default: '64px',
+        default: '80px',
         text: '100px',
         sheet: '100px',
     },
     partners: {
-        default: '88px',
+        default: '75px',
         text: '100px',
         sheet: '100px',
     },
@@ -65,13 +65,8 @@ export const merchantsTableCellWidth = {
         sheet: '180px',
     },
     channels: {
-        default: '94px',
+        default: '110px',
         text: '120px',
         sheet: '120px',
     },
-    merchant: {
-        default: '175px',
-        text: '180px',
-        sheet: '180px',
-    },
 };

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.1.66",
+  "version": "0.1.67",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",