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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19,5 +19,5 @@ import IconWithBadge from '../../../IconWithBadge';
19
19
  export default function BrandsCell(_a) {
20
20
  var { brand, verificationStatus, hideStatus } = _a, props = __rest(_a, ["brand", "verificationStatus", "hideStatus"]);
21
21
  const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
22
- 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' } }))] })) })) })) })));
22
+ 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' } }))] })) })) })) })));
23
23
  }
@@ -2,4 +2,6 @@
2
2
  export declare const BrandsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
3
3
  export declare const BrandName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
4
4
  export declare const VerificationIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
5
- export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
5
+ export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
6
+ brandName?: string | undefined;
7
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
@@ -7,6 +7,7 @@ export const BrandsWrapper = styled('div')(({ theme }) => ({
7
7
  borderRadius: '44px',
8
8
  padding: '4px 8px',
9
9
  lineHeight: '120%',
10
+ '&:hover': { minWidth: 'max-content' },
10
11
  }));
11
12
  export const BrandName = styled('div')(({ theme }) => ({
12
13
  fontSize: '14px',
@@ -17,13 +18,6 @@ export const VerificationIcon = styled('img')(() => ({
17
18
  width: '8px',
18
19
  height: '8px',
19
20
  }));
20
- export const Label = styled('p')(({ theme }) => ({
21
- fontSize: '14px',
22
- fontWeight: 400,
23
- color: theme.palette.text.primary,
24
- overflow: 'hidden',
25
- textOverflow: 'ellipsis',
26
- whiteSpace: 'nowrap',
27
- maxWidth: '100%',
28
- margin: '0',
29
- }));
21
+ export const Label = styled('p', {
22
+ shouldForwardProp: (props) => 'brandName' !== props,
23
+ })(({ 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' }))));
@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import Tooltip from '../../../Tooltip';
14
14
  import { ImageWrapper } from '../../../index.js';
15
15
  import { TableCell } from '../../../TableCells';
16
+ import { openUrl } from '../../../../utils/index.js';
16
17
  import { ChannelTextLabel, ChannelTextWrapper, salesChannelAnimation, SalesChannelsContainer, StyledSourceCell, StyledSourceImage } from './style';
17
18
  function SalesChannelCell(_a) {
18
19
  var _b;
@@ -21,11 +22,12 @@ function SalesChannelCell(_a) {
21
22
  var _a;
22
23
  const sourceTooltip = channel.address;
23
24
  const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
24
- return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: {
25
- width: isTextShown ? '70px' : '36px',
26
- cursor: 'pointer',
27
- }, onClick: () => {
28
- window.open(channel.address, '_blank');
25
+ const isLastChannel = index === (channels === null || channels === void 0 ? void 0 : channels.length) - 1;
26
+ 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' }, (isLastChannel && {
27
+ boxShadow: '7px 0px 8px 0px #F2F2F2',
28
+ })), onClick: () => {
29
+ if (channel === null || channel === void 0 ? void 0 : channel.address)
30
+ openUrl(channel.address);
29
31
  } }, { children: isTextShown ? (_jsx(ChannelTextWrapper, { children: _jsx(ChannelTextLabel, { children: channelCode }) })) : (_jsx(StyledSourceImage, { src: channel.logo, alt: channelCode })) })) }), `${channel}-${index}`));
30
32
  });
31
33
  const salesChannelsCount = (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) || 0;
@@ -540,5 +540,3 @@ export declare const blackMobileSignalIcon: string;
540
540
  export declare const emptyMobileWifiIcon: string;
541
541
  export declare const deemaWithLabel: string;
542
542
  export declare const blackUnLinkIcon: string;
543
- export declare const sortDescArrowIcon: string;
544
- export declare const sortAscArrowIcon: string;
@@ -544,5 +544,3 @@ export const blackMobileSignalIcon = `${lightUrl}/blackMobileSignalIcon.svg`;
544
544
  export const emptyMobileWifiIcon = `${lightUrl}/emptyMobileWifiIcon.svg`;
545
545
  export const deemaWithLabel = `${lightUrl}/deemaWithLabel.svg`;
546
546
  export const blackUnLinkIcon = `${lightUrl}/blackUnLinkIcon.svg`;
547
- export const sortDescArrowIcon = `${lightUrl}/sortDescArrowIcon.svg`;
548
- export const sortAscArrowIcon = `${lightUrl}/sortAscArrowIcon.svg`;
@@ -94,16 +94,6 @@ export declare const refundTableCellWidth: {
94
94
  readonly text: "195px";
95
95
  readonly sheet: "180px";
96
96
  };
97
- readonly payouts: {
98
- readonly default: "195px";
99
- readonly text: "195px";
100
- readonly sheet: "300px";
101
- };
102
- readonly reason: {
103
- readonly default: "170px";
104
- readonly text: "240px";
105
- readonly sheet: "160px";
106
- };
107
97
  readonly destinations: {
108
98
  readonly default: "70px";
109
99
  readonly text: "240px";
@@ -192,7 +182,7 @@ export declare const refundTableCellWidth: {
192
182
  readonly charge_meta: {
193
183
  readonly default: "100px";
194
184
  readonly text: "100px";
195
- readonly sheet: "250px";
185
+ readonly sheet: "100px";
196
186
  };
197
187
  readonly brand: {
198
188
  readonly default: "116px";
@@ -94,16 +94,6 @@ export const refundTableCellWidth = {
94
94
  text: '195px',
95
95
  sheet: '180px',
96
96
  },
97
- payouts: {
98
- default: '195px',
99
- text: '195px',
100
- sheet: '300px',
101
- },
102
- reason: {
103
- default: '170px',
104
- text: '240px',
105
- sheet: '160px',
106
- },
107
97
  destinations: {
108
98
  default: '70px',
109
99
  text: '240px',
@@ -192,7 +182,7 @@ export const refundTableCellWidth = {
192
182
  charge_meta: {
193
183
  default: '100px',
194
184
  text: '100px',
195
- sheet: '250px',
185
+ sheet: '100px',
196
186
  },
197
187
  brand: {
198
188
  default: '116px',
@@ -1 +1,2 @@
1
1
  export declare const openNewTab: (url: string, target?: string) => void;
2
+ export declare const openUrl: (url: string) => void;
@@ -6,3 +6,13 @@ export const openNewTab = (url, target = '_blank') => {
6
6
  link.click();
7
7
  link.remove();
8
8
  };
9
+ export const openUrl = (url) => {
10
+ const isUrl = /^https?:\/\//i.test(url);
11
+ if (isUrl) {
12
+ window.open(url, '_blank', 'noopener,noreferrer');
13
+ }
14
+ else {
15
+ const newUrl = 'about:blank?' + encodeURIComponent(url);
16
+ window.open(newUrl, '_blank', 'noopener,noreferrer');
17
+ }
18
+ };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.90",
4
+ "version": "0.1.91-test.2",
5
5
  "testVersion": 2,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
@@ -136,4 +136,4 @@
136
136
  "publishConfig": {
137
137
  "registry": "https://registry.npmjs.org/"
138
138
  }
139
- }
139
+ }