@tap-payments/os-micro-frontend-shared 0.1.90-test.21 → 0.1.90-test.4

package/build/components/ImageWrapper/ImageWrapper.js

@@ -12,5 +12,8 @@ const ImageWrapper = styled(motion.span)(({ theme, order }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    '&:hover': {
+        boxShadow: '7px 0px 8px 0px #F2F2F2',
+    },
 }));
 export default ImageWrapper;

package/build/components/StatusIcons/AuthorizedIcon/AuthorizedIcon.d.ts

@@ -1,13 +1,11 @@
 /// <reference types="react" />
 import { type AuthorizedStatusType } from '../../TableCells';
-import { SelectionProps, TableMode } from '../../../types/index.js';
+import { TableMode } from '../../../types/index.js';
 type AuthorizedIconProps = {
     iconStyles?: React.CSSProperties;
     authorizedStatus?: AuthorizedStatusType;
     isTextShown?: boolean;
     tableMode?: TableMode;
-    chipIndex?: number;
-    selectionProps?: SelectionProps;
 };
-export declare const AuthorizedIcon: ({ authorizedStatus, isTextShown, iconStyles, tableMode, chipIndex, selectionProps }: AuthorizedIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthorizedIcon: ({ authorizedStatus, isTextShown, iconStyles, tableMode }: AuthorizedIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/AuthorizedIcon/AuthorizedIcon.js

@@ -6,15 +6,10 @@ import Tooltip from '../../Tooltip';
 import { authorizedStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import Icon from '../../Icon';
 import { TextLabel } from '../../TableCells/CustomCells/style';
-import StatusChipWithCopy from '../../StatusChipWithCopy';
-export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode, chipIndex = 0, selectionProps = {} }) => {
+export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode }) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    const status = t(camelCase(authorizedStatus));
-    if (tableMode === 'sheet') {
-        return (_jsx(StatusChipWithCopy, Object.assign({ copyText: status, chipIndex: chipIndex, selectionProps: selectionProps }, { children: status })));
-    }
-    return (_jsx(Tooltip, Object.assign({ title: status }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: {
-                color: theme.palette.info.dark,
-            } }, { children: status }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
+    return (_jsx(Tooltip, Object.assign({ title: tableMode === 'sheet' ? '' : t(camelCase(authorizedStatus)) }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: Object.assign({ color: theme.palette.info.dark }, (tableMode === 'sheet' && {
+                height: '18px',
+            })) }, { children: t(camelCase(authorizedStatus)) }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
 };

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { SelectionProps } from '../../../types/index.js';
 import { type ChargeStatus } from '../../TableCells';
-export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, isSheetViewShown, selectionProps, chipIndex, }: Readonly<{
+export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, isSheetViewShown, selectionProps, }: Readonly<{
     chargeStatus?: ChargeStatus;
     gatewayTooltip?: string;
     showAuthorizedStatus?: boolean;
@@ -20,5 +20,4 @@ export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquire
     showBadge?: boolean;
     isSheetViewShown?: boolean;
     selectionProps?: SelectionProps;
-    chipIndex?: number;
 }>): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.js

@@ -8,7 +8,7 @@ import StatusChipWithCopy from '../../StatusChipWithCopy';
 import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import { StatusIcon, StatusIconWrapper, TextLabel } from '../../TableCells/CustomCells/style';
 import { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
-export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, isSheetViewShown = false, selectionProps = {}, chipIndex = 0, }) {
+export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, isSheetViewShown = false, selectionProps = {}, }) {
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const captureStatusStyle = chargeStatus ? capturedStatusesStyles[chargeStatus] : null;
     const theme = useTheme();
@@ -18,7 +18,7 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
     const gatewayTooltipTitle = gatewayTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Gateway" }), _jsx("div", { children: gatewayTooltip })] }));
     const chargeIcon = chargeStatus && statusIcons[chargeStatus] && (_jsx("div", Object.assign({ "data-testid": "ChargeStatusIcon_ChargeIcon", style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '16px', height: '16px', borderRadius: unCapturedStatusStyle ? '50%' : '' }, iconWrapperStyles) }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", "data-testid": "ChargeStatusIcon_StatusIcon", style: Object.assign({ borderRadius: unCapturedStatusStyle ? '50%' : '', width: '16px', height: '16px' }, iconStyles) }) })));
     if (isSheetViewShown) {
-        return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: chipIndex, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
+        return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: 0, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
     }
     if (isTextShown) {
         return (_jsxs(TextViewWrapper, { children: [_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle }, { children: _jsxs(StatusTextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(chargeStatus), sx: {

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

@@ -16,8 +16,33 @@ import { verificationIcon } from './constants';
 import Tooltip from '../../../Tooltip';
 import { Box } from '@mui/material';
 import IconWithBadge from '../../../IconWithBadge';
+import { motion } from 'framer-motion';
 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: _jsx(motion.div, Object.assign({ style: {
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '4px',
+                        width: 0,
+                        display: 'none',
+                    }, initial: { width: 0, opacity: 0 }, transition: {
+                        animate: {
+                            duration: 0.5,
+                        },
+                        fadeIn: {
+                            duration: 0.2,
+                        },
+                    }, variants: {
+                        animate: {
+                            width: 'auto',
+                            display: 'flex',
+                        },
+                        fadeIn: {
+                            transition: {
+                                delay: 0.5,
+                            },
+                            opacity: 1,
+                        },
+                    } }, { 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' } }))] })) })) })) })) })));
 }

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;
@@ -25,7 +26,8 @@ function SalesChannelCell(_a) {
                     width: isTextShown ? '70px' : '36px',
                     cursor: 'pointer',
                 }, onClick: () => {
-                    window.open(channel.address, '_blank');
+                    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/destinationsTableCellWidth.d.ts

@@ -17,7 +17,7 @@ export declare const destinationsTableCellWidth: {
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
-        readonly sheet: "165px";
+        readonly sheet: "150px";
     };
     readonly reference: {
         readonly default: "95px";
@@ -47,7 +47,7 @@ export declare const destinationsTableCellWidth: {
     readonly device: {
         readonly default: "150px";
         readonly text: "250px";
-        readonly sheet: "235px";
+        readonly sheet: "250px";
     };
     readonly source: {
         readonly default: "114px";
@@ -62,7 +62,7 @@ export declare const destinationsTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "250px";
-        readonly sheet: "165px";
+        readonly sheet: "250px";
     };
     readonly amount: {
         readonly default: "195px";
@@ -81,8 +81,8 @@ export declare const destinationsTableCellWidth: {
     };
     readonly merchant: {
         readonly default: "100px";
-        readonly text: "150px";
-        readonly sheet: "215px";
+        readonly text: "180px";
+        readonly sheet: "180px";
     };
     readonly actions: {
         readonly default: "100px";
@@ -109,54 +109,4 @@ export declare const destinationsTableCellWidth: {
         readonly text: "116px";
         readonly sheet: "116px";
     };
-    readonly payment_initiated: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "150px";
-    };
-    readonly payment_issuers: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "350px";
-    };
-    readonly card_number: {
-        readonly default: "120px";
-        readonly text: "120px";
-        readonly sheet: "155px";
-    };
-    readonly card_no: {
-        readonly default: "120px";
-        readonly text: "120px";
-        readonly sheet: "200px";
-    };
-    readonly payment_type: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "120px";
-    };
-    readonly payment_method: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "145px";
-    };
-    readonly payment_scheme: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "145px";
-    };
-    readonly auth_status: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "165px";
-    };
-    readonly auth_type: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "155px";
-    };
-    readonly eci: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "100px";
-    };
 };

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

@@ -17,7 +17,7 @@ export const destinationsTableCellWidth = {
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '165px',
+        sheet: '150px',
     },
     reference: {
         default: '95px',
@@ -47,7 +47,7 @@ export const destinationsTableCellWidth = {
     device: {
         default: '150px',
         text: '250px',
-        sheet: '235px',
+        sheet: '250px',
     },
     source: {
         default: '114px',
@@ -62,7 +62,7 @@ export const destinationsTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '250px',
-        sheet: '165px',
+        sheet: '250px',
     },
     amount: {
         default: '195px',
@@ -81,8 +81,8 @@ export const destinationsTableCellWidth = {
     },
     merchant: {
         default: '100px',
-        text: '150px',
-        sheet: '215px',
+        text: '180px',
+        sheet: '180px',
     },
     actions: {
         default: '100px',
@@ -109,54 +109,4 @@ export const destinationsTableCellWidth = {
         text: '116px',
         sheet: '116px',
     },
-    payment_initiated: {
-        default: '150px',
-        text: '150px',
-        sheet: '150px',
-    },
-    payment_issuers: {
-        default: '150px',
-        text: '150px',
-        sheet: '350px',
-    },
-    card_number: {
-        default: '120px',
-        text: '120px',
-        sheet: '155px',
-    },
-    card_no: {
-        default: '120px',
-        text: '120px',
-        sheet: '200px',
-    },
-    payment_type: {
-        default: '150px',
-        text: '150px',
-        sheet: '120px',
-    },
-    payment_method: {
-        default: '150px',
-        text: '150px',
-        sheet: '145px',
-    },
-    payment_scheme: {
-        default: '150px',
-        text: '150px',
-        sheet: '145px',
-    },
-    auth_status: {
-        default: '150px',
-        text: '150px',
-        sheet: '165px',
-    },
-    auth_type: {
-        default: '150px',
-        text: '150px',
-        sheet: '155px',
-    },
-    eci: {
-        default: '150px',
-        text: '150px',
-        sheet: '100px',
-    },
 };

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-test.21",
-  "testVersion": 21,
+  "version": "0.1.90-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",