@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/components/StatusIcons/AuthIcons/style.d.ts

@@ -3,11 +3,10 @@ export declare const StyledSourceCell: import("@emotion/styled").StyledComponent
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -15,20 +14,21 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -48,7 +48,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -64,7 +64,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -74,7 +74,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -270,11 +270,10 @@ export declare const BadgeTextWrapper: import("@emotion/styled").StyledComponent
 export declare const SourceIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -282,20 +281,21 @@ export declare const AuthCellContainer: import("@emotion/styled").StyledComponen
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -315,7 +315,7 @@ export declare const AuthCellContainer: import("@emotion/styled").StyledComponen
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -331,7 +331,7 @@ export declare const AuthCellContainer: import("@emotion/styled").StyledComponen
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -341,7 +341,7 @@ export declare const AuthCellContainer: import("@emotion/styled").StyledComponen
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

package/build/components/StatusIcons/AuthorizationAutoIcons/CaptureAutoIcon.d.ts

@@ -1,3 +1,3 @@
 import { BalanceCellProps } from './type';
-declare function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, }: BalanceCellProps): import("react/jsx-runtime").JSX.Element;
+declare function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, isSheetViewShown, selectionProps, }: BalanceCellProps): import("react/jsx-runtime").JSX.Element;
 export default CaptureAutoIcon;

package/build/components/StatusIcons/AuthorizationAutoIcons/CaptureAutoIcon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
@@ -8,10 +8,11 @@ import { CaptureTextLabel } from '../../TableCells/CustomCells/style';
 import Tooltip from '../../Tooltip';
 import { capturedAuthorizeIcon, capturedIcon } from '../../../constants/index.js';
 import { formatAmount, formatAmountWithCurrency } from '../../../utils/index.js';
+import StatusChipWithCopy from '../../StatusChipWithCopy';
 import { autoIcons } from './constant';
 import { AutoIconWrapper, BalanceCellContainer, PartialIcon, PercentageContainer, PiePercentage, AutoIconImage, FullyCapturedWrapper } from './style';
 import { formatPercentage } from './utils';
-function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, }) {
+function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, isSheetViewShown, selectionProps = {}, }) {
     var _a, _b;
     const isFullyUsed = Number(capturePercentage) + Number(voidPercentage) === 100 || remainingAmount <= 0;
     const theme = useTheme();
@@ -19,6 +20,17 @@ function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, auto
     const formattedAmount = formatAmount(remainingAmount || 0);
     const generateAutoTooltip = useCallback((type) => {
         return `Auto ${type} - ${currency} ${formattedAmount.integerAmount}.${formattedAmount.decimalAmount}`;
+        // if (!lastDate) return `Auto ${type}`
+        // const typeLabel = `Auto ${type} - Scheduled`
+        // const date = dayjs(lastDate).calendar(null, {
+        // 	sameDay: '[for Today at] h:mm A',
+        // 	nextDay: '[for Tomorrow at] h:mm A',
+        // 	lastDay: '[for Yesterday at] h:mm A',
+        // 	sameElse: '[for] MMM DD [at] h:mm A',
+        // 	lastWeek: '[for] MMM DD [at] h:mm A',
+        // 	nextWeek: '[for] MMM DD [at] h:mm A'
+        // })
+        // return `${typeLabel} ${date}`
     }, [currency, formattedAmount.decimalAmount, formattedAmount.integerAmount]);
     const generatePartialTooltip = useCallback((type) => {
         const amount = type === 'Capture' ? captureAmount : voidAmount;
@@ -54,7 +66,15 @@ function CaptureAutoIcon({ voidPercentage, capturePercentage, captureCount, auto
                         },
                     } }, { children: [_jsxs(PercentageContainer, Object.assign({ isCapture: true, percentage: capturePercentage }, { children: [capturePercentage, "% ", _jsx(PiePercentage, { isCapture: true, percentage: formatPercentage(capturePercentage) })] })), captureCount > 1 && (_jsxs(StyledBadge, Object.assign({ compact: true, variant: BadgeVariants.DARK }, { children: [captureCount, "x"] })))] }))] })) }))) : autoType === 'CAPTURED' && !isFullyUsed ? (_jsx(Tooltip, Object.assign({ title: generateAutoTooltip('Capture') }, { children: _jsx(AutoIconWrapper, { children: _jsx(AutoIconImage, { src: (_a = autoIcons.CAPTURED) === null || _a === void 0 ? void 0 : _a.icon, alt: "auto" }) }) }))) : (_jsx(Tooltip, Object.assign({ title: generateAutoTooltip('Capture') }, { children: _jsx(AutoIconWrapper, { children: _jsx(AutoIconImage, { src: (_b = autoIcons.CAPTURED) === null || _b === void 0 ? void 0 : _b.icon, alt: "auto" }) }) })));
     const captureStatus = capturePercentage === 100 ? (_jsx(Tooltip, Object.assign({ title: t('captured') }, { children: _jsx(FullyCapturedWrapper, { children: _jsx(AutoIconImage, { src: capturedIcon, alt: "captured" }) }) }))) : (autoCaptureStatus);
-    const captureContent = isTextShown && captureStatus ? _jsx(CaptureTextLabel, { children: t('captured') }) : captureStatus;
+    const captureContent = useMemo(() => {
+        if (isSheetViewShown && captureStatus) {
+            return (_jsx(StatusChipWithCopy, Object.assign({ chipIndex: 4, copyText: t('captured'), selectionProps: selectionProps }, { children: t('captured') })));
+        }
+        if (isTextShown && captureStatus) {
+            return _jsx(CaptureTextLabel, { children: t('captured') });
+        }
+        return captureStatus;
+    }, [isTextShown, captureStatus, isSheetViewShown, selectionProps]);
     return (captureContent && (_jsx("div", Object.assign({ style: {
             zIndex: 12,
         } }, { children: captureContent }))));

package/build/components/StatusIcons/AuthorizationAutoIcons/VoidAutoIcon.d.ts

@@ -1,3 +1,3 @@
 import { BalanceCellProps } from './type';
-declare function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, }: BalanceCellProps): import("react/jsx-runtime").JSX.Element | null;
+declare function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType, captureAmount, voidAmount, currency, isTextShown, isSheetViewShown, selectionProps, remainingAmount, }: BalanceCellProps): import("react/jsx-runtime").JSX.Element | null;
 export default VoidAutoIcon;

package/build/components/StatusIcons/AuthorizationAutoIcons/VoidAutoIcon.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import StyledBadge, { BadgeVariants } from '../../CountBadge';
 import { VoidTextLabel } from '../../TableCells/CustomCells/style';
+import StatusChipWithCopy from '../../StatusChipWithCopy';
 import Tooltip from '../../Tooltip';
 import { voidedIcon } from '../../../constants/index.js';
 import { formatAmount, formatAmountWithCurrency } from '../../../utils/index.js';
 import { autoIcons } from './constant';
 import { AutoIconWrapper, BalanceCellContainer, PercentageContainer, PiePercentage, AutoIconImage } from './style';
 import { formatPercentage } from './utils';
-function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType, captureAmount, voidAmount, currency, isTextShown, remainingAmount, }) {
+function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType, captureAmount, voidAmount, currency, isTextShown, isSheetViewShown, selectionProps = {}, remainingAmount, }) {
     var _a;
     const isFullyUsed = Number(capturePercentage) + Number(voidPercentage) === 100 || remainingAmount <= 0;
     const theme = useTheme();
@@ -19,6 +20,17 @@ function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType,
     const formattedAmount = formatAmount(remainingAmount || 0);
     const generateAutoTooltip = useCallback((type) => {
         return `Auto ${type} - ${currency} ${formattedAmount.integerAmount}.${formattedAmount.decimalAmount}`;
+        // if (!lastDate) return `Auto ${type}`
+        // const typeLabel = `Auto ${type} - Scheduled`
+        // const date = dayjs(lastDate).calendar(null, {
+        // 	sameDay: '[for Today at] h:mm A',
+        // 	nextDay: '[for Tomorrow at] h:mm A',
+        // 	lastDay: '[for Yesterday at] h:mm A',
+        // 	sameElse: '[for] MMM DD [at] h:mm A',
+        // 	lastWeek: '[for] MMM DD [at] h:mm A',
+        // 	nextWeek: '[for] MMM DD [at] h:mm A'
+        // })
+        // return `${typeLabel} ${date}`
     }, [currency, formattedAmount.decimalAmount, formattedAmount.integerAmount]);
     const generatePartialTooltip = useCallback((type) => {
         const amount = type === 'Capture' ? captureAmount : voidAmount;
@@ -59,7 +71,15 @@ function VoidAutoIcon({ voidPercentage, capturePercentage, voidCount, autoType,
                         },
                     } }, { children: _jsxs(StyledBadge, Object.assign({ compact: true, variant: BadgeVariants.NEUTRAL }, { children: [voidCount, "x"] })) })))] })) }))) : autoType === 'VOID' && !isFullyUsed ? (_jsx(Tooltip, Object.assign({ title: generateAutoTooltip('Void') }, { children: _jsx(AutoIconWrapper, { children: _jsx(AutoIconImage, { src: (_a = autoIcons.VOID) === null || _a === void 0 ? void 0 : _a.icon, alt: "auto" }) }) }))) : null;
     const voidStatus = voidPercentage === 100 ? (_jsx(Tooltip, Object.assign({ title: t('void') }, { children: _jsx(AutoIconWrapper, { children: _jsx(AutoIconImage, { src: voidedIcon, alt: "void" }) }) }))) : (autoVoidStatus);
-    const voidContent = isTextShown && voidStatus ? _jsx(VoidTextLabel, { children: t('void') }) : voidStatus;
-    return voidContent ? _jsx("div", Object.assign({ style: { zIndex: 11 } }, { children: voidContent })) : null;
+    const voidContent = useMemo(() => {
+        if (isSheetViewShown && voidStatus) {
+            return (_jsx(StatusChipWithCopy, Object.assign({ chipIndex: 5, copyText: t('void'), selectionProps: selectionProps }, { children: t('void') })));
+        }
+        if (isTextShown && voidStatus) {
+            return _jsx(VoidTextLabel, { children: t('void') });
+        }
+        return voidStatus;
+    }, [isTextShown, voidStatus, isSheetViewShown, selectionProps]);
+    return voidContent ? _jsx("div", Object.assign({ style: Object.assign({}, (!isSheetViewShown && { zIndex: 11 })) }, { children: voidContent })) : null;
 }
 export default VoidAutoIcon;

package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -13,20 +12,21 @@ export declare const BalanceCellContainer: import("@emotion/styled").StyledCompo
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -46,7 +46,7 @@ export declare const BalanceCellContainer: import("@emotion/styled").StyledCompo
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -62,7 +62,7 @@ export declare const BalanceCellContainer: import("@emotion/styled").StyledCompo
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -72,7 +72,7 @@ export declare const BalanceCellContainer: import("@emotion/styled").StyledCompo
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

package/build/components/StatusIcons/AuthorizationAutoIcons/style.js

@@ -33,7 +33,7 @@ export const PercentageContainer = styled('div')(({ theme, percentage, isCapture
     gap: theme.spacing(0.5),
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

package/build/components/StatusIcons/AuthorizationAutoIcons/type.d.ts

@@ -1,4 +1,5 @@
 import { TableCellProps } from '@mui/material';
+import { SelectionProps } from '../../../types/index.js';
 export interface BalanceCellProps extends TableCellProps {
     autoType?: 'VOID' | 'CAPTURED';
     capturePercentage: number;
@@ -11,4 +12,6 @@ export interface BalanceCellProps extends TableCellProps {
     voidCount: number;
     isTextShown?: boolean;
     remainingAmount: number;
+    isSheetViewShown?: boolean;
+    selectionProps?: SelectionProps;
 }

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

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { type AuthorizedStatusType } from '../../TableCells';
-import { TableMode } from '../../../types/index.js';
+import { SelectionProps, TableMode } from '../../../types/index.js';
 type AuthorizedIconProps = {
     iconStyles?: React.CSSProperties;
     authorizedStatus?: AuthorizedStatusType;
     isTextShown?: boolean;
     tableMode?: TableMode;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-export declare const AuthorizedIcon: ({ authorizedStatus, isTextShown, iconStyles, tableMode }: AuthorizedIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthorizedIcon: ({ authorizedStatus, isTextShown, iconStyles, tableMode, chipIndex, selectionProps }: AuthorizedIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/AuthorizedIcon/AuthorizedIcon.js

@@ -6,10 +6,15 @@ import Tooltip from '../../Tooltip';
 import { authorizedStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import Icon from '../../Icon';
 import { TextLabel } from '../../TableCells/CustomCells/style';
-export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode, chipIndex = 0, selectionProps = {} }) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (_jsx(Tooltip, Object.assign({ title: tableMode === 'sheet' ? '' : t(camelCase(authorizedStatus)) }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: Object.assign({ color: theme.palette.info.dark }, (tableMode === 'sheet' && {
-                height: '18px',
-            })) }, { children: t(camelCase(authorizedStatus)) }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
+    const status = t(camelCase(authorizedStatus));
+    if (tableMode === 'sheet') {
+        return (_jsx(StatusChipWithCopy, Object.assign({ copyText: status, chipIndex: chipIndex, selectionProps: selectionProps }, { children: status })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: status }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: {
+                color: theme.palette.info.dark,
+            } }, { children: status }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
 };

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

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
+import { SelectionProps } from '../../../types/index.js';
 import { type ChargeStatus } from '../../TableCells';
-export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, }: Readonly<{
+export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, isSheetViewShown, selectionProps, chipIndex, }: Readonly<{
     chargeStatus?: ChargeStatus;
     gatewayTooltip?: string;
     showAuthorizedStatus?: boolean;
@@ -17,4 +18,7 @@ export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquire
     gatewayContainerStyles?: CSSProperties;
     gateWayIconStyles?: CSSProperties;
     showBadge?: boolean;
+    isSheetViewShown?: boolean;
+    selectionProps?: SelectionProps;
+    chipIndex?: number;
 }>): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.js

@@ -4,10 +4,11 @@ import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
 import { unCapturedStatuses } from '../../../constants/index.js';
-import { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
+import StatusChipWithCopy from '../../StatusChipWithCopy';
 import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import { StatusIcon, StatusIconWrapper, TextLabel } from '../../TableCells/CustomCells/style';
-export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, }) {
+import { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
+export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, isSheetViewShown = false, selectionProps = {}, chipIndex = 0, }) {
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const captureStatusStyle = chargeStatus ? capturedStatusesStyles[chargeStatus] : null;
     const theme = useTheme();
@@ -16,6 +17,9 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
     const acquirerTooltipTitle = acquirerTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Acquirer" }), _jsx("div", { children: acquirerTooltip })] }));
     const gatewayTooltipTitle = gatewayTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Gateway" }), _jsx("div", { children: gatewayTooltip })] }));
     const chargeIcon = chargeStatus && statusIcons[chargeStatus] && (_jsx("div", Object.assign({ "data-testid": "ChargeStatusIcon_ChargeIcon", style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '16px', height: '16px', borderRadius: unCapturedStatusStyle ? '50%' : '' }, iconWrapperStyles) }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", "data-testid": "ChargeStatusIcon_StatusIcon", style: Object.assign({ borderRadius: unCapturedStatusStyle ? '50%' : '', width: '16px', height: '16px' }, iconStyles) }) })));
+    if (isSheetViewShown) {
+        return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: chipIndex, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
+    }
     if (isTextShown) {
         return (_jsxs(TextViewWrapper, { children: [_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle }, { children: _jsxs(StatusTextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(chargeStatus), sx: {
                             background: (unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background) || (captureStatusStyle === null || captureStatusStyle === void 0 ? void 0 : captureStatusStyle.background) || 'transparent',
@@ -34,21 +38,21 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
                 border: '1px solid #F2F2F2',
                 borderRadius: '12px',
                 backgroundColor: '#fff',
-            })), unCapturedStyles) }, { children: [_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsxs(UnCapturedBadge, Object.assign({ "data-testid": "ChargeStatusIcon_UnCapturedBadge", sx: {
-                            borderRadius: '56px',
-                        }, initial: {
-                            background: 'transparent',
-                        }, variants: {
-                            animate: {
-                                background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background,
-                            },
-                        } }, { children: [chargeIcon, _jsx(ErrorCodeWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_ErrorCodeWrapper", transition: {
-                                    animate: {
-                                        duration: 0.05,
-                                    },
-                                }, variants: ErrorCodeLabelAnimationVariants, style: Object.assign({}, (errorCode && {
-                                    padding: '0 !important',
-                                })) }, { children: _jsx(ErrorCodeLabel, Object.assign({ "data-testid": "ChargeStatusIcon_ErrorCodeLabel", sx: {
-                                        background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.color,
-                                    }, transition: errorCodeLabelAnimation, variants: ErrorCodeVariants, initial: { opacity: 0 } }, { children: errorCode })) }))] })) })), _jsx(GatewaysContainer, Object.assign({ "data-testid": "ChargeStatusIcon_GatewaysContainer", transition: GatewayIconWrapperAnimationTransition, variants: GatewaysContainerAnimationVariants, style: gatewayContainerStyles, isVisible: !!gatewayTooltipTitle }, { children: gatewayTooltipTitle && (_jsx(Tooltip, Object.assign({ title: gatewayTooltipTitle }, { children: _jsx(GatewayIconWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_GatewayIconWrapper", style: Object.assign({ background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background }, gatewayIconWrapperStyles) }, { children: _jsx(GateWayIcon, { src: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.gatewayIcon, alt: "gateway-icon", "data-testid": "ChargeStatusIcon_GatewayIcon", style: gateWayIconStyles }) })) }))) })), _jsx(GatewaysContainer, Object.assign({ "data-testid": "ChargeStatusIcon_GatewaysContainer", transition: GatewayIconWrapperAnimationTransition, variants: AcquirerContainerAnimationVariants, style: gatewayContainerStyles, isVisible: !!acquirerTooltipTitle }, { children: acquirerTooltipTitle && (_jsx(Tooltip, Object.assign({ title: acquirerTooltipTitle }, { children: _jsx(GatewayIconWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_AcquirerIconWrapper", style: Object.assign({ background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background }, gatewayIconWrapperStyles) }, { children: _jsx(GateWayIcon, { src: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.acquirerIcon, alt: "acquirer-icon", "data-testid": "ChargeStatusIcon_AcquirerIcon", style: gateWayIconStyles }) })) }))) }))] }))) : (_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsx(StatusIconWrapper, { children: chargeIcon }) }))) })));
+            })), unCapturedStyles) }, { children: [_jsx(UnCapturedBadge, Object.assign({ "data-testid": "ChargeStatusIcon_UnCapturedBadge", sx: {
+                        borderRadius: '56px',
+                    }, initial: {
+                        background: 'transparent',
+                    }, variants: {
+                        animate: {
+                            background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background,
+                        },
+                    } }, { children: _jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsxs(_Fragment, { children: [chargeIcon, _jsx(ErrorCodeWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_ErrorCodeWrapper", transition: {
+                                        animate: {
+                                            duration: 0.05,
+                                        },
+                                    }, variants: ErrorCodeLabelAnimationVariants, style: Object.assign({}, (errorCode && {
+                                        padding: '0 !important',
+                                    })) }, { children: _jsx(ErrorCodeLabel, Object.assign({ "data-testid": "ChargeStatusIcon_ErrorCodeLabel", sx: {
+                                            background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.color,
+                                        }, transition: errorCodeLabelAnimation, variants: ErrorCodeVariants, initial: { opacity: 0 } }, { children: errorCode })) }))] }) })) })), _jsx(GatewaysContainer, Object.assign({ "data-testid": "ChargeStatusIcon_GatewaysContainer", transition: GatewayIconWrapperAnimationTransition, variants: GatewaysContainerAnimationVariants, style: gatewayContainerStyles, isVisible: !!gatewayTooltipTitle }, { children: gatewayTooltipTitle && (_jsx(Tooltip, Object.assign({ title: gatewayTooltipTitle }, { children: _jsx(GatewayIconWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_GatewayIconWrapper", style: Object.assign({ background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background }, gatewayIconWrapperStyles) }, { children: _jsx(GateWayIcon, { src: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.gatewayIcon, alt: "gateway-icon", "data-testid": "ChargeStatusIcon_GatewayIcon", style: gateWayIconStyles }) })) }))) })), _jsx(GatewaysContainer, Object.assign({ "data-testid": "ChargeStatusIcon_GatewaysContainer", transition: GatewayIconWrapperAnimationTransition, variants: AcquirerContainerAnimationVariants, style: gatewayContainerStyles, isVisible: !!acquirerTooltipTitle }, { children: acquirerTooltipTitle && (_jsx(Tooltip, Object.assign({ title: acquirerTooltipTitle }, { children: _jsx(GatewayIconWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_AcquirerIconWrapper", style: Object.assign({ background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background }, gatewayIconWrapperStyles) }, { children: _jsx(GateWayIcon, { src: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.acquirerIcon, alt: "acquirer-icon", "data-testid": "ChargeStatusIcon_AcquirerIcon", style: gateWayIconStyles }) })) }))) }))] }))) : (_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsx(StatusIconWrapper, { children: chargeIcon }) }))) })));
 }