@tap-payments/os-micro-frontend-shared 0.1.401-test.2 → 0.1.402-test.2

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

@@ -11,16 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { TableCell } from '../../../TableCells';
-import Tooltip from '../../../Tooltip';
-import { RightLeftExpandingCenterChip } from '../../../RightLeftExpandingCenterChip';
-import { DateIcon } from './style';
-import { buildDueMeta, buildExpiryMeta } from './utils';
+import dayjs from 'dayjs';
+import { TableCell, Tooltip, RightLeftExpandingCenterChip } from '../../../index.js';
+import { formatDate } from './utils';
+import { TextLabel } from './style';
 function DueDateCell(_a) {
     var { dueDate, expiryDate } = _a, props = __rest(_a, ["dueDate", "expiryDate"]);
-    const dueMeta = useMemo(() => buildDueMeta(dueDate), [dueDate]);
-    const expiryMeta = useMemo(() => buildExpiryMeta(expiryDate), [expiryDate]);
-    const renderIcon = (meta) => (_jsx(Tooltip, Object.assign({ title: meta.label }, { children: _jsx(DateIcon, { src: meta.icon, alt: "icon" }) })));
+    const dueMeta = useMemo(() => ({ label: formatDate(dayjs(dueDate).valueOf()), tooltip: 'Due Date' }), [dueDate]);
+    const expiryMeta = useMemo(() => ({ label: formatDate(dayjs(expiryDate).valueOf()), tooltip: 'Expiry Date' }), [expiryDate]);
+    const renderIcon = (meta) => (_jsx(Tooltip, Object.assign({ title: meta.tooltip }, { children: _jsx(TextLabel, { children: meta.label }) })));
     const centerIcon = useMemo(() => (dueMeta ? renderIcon(dueMeta) : expiryMeta ? renderIcon(expiryMeta) : null), [dueMeta, expiryMeta]);
     const rightIcons = useMemo(() => (expiryMeta && dueMeta ? [renderIcon(expiryMeta)] : []), [dueMeta, expiryMeta]);
     if (!dueMeta && !expiryMeta)

package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts

@@ -266,3 +266,8 @@ export declare const DueDateCellContainer: import("@emotion/styled").StyledCompo
 export declare const DateIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReminderTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ExpiredTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextLabel: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/TableCells/CustomCells/DueDateCell/style.js

@@ -1,3 +1,4 @@
+import Text from '../../../Text';
 import { styled } from '@mui/material';
 import { motion } from 'framer-motion';
 export const DueDateCellContainer = styled(motion.div)(({ theme, background }) => ({
@@ -34,3 +35,9 @@ export const ExpiredTextLabel = styled('div')(({ theme }) => ({
     padding: '2px 0',
     color: theme.palette.error.main,
 }));
+export const TextLabel = styled(Text)(({ theme }) => ({
+    fontSize: '11px',
+    fontWeight: 500,
+    color: '#000',
+    cursor: 'default',
+}));

package/build/components/TableCells/CustomCells/InvoiceStatusCell/ChargeStatusIcon.js

@@ -1,15 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
+import camelCase from 'lodash/camelCase';
 import Tooltip from '../../../Tooltip';
 import { statusIcons, unCapturedStatusesStyles } from '../../../TableCells/CustomCells/StatusCell/constant';
 import { StatusIcon } from '../../../TableCells/CustomCells/style';
+import { unCapturedStatuses } from '../../../../constants/index.js';
 import { ErrorChip, StatusIconWrapper } from './style';
 export function ChargeStatusIcon({ chargeStatus, chargeTooltip, errorCode, iconStyles, iconWrapperStyles }) {
     const { t } = useTranslation();
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const chargeIcon = chargeStatus && 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) }) })));
+    const chargeTooltipTitle = chargeTooltip && (_jsx(_Fragment, { children: _jsx("div", { children: chargeTooltip }) }));
     if (!chargeStatus)
         return null;
-    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, Object.assign({ style: { background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.color } }, { children: errorCode }))] })) })));
+    return (_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '6px', alignItems: 'center' } }, { children: [chargeIcon, !!(unCapturedStatuses === null || unCapturedStatuses === void 0 ? void 0 : unCapturedStatuses.includes(chargeStatus || '')) && _jsx(ErrorChip, Object.assign({ style: { background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.color } }, { children: errorCode }))] })) })));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.401-test.2",
+  "version": "0.1.402-test.2",
   "testVersion": 2,
   "type": "module",
   "main": "build/index.js",