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

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

@@ -0,0 +1,18 @@
+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: 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/build/components/TableCells/CustomCells/InvoiceStatusCell/InvoiceStatusCell.d.ts

@@ -1,2 +1,2 @@
-import { DueCellProps } from './type';
-export default function InvoiceStatusCell({ status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, isTextShown, ...props }: DueCellProps): import("react/jsx-runtime").JSX.Element;
+import { InvoiceStatusCellProps } from './type';
+export default function InvoiceStatusCell({ status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, remindedCount, ...props }: InvoiceStatusCellProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -9,81 +9,61 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
-import { motion } from 'framer-motion';
-import camelCase from 'lodash/camelCase';
-import capitalize from 'lodash/capitalize';
+import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import StyledBadge, { BadgeVariants } from '../../../CountBadge';
 import Tooltip from '../../../Tooltip';
 import { TableCell } from '../../../TableCells';
 import { formatDate } from '../../../TableCells/CustomCells/DueDateCell/utils';
 import { chargeStatusIcons } from '../../../TableCells/CustomCells/AuthenticationStatusCell/constant';
-import { ChargeStatusIcon } from '../../../StatusIcons';
+import { remindedRedIcon } from '../../../../constants/index.js';
+import { RightLeftExpandingCenterChip } from '../../../RightLeftExpandingCenterChip';
 import { statusIcons } from './constant';
-import { DueDateCellContainer, DateIcon, StatusTextLabel } from './style';
+import { DateIcon } from './style';
 import { invoiceStatusStyles } from './utils';
-import { StatusIconWrapper } from '../style';
+import { ChargeStatusIcon } from './ChargeStatusIcon';
+import { useMemo } from 'react';
 export default function InvoiceStatusCell(_a) {
-    var { status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, isTextShown } = _a, props = __rest(_a, ["status", "date", "viewsCount", "chargeStatus", "errorCode", "chargeTooltip", "isTextShown"]);
-    const theme = useTheme();
+    var { status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, remindedCount = 0 } = _a, props = __rest(_a, ["status", "date", "viewsCount", "chargeStatus", "errorCode", "chargeTooltip", "remindedCount"]);
     const { t } = useTranslation();
+    const theme = useTheme();
     const icon = status ? statusIcons[status] : null;
     const statusStyles = invoiceStatusStyles(status);
-    const showExpansion = viewsCount !== 0 && !!viewsCount && status === 'VIEWED';
     const statusTooltip = `${t((status === null || status === void 0 ? void 0 : status.toLowerCase()) || '')} ${formatDate(dayjs(date).valueOf())}`;
+    const statusIcon = useMemo(() => _jsx(ChargeStatusIcon, { chargeStatus: chargeStatus, errorCode: errorCode, chargeTooltip: chargeTooltip }), [chargeStatus, errorCode, chargeTooltip]);
+    const remindedIcon = useMemo(() => (_jsx(Tooltip, Object.assign({ title: t('reminded') }, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px' } }, { children: [_jsx(DateIcon, { sx: {
+                        width: '14px',
+                        height: '14px',
+                    }, src: remindedRedIcon, alt: "icon" }), _jsx(StyledBadge, Object.assign({ variant: BadgeVariants.DEFAULT, style: {
+                        background: theme.palette.error.main,
+                        fontWeight: 600,
+                        color: theme.palette.common.white,
+                    } }, { children: remindedCount }))] })) }))), [remindedCount]);
+    const centerIcon = useMemo(() => {
+        if (icon) {
+            return (_jsx(Tooltip, Object.assign({ title: t(statusTooltip || '') }, { children: _jsx(DateIcon, { src: icon, alt: "status icon" }) })));
+        }
+        if (chargeStatus && chargeStatusIcons[chargeStatus])
+            return statusIcon;
+        if (remindedCount)
+            return remindedIcon;
+        return undefined;
+    }, [icon, chargeStatus, remindedCount]);
+    if (!status && !chargeStatus && !remindedCount)
+        return null;
     return (_jsx(TableCell, Object.assign({}, props, { sx: {
             position: 'relative',
             overflow: 'visible',
-        } }, { children: _jsxs("div", Object.assign({ style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                gap: '8px',
-                overflow: 'visible',
-            } }, { 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 && {
-                            border: `1px solid ${statusStyles.color}1A`,
-                        })), variants: {
-                            animate: Object.assign({}, (showExpansion && {
-                                boxShadow: theme.shadows[4],
-                            })),
-                        }, background: statusStyles.background }, { children: (icon || (isTextShown && status)) && (_jsxs(_Fragment, { children: [isTextShown ? (_jsx(StatusTextLabel, Object.assign({ sx: {
-                                        color: statusStyles.color,
-                                    } }, { children: capitalize(status) }))) : (icon && _jsx(DateIcon, { src: icon, alt: "icon" })), _jsx(motion.div, Object.assign({ style: {
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        gap: '4px',
-                                        display: 'none',
-                                        width: 0,
-                                    }, initial: { width: 0, opacity: 0 }, transition: {
-                                        animate: {
-                                            duration: 0.5,
-                                        },
-                                        fadeIn: {
-                                            duration: 0.2,
-                                        },
-                                    }, variants: {
-                                        animate: {
-                                            width: 'auto',
-                                            display: 'flex',
-                                        },
-                                        fadeIn: {
-                                            transition: {
-                                                delay: 0.5,
-                                            },
-                                            opacity: 1,
-                                        },
-                                    } }, { children: showExpansion && (_jsx(StyledBadge, Object.assign({ variant: BadgeVariants.DEFAULT, style: {
-                                            color: '#fff',
-                                            backgroundColor: statusStyles.color,
-                                        } }, { children: viewsCount }))) }))] })) })) })), _jsx(StatusIconWrapper, Object.assign({ sx: {
-                        position: 'absolute',
-                        left: isTextShown ? '88px' : '32px',
-                        width: isTextShown ? '65px' : '24px',
-                    } }, { children: chargeStatus && chargeStatusIcons[chargeStatus] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(chargeStatus)) }, { children: isTextShown ? (_jsx(StatusTextLabel, Object.assign({ sx: {
-                                color: invoiceStatusStyles('VIEWED').color,
-                                backgroundColor: `${invoiceStatusStyles('VIEWED').color}0d`,
-                            } }, { children: capitalize(chargeStatus) }))) : (_jsx(ChargeStatusIcon, { chargeStatus: chargeStatus, errorCode: errorCode, chargeTooltip: chargeTooltip })) }))) }))] })) })));
+        } }, { children: _jsx(RightLeftExpandingCenterChip, { sx: { justifyContent: 'flex-start' }, expandableCenterRight: !!viewsCount && status === 'VIEWED' && icon
+                ? [
+                    _jsx(StyledBadge, Object.assign({ variant: BadgeVariants.DEFAULT, style: {
+                            marginRight: '8px',
+                            color: '#fff',
+                            backgroundColor: statusStyles.color,
+                        } }, { children: viewsCount })),
+                ]
+                : undefined, centerIcon: centerIcon, leftIcons: !!remindedCount && icon ? [remindedIcon] : undefined, rightIcons: chargeStatus && chargeStatusIcons[chargeStatus] && icon ? [statusIcon] : undefined }) })));
 }

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

@@ -1,11 +1,11 @@
-import { deletedStatusIcon, draftStatusIcon, createdStatusIcon, cancelledStatusIcon, expiredStatusIcon, paidStatusIcon, refundedStatusIcon, deliveredStatusIcon, viewedStatusIcon, savedStatusIcon, scheduledStatusIcon, pendingStatusIcon, } from '../../../../constants/index.js';
+import { deletedStatusIcon, draftStatusIcon, createdStatusIcon, paidStatusIcon, refundedStatusIcon, deliveredStatusIcon, viewedStatusIcon, savedStatusIcon, scheduledStatusIcon, pendingStatusIcon, cancelledInvoiceIcon, expiredInvoiceIcon, } from '../../../../constants/index.js';
 export const statusIcons = {
     DELETED: deletedStatusIcon,
     DRAFT: draftStatusIcon,
     CREATED: createdStatusIcon,
-    CANCELLED: cancelledStatusIcon,
-    CANCELED: cancelledStatusIcon,
-    EXPIRED: expiredStatusIcon,
+    CANCELLED: cancelledInvoiceIcon,
+    CANCELED: cancelledInvoiceIcon,
+    EXPIRED: expiredInvoiceIcon,
     PAID: paidStatusIcon,
     REFUNDED: refundedStatusIcon,
     DELIVERED: deliveredStatusIcon,

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

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 export declare const DueDateCellContainer: 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 DueDateCellContainer: 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 DueDateCellContainer: 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 DueDateCellContainer: 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 DueDateCellContainer: 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;
@@ -265,3 +265,5 @@ 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 StatusTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ErrorChip: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StatusIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -30,3 +30,21 @@ export const StatusTextLabel = styled('div')(() => ({
     padding: '4.5px 8px',
     borderRadius: '24px',
 }));
+export const ErrorChip = styled('div')(({ theme }) => ({
+    color: theme.palette.common.white,
+    background: theme.palette.error.main,
+    fontSize: '0.6rem',
+    fontWeight: 600,
+    borderRadius: '16px',
+    padding: '2px 8px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const StatusIconWrapper = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '16px',
+    height: '16px',
+}));

package/build/components/TableCells/CustomCells/InvoiceStatusCell/type.d.ts

@@ -2,7 +2,7 @@ import { TableCellProps } from '@mui/material/TableCell';
 import { statusIcons } from './constant';
 import { ChargeStatus } from '../type';
 export type StatusIconType = keyof typeof statusIcons;
-export interface DueCellProps extends TableCellProps {
+export interface InvoiceStatusCellProps extends TableCellProps {
     status?: StatusIconType;
     date: Date | '';
     viewsCount?: number;
@@ -12,4 +12,5 @@ export interface DueCellProps extends TableCellProps {
     gatewayTooltip?: string;
     errorCode?: string;
     isTextShown?: boolean;
+    remindedCount?: number;
 }

package/build/components/TableCells/CustomCells/LeadStatusCell/constant.d.ts

@@ -4,4 +4,5 @@ export declare const statusIcons: {
     closed: string;
     expired: string;
     ready: string;
+    registered: string;
 };

package/build/components/TableCells/CustomCells/LeadStatusCell/constant.js

@@ -5,4 +5,5 @@ export const statusIcons = {
     closed: closedLeadStatusIcon,
     expired: expiredLeadStatusIcon,
     ready: readyLeadStatusIcon,
+    registered: completedLeadStatusIcon,
 };

package/build/components/TableCells/CustomCells/LinkCell/LinkCell.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface LinkCellProps {
+    url: string;
+}
+declare function LinkCell({ url }: LinkCellProps): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<typeof LinkCell>;
+export default _default;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Icon } from '../../../index.js';
+import { gadientLink } from '../../../../constants/index.js';
+import { copyText } from '../../../../utils/index.js';
+import { Chip } from './style';
+import { useToast } from '../../../../hooks/index.js';
+function LinkCell({ url }) {
+    const toast = useToast();
+    const onClick = () => {
+        try {
+            copyText(url);
+            toast.success('Copied!');
+        }
+        catch (_a) {
+            toast.error('Failed to copy');
+        }
+    };
+    if (!url)
+        return null;
+    return (_jsx(Chip, Object.assign({ onClick: onClick }, { children: _jsx(Icon, { src: gadientLink, alt: "link" }) })));
+}
+export default memo(LinkCell);

package/build/components/TableCells/CustomCells/LinkCell/index.d.ts

@@ -0,0 +1 @@
+export { default as LinkCell } from './LinkCell';

package/build/components/TableCells/CustomCells/LinkCell/index.js

@@ -0,0 +1 @@
+export { default as LinkCell } from './LinkCell';

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Chip: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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

@@ -0,0 +1,12 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Chip = styled(Box)(({ theme }) => ({
+    width: 43,
+    height: 24,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '24px',
+    border: `1px solid ${theme.palette.divider}`,
+    cursor: 'pointer',
+}));

package/build/components/TableCells/CustomCells/MarketPlaceCell/MarketPlaceCell.d.ts

@@ -1,2 +1,2 @@
 import { MarketPlaceCellProps } from './type';
-export default function MarketPlaceCell({ marketPlaceIcon, marketPlaceName, isTextShown, ...props }: MarketPlaceCellProps): import("react/jsx-runtime").JSX.Element;
+export default function MarketPlaceCell({ marketPlaceIcon, marketPlaceName, ...props }: MarketPlaceCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,21 +9,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import Tooltip from '../../../Tooltip';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import TableCell from '../../TableCell';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { marketPlaceBlueIcon } from '../../../../constants/index.js';
-import { TextLabel } from '../style';
 export default function MarketPlaceCell(_a) {
-    var { marketPlaceIcon, marketPlaceName, isTextShown } = _a, props = __rest(_a, ["marketPlaceIcon", "marketPlaceName", "isTextShown"]);
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: marketPlaceName }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: isTextShown ? (_jsx(TextLabel, { children: marketPlaceName })) : (_jsx(Box, Object.assign({ sx: {
-                        width: '24px',
-                        height: '24px',
-                        border: '1px solid #F2F2F2',
-                        borderRadius: '50%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    } }, { children: _jsx("img", { src: marketPlaceIcon || marketPlaceBlueIcon, alt: "marketplace", style: { maxWidth: '18px', maxHeight: '18px', objectFit: 'cover' } }) }))) })) })) })));
+    var { marketPlaceIcon, marketPlaceName } = _a, props = __rest(_a, ["marketPlaceIcon", "marketPlaceName"]);
+    const logo = marketPlaceIcon !== null && marketPlaceIcon !== void 0 ? marketPlaceIcon : (_jsx("img", { src: marketPlaceBlueIcon, alt: "marketplace", style: { maxWidth: '18px', maxHeight: '18px', objectFit: 'cover' } }));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: marketPlaceName && (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ sx: {
+                            width: '24px',
+                            height: '24px',
+                            border: '1px solid #F2F2F2',
+                            borderRadius: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        } }, { children: logo })), _jsx(Typography, Object.assign({ sx: { fontSize: '14px', fontWeight: 400 } }, { children: marketPlaceName }))] })) })) })));
 }

package/build/components/TableCells/CustomCells/MarketPlaceCell/type.d.ts

@@ -1,6 +1,6 @@
 import { TableCellProps } from '@mui/material';
+import React from 'react';
 export type MarketPlaceCellProps = TableCellProps & {
-    marketPlaceIcon?: string;
+    marketPlaceIcon?: React.ReactNode;
     marketPlaceName?: string;
-    isTextShown?: boolean;
 };

package/build/components/TableCells/CustomCells/OrderCell/OrderCell.d.ts

@@ -1,3 +1,3 @@
 import { OrderCellProps } from '../type';
-declare function OrderCell({ value, label, items, tableMode, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
+declare function OrderCell({ value, label, items, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
 export default OrderCell;

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

@@ -14,7 +14,7 @@ import { TableCell } from '../../../TableCells';
 import Tooltip from '../../../Tooltip';
 import { MAX_TOOLTIP_ITEM_LENGTH } from './constant';
 function OrderCell(_a) {
-    var { value, label, items, tableMode } = _a, props = __rest(_a, ["value", "label", "items", "tableMode"]);
+    var { value, label, items } = _a, props = __rest(_a, ["value", "label", "items"]);
     const orderDiscriminator = Number.isInteger(value) && Number(value) > 1 && label.charAt(label.length - 1) !== 's' ? `${label}s` : label;
     const orderLabel = `${value} ${orderDiscriminator}`;
     const orderTooltip = (_jsx(_Fragment, { children: items === null || items === void 0 ? void 0 : items.map((item) => {
@@ -22,9 +22,6 @@ function OrderCell(_a) {
             const truncatedItemContent = ((itemContent === null || itemContent === void 0 ? void 0 : itemContent.length) || 0) > MAX_TOOLTIP_ITEM_LENGTH ? `${itemContent === null || itemContent === void 0 ? void 0 : itemContent.slice(0, MAX_TOOLTIP_ITEM_LENGTH)}...` : itemContent;
             return _jsx("div", { children: truncatedItemContent }, item.id);
         }) }));
-    if (tableMode === 'sheet') {
-        return (_jsx(TableCell, Object.assign({ sx: { fontSize: '11px' } }, props, { children: orderLabel })));
-    }
     return (_jsx(Tooltip, Object.assign({ title: (items || []).length > 1 ? orderTooltip : undefined }, { children: _jsx(TableCell, Object.assign({}, props, { children: _jsx("span", { children: orderLabel }) })) })));
 }
 export default OrderCell;

package/build/components/TableCells/CustomCells/OrderCell/OrderCellSheet.d.ts

@@ -0,0 +1,3 @@
+import { OrderCellProps } from '../type';
+declare function OrderCellSheet({ value, label, items, ...props }: OrderCellProps): import("react/jsx-runtime").JSX.Element;
+export default OrderCellSheet;

package/build/components/TableCells/CustomCells/OrderCell/OrderCellSheet.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableCell } from '../../../TableCells';
+function OrderCellSheet(_a) {
+    var { value, label, items } = _a, props = __rest(_a, ["value", "label", "items"]);
+    const orderDiscriminator = Number.isInteger(value) && Number(value) > 1 && label.charAt(label.length - 1) !== 's' ? `${label}s` : label;
+    const orderLabel = `${value} ${orderDiscriminator}`;
+    return (_jsx(TableCell, Object.assign({ sx: { fontSize: '11px' } }, props, { children: orderLabel })));
+}
+export default OrderCellSheet;

package/build/components/TableCells/CustomCells/OrderCell/index.d.ts

@@ -1 +1,2 @@
 export { default as OrderCell } from './OrderCell';
+export { default as OrderCellSheet } from './OrderCellSheet';

package/build/components/TableCells/CustomCells/OrderCell/index.js

@@ -1 +1,2 @@
 export { default as OrderCell } from './OrderCell';
+export { default as OrderCellSheet } from './OrderCellSheet';

package/build/components/TableCells/CustomCells/OrdersCell/OrdersCellSheet.d.ts

@@ -0,0 +1,22 @@
+import { SelectionProps } from '../../../../types/index.js';
+interface Item {
+    id: string;
+    product_id: string;
+    name: string;
+    description: string;
+    image: string;
+    currency: string;
+    amount: number;
+    quantity: number;
+    discount: {
+        type: string;
+        value: number;
+    };
+    merchant_id: string;
+}
+interface OrdersCellSheetProps {
+    selectionProps?: SelectionProps;
+    items: Item[];
+}
+export declare function OrdersCellSheet({ items, selectionProps }: OrdersCellSheetProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/components/TableCells/CustomCells/OrdersCell/OrdersCellSheet.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import Popover from '@mui/material/Popover';
+import Box from '@mui/material/Box';
+import { StatusChip, StatusChipWithCopy, Text } from '../../../index.js';
+export function OrdersCellSheet({ items, selectionProps = {} }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const orderLabel = useCallback(({ quantity, currency, amount, name }) => `${quantity ? `Qty ${quantity}` : ''} ${name ? `- ${name}` : ''} ${currency || amount ? '-' : ''} ${currency || ''} ${amount || ''}`, []);
+    if (!items || !items.length)
+        return null;
+    const [firstOrder, ...resetOrders] = items;
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '4px', alignItems: 'center' } }, { children: [_jsx(StatusChipWithCopy, Object.assign({ chipIndex: 0, selectionProps: selectionProps }, { children: _jsx(Text, Object.assign({ noWrap: true, sx: { maxWidth: items.length > 1 ? 190 : 220, fontSize: 11 } }, { children: orderLabel(firstOrder) })) })), items.length > 1 && (_jsx(Box, Object.assign({ onClick: (e) => {
+                    setAnchorEl(e.currentTarget.parentElement);
+                }, sx: { height: '18px' } }, { children: _jsx(StatusChip, Object.assign({ minWidth: "25", sx: { borderRadius: '24px', overflow: 'hidden' }, copyText: "..." }, { children: "..." })) }))), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, sx: { minWidth: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth }, onClose: () => {
+                    setAnchorEl(null);
+                }, anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, slotProps: {
+                    paper: {
+                        style: {
+                            maxWidth: 'unset',
+                            minWidth: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth,
+                            marginTop: '22px',
+                        },
+                    },
+                } }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '4px', padding: '4px' } }, { children: resetOrders === null || resetOrders === void 0 ? void 0 : resetOrders.map((order, index) => (_jsx(StatusChipWithCopy, Object.assign({ copyText: orderLabel(order), chipIndex: index + 1, selectionProps: selectionProps }, { children: orderLabel(order) }), order.id))) })) }))] })));
+}

package/build/components/TableCells/CustomCells/OrdersCell/index.d.ts

@@ -0,0 +1 @@
+export * from './OrdersCellSheet';

package/build/components/TableCells/CustomCells/OrdersCell/index.js

@@ -0,0 +1 @@
+export * from './OrdersCellSheet';

package/build/components/TableCells/CustomCells/PaymentAgreementCell/PaymentAgreementCellSheet.d.ts

@@ -0,0 +1,3 @@
+import { PaymentAgreementCellProps } from './type';
+declare function PaymentAgreementCellSheet({ type, count, ...props }: PaymentAgreementCellProps): import("react/jsx-runtime").JSX.Element;
+export default PaymentAgreementCellSheet;

package/build/components/TableCells/CustomCells/PaymentAgreementCell/PaymentAgreementCellSheet.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { StatusChipWithCopy } from '../../../index.js';
+import { paymentAgreementTypes } from './constant';
+function PaymentAgreementCellSheet(_a) {
+    var { type, count } = _a, props = __rest(_a, ["type", "count"]);
+    const countText = count === null || count === void 0 ? void 0 : count.toString();
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'row', gap: '4px' } }, { children: [_jsx(StatusChipWithCopy, Object.assign({ copyText: type, unknownText: "noPaymentAgreement" }, props, { chipIndex: 0 }, { children: type ? paymentAgreementTypes[type] : type })), countText && (_jsx(StatusChipWithCopy, Object.assign({ copyText: countText }, props, { chipIndex: 1, minWidth: "38px" }, { children: countText })))] })));
+}
+export default PaymentAgreementCellSheet;

package/build/components/TableCells/CustomCells/PaymentAgreementCell/constant.d.ts

@@ -0,0 +1,6 @@
+export declare const paymentAgreementTypes: {
+    SAVED_CARD: string;
+    ORDER: string;
+    SUBSCRIPTION: string;
+    INSTALLMENT: string;
+};

package/build/components/TableCells/CustomCells/PaymentAgreementCell/constant.js

@@ -0,0 +1,6 @@
+export const paymentAgreementTypes = {
+    SAVED_CARD: 'Card Agreement',
+    ORDER: 'Order',
+    SUBSCRIPTION: 'Subscription',
+    INSTALLMENT: 'Installment',
+};

package/build/components/TableCells/CustomCells/PaymentAgreementCell/index.d.ts

@@ -0,0 +1 @@
+export { default as PaymentAgreementCellSheet } from './PaymentAgreementCellSheet';

package/build/components/TableCells/CustomCells/PaymentAgreementCell/index.js

@@ -0,0 +1 @@
+export { default as PaymentAgreementCellSheet } from './PaymentAgreementCellSheet';

package/build/components/TableCells/CustomCells/PaymentAgreementCell/type.d.ts

@@ -0,0 +1,6 @@
+import { paymentAgreementTypes } from './constant';
+import { StatusChipWithCopyProps } from '../../../StatusChipWithCopy';
+export interface PaymentAgreementCellProps extends Omit<StatusChipWithCopyProps, 'chipIndex'> {
+    type?: keyof typeof paymentAgreementTypes;
+    count?: number;
+}

package/build/components/TableCells/CustomCells/PaymentAgreementCell/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/TableCells/CustomCells/PayoutDateCell/PayoutDateCell.d.ts

@@ -1,2 +1,2 @@
-import { DateCellProps } from '../type';
-export default function PayoutDateCell({ value, ...props }: DateCellProps): import("react/jsx-runtime").JSX.Element;
+import { DateCellBaseProps } from '../type';
+export default function PayoutDateCell({ value, ...props }: DateCellBaseProps): import("react/jsx-runtime").JSX.Element;