@tap-payments/os-micro-frontend-shared 0.1.389-test.1 → 0.1.389-test.1-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.
- package/build/components/StatusButton/constant.d.ts +1 -0
- package/build/components/StatusButton/constant.js +2 -1
- package/build/components/StatusButton/style.d.ts +1 -1
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/InvoiceStatusCell.d.ts +1 -1
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/InvoiceStatusCell.js +59 -29
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +0 -2
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.js +0 -18
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/type.d.ts +0 -1
- package/build/constants/assets.d.ts +1 -0
- package/build/constants/assets.js +1 -0
- package/package.json +2 -2
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/ChargeStatusIcon.d.ts +0 -11
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/ChargeStatusIcon.js +0 -14
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, dashedCheckIcon, deactivatedIcon, destinationsServiceIcon, destinationWithoutBackgroundIcon,
|
|
1
|
+
import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, dashedCheckIcon, deactivatedIcon, destinationsServiceIcon, destinationWithoutBackgroundIcon, outstandingIcon,
|
|
2
2
|
// trashBinIcon,
|
|
3
3
|
} from '../../constants/index.js';
|
|
4
4
|
export const statusButtonIcons = {
|
|
@@ -26,4 +26,5 @@ export const statusButtonIcons = {
|
|
|
26
26
|
deactivated: deactivatedIcon,
|
|
27
27
|
destination: destinationsServiceIcon,
|
|
28
28
|
destinationReversed: destinationWithoutBackgroundIcon,
|
|
29
|
+
outstanding: outstandingIcon,
|
|
29
30
|
};
|
|
@@ -21,7 +21,7 @@ export declare const CountBadge: import("@emotion/styled").StyledComponent<impor
|
|
|
21
21
|
}, {}, {}>;
|
|
22
22
|
export declare const StatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
|
|
23
23
|
variant: StatusButtonVariant;
|
|
24
|
-
icon?: "search" | "scheduled" | "paidOut" | "destination" | "reversed" | "checked" | "inProgress" | "initiated" | "abandoned" | "cancelled" | "reports" | "chevronDown" | "unAuthorized" | "unSettled" | "unCaptured" | "captured" | "authorized" | "openFlag" | "closedFlag" | "unauthenticated" | "authenticated" | "dashedChecked" | "deactivated" | "destinationReversed" | undefined;
|
|
24
|
+
icon?: "search" | "scheduled" | "paidOut" | "destination" | "reversed" | "checked" | "inProgress" | "initiated" | "abandoned" | "cancelled" | "reports" | "chevronDown" | "unAuthorized" | "unSettled" | "unCaptured" | "captured" | "authorized" | "openFlag" | "closedFlag" | "unauthenticated" | "authenticated" | "dashedChecked" | "deactivated" | "destinationReversed" | "outstanding" | undefined;
|
|
25
25
|
}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
26
26
|
export declare const StyledFilterName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
27
27
|
export declare const StyledDropdown: import("@emotion/styled").StyledComponent<import("../DropdownMenu").IProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { DueCellProps } from './type';
|
|
2
|
-
export default function InvoiceStatusCell({ status, date, viewsCount, chargeStatus, errorCode, chargeTooltip,
|
|
2
|
+
export default function InvoiceStatusCell({ status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, isTextShown, ...props }: DueCellProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,51 +9,81 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useTranslation } from 'react-i18next';
|
|
14
14
|
import dayjs from 'dayjs';
|
|
15
|
+
import { motion } from 'framer-motion';
|
|
16
|
+
import camelCase from 'lodash/camelCase';
|
|
17
|
+
import capitalize from 'lodash/capitalize';
|
|
15
18
|
import { useTheme } from '@mui/material/styles';
|
|
16
19
|
import StyledBadge, { BadgeVariants } from '../../../CountBadge';
|
|
17
20
|
import Tooltip from '../../../Tooltip';
|
|
18
21
|
import { TableCell } from '../../../TableCells';
|
|
19
22
|
import { formatDate } from '../../../TableCells/CustomCells/DueDateCell/utils';
|
|
20
23
|
import { chargeStatusIcons } from '../../../TableCells/CustomCells/AuthenticationStatusCell/constant';
|
|
24
|
+
import { ChargeStatusIcon } from '../../../StatusIcons';
|
|
21
25
|
import { statusIcons } from './constant';
|
|
22
|
-
import { DateIcon } from './style';
|
|
26
|
+
import { DueDateCellContainer, DateIcon, StatusTextLabel } from './style';
|
|
23
27
|
import { invoiceStatusStyles } from './utils';
|
|
24
|
-
import {
|
|
25
|
-
import { Box } from '@mui/material';
|
|
26
|
-
import { remindedRedIcon } from '../../../../constants/index.js';
|
|
27
|
-
import { RightLeftExpandingCenterChip } from '../../../RightLeftExpandingCenterChip';
|
|
28
|
+
import { StatusIconWrapper } from '../style';
|
|
28
29
|
export default function InvoiceStatusCell(_a) {
|
|
29
|
-
var { status, date, viewsCount, chargeStatus, errorCode, chargeTooltip,
|
|
30
|
-
const { t } = useTranslation();
|
|
30
|
+
var { status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, isTextShown } = _a, props = __rest(_a, ["status", "date", "viewsCount", "chargeStatus", "errorCode", "chargeTooltip", "isTextShown"]);
|
|
31
31
|
const theme = useTheme();
|
|
32
|
+
const { t } = useTranslation();
|
|
32
33
|
const icon = status ? statusIcons[status] : null;
|
|
33
34
|
const statusStyles = invoiceStatusStyles(status);
|
|
35
|
+
const showExpansion = viewsCount !== 0 && !!viewsCount && status === 'VIEWED';
|
|
34
36
|
const statusTooltip = `${t((status === null || status === void 0 ? void 0 : status.toLowerCase()) || '')} ${formatDate(dayjs(date).valueOf())}`;
|
|
35
37
|
return (_jsx(TableCell, Object.assign({}, props, { sx: {
|
|
36
38
|
position: 'relative',
|
|
37
39
|
overflow: 'visible',
|
|
38
|
-
} }, { children:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
40
|
+
} }, { children: _jsxs("div", Object.assign({ style: {
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
justifyContent: 'flex-start',
|
|
44
|
+
gap: '8px',
|
|
45
|
+
overflow: 'visible',
|
|
46
|
+
} }, { children: [_jsx(Tooltip, Object.assign({ title: t(statusTooltip || '') }, { children: _jsx(DueDateCellContainer, Object.assign({ whileHover: showExpansion ? ['animate', 'fadeIn'] : [], animate: "start", sx: Object.assign({ zIndex: 25, position: 'absolute' }, (isTextShown && {
|
|
47
|
+
border: `1px solid ${statusStyles.color}1A`,
|
|
48
|
+
})), variants: {
|
|
49
|
+
animate: Object.assign({}, (showExpansion && {
|
|
50
|
+
boxShadow: theme.shadows[4],
|
|
51
|
+
})),
|
|
52
|
+
}, background: statusStyles.background }, { children: (icon || (isTextShown && status)) && (_jsxs(_Fragment, { children: [isTextShown ? (_jsx(StatusTextLabel, Object.assign({ sx: {
|
|
53
|
+
color: statusStyles.color,
|
|
54
|
+
} }, { children: capitalize(status) }))) : (icon && _jsx(DateIcon, { src: icon, alt: "icon" })), _jsx(motion.div, Object.assign({ style: {
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
justifyContent: 'center',
|
|
57
|
+
gap: '4px',
|
|
58
|
+
display: 'none',
|
|
59
|
+
width: 0,
|
|
60
|
+
}, initial: { width: 0, opacity: 0 }, transition: {
|
|
61
|
+
animate: {
|
|
62
|
+
duration: 0.5,
|
|
63
|
+
},
|
|
64
|
+
fadeIn: {
|
|
65
|
+
duration: 0.2,
|
|
66
|
+
},
|
|
67
|
+
}, variants: {
|
|
68
|
+
animate: {
|
|
69
|
+
width: 'auto',
|
|
70
|
+
display: 'flex',
|
|
71
|
+
},
|
|
72
|
+
fadeIn: {
|
|
73
|
+
transition: {
|
|
74
|
+
delay: 0.5,
|
|
75
|
+
},
|
|
76
|
+
opacity: 1,
|
|
77
|
+
},
|
|
78
|
+
} }, { children: showExpansion && (_jsx(StyledBadge, Object.assign({ variant: BadgeVariants.DEFAULT, style: {
|
|
79
|
+
color: '#fff',
|
|
80
|
+
backgroundColor: statusStyles.color,
|
|
81
|
+
} }, { children: viewsCount }))) }))] })) })) })), _jsx(StatusIconWrapper, Object.assign({ sx: {
|
|
82
|
+
position: 'absolute',
|
|
83
|
+
left: isTextShown ? '88px' : '32px',
|
|
84
|
+
width: isTextShown ? '65px' : '24px',
|
|
85
|
+
} }, { children: chargeStatus && chargeStatusIcons[chargeStatus] && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: t(camelCase(chargeStatus)) }, { children: _jsx(StatusTextLabel, Object.assign({ sx: {
|
|
86
|
+
color: invoiceStatusStyles('VIEWED').color,
|
|
87
|
+
backgroundColor: `${invoiceStatusStyles('VIEWED').color}0d`,
|
|
88
|
+
} }, { children: capitalize(chargeStatus) })) }))) : (_jsx(ChargeStatusIcon, { chargeStatus: chargeStatus, errorCode: errorCode, chargeTooltip: chargeTooltip })) })) }))] })) })));
|
|
59
89
|
}
|
|
@@ -265,5 +265,3 @@ export declare const DueDateCellContainer: import("@emotion/styled").StyledCompo
|
|
|
265
265
|
}, {}, {}>;
|
|
266
266
|
export declare const DateIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
267
267
|
export declare const StatusTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
268
|
-
export declare const ErrorChip: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
269
|
-
export declare const StatusIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -30,21 +30,3 @@ export const StatusTextLabel = styled('div')(() => ({
|
|
|
30
30
|
padding: '4.5px 8px',
|
|
31
31
|
borderRadius: '24px',
|
|
32
32
|
}));
|
|
33
|
-
export const ErrorChip = styled('div')(({ theme }) => ({
|
|
34
|
-
color: theme.palette.common.white,
|
|
35
|
-
background: theme.palette.error.main,
|
|
36
|
-
fontSize: '0.6rem',
|
|
37
|
-
fontWeight: 600,
|
|
38
|
-
borderRadius: '16px',
|
|
39
|
-
padding: '2px 8px',
|
|
40
|
-
display: 'flex',
|
|
41
|
-
alignItems: 'center',
|
|
42
|
-
justifyContent: 'center',
|
|
43
|
-
}));
|
|
44
|
-
export const StatusIconWrapper = styled('div')(() => ({
|
|
45
|
-
display: 'flex',
|
|
46
|
-
alignItems: 'center',
|
|
47
|
-
justifyContent: 'center',
|
|
48
|
-
width: '16px',
|
|
49
|
-
height: '16px',
|
|
50
|
-
}));
|
|
@@ -77,6 +77,7 @@ export declare const maximizeIcon: string;
|
|
|
77
77
|
export declare const minimizeIcon: string;
|
|
78
78
|
export declare const closeIcon: string;
|
|
79
79
|
export declare const dashedCheckIcon: string;
|
|
80
|
+
export declare const outstandingIcon: string;
|
|
80
81
|
export declare const deactivatedIcon: string;
|
|
81
82
|
export declare const topUpIcon: string;
|
|
82
83
|
export declare const deMaximizeIcon: string;
|
|
@@ -82,6 +82,7 @@ export const maximizeIcon = `${lightUrl}/maximize.svg`;
|
|
|
82
82
|
export const minimizeIcon = `${lightUrl}/minimize.svg`;
|
|
83
83
|
export const closeIcon = `${lightUrl}/close.svg`;
|
|
84
84
|
export const dashedCheckIcon = `${lightUrl}/dashedCheckIcon.svg`;
|
|
85
|
+
export const outstandingIcon = `${lightUrl}/outstandingIcon.svg`;
|
|
85
86
|
export const deactivatedIcon = `${lightUrl}/deactivatedIcon.svg`;
|
|
86
87
|
export const topUpIcon = `${lightUrl}/topup.svg`;
|
|
87
88
|
export const deMaximizeIcon = `${appBaseUrl}/demaximize.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.389-test.1",
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.389-test.1-test.2",
|
|
5
|
+
"testVersion": 2,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
import { type ChargeStatus } from '../../../TableCells';
|
|
3
|
-
interface SmallChargeStatusIconProps {
|
|
4
|
-
chargeStatus?: ChargeStatus;
|
|
5
|
-
chargeTooltip?: string;
|
|
6
|
-
errorCode?: string;
|
|
7
|
-
iconStyles?: CSSProperties;
|
|
8
|
-
iconWrapperStyles?: CSSProperties;
|
|
9
|
-
}
|
|
10
|
-
export declare function ChargeStatusIcon({ chargeStatus, chargeTooltip, errorCode, iconStyles, iconWrapperStyles }: Readonly<SmallChargeStatusIconProps>): import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Box from '@mui/material/Box';
|
|
3
|
-
import { useTranslation } from 'react-i18next';
|
|
4
|
-
import Tooltip from '../../../Tooltip';
|
|
5
|
-
import { statusIcons } from '../../../TableCells/CustomCells/StatusCell/constant';
|
|
6
|
-
import { StatusIcon } from '../../../TableCells/CustomCells/style';
|
|
7
|
-
import { ErrorChip, StatusIconWrapper } from './style';
|
|
8
|
-
export function ChargeStatusIcon({ chargeStatus, chargeTooltip, errorCode, iconStyles, iconWrapperStyles }) {
|
|
9
|
-
const { t } = useTranslation();
|
|
10
|
-
if (!chargeStatus)
|
|
11
|
-
return null;
|
|
12
|
-
const chargeIcon = statusIcons[chargeStatus] && (_jsx(StatusIconWrapper, Object.assign({ style: iconWrapperStyles }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", style: Object.assign({ width: '16px', height: '16px' }, iconStyles) }) })));
|
|
13
|
-
return (_jsx(Tooltip, Object.assign({ title: chargeTooltip !== null && chargeTooltip !== void 0 ? chargeTooltip : t(chargeStatus) }, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '6px', alignItems: 'center' } }, { children: [chargeIcon, errorCode && _jsx(ErrorChip, { children: errorCode })] })) })));
|
|
14
|
-
}
|