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

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

@@ -0,0 +1,5 @@
+export { default as AmountCell } from './AmountCell';
+export * from './components';
+export { default as AmountCellText } from './AmountCellText';
+export { default as AmountCellSheet } from './AmountCellSheet';
+export * from './style';

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

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles';
+export const AmountCellContainer = styled('span')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: theme.spacing(1),
+}));
+export const ConversionBadge = styled('span')(({ theme, tableMode }) => ({
+    backgroundColor: theme.palette.grey[100],
+    display: 'block',
+    borderRadius: '4px',
+    padding: '1.5px 3px',
+    fontSize: tableMode === 'sheet' ? '11px' : '10px',
+    lineHeight: '13px',
+    textTransform: 'uppercase',
+    fontWeight: theme.typography.fontWeightBold,
+}));
+export const CurrencySpan = styled('span')(({ theme, tableMode }) => ({
+    fontSize: tableMode === 'sheet' ? '11px' : theme.typography.body2.fontSize,
+    lineHeight: '17px',
+    fontWeight: '700',
+}));
+export const DecimalSpan = styled('span')(() => ({
+    fontWeight: '400',
+}));
+export const ConversionTooltip = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+}));
+export const ConversionTooltipRow = styled('div')(({ theme, count }) => ({
+    justifyContent: 'space-between',
+    display: 'flex',
+    width: '100%',
+    gap: (count || 1) <= 1 ? theme.spacing(1.5) : theme.spacing(1),
+}));

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

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

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

@@ -0,0 +1,57 @@
+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 { useMemo, useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '../../../Tooltip';
+import { ImageWrapper } from '../../../index.js';
+import { TableCell } from '../../../TableCells';
+import { AppsStatusContainer, StyledAppsCell, appStatusAnimation } from './style';
+import IconWithBadge from '../../../IconWithBadge';
+import { acceptanceBlueIcon, acceptanceWindowIcon, payoutsGreenIcon, payoutWindowIcon } from '../../../../constants/index.js';
+export default function ApplicationStatusCell(_a) {
+    var { acceptance, payout, hideAcceptance, hidePayout } = _a, props = __rest(_a, ["acceptance", "payout", "hideAcceptance", "hidePayout"]);
+    const isAcceptanceEnabled = (acceptance === null || acceptance === void 0 ? void 0 : acceptance.toLowerCase()) === 'enabled';
+    const isPayoutEnabled = (payout === null || payout === void 0 ? void 0 : payout.toLowerCase()) === 'enabled';
+    const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+    const theme = useTheme();
+    const apps = useMemo(() => [
+        {
+            icon: isAcceptanceEnabled ? acceptanceBlueIcon : acceptanceWindowIcon,
+            tooltip: 'Acceptance',
+            enabled: isAcceptanceEnabled,
+            shown: !hideAcceptance,
+            zIndex: isAcceptanceEnabled && !isPayoutEnabled ? 3 : 1,
+        },
+        { icon: isPayoutEnabled ? payoutsGreenIcon : payoutWindowIcon, tooltip: 'Payout', enabled: isPayoutEnabled, shown: !hidePayout, zIndex: 2 },
+    ].filter((app) => app.shown), [isAcceptanceEnabled, isPayoutEnabled, hideAcceptance, hidePayout]);
+    const appsStatus = useMemo(() => apps.map((app, index) => {
+        const sourceTooltip = app.tooltip;
+        return (_jsx(ImageWrapper, Object.assign({ order: index, variants: appStatusAnimation(index, theme.shadows[4], 40), sx: {
+                width: '36px',
+                zIndex: app.zIndex + 6,
+            } }, { children: _jsx(Tooltip, Object.assign({ onOpen: () => {
+                    setIsTooltipOpen(true);
+                }, onClose: () => {
+                    setIsTooltipOpen(false);
+                }, title: sourceTooltip }, { children: _jsx(IconWithBadge, { mainIcon: app.icon, mainIconSize: 16, containerSize: 16, sx: { borderRadius: '40px' }, onError: (e) => {
+                        e.currentTarget.src = app.icon;
+                        e.currentTarget.style.borderRadius = '0px';
+                    }, borderColor: "transparent" }) })) }), `${app}-${index}`));
+    }), [apps, theme]);
+    const appsCount = (apps === null || apps === void 0 ? void 0 : apps.length) || 0;
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledAppsCell, { children: appsCount > 0 ? (_jsx(AppsStatusContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", 
+                // animate when state changes
+                animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: appsCount, variants: { animate: { width: appsCount * (6 + 32) } }, style: {
+                    zIndex: 29,
+                } }, { children: appsStatus }))) : null }) })));
+}

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

@@ -0,0 +1,2 @@
+export { default as ApplicationStatusCell } from './ApplicationStatusCell';
+export * from './type';

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

@@ -0,0 +1,51 @@
+import { styled } from '@mui/material';
+import { motion } from 'framer-motion';
+export const StyledAppsCell = styled('span')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: theme.spacing(1),
+}));
+export const AppsStatusContainer = 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: 'default',
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: '16px',
+}));
+export const AppTextLabel = styled('span')(() => ({
+    fontSize: '11px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    padding: '2px 0',
+}));
+export const AppTextWrapper = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingInline: '4px',
+}));
+export const appStatusAnimation = (index, shadow, xDelta) => ({
+    start: {
+        x: index * 6,
+        transition: {
+            duration: 0.3,
+            type: 'tween',
+            ease: 'easeIn',
+        },
+    },
+    animate: {
+        x: xDelta ? index * xDelta : index * 40,
+        transition: {
+            duration: 0.3,
+            type: 'tween',
+            ease: 'easeOut',
+        },
+        boxShadow: shadow,
+    },
+});

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

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

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

@@ -0,0 +1,25 @@
+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 '../../TableCell';
+import { Box } from '@mui/material';
+import IconWithHoverOverlays from '../../../IconWithHoverOverlays';
+import { appsGridIcon } from '../../../../constants/index.js';
+export default function AppsCell(_a) {
+    var { apps } = _a, props = __rest(_a, ["apps"]);
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Box, Object.assign({ sx: {
+                width: '100%',
+                height: '32px',
+                display: 'flex',
+                alignItems: 'center',
+            } }, { children: _jsx(IconWithHoverOverlays, { mainIcon: { iconUrl: appsGridIcon, title: 'Apps' }, overlayIcons: apps }) })) })));
+}

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

@@ -0,0 +1,2 @@
+export { default as AppsCell } from './AppsCell';
+export * from './type';

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

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

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

@@ -0,0 +1,30 @@
+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 Tooltip from '../../../Tooltip';
+import { TableCell } from '../../../TableCells';
+import { threeDsIcon } from '../../../../constants/index.js';
+import { AuthIcon } from './style';
+import { BadgeWrapper, TextLabel } from '../style';
+function AuthCell(_a) {
+    var { hasAuth, tooltip, isTextShown, align } = _a, props = __rest(_a, ["hasAuth", "tooltip", "isTextShown", "align"]);
+    return (_jsx(TableCell, Object.assign({ style: {
+            textAlign: align || 'center',
+            overflow: 'visible',
+            display: 'flex',
+            width: '100%',
+            justifyContent: align === 'left' ? 'flex-start' : 'center',
+        } }, props, { children: hasAuth ? (_jsx(Tooltip, Object.assign({ title: tooltip }, { children: _jsx(BadgeWrapper, Object.assign({ "data-testid": "AuthCell_BadgeWrapper" }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "AuthCell_TextLabel", sx: {
+                        minWidth: 'max-content',
+                    } }, { children: tooltip }))) : (_jsx(AuthIcon, { src: threeDsIcon, alt: "icon", "data-testid": "AuthCell_AuthIcon" })) })) }))) : null })));
+}
+export default AuthCell;

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

@@ -0,0 +1,2 @@
+export { default as AuthCell } from './AuthCell';
+export * from './type';

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

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles';
+export const AuthIcon = styled('img')(() => ({
+    width: '12.67px',
+    height: '15px',
+}));
+export const AuthWrapper = styled('span')(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '12px',
+    backgroundColor: theme.palette.background.paper,
+    width: '36px',
+    height: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));

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

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

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

@@ -0,0 +1,66 @@
+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 { useMemo } from 'react';
+import { useTheme } from '@mui/material';
+import { ImageWrapper } from '../../../index.js';
+import Tooltip from '../../../Tooltip';
+import { TableCell } from '../../../TableCells';
+import { authenticationTypes, statusLabels } from './constant';
+import { AuthCellContainer, AuthSourceAnimation, AuthenticationStatusesContainer, BadgeTextWrapper, PartialIcon } from './style';
+import { TextLabel } from '../style';
+function AuthenticationCell(_a) {
+    var { transactionStatus, isTextShown, eci, authType } = _a, props = __rest(_a, ["transactionStatus", "isTextShown", "eci", "authType"]);
+    const theme = useTheme();
+    const statuses = useMemo(() => {
+        var _a, _b, _c;
+        const selectedStatus = (_a = statusLabels[transactionStatus !== null && transactionStatus !== void 0 ? transactionStatus : 'noAuth']) !== null && _a !== void 0 ? _a : statusLabels.noAuth;
+        const authTooltip = selectedStatus === null || selectedStatus === void 0 ? void 0 : selectedStatus.tooltip;
+        const authIcon = selectedStatus === null || selectedStatus === void 0 ? void 0 : selectedStatus.icon;
+        return [
+            {
+                tooltip: authTooltip,
+                content: isTextShown ? authTooltip : authIcon,
+                type: isTextShown ? 'text' : 'icon',
+            },
+            ...(authType
+                ? [
+                    {
+                        tooltip: authType,
+                        content: isTextShown ? (_b = authenticationTypes[authType]) === null || _b === void 0 ? void 0 : _b.tooltip : (_c = authenticationTypes[authType]) === null || _c === void 0 ? void 0 : _c.icon,
+                        type: isTextShown ? 'text' : 'icon',
+                    },
+                ]
+                : []),
+            {
+                tooltip: '',
+                content: eci ? `ECI ${eci}` : '',
+                type: 'text',
+            },
+        ];
+    }, [transactionStatus, eci, isTextShown]);
+    const AuthenticationStatuses = useMemo(() => statuses
+        .filter((status) => !!status.content)
+        .map((status, index) => {
+        const badgeContent = status.type === 'text' ? (_jsx(BadgeTextWrapper, Object.assign({ "data-testid": "AuthenticationCell_BadgeTextWrapper" }, { children: _jsx(TextLabel, Object.assign({ sx: {
+                    border: 'none',
+                }, "data-testid": "AuthenticationCell_TextLabel", "data-source": status.content }, { children: status.content })) }))) : (_jsx(PartialIcon, { src: status.content, alt: status.tooltip }));
+        return (_jsx(Tooltip, Object.assign({ title: status.tooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: -1 * index, variants: AuthSourceAnimation(index, theme.shadows[4], isTextShown ? 124 : 39), sx: Object.assign({}, (status.type === 'text' && {
+                    width: isTextShown ? '120px' : '58px',
+                })) }, { children: badgeContent })) }), `${status.tooltip}-${index}`));
+    }), [props, statuses, isTextShown, theme]);
+    const statusesCount = AuthenticationStatuses.length;
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(AuthCellContainer, { children: statusesCount > 0 ? (_jsx(AuthenticationStatusesContainer, Object.assign({ layout: true, className: "authentication-sources-container", whileHover: "animate", animate: "start", sourcesCount: statusesCount, variants: { animate: { width: 6 + 32 } }, style: {
+                    zIndex: 29,
+                } }, { children: AuthenticationStatuses }))) : null }) })));
+}
+export default AuthenticationCell;

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

@@ -0,0 +1,50 @@
+import { authenticationAttemptedIcon, authenticationFailedTableIcon, authenticationNoAuthIcon, authenticationWithTransactionIcon, biometricIcon, threeDSIcon, } from '../../../../constants/index.js';
+export const statusLabels = {
+    Y: {
+        tooltip: 'Authenticated',
+        icon: authenticationWithTransactionIcon,
+        borderColor: 'rgba(31, 136, 208, 0.10)',
+    },
+    N: {
+        tooltip: 'Failed Authentication',
+        icon: authenticationFailedTableIcon,
+        borderColor: 'rgba(240, 130, 0, 0.10)',
+    },
+    R: {
+        tooltip: 'Failed Authentication',
+        icon: authenticationFailedTableIcon,
+        borderColor: 'rgba(240, 130, 0, 0.10)',
+    },
+    A: {
+        tooltip: 'Attempted',
+        icon: authenticationAttemptedIcon,
+        borderColor: 'rgba(31, 136, 208, 0.10)',
+    },
+    U: {
+        tooltip: 'Failed Authentication',
+        icon: authenticationFailedTableIcon,
+        borderColor: 'rgba(240, 130, 0, 0.10)',
+    },
+    noAuth: {
+        tooltip: 'Not Authenticated',
+        icon: authenticationNoAuthIcon,
+        borderColor: '#F2F2F2',
+    },
+};
+export const authenticationTypes = {
+    '3DS': {
+        tooltip: '3DS',
+        icon: threeDSIcon,
+        borderColor: 'rgba(31, 136, 208, 0.10)',
+    },
+    'Device Biometric': {
+        tooltip: 'Biometric',
+        icon: biometricIcon,
+        borderColor: 'rgba(31, 136, 208, 0.10)',
+    },
+    'Non-3DS': {
+        tooltip: 'Non 3DS',
+        icon: threeDSIcon,
+        borderColor: 'rgba(31, 136, 208, 0.10)',
+    },
+};

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

@@ -0,0 +1,2 @@
+export { default as AuthenticationCell } from './AuthenticationCell';
+export * from './type';

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

@@ -0,0 +1,65 @@
+import { styled } from '@mui/material';
+import { motion } from 'framer-motion';
+export const AuthIcon = styled('img')(() => ({
+    width: '12.67px',
+    height: '15px',
+}));
+export const AuthCellContainer = styled(motion.div)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: theme.spacing(1),
+}));
+export const PartialIcon = styled('img')({
+    width: '16px',
+    height: '16px',
+});
+export const StatusContainer = styled('div')(({ theme }) => ({
+    borderRadius: '80px',
+    padding: theme.spacing(0.316),
+    paddingLeft: theme.spacing(0.516),
+    fontSize: '10px',
+    fontWeight: theme.typography.fontWeightRegular,
+    color: theme.palette.text.primary,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: theme.spacing(0.5),
+    lineHeight: 0,
+}));
+export const AuthenticationStatusesContainer = 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 AuthSourceAnimation = (index, shadow, xDelta) => ({
+    start: Object.assign({ x: index * 6, transition: {
+            duration: 0.3,
+            type: 'tween',
+            ease: 'easeIn',
+        } }, (index > 0 && { opacity: 0 })),
+    animate: Object.assign({ x: xDelta ? index * xDelta : index * 39, transition: {
+            duration: 0.3,
+            type: 'tween',
+            ease: 'easeOut',
+        }, boxShadow: shadow }, (index > 0 && {
+        opacity: 1,
+    })),
+});
+export const BadgeTextWrapper = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingInline: '8px',
+    textAlign: 'center',
+    width: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));

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

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

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

@@ -0,0 +1,31 @@
+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 camelCase from 'lodash/camelCase';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../../../Tooltip';
+import { ChargeStatusIcon } from '../../../StatusIcons';
+import { TableCell } from '../../../TableCells';
+import { authenticationStatusIcons, chargeStatusIcons } from './constant';
+import { StatusCellContainer, StatusIcon } from '../style';
+import { authorizedStatusIcons } from '../StatusCell/constant';
+function AuthenticationStatusCell(_a) {
+    var { status, authorizedStatus, chargeStatus, chargeTooltip, gatewayTooltip, acquirerTooltip, errorCode } = _a, props = __rest(_a, ["status", "authorizedStatus", "chargeStatus", "chargeTooltip", "gatewayTooltip", "acquirerTooltip", "errorCode"]);
+    const { t } = useTranslation();
+    return (_jsx(TableCell, Object.assign({}, props, { sx: {
+            position: 'relative',
+            overflow: 'visible',
+        } }, { children: _jsxs(StatusCellContainer, Object.assign({ sx: {
+                gap: '0.5rem',
+            } }, { children: [status && authenticationStatusIcons[status] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(status)) }, { children: _jsx(StatusIcon, { src: authenticationStatusIcons[status], alt: "authentication-icon" }) }))), chargeStatus && chargeStatusIcons[chargeStatus] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(chargeStatus)) }, { children: _jsx(ChargeStatusIcon, { showAuthorizedStatus: true, chargeStatus: chargeStatus, gatewayTooltip: gatewayTooltip, chargeTooltip: chargeTooltip, acquirerTooltip: acquirerTooltip, errorCode: errorCode }) }))), authorizedStatus && authorizedStatusIcons[authorizedStatus] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(authorizedStatus)) }, { children: _jsx(StatusIcon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon" }) })))] })) })));
+}
+export default AuthenticationStatusCell;

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

@@ -0,0 +1,20 @@
+import { authenticationAttemptedIcon, authenticationFailedIcon, authenticationPendingIcon, authenticationUnavailableIcon, authenticationExemptedWithTransactionIcon, authenticationExemptedWithoutTransactionIcon, authenticationWithTransactionIcon, authenticatedSuccessIcon, authenticationDeclinedIcon, authenticationUndeterminedIcon, authenticationNoAuthIcon, } from '../../../../constants/index.js';
+import { statusIcons } from '../../../TableCells/CustomCells/StatusCell/constant';
+export const authenticationStatusIcons = {
+    FAILED: authenticationFailedIcon,
+    PENDING: authenticationPendingIcon,
+    INITIATED: authenticationNoAuthIcon,
+    ATTEMPTED: authenticationAttemptedIcon,
+    EXEMPTED: authenticationExemptedWithTransactionIcon,
+    EXEMPTED_WITH_TRANSACTION: authenticationExemptedWithTransactionIcon,
+    EXEMPTED_WITHOUT_TRANSACTION: authenticationExemptedWithoutTransactionIcon,
+    REJECTED: authenticationDeclinedIcon,
+    UNAVAILABLE: authenticationUnavailableIcon,
+    UNDETERMINED: authenticationUndeterminedIcon,
+    SUCCESS: authenticatedSuccessIcon,
+    AUTHENTICATED: authenticationWithTransactionIcon,
+    AUTHENTICATED_WITH_TRANSACTION: authenticationWithTransactionIcon,
+    AUTHENTICATED_WITHOUT_TRANSACTION: authenticationWithTransactionIcon,
+    AUTHENTICATED_AUTHORIZE_FAILED: authenticationFailedIcon,
+};
+export const chargeStatusIcons = statusIcons;

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

@@ -0,0 +1,2 @@
+export { default as AuthenticationStatusCell } from './AuthenticationStatusCell';
+export { authenticationStatusIcons } from './constant';

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

@@ -0,0 +1,57 @@
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+export const UnCapturedContainer = styled(motion.span)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'absolute',
+    minHeight: '24px',
+    cursor: 'pointer',
+    borderRadius: '16px',
+}));
+export const ErrorCodeWrapper = styled(motion.span)(() => ({
+    display: 'block',
+    width: '0',
+    overflow: 'hidden',
+}));
+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 GateWayIcon = styled('img')(() => ({
+    width: '13px',
+    height: '13px',
+}));
+export const GatewayIconWrapper = styled(motion.span)(({ theme }) => ({
+    width: '24px',
+    height: '24px',
+    borderRadius: '50%',
+    backgroundColor: theme.palette.background.paper,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    position: 'relative',
+}));
+export const GatewaysContainer = styled(motion.div)(() => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '4px',
+    width: '0',
+    overflow: 'hidden',
+    opacity: 0,
+}));
+export const UnCapturedBadge = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+}));
+export const RefundTooltipView = styled('span')(({ theme }) => ({
+    textDecorationLine: 'underline',
+    color: theme.palette.info.dark,
+}));

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

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

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

@@ -0,0 +1,24 @@
+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 camelCase from 'lodash/camelCase';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../../../Tooltip';
+import { TableCell } from '../../../TableCells';
+import { authenticationStatusIcons } from './constant';
+import { StatusCellContainer, StatusIconWrapper, StatusIcon } from '../style';
+function AuthenticationTypeCell(_a) {
+    var { type } = _a, props = __rest(_a, ["type"]);
+    const { t } = useTranslation();
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StatusCellContainer, { children: _jsx(StatusIconWrapper, Object.assign({ className: "authentication-status" }, { children: type && authenticationStatusIcons[type] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(type)) }, { children: _jsx(StatusIcon, { src: authenticationStatusIcons[type], alt: "authentication-type" }) }))) })) }) })));
+}
+export default AuthenticationTypeCell;

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

@@ -0,0 +1,9 @@
+import { authenticationWalletIcon, authenticationAppTypeIcon, authenticationBiometricIcon, authenticationSchemeIcon, authenticationIssuerIcon, } from '../../../../constants/index.js';
+export const authenticationStatusIcons = {
+    issuer: authenticationIssuerIcon,
+    scheme: authenticationSchemeIcon,
+    device: authenticationBiometricIcon,
+    app: authenticationAppTypeIcon,
+    wallet: authenticationWalletIcon,
+    biometric: authenticationBiometricIcon,
+};

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

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