@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

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

@@ -0,0 +1,113 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+import { TextLabel } from '../../TableCells/CustomCells/style';
+export const ErrorCodeLabel = styled(motion.span)(({ theme }) => ({
+    color: theme.palette.common.white,
+    display: 'block',
+    fontWeight: theme.typography.fontWeightBold,
+    fontSize: '9.78px',
+    borderRadius: '4px',
+    paddingInline: theme.spacing(0.45),
+}));
+export const ErrorCodeWrapper = styled(motion.span)(() => ({
+    display: 'block',
+    width: '0',
+    overflow: 'hidden',
+}));
+export const GateWayIcon = styled('img')(() => ({
+    width: '10px',
+    height: '10px',
+}));
+export const GatewayIconWrapper = styled(motion.span)(({ theme }) => ({
+    width: '18px',
+    height: '18px',
+    borderRadius: '50%',
+    backgroundColor: theme.palette.background.paper,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    position: 'relative',
+}));
+export const GatewaysContainer = styled(motion.div, {
+    shouldForwardProp: (prop) => prop !== 'isVisible',
+})(({ isVisible }) => (Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '4px', width: '0', overflow: 'hidden', opacity: 0 }, (!isVisible && {
+    padding: '0 !important',
+}))));
+export const UnCapturedBadge = styled(motion.div)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+}));
+export const UnCapturedContainer = styled(motion.span)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'absolute',
+    minHeight: '24px',
+    cursor: 'pointer',
+    borderRadius: '16px',
+}));
+export const errorCodeLabelAnimation = {
+    delay: 0.2,
+    ease: 'easeIn',
+    fadeIn: {
+        duration: 0.2,
+    },
+};
+export const GatewaysContainerAnimationVariants = {
+    animate: {
+        width: 'auto',
+        paddingRight: '4px',
+        paddingLeft: '4px',
+    },
+    fadeIn: {
+        opacity: 1,
+        transition: {
+            delay: 0.7,
+        },
+    },
+};
+export const AcquirerContainerAnimationVariants = {
+    animate: {
+        width: 'auto',
+    },
+    fadeIn: {
+        opacity: 1,
+        transition: {
+            delay: 1,
+        },
+    },
+};
+export const ErrorCodeLabelAnimationVariants = {
+    animate: {
+        width: 'auto',
+        paddingRight: '8px',
+        paddingLeft: '4px',
+    },
+};
+export const GatewayIconWrapperAnimationTransition = {
+    fadeIn: {
+        duration: 0.3,
+    },
+    animate: {
+        duration: 0.1,
+    },
+};
+export const ErrorCodeVariants = {
+    fadeIn: {
+        opacity: 1,
+    },
+};
+export const StatusTextLabel = styled(TextLabel)(() => ({
+    width: '88px',
+    height: '100%',
+}));
+export const TextViewWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: theme.spacing(0.25),
+    height: '100%',
+}));

package/build/components/StatusIcons/CustomerInitiated/CustomerInitiatedIcon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tooltip from '../../Tooltip';
+import { merchantInitiatedIcon } from '../../../constants/index.js';
+import { useTranslation } from 'react-i18next';
+export const CustomerInitiatedIcon = () => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, Object.assign({ title: t('merchantInitiated') }, { children: _jsx("img", { "data-testid": "merchantInitiatedIcon", src: merchantInitiatedIcon, alt: "merchant", style: {
+                width: '16px',
+                height: '16px',
+            } }) })));
+};

package/build/components/StatusIcons/CustomerInitiated/index.js

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

package/build/components/StatusIcons/DestinationIcon/DestinationIcon.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { destinationStatusIcons } from './constant';
+import { StatusIcon, StatusIconWrapper, TextLabel } from './style';
+import Tooltip from '../../Tooltip';
+import camelCase from 'lodash/camelCase';
+import { useTheme } from '@mui/material';
+import { t } from 'i18next';
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export function DestinationIcon({ status, isTextShown, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) {
+    const theme = useTheme();
+    const statusText = t(camelCase(status));
+    if (isSheetViewShown && destinationStatusIcons[status]) {
+        return (_jsx(StatusChipWithCopy, Object.assign({ copyText: statusText, chipIndex: chipIndex, selectionProps: selectionProps }, { children: statusText })));
+    }
+    if (isTextShown && destinationStatusIcons[status]) {
+        return (_jsx(TextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(status), sx: {
+                background: '#1F88D00D',
+                color: status === 'PROCESSED' ? theme.palette.info.dark : theme.palette.common.black,
+            } }, { children: statusText })));
+    }
+    return (_jsx(StatusIconWrapper, Object.assign({ className: "destination-status" }, { children: status && destinationStatusIcons[status] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(status)) }, { children: _jsx(StatusIcon, { src: destinationStatusIcons[status], alt: "destination-icon" }) }))) })));
+}

package/build/components/StatusIcons/DestinationIcon/constant.js

@@ -0,0 +1,7 @@
+import { statusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
+import { destinationSuccessTableIcon } from '../../../constants/index.js';
+export const destinationStatusIcons = {
+    PROCESSED: destinationSuccessTableIcon,
+    FAILED: '',
+};
+export const chargeStatusIcons = statusIcons;

package/build/components/StatusIcons/DestinationIcon/index.js

@@ -0,0 +1 @@
+export { DestinationIcon } from './DestinationIcon';

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

@@ -0,0 +1,20 @@
+import { styled } from '@mui/material';
+export const TextLabel = styled('span')(({ theme }) => ({
+    fontSize: '11px',
+    padding: '2px 0',
+    color: theme.palette.text.primary,
+}));
+export const StatusIcon = styled('img')(() => ({
+    width: '16px',
+    height: '16px',
+}));
+export const StatusIconWrapper = styled('span')(() => ({
+    width: '24px',
+    height: '24px',
+    borderRadius: '50%',
+    backgroundColor: 'transparent',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+}));

package/build/components/StatusIcons/DeviceIcon/DeviceIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import DeviceIcon from '../../DeviceIcon';
+import { GeographyIcon } from '../GeographyIcon/GeographyIcon';
+export const DeviceIconChip = ({ geographyVariant, isTextShown, deviceCountry, deviceType, tableMode }) => {
+    return (_jsxs(Box, Object.assign({ sx: Object.assign({ display: 'flex', gap: '8px', alignItems: 'center' }, (tableMode === 'sheet' && { height: '18px' })) }, { children: [_jsx(GeographyIcon, { geographyVariant: geographyVariant, isTextShown: isTextShown, countryCode: deviceCountry }), _jsx(DeviceIcon, { type: deviceType, isTextShown: isTextShown, tableMode: tableMode })] })));
+};

package/build/components/StatusIcons/DeviceIcon/index.js

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

package/build/components/StatusIcons/DisputeIcon/DisputeIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { closedDisputeIcon, openDisputeIcon } from '../../../constants/index.js';
+import { StatusIcon } from '../../TableCells/CustomCells/style';
+export const DisputeIcon = ({ isDisputeOpen, iconStyles }) => {
+    return (_jsx(StatusIcon, { "data-testid": "StatusCell_DisputeStatusIcon", sx: {
+            width: '13.5px',
+            height: '13.5px',
+        }, src: isDisputeOpen ? openDisputeIcon : closedDisputeIcon, alt: "dispute-icon", style: iconStyles }));
+};

package/build/components/StatusIcons/DisputeIcon/index.js

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

package/build/components/StatusIcons/GeographyIcon/GeographyIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CountryFlag from '../../CountryFlag';
+import Tooltip from '../../Tooltip';
+const geographyMap = {
+    G: 'Global',
+    R: 'Regional',
+    L: 'Local',
+};
+export const GeographyIcon = ({ geographyVariant, countryCode, isTextShown, }) => {
+    const geographyTooltip = geographyVariant ? geographyMap[geographyVariant] : undefined;
+    const tooltip = geographyTooltip || countryCode
+        ? `${geographyTooltip || ''} ${geographyTooltip && countryCode ? `-` : ''} ${countryCode ? `Country - ${countryCode}` : ''}`
+        : undefined;
+    if (isTextShown || !countryCode)
+        return null;
+    return (_jsx(Tooltip, Object.assign({ title: tooltip }, { children: _jsx(CountryFlag, { countryCode: countryCode }) })));
+};

package/build/components/StatusIcons/GeographyIcon/index.js

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

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

@@ -0,0 +1,23 @@
+import { styled } from '@mui/material/styles';
+import { getGeographyBoxColor } from '../../../utils/index.js';
+export const GeographyBox = styled('span', {
+    shouldForwardProp: (props) => props !== 'variant',
+})(({ theme, variant }) => ({
+    display: 'flex',
+    width: '17px',
+    height: '12px',
+    backgroundColor: variant ? getGeographyBoxColor(theme.palette)[variant] : 'transparent',
+    borderRadius: '2px',
+    flexShrink: 0,
+    overflow: 'hidden',
+    visibility: 'hidden',
+    '& > img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+    },
+}));
+export const FlagIcon = styled('img')({
+    width: '100%',
+    height: '100%',
+});

package/build/components/StatusIcons/IssuerIcon/IssuerIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GeographyIcon } from '../GeographyIcon/GeographyIcon';
+import { IssuerIconContainer, CardNumber } from './style';
+import Tooltip from '../../Tooltip';
+export default function IssuerIcon({ countryCode, isTextShown, cardNumber, bankName, tableMode }) {
+    const firstFourDigits = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.slice(0, 4);
+    const lastFourDigits = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.slice(-4);
+    return (_jsxs(IssuerIconContainer, Object.assign({ tableMode: tableMode }, { children: [countryCode && _jsx(GeographyIcon, { countryCode: countryCode, isTextShown: isTextShown }), _jsx(Tooltip, Object.assign({ title: `${bankName ? `Issuer - ${bankName}` : ''}` }, { children: _jsx(CardNumber, { children: `${firstFourDigits || ''} ${lastFourDigits || ''}` }) }))] })));
+}

package/build/components/StatusIcons/IssuerIcon/index.js

@@ -0,0 +1,3 @@
+import IssuerIcon from './IssuerIcon';
+export * from './type';
+export default IssuerIcon;

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

@@ -0,0 +1,10 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const IssuerIconContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'tableMode',
+})(({ theme, tableMode }) => (Object.assign(Object.assign({ display: 'flex', gap: theme.spacing(0.5) }, (tableMode === 'sheet' && { height: '18px' })), { alignItems: 'center' })));
+export const CardNumber = styled('span')(({ theme }) => ({
+    fontSize: '10px',
+    fontWeight: 500,
+    color: theme.palette.text.primary,
+}));

package/build/components/StatusIcons/IssuerIcon/type.js

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import camelCase from 'lodash/camelCase';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../../Tooltip';
+import { StatusIcon } from '../../TableCells/CustomCells/style';
+import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
+import { payoutStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) => {
+    const { t } = useTranslation();
+    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/PayoutIcon/index.js

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

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

@@ -0,0 +1,59 @@
+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';
+import { useTheme } from '@mui/material/styles';
+import { refundSettledIcon } from '../../../constants/index.js';
+import { MultiRefundContainer, MultiRefundIcon, RefundsCountBadge } from '../../TableCells/CustomCells/StatusCell/style';
+import { StatusIcon } from '../../TableCells/CustomCells/style';
+import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
+import { refundStatusIcons, refundStyles } from '../../TableCells/CustomCells/StatusCell/constant';
+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,
+            },
+            fadeIn: {
+                duration: 0.2,
+            },
+        }, variants: {
+            animate: {
+                width: 'auto',
+                display: 'flex',
+                padding: '1.285px 2.569px',
+            },
+            fadeIn: {
+                transition: {
+                    delay: 0.5,
+                },
+                opacity: 1,
+            },
+        } }, { children: [refundCount, "x"] })));
+    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',
+                } }, { children: _jsxs(MultiRefundContainer, Object.assign({ whileInView: refundCountShown ? ['animate', 'fadeIn'] : undefined, variants: {
+                        animate: {
+                            boxShadow: theme.shadows[4],
+                            gap: theme.spacing(0.5),
+                        },
+                    } }, { 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/build/components/StatusIcons/RefundIcon/index.js

@@ -0,0 +1,2 @@
+import RefundIcon from './RefundIcon';
+export default RefundIcon;

package/build/components/StatusIcons/SourceIcons/SourceIcons.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import camelCase from 'lodash/camelCase';
+import { useTranslation } from 'react-i18next';
+import { getPaymentMethodKey } from './utils';
+import { Box } from '@mui/material';
+import { SourceIcon } from './components/SourceIcon';
+import { useCallback, useMemo } from 'react';
+import { CardNumber } from './style';
+import { getPaymentTypeKey } from '../../../utils/index.js';
+export function SourceIcons({ payment, card, isTextShown, firstIcon }) {
+    const { t } = useTranslation();
+    const sources = useCallback(() => {
+        var _a, _b;
+        const initialSources = [];
+        const type = getPaymentTypeKey(payment);
+        const method = payment === null || payment === void 0 ? void 0 : payment.method;
+        const scheme = payment === null || payment === void 0 ? void 0 : payment.scheme;
+        if (((_a = getPaymentMethodKey(method)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = getPaymentMethodKey(scheme)) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
+            initialSources.push(...[getPaymentMethodKey(method), getPaymentMethodKey(type)]);
+        }
+        else {
+            initialSources.push(...[getPaymentMethodKey(method), getPaymentMethodKey(type), getPaymentMethodKey(scheme)]);
+        }
+        return initialSources;
+    }, [payment]);
+    const firstIconSource = useMemo(() => {
+        return _jsx(SourceIcon, { source: firstIcon, isTextShown: isTextShown, title: t(camelCase(firstIcon)) }, firstIcon);
+    }, [firstIcon, isTextShown, t]);
+    const paymentSources = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = sources()) === null || _a === void 0 ? void 0 : _a.filter((s) => !!s && s !== firstIcon)) === null || _b === void 0 ? void 0 : _b.map((source, index, sourcesList) => {
+            const walletTooltip = (payment === null || payment === void 0 ? void 0 : payment.wallet) === t('sv_wallet') ? t('storedValueWallet') : t('passThruWallet');
+            const sourceTooltip = index === sourcesList.length - 1 && !!(card === null || card === void 0 ? void 0 : card.last_four) ? `${t(camelCase(source))} - ${card === null || card === void 0 ? void 0 : card.last_four}` : t(camelCase(source));
+            return (_jsx(SourceIcon, { source: source, isTextShown: isTextShown, title: index === 0 && source === 'Wallet' ? walletTooltip : sourceTooltip }, `${source}-${index}`));
+        });
+    }, [sources, payment, card, isTextShown, t, firstIcon]);
+    return (_jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: 0.5 }, { children: [firstIcon && firstIconSource, paymentSources, (card === null || card === void 0 ? void 0 : card.last_four) && _jsxs(CardNumber, { children: ["\u00B7\u00B7\u00B7 ", card === null || card === void 0 ? void 0 : card.last_four] })] })));
+}

package/build/components/StatusIcons/SourceIcons/components/SourceIcon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import camelCase from 'lodash/camelCase';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../../../Tooltip';
+import { getPaymentMethodsIcon } from '../../../../constants/index.js';
+import { StyledBadgeTextWrapper, StyledSourceImage, TextLabel } from '../style';
+export function SourceIcon({ source, isTextShown, title, width, height }) {
+    const { t } = useTranslation();
+    const ImageSrc = getPaymentMethodsIcon(source);
+    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StyledBadgeTextWrapper, Object.assign({ "data-testid": "SourceCell_BadgeTextWrapper" }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "SourceCell_TextLabel", "data-source": source }, { children: t(camelCase(source)) })) }))) : (_jsx(StyledSourceImage, { src: ImageSrc, alt: source, width: width, height: height, onError: (e) => {
+                e.currentTarget.src = getPaymentMethodsIcon('card');
+            } })) })));
+}

package/build/components/StatusIcons/SourceIcons/components/index.js

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

package/build/components/StatusIcons/SourceIcons/index.js

@@ -0,0 +1,3 @@
+export * from './SourceIcons';
+export * from './utils';
+export * from './components';

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

@@ -0,0 +1,57 @@
+import { styled } from '@mui/material';
+import { motion } from 'framer-motion';
+export const StyledSourceCell = styled('span')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: theme.spacing(1),
+}));
+export const StyledSourceImage = styled('img')(() => ({
+    maxWidth: '24px',
+    maxHeight: '16px',
+}));
+export const PaymentSourcesContainer = styled(motion.span, { shouldForwardProp: (prop) => prop !== 'sourcesCount' })(({ theme, sourcesCount }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'absolute',
+    minWidth: `${sourcesCount * 6 + 36}px `,
+    minHeight: '24px',
+    cursor: 'pointer',
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: '16px',
+}));
+export const TextLabel = styled('span')(({ theme }) => ({
+    fontSize: '11px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    padding: '2px 0',
+    color: theme.palette.text.primary,
+}));
+export const StyledBadgeTextWrapper = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingInline: '8px',
+    textAlign: 'center',
+    width: '100%',
+}));
+export const SourceIconWrapper = styled('span')(({ theme }) => ({
+    position: 'absolute',
+    left: 0,
+    zIndex: 6,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '12px',
+    backgroundColor: theme.palette.background.paper,
+    width: '36px',
+    height: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const CardNumber = styled('span')(({ theme }) => ({
+    fontSize: '10px',
+    fontWeight: 500,
+    color: theme.palette.text.primary,
+}));

package/build/components/StatusIcons/SourceIcons/type.js

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

package/build/components/StatusIcons/SourceIcons/utils.js

@@ -0,0 +1,8 @@
+const paymentMethodMap = {
+    american_express: 'AMEX',
+    debit: 'card',
+    credit: 'card',
+};
+export const getPaymentMethodKey = (method) => {
+    return paymentMethodMap[(method === null || method === void 0 ? void 0 : method.toLowerCase()) || ''] || method;
+};

package/build/components/StatusIcons/index.js

@@ -1 +1,14 @@
-export{Y as AgreementIcon,_ as AuthIcons,Z as AuthSourceAnimation,aa as AuthorizationAutoIcons,ba as AuthorizedIcon,ca as ChargeStatusIcon,da as CustomerInitiatedIcon,na as DestinationIcon,fa as DeviceIconChip,ga as DisputeIcon,ea as GeographyIcon,ha as IssuerIcon,ia as PayoutIcon,ja as RefundIcon,la as SourceIcon,ma as SourceIcons,$ as VoidAutoIcon,ka as getPaymentMethodKey}from'../../chunk-WGPV3VEK.js';import'../../chunk-5ZTIXOFI.js';import'../../chunk-RUU3IQ7Y.js';import'../../chunk-3EU4NGZ7.js';import'../../chunk-WX7HFBCU.js';import'../../chunk-KM4UT2GM.js';import'../../chunk-ZTHZGDV6.js';import'../../chunk-FQXBL3YF.js';import'../../chunk-CTBYQDKG.js';import'../../chunk-JQYBCTVW.js';import'../../chunk-7NYF2UBV.js';import'../../chunk-ARHJB5QJ.js';import'../../chunk-XY57JRPE.js';import'../../chunk-BV5VAMBI.js';import'../../chunk-LONKQ3XM.js';import'../../chunk-66JBLKME.js';import'../../chunk-24UTRGGG.js';import'../../chunk-VNK7I7AL.js';import'../../chunk-CQT4MCPB.js';import'../../chunk-GPFU7WD4.js';import'../../chunk-DYWKQE3E.js';import'../../chunk-WGCHJPEZ.js';import'../../chunk-JT54SXJ7.js';import'../../chunk-ZWJTEKFP.js';import'../../chunk-2FDPAJY4.js';import'../../chunk-544TDVOA.js';import'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-IXQ7Y6Y5.js';import'../../chunk-F4KVGV4T.js';import'../../chunk-ZUBHIDDI.js';import'../../chunk-FAYAV46R.js';import'../../chunk-6DLPM4RB.js';import'../../chunk-XQVSYDRO.js';import'../../chunk-ZN4NGPK4.js';import'../../chunk-V44MUKYW.js';import'../../chunk-ZMTLSAZW.js';import'../../chunk-TG2IA55S.js';import'../../chunk-ZLWJCX4K.js';import'../../chunk-T3BFBXVJ.js';import'../../chunk-TZAF2TGI.js';import'../../chunk-AMMCJJFH.js';import'../../chunk-D4S6DH7W.js';import'../../chunk-MTJECG6U.js';import'../../chunk-QF32XNU6.js';import'../../chunk-V5OHALLD.js';import'../../chunk-LDIEOZVR.js';import'../../chunk-NLOKMDQY.js';import'../../chunk-OLPNHTE7.js';import'../../chunk-UF4FBI5V.js';import'../../chunk-OJJ2Q5XK.js';import'../../chunk-RQ2V5JZH.js';import'../../chunk-QFMHEDCR.js';import'../../chunk-34II3WB7.js';import'../../chunk-2Q6H6K3P.js';import'../../chunk-XZORYOIS.js';import'../../chunk-BTANFCN2.js';import'../../chunk-YTBVTQNQ.js';import'../../chunk-LLPG2AC6.js';import'../../chunk-LMKY6Q27.js';import'../../chunk-OFBKWUDT.js';import'../../chunk-NQVCWKMH.js';import'../../chunk-YVHYNRRL.js';import'../../chunk-LOJTJZSX.js';import'../../chunk-DQ76BKNS.js';import'../../chunk-XRTET45W.js';import'../../chunk-LDZG7EXA.js';import'../../chunk-NLEKLEHC.js';import'../../chunk-B4QKXIT7.js';import'../../chunk-IBPFWRCW.js';import'../../chunk-FL7ZDVP7.js';import'../../chunk-23C4BLEJ.js';import'../../chunk-7A7PBYFB.js';import'../../chunk-J72TLM2F.js';import'../../chunk-HRHKLBHG.js';import'../../chunk-ABDRIOU6.js';import'../../chunk-YLE4Q6WH.js';import'../../chunk-D5EB3ZRT.js';import'../../chunk-BNUBHZV7.js';import'../../chunk-3ABTBVXY.js';import'../../chunk-AUM6AR3E.js';import'../../chunk-4A6Z3DYW.js';import'../../chunk-TUTEF6YD.js';import'../../chunk-PX7SYRBV.js';import'../../chunk-2T2Z5RPJ.js';import'../../chunk-SZBR7LB3.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-JWC3XDE4.js';import'../../chunk-UB5L7C6S.js';import'../../chunk-JYJ3D2X6.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-62CGUEB4.js';import'../../chunk-DJYRLVOD.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-QGXXI4EO.js';import'../../chunk-NLPYBEGY.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-GF7D4WGP.js';import'../../chunk-6ZPCHYOF.js';import'../../chunk-GI3U6XGW.js';import'../../chunk-3A4B5D6T.js';import'../../chunk-24XGEJR2.js';import'../../chunk-UEMTPYYH.js';import'../../chunk-BFGMD3VQ.js';import'../../chunk-EAUWAY4T.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-MYFLXP7G.js';import'../../chunk-G6N4V3PP.js';import'../../chunk-P6K4PD7Y.js';import'../../chunk-XUDGW7IY.js';import'../../chunk-2LMLVUW4.js';import'../../chunk-KGQT7R3W.js';import'../../chunk-XXZJ5D5P.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-7IW25XZP.js';import'../../chunk-WHWKA4SY.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+export { default as AgreementIcon } from './AgreementIcon';
+export { default as AuthIcons, AuthSourceAnimation } from './AuthIcons';
+export { default as AuthorizationAutoIcons, VoidAutoIcon } from './AuthorizationAutoIcons';
+export { AuthorizedIcon } from './AuthorizedIcon';
+export { ChargeStatusIcon } from './ChargeStatusIcon';
+export { CustomerInitiatedIcon } from './CustomerInitiated';
+export { DeviceIconChip } from './DeviceIcon';
+export { DisputeIcon } from './DisputeIcon';
+export { GeographyIcon } from './GeographyIcon';
+export { default as IssuerIcon } from './IssuerIcon';
+export { PayoutIcon } from './PayoutIcon';
+export { default as RefundIcon } from './RefundIcon';
+export { SourceIcons, SourceIcon, getPaymentMethodKey } from './SourceIcons';
+export { DestinationIcon } from './DestinationIcon';

package/build/components/StatusLabel/StatusLabel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Tooltip from '../Tooltip';
+import { capturedStatusesStyles, statusIcons, unCapturedStatusesStyles } from '../TableCells/CustomCells/StatusCell/constant';
+import Icon from '../Icon';
+import { TextStyled, Wrapper } from './style';
+export default function StatusLabel({ tooltip, status, statusCode }) {
+    var _a, _b;
+    const styles = (_b = (_a = unCapturedStatusesStyles[status]) !== null && _a !== void 0 ? _a : capturedStatusesStyles[status]) !== null && _b !== void 0 ? _b : null;
+    return (_jsx(Tooltip, Object.assign({ title: tooltip }, { children: _jsxs(Wrapper, Object.assign({ sx: { backgroundColor: (styles === null || styles === void 0 ? void 0 : styles.background) || 'transparent' } }, { children: [_jsx(Icon, { src: statusIcons[status] }), _jsx(TextStyled, Object.assign({ sx: (theme) => ({ backgroundColor: (styles === null || styles === void 0 ? void 0 : styles.color) || theme.palette.info.dark }) }, { children: statusCode }))] })) })));
+}

package/build/components/StatusLabel/index.js

@@ -1 +1,2 @@
-export{h as default}from'../../chunk-7NYF2UBV.js';import'../../chunk-E6XVMA37.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import StatusLabel from './StatusLabel';
+export default StatusLabel;

package/build/components/StatusLabel/style.js

@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Text from '../Text';
+export const Wrapper = styled(Box)(() => ({
+    display: 'flex',
+    gap: '4px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '56px',
+    padding: '2px 4px',
+    cursor: 'default',
+}));
+export const TextStyled = styled(Text)(({ theme }) => ({
+    color: theme.palette.common.white,
+    fontWeight: 600,
+    fontSize: '8px',
+    padding: '3px 2.57px',
+    borderRadius: '4px',
+    lineHeight: '100%',
+}));