@tap-payments/os-micro-frontend-shared 0.1.23 → 0.1.24-test.1
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/IconWithBadge/IconWithBadge.d.ts +1 -1
- package/build/components/IconWithBadge/IconWithBadge.js +2 -2
- package/build/components/IconWithBadge/type.d.ts +1 -0
- package/build/components/StatusIcons/SourceIcons/SourceIcons.js +2 -2
- package/build/components/TableCells/CustomCells/AppsCell/AppsCell.js +3 -0
- package/build/components/TableCells/CustomCells/BrandsCell/BrandsCell.d.ts +1 -1
- package/build/components/TableCells/CustomCells/BrandsCell/BrandsCell.js +3 -8
- package/build/components/TableCells/CustomCells/BrandsCell/type.d.ts +1 -0
- package/build/components/TableCells/CustomCells/EntityCell/EntityCell.d.ts +1 -1
- package/build/components/TableCells/CustomCells/EntityCell/EntityCell.js +2 -2
- package/build/components/TableCells/CustomCells/EntityCell/type.d.ts +1 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/LeadStatusCell.d.ts +2 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/LeadStatusCell.js +25 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/constant.d.ts +7 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/constant.js +8 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/index.d.ts +1 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/index.js +1 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/style.d.ts +2 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/style.js +12 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/type.d.ts +6 -0
- package/build/components/TableCells/CustomCells/LeadStatusCell/type.js +1 -0
- package/build/components/TableCells/CustomCells/index.d.ts +2 -0
- package/build/components/TableCells/CustomCells/index.js +2 -0
- package/build/constants/assets.d.ts +5 -0
- package/build/constants/assets.js +5 -0
- package/package.json +3 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { IconWithBadgeProps } from './type';
|
|
2
|
-
export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt, mainIconSize, containerSize, overlayPosition, borderColor, label, sx, onError, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt, mainIconSize, containerSize, overlayPosition, borderColor, label, sx, onError, containerSx, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,9 +5,9 @@ import Box from '@mui/material/Box';
|
|
|
5
5
|
import { brandPlaceholderIcon } from '../../constants/index.js';
|
|
6
6
|
import { Container, BadgeBox } from './style';
|
|
7
7
|
import Tooltip from '../Tooltip';
|
|
8
|
-
export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt = 'main icon', mainIconSize = 20, containerSize = 24, overlayPosition = { top: 10, left: 17 }, borderColor = '#F2F2F2', label = '', sx, onError, }) {
|
|
8
|
+
export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt = 'main icon', mainIconSize = 20, containerSize = 24, overlayPosition = { top: 10, left: 17 }, borderColor = '#F2F2F2', label = '', sx, onError, containerSx, }) {
|
|
9
9
|
const [isLoading, setIsLoading] = useState(true);
|
|
10
|
-
return (_jsx(Tooltip, Object.assign({ title: label }, { children: _jsx(Box, Object.assign({ display: "flex", alignItems: "center", gap: 1, sx: { position: 'relative' } }, { children: _jsxs(Container, Object.assign({ style: {
|
|
10
|
+
return (_jsx(Tooltip, Object.assign({ title: label }, { children: _jsx(Box, Object.assign({ display: "flex", alignItems: "center", gap: 1, sx: Object.assign({ position: 'relative' }, containerSx) }, { children: _jsxs(Container, Object.assign({ style: {
|
|
11
11
|
borderColor,
|
|
12
12
|
width: containerSize,
|
|
13
13
|
height: containerSize,
|
|
@@ -16,10 +16,10 @@ export function SourceIcons({ payment, card, isTextShown, firstIcon }) {
|
|
|
16
16
|
const method = payment === null || payment === void 0 ? void 0 : payment.method;
|
|
17
17
|
const scheme = payment === null || payment === void 0 ? void 0 : payment.scheme;
|
|
18
18
|
if (((_a = getPaymentMethodKey(method)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = getPaymentMethodKey(scheme)) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
|
|
19
|
-
initialSources.push(...[getPaymentMethodKey(
|
|
19
|
+
initialSources.push(...[getPaymentMethodKey(type), getPaymentMethodKey(method)]);
|
|
20
20
|
}
|
|
21
21
|
else {
|
|
22
|
-
initialSources.push(...[getPaymentMethodKey(
|
|
22
|
+
initialSources.push(...[getPaymentMethodKey(type), getPaymentMethodKey(method), getPaymentMethodKey(scheme)]);
|
|
23
23
|
}
|
|
24
24
|
return initialSources;
|
|
25
25
|
}, [payment]);
|
|
@@ -21,5 +21,8 @@ export default function AppsCell(_a) {
|
|
|
21
21
|
height: '32px',
|
|
22
22
|
display: 'flex',
|
|
23
23
|
alignItems: 'center',
|
|
24
|
+
zIndex: 40,
|
|
25
|
+
position: 'absolute',
|
|
26
|
+
left: 0,
|
|
24
27
|
} }, { children: _jsx(IconWithHoverOverlays, { mainIcon: { iconUrl: appsGridIcon, title: 'Apps' }, overlayIcons: apps }) })) })));
|
|
25
28
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { BrandsCellProps } from './type';
|
|
2
|
-
export default function BrandsCell({ brand, verificationStatus, ...props }: BrandsCellProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default function BrandsCell({ brand, verificationStatus, hideStatus, ...props }: BrandsCellProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -11,18 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import TableCell from '../../TableCell';
|
|
14
|
-
import { BrandsWrapper, Label
|
|
14
|
+
import { BrandsWrapper, Label } from './style';
|
|
15
15
|
import { verificationIcon } from './constants';
|
|
16
16
|
import Tooltip from '../../../Tooltip';
|
|
17
17
|
import { Box } from '@mui/material';
|
|
18
18
|
import IconWithBadge from '../../../IconWithBadge';
|
|
19
19
|
export default function BrandsCell(_a) {
|
|
20
|
-
var { brand, verificationStatus } = _a, props = __rest(_a, ["brand", "verificationStatus"]);
|
|
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
|
-
|
|
23
|
-
icon: brand.logo,
|
|
24
|
-
overlayIcon: icon ? _jsx(VerificationIcon, { src: icon }) : null,
|
|
25
|
-
label: brand.name,
|
|
26
|
-
};
|
|
27
|
-
return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden' } }, { children: [_jsx(IconWithBadge, { mainIcon: item.icon, overlayIcon: item.overlayIcon, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }, item.label), _jsx(Label, { children: brand.name })] })) })) }) })));
|
|
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: 16, containerSize: 16, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] })) })) })) })));
|
|
28
23
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { EntityCellProps } from './type';
|
|
2
|
-
export default function EntityCell({ entity, country, verificationStatus, licenseNumber, ...props }: EntityCellProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default function EntityCell({ entity, country, verificationStatus, licenseNumber, hideStatus, ...props }: EntityCellProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -17,7 +17,7 @@ import Tooltip from '../../../Tooltip';
|
|
|
17
17
|
import { CountryFlag } from '../../../index.js';
|
|
18
18
|
import { getCountryName } from '../../../../utils/index.js';
|
|
19
19
|
export default function EntityCell(_a) {
|
|
20
|
-
var { entity, country, verificationStatus, licenseNumber } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber"]);
|
|
20
|
+
var { entity, country, verificationStatus, licenseNumber, hideStatus } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber", "hideStatus"]);
|
|
21
21
|
const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
|
|
22
|
-
return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, { children: licenseNumber ? (_jsxs(EntityContainer, { children: [_jsxs(EntityInfoContainer, { children: [_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber })] }), _jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
|
|
22
|
+
return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, { children: licenseNumber ? (_jsxs(EntityContainer, { children: [_jsxs(EntityInfoContainer, { children: [_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber })] }), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
|
|
23
23
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { useTranslation } from 'react-i18next';
|
|
14
|
+
import camelCase from 'lodash/camelCase';
|
|
15
|
+
import capitalize from 'lodash/capitalize';
|
|
16
|
+
import Tooltip from '../../../Tooltip';
|
|
17
|
+
import { TableCell } from '../../../TableCells';
|
|
18
|
+
import IconWithBadge from '../../../IconWithBadge';
|
|
19
|
+
import { statusIcons } from './constant';
|
|
20
|
+
import { StatusIconWrapper } from './style';
|
|
21
|
+
export default function LeadStatusCell(_a) {
|
|
22
|
+
var { status } = _a, props = __rest(_a, ["status"]);
|
|
23
|
+
const { t } = useTranslation();
|
|
24
|
+
return (_jsx(TableCell, Object.assign({}, props, { children: status && statusIcons[status] && (_jsx(Tooltip, Object.assign({ title: t(capitalize(camelCase(status))) }, { children: _jsx(StatusIconWrapper, { children: _jsx(IconWithBadge, { mainIcon: statusIcons[status], mainIconSize: 16, containerSize: 16, borderColor: "transparent" }) }) }))) })));
|
|
25
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { activeLeadStatusIcon, completedLeadStatusIcon, closedLeadStatusIcon, expiredLeadStatusIcon, readyLeadStatusIcon } from '../../../../constants/index.js';
|
|
2
|
+
export const statusIcons = {
|
|
3
|
+
active: activeLeadStatusIcon,
|
|
4
|
+
completed: completedLeadStatusIcon,
|
|
5
|
+
closed: closedLeadStatusIcon,
|
|
6
|
+
expired: expiredLeadStatusIcon,
|
|
7
|
+
ready: readyLeadStatusIcon,
|
|
8
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as LeadStatusCell } from './LeadStatusCell';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as LeadStatusCell } from './LeadStatusCell';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StatusIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { styled } from '@mui/material';
|
|
2
|
+
export const StatusIconWrapper = styled('span')(({ theme }) => ({
|
|
3
|
+
width: '36px',
|
|
4
|
+
height: '24px',
|
|
5
|
+
borderRadius: '24px',
|
|
6
|
+
backgroundColor: 'transparent',
|
|
7
|
+
display: 'flex',
|
|
8
|
+
alignItems: 'center',
|
|
9
|
+
justifyContent: 'center',
|
|
10
|
+
flexShrink: 0,
|
|
11
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
12
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -46,5 +46,7 @@ export * from './BrandsCell';
|
|
|
46
46
|
export * from './SalesChannelCell';
|
|
47
47
|
export * from './TerminalsBrandCell';
|
|
48
48
|
export * from './TerminalsPlatformCell';
|
|
49
|
+
export * from './AppsCell';
|
|
49
50
|
export * from './type';
|
|
50
51
|
export * from './style';
|
|
52
|
+
export * from './LeadStatusCell';
|
|
@@ -46,5 +46,7 @@ export * from './BrandsCell';
|
|
|
46
46
|
export * from './SalesChannelCell';
|
|
47
47
|
export * from './TerminalsBrandCell';
|
|
48
48
|
export * from './TerminalsPlatformCell';
|
|
49
|
+
export * from './AppsCell';
|
|
49
50
|
export * from './type';
|
|
50
51
|
export * from './style';
|
|
52
|
+
export * from './LeadStatusCell';
|
|
@@ -256,6 +256,11 @@ export declare const savedStatusIcon: string;
|
|
|
256
256
|
export declare const scheduledStatusIcon: string;
|
|
257
257
|
export declare const pendingStatusIcon: string;
|
|
258
258
|
export declare const refundedStatusIcon: string;
|
|
259
|
+
export declare const activeLeadStatusIcon: string;
|
|
260
|
+
export declare const completedLeadStatusIcon: string;
|
|
261
|
+
export declare const closedLeadStatusIcon: string;
|
|
262
|
+
export declare const expiredLeadStatusIcon: string;
|
|
263
|
+
export declare const readyLeadStatusIcon: string;
|
|
259
264
|
export declare const newFileIcon: string;
|
|
260
265
|
export declare const teamWindowIcon: string;
|
|
261
266
|
export declare const blueAppsIcon: string;
|
|
@@ -260,6 +260,11 @@ export const savedStatusIcon = `${appBaseUrl}/savedStatus1.svg`;
|
|
|
260
260
|
export const scheduledStatusIcon = `${appBaseUrl}/scheduledStatus1.svg`;
|
|
261
261
|
export const pendingStatusIcon = `${appBaseUrl}/invoicePendingStatus2.svg`;
|
|
262
262
|
export const refundedStatusIcon = `${appBaseUrl}/invoiceRefundedStatus2.svg`;
|
|
263
|
+
export const activeLeadStatusIcon = `${lightUrl}/activeLeadStatus.svg`;
|
|
264
|
+
export const completedLeadStatusIcon = `${lightUrl}/completedLeadStatus.svg`;
|
|
265
|
+
export const closedLeadStatusIcon = `${lightUrl}/closedLeadStatus.svg`;
|
|
266
|
+
export const expiredLeadStatusIcon = `${lightUrl}/expiredLeadStatus.svg`;
|
|
267
|
+
export const readyLeadStatusIcon = `${lightUrl}/readyLeadStatus.svg`;
|
|
263
268
|
export const newFileIcon = `${lightUrl}/newFileIcon.svg`;
|
|
264
269
|
export const teamWindowIcon = `${lightUrl}/teamWindowIcon.svg`;
|
|
265
270
|
export const blueAppsIcon = `${lightUrl}/blueAppsIcon.svg`;
|
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.24-test.1",
|
|
5
|
+
"testVersion": 1,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -131,4 +131,4 @@
|
|
|
131
131
|
"publishConfig": {
|
|
132
132
|
"registry": "https://registry.npmjs.org/"
|
|
133
133
|
}
|
|
134
|
-
}
|
|
134
|
+
}
|