@tap-payments/os-micro-frontend-shared 0.1.205 → 0.1.206-test.9
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.
- package/build/components/Chip/style.d.ts +0 -1
- package/build/components/CountBadge/style.d.ts +0 -1
- package/build/components/Dialog/style.d.ts +0 -1
- package/build/components/FlippingCard/style.d.ts +0 -1
- package/build/components/ImageWrapper/ImageWrapper.d.ts +0 -1
- package/build/components/JSONViewer/style.d.ts +0 -1
- package/build/components/LeftPeekRightExpandingChip/style.d.ts +0 -1
- package/build/components/RightLeftExpandingCenterChip/style.d.ts +0 -1
- package/build/components/SearchButton/styles.d.ts +0 -1
- package/build/components/StatusIcons/AuthIcons/style.d.ts +0 -1
- package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts +0 -1
- package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts +0 -1
- package/build/components/StatusIcons/SourceIcons/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/IDButton/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCell.d.ts +1 -1
- package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCell.js +5 -5
- package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCellSheet.d.ts +3 -0
- package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCellSheet.js +42 -0
- package/build/components/TableCells/CustomCells/SalesChannelCell/index.d.ts +1 -0
- package/build/components/TableCells/CustomCells/SalesChannelCell/index.js +1 -0
- package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +3 -1
- package/build/components/TableCells/CustomCells/SalesChannelCell/style.js +8 -1
- package/build/components/TableCells/CustomCells/SalesChannelCell/type.d.ts +4 -2
- package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/SourceCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/style.d.ts +0 -1
- package/build/components/VirtualTables/components/style.d.ts +0 -1
- package/package.json +3 -3
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
import { GetSourceAnimationFunction } from './type';
|
|
4
3
|
export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
5
4
|
variant?: import("./type").ChipVariant | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
import { TableMode } from '../../../../types/index.js';
|
|
4
3
|
export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
5
4
|
tableMode?: TableMode | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
|
|
5
4
|
hidden?: boolean | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
3
|
export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
|
|
5
4
|
hidden?: boolean | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { SalesChannelCell } from './type';
|
|
2
|
-
declare function SalesChannelCell({ channels,
|
|
2
|
+
declare function SalesChannelCell({ channels, ...props }: SalesChannelCell): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default SalesChannelCell;
|
|
@@ -13,24 +13,24 @@ 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 {
|
|
16
|
+
import { salesChannelAnimation, SalesChannelsContainer, StyledSourceCell, StyledSourceImage } from './style';
|
|
17
17
|
import { openChannelUrl, transformUrl } from './utils';
|
|
18
18
|
function SalesChannelCell(_a) {
|
|
19
19
|
var _b;
|
|
20
|
-
var { channels
|
|
20
|
+
var { channels } = _a, props = __rest(_a, ["channels"]);
|
|
21
21
|
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) => {
|
|
22
22
|
var _a, _b, _c;
|
|
23
23
|
const sourceTooltip = channel.address;
|
|
24
24
|
const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
|
|
25
25
|
const isLastChannel = index === (channels === null || channels === void 0 ? void 0 : channels.length) - 1;
|
|
26
26
|
const transformedUrl = transformUrl((_b = channel.address) !== null && _b !== void 0 ? _b : '', (_c = channel.code) !== null && _c !== void 0 ? _c : '');
|
|
27
|
-
return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index,
|
|
28
|
-
width:
|
|
27
|
+
return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, 0, isLastChannel), sx: {
|
|
28
|
+
width: '36px',
|
|
29
29
|
cursor: !transformedUrl ? 'default' : 'pointer',
|
|
30
30
|
}, onClick: () => {
|
|
31
31
|
if (channel === null || channel === void 0 ? void 0 : channel.address)
|
|
32
32
|
openChannelUrl(transformedUrl);
|
|
33
|
-
} }, { children:
|
|
33
|
+
} }, { children: _jsx(StyledSourceImage, { src: channel.logo, alt: channelCode }) })) }), `${channel}-${index}`));
|
|
34
34
|
});
|
|
35
35
|
const salesChannelsCount = (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) || 0;
|
|
36
36
|
return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.length) > 0 ? (_jsx(SalesChannelsContainer, Object.assign({ layout: true, className: "sales-channels-container", whileHover: "animate", animate: "start", sourcesCount: salesChannelsCount || 0, variants: { animate: { width: (salesChannelsCount || 0) * (6 + 32) } }, style: {
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { StatusChip, StatusChipWithCopy } from '../../../index.js';
|
|
3
|
+
import { Box, Popover } from '@mui/material';
|
|
4
|
+
import { useEffect, useRef, useState } from 'react';
|
|
5
|
+
import { StyledSheetContainer } from './style';
|
|
6
|
+
function SalesChannelCellSheet({ channels, selectionProps = {} }) {
|
|
7
|
+
const channelWrapperRef = useRef(null);
|
|
8
|
+
const [hasOverflow, setHasOverflow] = useState(false);
|
|
9
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
10
|
+
const open = Boolean(anchorEl);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (channelWrapperRef.current) {
|
|
13
|
+
setHasOverflow(channelWrapperRef.current.scrollHeight > 20);
|
|
14
|
+
}
|
|
15
|
+
}, [channels]);
|
|
16
|
+
return (_jsxs(StyledSheetContainer, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: hasOverflow ? '8px' : '4px', maxWidth: '367px' }, ref: channelWrapperRef }, { children: channels === null || channels === void 0 ? void 0 : channels.filter((s) => !!s.address).map((channel, index) => {
|
|
17
|
+
var _a, _b;
|
|
18
|
+
return (_jsxs(StatusChipWithCopy, Object.assign({ copyText: `${(_a = channel.name) === null || _a === void 0 ? void 0 : _a.en}: ${channel.address}`, chipIndex: index + 1, selectionProps: selectionProps }, { children: [(_b = channel.name) === null || _b === void 0 ? void 0 : _b.en, ": ", channel.address] }), channel.id));
|
|
19
|
+
}) })), hasOverflow && (_jsx(Box, Object.assign({ onClick: (e) => {
|
|
20
|
+
setAnchorEl(e.currentTarget.parentElement);
|
|
21
|
+
}, sx: { height: '18px' } }, { children: _jsx(StatusChip, Object.assign({ minWidth: "25", sx: { borderRadius: '24px', overflow: 'hidden' }, copyText: "..." }, { children: "..." })) }))), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, sx: { minWidth: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth }, onClose: () => {
|
|
22
|
+
setAnchorEl(null);
|
|
23
|
+
}, anchorOrigin: {
|
|
24
|
+
vertical: 'top',
|
|
25
|
+
horizontal: 'left',
|
|
26
|
+
}, transformOrigin: {
|
|
27
|
+
vertical: 'top',
|
|
28
|
+
horizontal: 'left',
|
|
29
|
+
}, slotProps: {
|
|
30
|
+
paper: {
|
|
31
|
+
style: {
|
|
32
|
+
maxWidth: 'unset',
|
|
33
|
+
minWidth: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth,
|
|
34
|
+
marginTop: '22px',
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
} }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '4px', padding: '4px' } }, { children: channels === null || channels === void 0 ? void 0 : channels.filter((s) => !!s.address).map((channel, index) => {
|
|
38
|
+
var _a, _b;
|
|
39
|
+
return (_jsxs(StatusChipWithCopy, Object.assign({ copyText: `${(_a = channel.name) === null || _a === void 0 ? void 0 : _a.en}: ${channel.address}`, chipIndex: index + 1, selectionProps: selectionProps }, { children: [(_b = channel.name) === null || _b === void 0 ? void 0 : _b.en, ": ", channel.address] }), channel.id));
|
|
40
|
+
}) })) }))] }));
|
|
41
|
+
}
|
|
42
|
+
export default SalesChannelCellSheet;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -287,3 +286,6 @@ export declare const salesChannelAnimation: (index: number, xDelta?: number, isL
|
|
|
287
286
|
};
|
|
288
287
|
};
|
|
289
288
|
};
|
|
289
|
+
export declare const StyledSheetContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
290
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
291
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { styled } from '@mui/material';
|
|
1
|
+
import { Box, styled } from '@mui/material';
|
|
2
2
|
import { motion } from 'framer-motion';
|
|
3
3
|
export const StyledSourceCell = styled('span')(({ theme }) => ({
|
|
4
4
|
display: 'flex',
|
|
@@ -51,3 +51,10 @@ export const salesChannelAnimation = (index, xDelta, isLastChannel) => ({
|
|
|
51
51
|
boxShadow: '7px 0px 8px 0px #F2F2F2',
|
|
52
52
|
})),
|
|
53
53
|
});
|
|
54
|
+
export const StyledSheetContainer = styled(Box)(() => ({
|
|
55
|
+
display: 'flex',
|
|
56
|
+
gap: '4px',
|
|
57
|
+
maxWidth: '424px',
|
|
58
|
+
justifyContent: 'space-between',
|
|
59
|
+
height: '18px',
|
|
60
|
+
}));
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { TableCellProps } from '@mui/material/TableCell';
|
|
2
|
-
import { Channel } from '../../../../types/index.js';
|
|
2
|
+
import { Channel, SelectionProps } from '../../../../types/index.js';
|
|
3
3
|
export interface SalesChannelCell extends TableCellProps {
|
|
4
4
|
channels: Channel[];
|
|
5
|
-
|
|
5
|
+
}
|
|
6
|
+
export interface SalesChannelCellSheet extends SalesChannelCell {
|
|
7
|
+
selectionProps?: SelectionProps;
|
|
6
8
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
5
4
|
hidden?: boolean | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
4
3
|
variant?: "Global" | "Regional" | "Local" | undefined;
|
|
5
4
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
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.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.206-test.9",
|
|
5
|
+
"testVersion": 9,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -163,4 +163,4 @@
|
|
|
163
163
|
"publishConfig": {
|
|
164
164
|
"registry": "https://registry.npmjs.org/"
|
|
165
165
|
}
|
|
166
|
-
}
|
|
166
|
+
}
|