@tap-payments/os-micro-frontend-shared 0.1.71 → 0.1.73-test.1

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({ 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: {
+    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: {
                         width: '8px',
                         height: '7px',
                     } }) }))] })));

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

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

package/build/components/RadioGroup/style.js

@@ -5,6 +5,7 @@ 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/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: 16, containerSize: 16, 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: 10, containerSize: 10, 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 > 1 && (_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 - 1] }) }))] })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })));
 }

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

@@ -17,15 +17,20 @@ import { ChannelTextLabel, ChannelTextWrapper, salesChannelAnimation, SalesChann
 function SalesChannelCell(_a) {
     var _b;
     var { channels, isTextShown } = _a, props = __rest(_a, ["channels", "isTextShown"]);
-    const salesChannels = (_b = channels === null || channels === void 0 ? void 0 : channels.filter((s) => !!s.address)) === null || _b === void 0 ? void 0 : _b.map((channel, index) => {
+    const salesChannels = (_b = channels === null || channels === void 0 ? void 0 : channels.filter((item) => !!item.address)) === null || _b === void 0 ? void 0 : _b.map((channel, index) => {
         var _a;
         const sourceTooltip = channel.address;
         const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
+        let channelAddressUrl = channel.address || '';
+        if (!/^https?:\/\//i.test(channelAddressUrl)) {
+            channelAddressUrl = 'https://' + channelAddressUrl;
+        }
         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',
+                    boxShadow: '7px 0px 8px 0px #F2F2F2',
                 }, onClick: () => {
-                    window.open(channel.address, '_blank');
+                    window.open(channelAddressUrl, '_blank');
                 } }, { 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/components/WindowBackdrop/WindowBackdrop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BackdropProps as MuiBackdropProps } from '@mui/material/Backdrop';
+export type WindowBackdropProps = MuiBackdropProps;
+declare function WindowBackdrop(props: WindowBackdropProps): import("react").ReactPortal;
+declare const _default: import("react").MemoExoticComponent<typeof WindowBackdrop>;
+export default _default;

package/build/components/WindowBackdrop/WindowBackdrop.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { createPortal } from 'react-dom';
+import Backdrop from '@mui/material/Backdrop';
+import { alpha } from '@mui/material/styles';
+function WindowBackdrop(props) {
+    return createPortal(_jsx(Backdrop, Object.assign({ sx: { zIndex: 1, backgroundColor: (theme) => alpha(theme.palette.common.black, 0.3) } }, props)), document.body);
+}
+export default memo(WindowBackdrop);

package/build/components/WindowBackdrop/index.d.ts

@@ -0,0 +1 @@
+export { default } from './WindowBackdrop';

package/build/components/WindowBackdrop/index.js

@@ -0,0 +1 @@
+export { default } from './WindowBackdrop';

package/build/components/WindowSideBar/WindowSideBar.d.ts

@@ -1,14 +1,10 @@
 /// <reference types="react" />
-import { ACCOUNT_SECTION, UserSection } from '../../types/index.js';
+import { Section } from './type';
 interface WindowSideBarProps {
-    sections: UserSection[];
+    sections: Section[];
     isMaximized?: boolean;
-    onClick?: (section: {
-        id: ACCOUNT_SECTION;
-        title?: string;
-        icon?: string;
-    }) => void;
-    activeSection?: ACCOUNT_SECTION;
+    onClick?: (section: Section) => void;
+    activeSection?: string;
 }
 declare function WindowSideBar({ sections, isMaximized, onClick, activeSection }: WindowSideBarProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof WindowSideBar>;

package/build/components/WindowSideBar/index.d.ts

@@ -1,4 +1,5 @@
 import WindowSideBar from './WindowSideBar';
 export { TITLE_BAR_HEIGHT } from './constant';
+export type { Section } from './type';
 export { SideBar, Content } from './style';
 export default WindowSideBar;

package/build/components/WindowSideBar/type.d.ts

@@ -0,0 +1,10 @@
+export interface Section {
+    id: string;
+    title: string;
+    icon?: string;
+    subSections?: {
+        id: string;
+        title: string;
+        icon?: string;
+    }[];
+}

package/build/components/WindowSideBar/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/index.d.ts

@@ -103,3 +103,4 @@ export * from './RadioButton';
 export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
+export { default as WindowBackdrop } from './WindowBackdrop';

package/build/components/index.js

@@ -103,3 +103,4 @@ export * from './RadioButton';
 export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';
 export { default as ColorPicker } from './ColorPicker';
+export { default as WindowBackdrop } from './WindowBackdrop';

package/build/constants/assets.d.ts

@@ -103,6 +103,7 @@ export declare const checkIcon: string;
 export declare const closeXIcon: string;
 export declare const dragIcon: string;
 export declare const checkboxIcon: string;
+export declare const whitePlusIcon: string;
 export declare const protectIcon: string;
 export declare const unisoIcon: string;
 export declare const addidasIcon: string;

package/build/constants/assets.js

@@ -107,6 +107,7 @@ export const checkIcon = `${appBaseUrl}/check.svg`;
 export const closeXIcon = `${appBaseUrl}/closeX.svg`;
 export const dragIcon = `${appBaseUrl}/drag.svg`;
 export const checkboxIcon = `${appBaseUrl}/checkboxIcon.svg`;
+export const whitePlusIcon = `${lightUrl}/plusWhite.svg`;
 export const protectIcon = `${appBaseUrl}/checkboxIcon.svg`;
 export const unisoIcon = `${lightUrl}/Uniso.svg`;
 export const addidasIcon = `${lightUrl}/addidas.svg`;

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

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

package/build/types/user.d.ts

@@ -2,7 +2,6 @@ import { UserApp } from './apps';
 import { Brand } from './brand';
 import { Entity } from './entity';
 import { Merchant } from './merchant';
-import { ACCOUNT_SECTION } from './account';
 import { Country } from './appConfig';
 export interface TextAndLang {
     lang: string;
@@ -161,7 +160,7 @@ export interface SegmentRole {
     role_id: string;
 }
 export interface UserSection {
-    id: ACCOUNT_SECTION;
+    id: string;
     title?: string;
     icon?: 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.71",
-  "testVersion": 0,
+  "version": "0.1.73-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -134,4 +134,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}