@tap-payments/os-micro-frontend-shared 0.1.308-test.1 → 0.1.308-test.2

package/build/components/StatusIcons/IssuerIcon/IssuerIcon.js

@@ -5,6 +5,5 @@ import Tooltip from '../../Tooltip';
 export default function IssuerIcon({ countryCode, isTextShown, cardNumber, bankName, tableMode }) {
     const firstFourDigits = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.slice(0, 4);
     const lastFourDigits = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.slice(-4);
-    return (_jsxs(IssuerIconContainer, Object.assign({ tableMode: tableMode }, { children: [countryCode && _jsx(GeographyIcon, { countryCode: countryCode, isTextShown: isTextShown }), firstFourDigits ||
-                (lastFourDigits && (_jsx(Tooltip, Object.assign({ title: `${bankName ? `Issuer - ${bankName}` : ''}` }, { children: _jsx(CardNumber, { children: `${firstFourDigits || ''} ${lastFourDigits || ''}` }) }))))] })));
+    return (_jsxs(IssuerIconContainer, Object.assign({ tableMode: tableMode }, { children: [countryCode && _jsx(GeographyIcon, { countryCode: countryCode, isTextShown: isTextShown }), _jsx(Tooltip, Object.assign({ title: `${bankName ? `Issuer - ${bankName}` : ''}` }, { children: _jsx(CardNumber, { children: `${firstFourDigits || ''} ${lastFourDigits || ''}` }) }))] })));
 }

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.d.ts

@@ -1,2 +1,2 @@
 import { BrandsCellProps } from './type';
-export default function BrandsCell({ brand, verificationStatus, hideStatus, ...props }: BrandsCellProps): import("react/jsx-runtime").JSX.Element;
+export default function BrandsCell({ brand, verificationStatus, hideStatus, brandLogo, ...props }: BrandsCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,7 @@ 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"]);
+    var { brand, verificationStatus, hideStatus, brandLogo } = _a, props = __rest(_a, ["brand", "verificationStatus", "hideStatus", "brandLogo"]);
     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({ 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' } }))] }) })) })) })));
+    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: [brandLogo, _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/type.d.ts

@@ -1,7 +1,8 @@
 import { TableCellProps } from '@mui/material';
+import type { ReactNode } from 'react';
 export type BrandsCellProps = TableCellProps & {
+    brandLogo: ReactNode;
     brand: {
-        logo: string;
         name: string;
         id: string;
     };

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.308-test.1",
-  "testVersion": 1,
+  "version": "0.1.308-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",