@tap-payments/os-micro-frontend-shared 0.1.90 → 0.1.91-test.1

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({ 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

@@ -2,4 +2,6 @@
 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 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

@@ -7,6 +7,7 @@ export const BrandsWrapper = styled('div')(({ theme }) => ({
     borderRadius: '44px',
     padding: '4px 8px',
     lineHeight: '120%',
+    '&:hover': { minWidth: 'max-content' },
 }));
 export const BrandName = styled('div')(({ theme }) => ({
     fontSize: '14px',
@@ -17,13 +18,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',
-    maxWidth: '100%',
-    margin: '0',
-}));
+export const Label = styled('p', {
+    shouldForwardProp: (props) => 'brandName' !== props,
+})(({ theme, brandName }) => (Object.assign({ fontSize: '14px', fontWeight: 400, color: theme.palette.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%', margin: '0', '&:hover': { overflow: 'visible', textOverflow: 'visible' } }, (!brandName && { color: '#B1B1B1' }))));

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

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
+import { openUrl } from '../../../../utils/index.js';
 import { ChannelTextLabel, ChannelTextWrapper, salesChannelAnimation, SalesChannelsContainer, StyledSourceCell, StyledSourceImage } from './style';
 function SalesChannelCell(_a) {
     var _b;
@@ -21,11 +22,12 @@ function SalesChannelCell(_a) {
         var _a;
         const sourceTooltip = channel.address;
         const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
-        return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: {
-                    width: isTextShown ? '70px' : '36px',
-                    cursor: 'pointer',
-                }, onClick: () => {
-                    window.open(channel.address, '_blank');
+        const lastSalesChannel = index === salesChannels.length - 1;
+        return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: Object.assign({ width: isTextShown ? '70px' : '36px', cursor: 'pointer' }, (lastSalesChannel && {
+                    boxShadow: '7px 0px 8px 0px #F2F2F2',
+                })), onClick: () => {
+                    if (channel === null || channel === void 0 ? void 0 : channel.address)
+                        openUrl(channel.address);
                 } }, { children: isTextShown ? (_jsx(ChannelTextWrapper, { children: _jsx(ChannelTextLabel, { children: channelCode }) })) : (_jsx(StyledSourceImage, { src: channel.logo, alt: channelCode })) })) }), `${channel}-${index}`));
     });
     const salesChannelsCount = (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) || 0;

package/build/constants/assets.d.ts

@@ -540,5 +540,3 @@ export declare const blackMobileSignalIcon: string;
 export declare const emptyMobileWifiIcon: string;
 export declare const deemaWithLabel: string;
 export declare const blackUnLinkIcon: string;
-export declare const sortDescArrowIcon: string;
-export declare const sortAscArrowIcon: string;

package/build/constants/assets.js

@@ -544,5 +544,3 @@ export const blackMobileSignalIcon = `${lightUrl}/blackMobileSignalIcon.svg`;
 export const emptyMobileWifiIcon = `${lightUrl}/emptyMobileWifiIcon.svg`;
 export const deemaWithLabel = `${lightUrl}/deemaWithLabel.svg`;
 export const blackUnLinkIcon = `${lightUrl}/blackUnLinkIcon.svg`;
-export const sortDescArrowIcon = `${lightUrl}/sortDescArrowIcon.svg`;
-export const sortAscArrowIcon = `${lightUrl}/sortAscArrowIcon.svg`;

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

@@ -94,16 +94,6 @@ export declare const refundTableCellWidth: {
         readonly text: "195px";
         readonly sheet: "180px";
     };
-    readonly payouts: {
-        readonly default: "195px";
-        readonly text: "195px";
-        readonly sheet: "300px";
-    };
-    readonly reason: {
-        readonly default: "170px";
-        readonly text: "240px";
-        readonly sheet: "160px";
-    };
     readonly destinations: {
         readonly default: "70px";
         readonly text: "240px";
@@ -192,7 +182,7 @@ export declare const refundTableCellWidth: {
     readonly charge_meta: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "250px";
+        readonly sheet: "100px";
     };
     readonly brand: {
         readonly default: "116px";

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

@@ -94,16 +94,6 @@ export const refundTableCellWidth = {
         text: '195px',
         sheet: '180px',
     },
-    payouts: {
-        default: '195px',
-        text: '195px',
-        sheet: '300px',
-    },
-    reason: {
-        default: '170px',
-        text: '240px',
-        sheet: '160px',
-    },
     destinations: {
         default: '70px',
         text: '240px',
@@ -192,7 +182,7 @@ export const refundTableCellWidth = {
     charge_meta: {
         default: '100px',
         text: '100px',
-        sheet: '250px',
+        sheet: '100px',
     },
     brand: {
         default: '116px',

package/build/utils/url.d.ts

@@ -1 +1,2 @@
 export declare const openNewTab: (url: string, target?: string) => void;
+export declare const openUrl: (url: string) => void;

package/build/utils/url.js

@@ -6,3 +6,13 @@ export const openNewTab = (url, target = '_blank') => {
     link.click();
     link.remove();
 };
+export const openUrl = (url) => {
+    const isUrl = /^https?:\/\//i.test(url);
+    if (isUrl) {
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+    else {
+        const newUrl = 'about:blank?' + encodeURIComponent(url);
+        window.open(newUrl, '_blank', 'noopener,noreferrer');
+    }
+};

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.90",
-  "testVersion": 2,
+  "version": "0.1.91-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -136,4 +136,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}