@tap-payments/os-micro-frontend-shared 0.1.90-test.22 → 0.1.90-test.26

package/build/components/StatusIcons/PayoutIcon/PayoutIcon.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { PayoutStatusType } from '../../TableCells';
+import { SelectionProps } from '../../../types/index.js';
 type PayoutIconProps = {
     iconStyles?: React.CSSProperties;
     payoutStatus?: PayoutStatusType;
     payoutTooltip?: React.ReactNode;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-export declare const PayoutIcon: ({ payoutStatus, isTextShown, payoutTooltip, iconStyles }: PayoutIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayoutIcon: ({ payoutStatus, isTextShown, payoutTooltip, iconStyles, isSheetViewShown, chipIndex, selectionProps, }: PayoutIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/PayoutIcon/PayoutIcon.js

@@ -5,8 +5,13 @@ import Tooltip from '../../Tooltip';
 import { StatusIcon } from '../../TableCells/CustomCells/style';
 import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
 import { payoutStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
-export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) => {
     const { t } = useTranslation();
-    const title = payoutTooltip ? payoutTooltip : t(camelCase(payoutStatus));
-    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_PayoutStatusLabel" }, { children: t(camelCase(payoutStatus)) }))) : (_jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon", "data-testid": "StatusCell_PayoutStatusIcon", style: iconStyles })) })));
+    const statusText = t(camelCase(payoutStatus));
+    const title = payoutTooltip ? payoutTooltip : statusText;
+    if (isSheetViewShown) {
+        return (_jsx(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: statusText, selectionProps: selectionProps }, { children: statusText })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_PayoutStatusLabel" }, { children: statusText }))) : (_jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon", "data-testid": "StatusCell_PayoutStatusIcon", style: iconStyles })) })));
 };

package/build/components/StatusIcons/RefundIcon/RefundIcon.d.ts

@@ -1,11 +1,15 @@
 /// <reference types="react" />
 import { type RefundStatusType } from '../../TableCells';
+import { SelectionProps } from '../../../types/index.js';
 type RefundIconProps = {
     iconStyles?: React.CSSProperties;
     refundStatus?: RefundStatusType;
     refundTooltip?: React.ReactNode;
     refundCount?: number;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-declare const RefundIcon: ({ isTextShown, refundStatus, refundTooltip, refundCount, iconStyles }: RefundIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const RefundIcon: ({ isTextShown, refundStatus, refundTooltip, refundCount, iconStyles, isSheetViewShown, chipIndex, selectionProps, }: RefundIconProps) => import("react/jsx-runtime").JSX.Element;
 export default RefundIcon;

package/build/components/StatusIcons/RefundIcon/RefundIcon.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
@@ -8,9 +8,15 @@ import { MultiRefundContainer, MultiRefundIcon, RefundsCountBadge } from '../../
 import { StatusIcon } from '../../TableCells/CustomCells/style';
 import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
 import { refundStatusIcons, refundStyles } from '../../TableCells/CustomCells/StatusCell/constant';
-const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '', refundCount, iconStyles }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '', refundCount, iconStyles, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) => {
     const { t } = useTranslation();
     const theme = useTheme();
+    const refundCountShown = (refundCount || 0) > 1;
+    const status = t(camelCase(refundStatus));
+    if (isSheetViewShown) {
+        return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, selectionProps: selectionProps, copyText: status }, { children: [status, " ", refundCountShown ? `${refundCount}x` : null] })));
+    }
     const refundCountBadge = (_jsxs(RefundsCountBadge, Object.assign({ "data-testid": "StatusCell_RefundsCountBadge", initial: { width: 0, opacity: 0, padding: '0px' }, transition: {
             animate: {
                 duration: 0.5,
@@ -31,8 +37,8 @@ const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '',
                 opacity: 1,
             },
         } }, { children: [refundCount, "x"] })));
-    const refundCountShown = (refundCount || 0) > 1;
-    return (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: _jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_RefundStatusLabel", sx: {
+    if (isTextShown) {
+        return (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: _jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_RefundStatusLabel", sx: {
                     color: refundStyles[refundStatus].color,
                     backgroundColor: refundStyles[refundStatus].backgroundColor,
                     width: '90px',
@@ -41,11 +47,13 @@ const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '',
                             boxShadow: theme.shadows[4],
                             gap: theme.spacing(0.5),
                         },
-                    } }, { children: [t(camelCase(refundStatus)), " ", refundCountShown ? refundCountBadge : null] })) })) }))) : (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: refundCountShown ? (_jsxs(MultiRefundContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", variants: {
-                    animate: {
-                        boxShadow: theme.shadows[4],
-                        gap: theme.spacing(0.5),
-                    },
-                } }, { children: [_jsx(MultiRefundIcon, { src: refundSettledIcon, alt: "multi-refunded-icon", "data-testid": "StatusCell_MultiRefundIcon" }), refundCountBadge] }))) : (_jsx(StatusIcon, { src: refundStatusIcons[refundStatus], alt: "refunded-icon", "data-testid": "StatusCell_RefundStatusIcon", style: iconStyles })) }))) }));
+                    } }, { children: [status, " ", refundCountShown ? refundCountBadge : null] })) })) })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: refundCountShown ? (_jsxs(MultiRefundContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", variants: {
+                animate: {
+                    boxShadow: theme.shadows[4],
+                    gap: theme.spacing(0.5),
+                },
+            } }, { children: [_jsx(MultiRefundIcon, { src: refundSettledIcon, alt: "multi-refunded-icon", "data-testid": "StatusCell_MultiRefundIcon" }), refundCountBadge] }))) : (_jsx(StatusIcon, { src: refundStatusIcons[refundStatus], alt: "refunded-icon", "data-testid": "StatusCell_RefundStatusIcon", style: iconStyles })) })));
 };
 export default RefundIcon;

package/package.json

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