@tap-payments/os-micro-frontend-shared 0.1.290-test.1 → 0.1.290-test.3

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

@@ -1,8 +1,9 @@
-import { BoxProps } from '@mui/material/Box';
-interface SourceIconProps extends BoxProps {
+type SourceIconProps = {
     source: string;
     isTextShown?: boolean;
     title?: string;
-}
-export declare function SourceIcon({ source, isTextShown, title, ...props }: SourceIconProps): 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

@@ -1,29 +1,13 @@
-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 } from "react/jsx-runtime";
 import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
-import Box from '@mui/material/Box';
 import Tooltip from '../../../Tooltip';
 import { getPaymentMethodsIcon } from '../../../../constants/index.js';
-import { StyledBadgeTextWrapper, TextLabel } from '../style';
-export function SourceIcon(_a) {
-    var { source, isTextShown, title } = _a, props = __rest(_a, ["source", "isTextShown", "title"]);
+import { StyledBadgeTextWrapper, StyledSourceImage, TextLabel } from '../style';
+export function SourceIcon({ source, isTextShown, title, width, height }) {
     const { t } = useTranslation();
     const ImageSrc = getPaymentMethodsIcon(source);
-    if (isTextShown) {
-        return (_jsx(Tooltip, Object.assign({ title: title }, { children: _jsx(StyledBadgeTextWrapper, Object.assign({ "data-testid": "SourceCell_BadgeTextWrapper" }, props, { children: _jsx(TextLabel, Object.assign({ "data-testid": "SourceCell_TextLabel", "data-source": source }, { children: t(camelCase(source)) })) })) })));
-    }
-    return (_jsx(Tooltip, Object.assign({ title: title }, { children: _jsx(Box, Object.assign({}, props, { component: "img", 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/StatusIcons/SourceIcons/style.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;
@@ -265,8 +266,6 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     sourcesCount: number;
 }, {}, {}>;
 export declare const TextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledBadgeTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBadgeTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SourceIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const CardNumber: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -1,4 +1,4 @@
-import { Box, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { motion } from 'framer-motion';
 export const StyledSourceCell = styled('span')(({ theme }) => ({
     display: 'flex',
@@ -6,6 +6,10 @@ export const StyledSourceCell = styled('span')(({ theme }) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
 }));
+export const StyledSourceImage = styled('img')(() => ({
+    maxWidth: '24px',
+    maxHeight: '16px',
+}));
 export const PaymentSourcesContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -25,7 +29,7 @@ export const TextLabel = styled('span')(({ theme }) => ({
     padding: '2px 0',
     color: theme.palette.text.primary,
 }));
-export const StyledBadgeTextWrapper = styled(Box)(() => ({
+export const StyledBadgeTextWrapper = styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',

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

@@ -10,14 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import TableCell from '../../TableCell';
-import { BrandsWrapper, Label } from './style';
-import { verificationIcon } from './constants';
 import Tooltip from '../../../Tooltip';
-import { Box } from '@mui/material';
 import IconWithBadge from '../../../IconWithBadge';
+import TableCell from '../../TableCell';
+import { BrandsWrapper, BrandsWrapperContent, Label } from './style';
+import { verificationIcon } from './constants';
 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(Tooltip, Object.assign({ title: brand.name }, { children: _jsx(BrandsWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { 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(Tooltip, Object.assign({ title: brand.name }, { children: _jsx(BrandsWrapper, Object.assign({ hasClick: !!props.onClick }, { children: _jsxs(BrandsWrapperContent, { children: [_jsx(IconWithBadge, { mainIcon: brand.logo, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }), _jsx(Label, Object.assign({ brandName: brand.name }, { children: brand.name || 'Not Available' })), !hideStatus && (_jsx(IconWithBadge, { mainIcon: icon, mainIconSize: 10, containerSize: 10, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] }) })) })) })));
 }

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

@@ -1,5 +1,12 @@
 /// <reference types="react" />
-export declare const BrandsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BrandsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    hasClick?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BrandsWrapperContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const BrandName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const VerificationIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    brandName?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;

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

@@ -1,12 +1,21 @@
 import { styled } from '@mui/material';
-export const BrandsWrapper = styled('div')(({ theme }) => ({
+import Box from '@mui/material/Box';
+export const BrandsWrapper = styled('div', { shouldForwardProp: (props) => !['hasClick'].includes(props) })(({ theme, hasClick }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
     border: '1px solid #F2F2F2',
     borderRadius: '44px',
-    padding: '4px 8px',
-    lineHeight: '120%',
+    padding: '3.5px 5px',
+    height: '24px',
+    cursor: hasClick ? 'pointer' : 'default',
+}));
+export const BrandsWrapperContent = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    overflow: 'hidden',
+    width: '100%',
 }));
 export const BrandName = styled('div')(({ theme }) => ({
     fontSize: '14px',
@@ -17,13 +26,6 @@ export const VerificationIcon = styled('img')(() => ({
     width: '8px',
     height: '8px',
 }));
-export const Label = styled('p')(({ theme }) => ({
-    fontSize: '14px',
-    fontWeight: 400,
-    color: theme.palette.text.primary,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    width: '74px',
-    margin: '0',
-}));
+export const Label = styled('p', { shouldForwardProp: (props) => !['brandName'].includes(props) })(({ theme, brandName }) => (Object.assign({ fontSize: '14px', fontWeight: 400, color: theme.palette.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '74px', margin: '0' }, (!brandName && {
+    color: '#B1B1B1',
+}))));

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

@@ -10,15 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import TableCell from '../../TableCell';
-import { EntityName, EntityWrapper, VerificationIcon, VerificationContainer } from './style';
-import { verificationIcon } from './constants';
 import Tooltip from '../../../Tooltip';
 import { CountryFlag } from '../../../index.js';
 import { getCountryNameByISO } from '../../../../utils/index.js';
-import { Box } from '@mui/material';
+import TableCell from '../../TableCell';
+import { EntityName, EntityWrapper, VerificationIcon, VerificationContainer, EntityWrapperContent } from './style';
+import { verificationIcon } from './constants';
 export default function EntityCell(_a) {
     var { entity, country, verificationStatus, licenseNumber, hideStatus } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber", "hideStatus"]);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { countryCode: country }) })), _jsx(EntityName, Object.assign({ sx: Object.assign({}, (!licenseNumber && { color: '#B1B1B1' })) }, { children: licenseNumber || 'Not Available' })), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) })) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, Object.assign({ hasClick: !!(props === null || props === void 0 ? void 0 : props.onClick), licenseNumber: licenseNumber }, { children: _jsxs(EntityWrapperContent, { children: [_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { countryCode: country }) })), _jsx(EntityName, Object.assign({ licenseNumber: licenseNumber }, { children: licenseNumber || 'Not Available' })), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] }) })) })) })));
 }

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

@@ -1,6 +1,14 @@
 /// <reference types="react" />
-export declare const EntityWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EntityWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    licenseNumber?: string | undefined;
+    hasClick?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EntityWrapperContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const EntityIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const EntityName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EntityName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    licenseNumber?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const VerificationIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const VerificationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,27 +1,22 @@
 import { styled } from '@mui/material';
-export const EntityWrapper = styled('div')(({ theme }) => ({
+import Box from '@mui/material/Box';
+export const EntityWrapper = styled('div', { shouldForwardProp: (props) => !['licenseNumber', 'hasClick'].includes(props) })(({ theme, licenseNumber, hasClick }) => (Object.assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1), border: '1px solid #F2F2F2', borderRadius: '44px', padding: '3.5px 5px', height: '24px', cursor: hasClick ? 'pointer' : 'default' }, (licenseNumber && {
+    padding: '3.5px 8px',
+}))));
+export const EntityWrapperContent = styled(Box)(() => ({
     display: 'flex',
     alignItems: 'center',
-    gap: theme.spacing(1),
-    border: '1px solid #F2F2F2',
-    borderRadius: '44px',
-    padding: '4px 8px',
-    lineHeight: '120%',
+    gap: '4px',
+    overflow: 'hidden',
+    width: '100%',
 }));
 export const EntityIcon = styled('img')(() => ({
     width: '16px',
     height: '11.73px',
 }));
-export const EntityName = styled('div')(({ theme }) => ({
-    fontSize: '14px',
-    fontWeight: 400,
-    color: theme.palette.text.primary,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    maxWidth: '100%',
-    margin: '0',
-}));
+export const EntityName = styled('div', { shouldForwardProp: (props) => !['licenseNumber'].includes(props) })(({ theme, licenseNumber }) => (Object.assign({ fontSize: '14px', fontWeight: 400, color: theme.palette.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', margin: '0', width: '84px' }, (!licenseNumber && {
+    color: '#B1B1B1',
+}))));
 export const VerificationIcon = styled('img')(() => ({
     width: '10.5px',
     height: '10.5px',

package/package.json

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