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

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

@@ -267,3 +267,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/constants/assets.d.ts

@@ -66,6 +66,9 @@ export declare const desktopIcon: string;
 export declare const mobileIcon: string;
 export declare const tabletIcon: string;
 export declare const invoiceIcon: string;
+export declare const cancelledInvoiceIcon: string;
+export declare const expiredInvoiceIcon: string;
+export declare const invoiceNumberIcon: string;
 export declare const columnIcon: string;
 export declare const sortAzIcon: string;
 export declare const sortZaIcon: string;

package/build/constants/assets.js

@@ -71,6 +71,9 @@ export const desktopIcon = `${lightUrl}/desktop.svg`;
 export const mobileIcon = `${lightUrl}/mobile.svg`;
 export const tabletIcon = `${lightUrl}/tablet.svg`;
 export const invoiceIcon = `${lightUrl}/invoice.svg`;
+export const cancelledInvoiceIcon = `${lightUrl}/cancelledInvoiceIcon.svg`;
+export const expiredInvoiceIcon = `${lightUrl}/expiredInvoiceIcon.svg`;
+export const invoiceNumberIcon = `${lightUrl}/invoiceNumberIcon.svg`;
 export const columnIcon = `${lightUrl}/column.svg`;
 export const sortAzIcon = `${lightUrl}/sortAz.svg`;
 export const sortZaIcon = `${lightUrl}/sortZa.svg`;

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",
+  "version": "0.1.402",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",