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

package/build/components/StatusButton/ChevronIcon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTheme } from '@mui/material';
+export function ChevronIcon({ isActive, disableHover }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const theme = useTheme();
+    const handleMouseEnter = () => {
+        if (!disableHover) {
+            setIsHovered(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+    const iconColor = isActive ? theme.palette.common.white : theme.palette.grey[700];
+    const backgroundColor = isHovered ? theme.palette.common.black : 'transparent';
+    return (_jsx("svg", Object.assign({ width: "27", height: "30", viewBox: "0 0 27 32", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsxs("g", Object.assign({ id: "Group 140343" }, { children: [_jsx("path", { id: "Active", d: "M0 0H11C19.8366 0 27 7.16344 27 16C27 24.8366 19.8366 32 11 32H0V0Z", fill: backgroundColor, fillOpacity: "0.1", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("path", { id: "Union", fillRule: "evenodd", clipRule: "evenodd", d: "M15.6941 15.0078C15.6494 15.0193 15.6083 15.043 15.5758 15.0769L12.5026 18.1501L12.5025 18.1501L15.5756 15.0769C15.6082 15.043 15.6493 15.0193 15.6941 15.0078ZM12.5619 18.7465C12.5426 18.7512 12.5227 18.7536 12.5026 18.7536C12.4363 18.7536 12.3727 18.7273 12.3258 18.6804L9.07581 15.4304C9.04012 15.3957 9.01559 15.3512 9.00535 15.3025C8.99511 15.2538 8.99963 15.2032 9.01833 15.1571C9.03703 15.111 9.06907 15.0715 9.11033 15.0437C9.13446 15.0275 9.16112 15.0156 9.18904 15.0086C9.16105 15.0156 9.13433 15.0275 9.11013 15.0438C9.06887 15.0716 9.03684 15.111 9.01814 15.1571C8.99944 15.2032 8.99492 15.2539 9.00516 15.3026C9.0154 15.3513 9.03993 15.3958 9.07562 15.4305L12.3256 18.6805C12.3725 18.7273 12.4361 18.7537 12.5024 18.7537C12.5226 18.7537 12.5426 18.7512 12.5619 18.7465ZM16.1965 15.342C16.1781 15.4301 16.1338 15.5105 16.0693 15.5731L12.8205 18.8219C12.7361 18.9063 12.6217 18.9537 12.5024 18.9537C12.3831 18.9537 12.2686 18.9062 12.1842 18.8219L8.93507 15.5728C8.87148 15.5105 8.82775 15.4308 8.80944 15.3437C8.79101 15.2561 8.79914 15.165 8.8328 15.082C8.86646 14.999 8.92412 14.9279 8.99839 14.8779C9.07266 14.8279 9.16022 14.8011 9.24978 14.8011C9.30998 14.8011 9.36958 14.8132 9.42503 14.8366C9.47997 14.8599 9.52973 14.8938 9.57144 14.9364L12.5024 17.8673L15.433 14.9368C15.5151 14.852 15.6273 14.803 15.7454 14.8002C15.836 14.798 15.9252 14.8233 16.0013 14.8728C16.0773 14.9222 16.1367 14.9935 16.1715 15.0772C16.2063 15.1609 16.2151 15.2533 16.1965 15.342Z", fill: iconColor })] })) })));
+}

package/build/components/StatusButton/StatusButton.js

@@ -0,0 +1,94 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import StyledBadge, { BadgeVariants } from '../CountBadge';
+import { convertToNumber, formatNumber } from '../../utils/index.js';
+import { ChevronIcon } from './ChevronIcon';
+import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown, statusButtonVariants, IconWrapper } from './style';
+import { statusButtonIcons } from './constant';
+const StatusButton = memo((props) => {
+    var _a;
+    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, selectedStatus: initialStatus, onButtonBodyClick, iconMapper = statusButtonIcons, buttonSx } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "selectedStatus", "onButtonBodyClick", "iconMapper", "buttonSx"]);
+    const [buttonClicks, setButtonClicks] = useState(0);
+    const { t } = useTranslation();
+    const buttonRef = useRef(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selectedStatus, setSelectedStatus] = useState(initialStatus !== null && initialStatus !== void 0 ? initialStatus : (_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
+    useEffect(() => {
+        if (initialStatus !== undefined) {
+            setSelectedStatus(initialStatus);
+        }
+    }, [initialStatus]);
+    const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
+    // only open if button is clicked more than once
+    const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
+    const isActiveVariant = variant === 'active';
+    const badgeVariant = useMemo(() => (isActiveVariant ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE), [isActiveVariant]);
+    const selectedOption = useMemo(() => (selectedStatus ? dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => option.status === selectedStatus) : null), [selectedStatus, dropdownOptions]);
+    const statusIcon = useMemo(() => {
+        if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) {
+            return _jsx(IconWrapper, Object.assign({ variant: variant }, { children: selectedOption.icon }));
+        }
+        const iconKey = selectedStatus && iconMapper[selectedStatus] ? selectedStatus : icon;
+        if (iconKey && iconMapper[iconKey]) {
+            return _jsx(StyledStatusIcon, { icon: iconKey, variant: variant, src: iconMapper[iconKey], alt: `${iconKey}-icon` });
+        }
+    }, [selectedOption, selectedStatus, iconMapper, icon, variant]);
+    const statusBadge = useMemo(() => {
+        if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
+            return null;
+        return _jsx(StyledBadge, Object.assign({ variant: badgeVariant }, { children: formatNumber(Number(badgeCount)) }));
+    }, [badgeCount, badgeVariant]);
+    const dropdownIcon = useMemo(() => (hasDropdown ? _jsx(ChevronIcon, { isActive: isActiveVariant }) : null), [hasDropdown, isActiveVariant]);
+    // Reset button clicks and anchor element when variant changes
+    useEffect(() => {
+        if (!isActiveVariant) {
+            setButtonClicks(0);
+            setAnchorEl(null);
+        }
+    }, [isActiveVariant]);
+    // Event handlers
+    const handleDropdownClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleDropdownToggle = useCallback(() => {
+        if (!hasDropdown)
+            return;
+        setAnchorEl(isDropdownOpen ? null : buttonRef.current);
+    }, [hasDropdown, isDropdownOpen]);
+    const handleButtonClick = useCallback((e) => {
+        var _a, _b;
+        e.stopPropagation();
+        (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(selectedStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
+        handleDropdownToggle();
+        setButtonClicks((prev) => prev + 1);
+    }, [props, onButtonBodyClick, selectedStatus, dropdownOptions, handleDropdownToggle]);
+    const handleMenuItemClick = useCallback(
+    // eslint-disable-next-line
+    (item) => (e) => {
+        var _a;
+        (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+        setSelectedStatus(item.status);
+        handleDropdownClose();
+    }, [handleDropdownClose]);
+    // Enhanced dropdown menu items
+    const menuItems = useMemo(() => (dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((item) => (Object.assign(Object.assign({}, item), { onClick: handleMenuItemClick(item) })))) || [], [dropdownOptions, handleMenuItemClick]);
+    const ButtonComponent = statusButtonVariants[variant];
+    const displayLabel = useMemo(() => {
+        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedStatus ? t(selectedStatus) : label);
+    }, [selectedOption, selectedStatus, t, label]);
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick, sx: Object.assign(Object.assign({}, (hasDropdown && { paddingInlineEnd: '27px' })), buttonSx) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, displayLabel, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), isDropdownOpen && hasDropdown && (_jsx(StyledDropdown, { open: isDropdownOpen, onClose: handleDropdownClose, anchorEl: anchorEl, menuItems: menuItems }))] }));
+});
+export default StatusButton;

package/build/components/StatusButton/constant.js

@@ -0,0 +1,30 @@
+import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, dashedCheckIcon, deactivatedIcon, destinationsServiceIcon, destinationWithoutBackgroundIcon, outstandingIcon,
+// trashBinIcon,
+ } from '../../constants/index.js';
+export const statusButtonIcons = {
+    inProgress: initiatedIcon,
+    initiated: initiatedIcon,
+    abandoned: abandonedIcon,
+    cancelled: cancelledIcon,
+    reversed: reverseActionIcon,
+    reports: reportsIcon,
+    search: searchIcon,
+    chevronDown: chevronDownIcon,
+    unAuthorized: unAuthorizedIcon,
+    unSettled: settlementInitiatedIcon,
+    unCaptured: unCapturedIcon,
+    captured: capturedIcon,
+    authorized: authorizedIcon,
+    openFlag: openFlagIcon,
+    closedFlag: closedFlagIcon,
+    unauthenticated: unauthenticatedIcon,
+    authenticated: authenticatedIcon,
+    paidOut: paidOutFilterIcon,
+    scheduled: scheduledFilterIcon,
+    checked: completedBlackIcon,
+    dashedChecked: dashedCheckIcon,
+    deactivated: deactivatedIcon,
+    destination: destinationsServiceIcon,
+    destinationReversed: destinationWithoutBackgroundIcon,
+    outstanding: outstandingIcon,
+};

package/build/components/StatusButton/index.js

@@ -1 +1,3 @@
-export{a as default}from'../../chunk-HRHKLBHG.js';export{a as ChevronIcon}from'../../chunk-ABDRIOU6.js';import'../../chunk-YLE4Q6WH.js';import'../../chunk-D5EB3ZRT.js';import'../../chunk-2T2Z5RPJ.js';import'../../chunk-E6XVMA37.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import StatusButton from './StatusButton';
+export { ChevronIcon } from './ChevronIcon';
+export default StatusButton;

package/build/components/StatusButton/style.js

@@ -0,0 +1,92 @@
+import { styled, Button, Box, alpha } from '@mui/material';
+import Dropdown from '../DropdownMenu';
+const baseButtonStyle = (theme) => (Object.assign(Object.assign({}, theme.typography.subtitle1), { borderRadius: '50px', borderWidth: '1px', borderStyle: 'solid', minWidth: '135.11px', height: '32px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', textTransform: 'none', transition: 'none', paddingInline: theme.spacing(2) }));
+const ActiveButton = styled(Button)(({ theme }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), { background: theme.palette.background.gradient.shadedBlue, color: theme.palette.common.white, '&:hover': {
+        background: theme.palette.background.gradient.shadedBlue,
+        opacity: 0.8,
+    } })));
+const InActiveButton = styled(Button)(({ theme }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), { backgroundColor: theme.palette.common.white, borderColor: theme.palette.grey[100], color: theme.palette.text.primary, '&:hover': {
+        backgroundColor: theme.palette.common.white,
+        opacity: 0.7,
+    } })));
+export const statusButtonVariants = {
+    active: ActiveButton,
+    inActive: InActiveButton,
+};
+export const CountBadge = styled(Box)(({ theme, variant }) => ({
+    borderRadius: '50px',
+    backgroundColor: variant === 'active' ? alpha(theme.palette.text.primary, 0.1) : theme.palette.grey[100],
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingInline: theme.spacing(0.5),
+    paddingBlock: theme.spacing(0.25),
+    color: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary,
+    fontSize: '8px',
+    fontWeight: 700,
+    lineHeight: '10px',
+}));
+export const StatusIcon = styled('img')(({ theme, variant, icon }) => {
+    var _a;
+    return (Object.assign(Object.assign({ fill: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary, color: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary }, (!(((_a = ['openFlag', 'closedFlag']) === null || _a === void 0 ? void 0 : _a.includes(icon !== null && icon !== void 0 ? icon : '')) && variant === 'inActive') &&
+        icon !== 'captured' && {
+        filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    })), { maxWidth: '14px', maxHeight: '14px' }));
+});
+export const StyledFilterName = styled('p')(({ theme }) => ({
+    fontSize: '0.6875rem',
+    color: theme.palette.background.default,
+    fontStyle: 'normal',
+    margin: 'auto',
+    textTransform: 'capitalize',
+}));
+export const StyledDropdown = styled(Dropdown)(({ theme }) => ({
+    backgroundColor: 'white',
+    boxShadow: theme.shadows[21],
+    borderRadius: '0.25rem',
+    '& .MuiPaper-root': {
+        borderRadius: '0.25rem',
+        width: '12.5rem',
+    },
+}));
+export const ChevronContainer = styled('span')(() => ({
+    width: '27px',
+    height: '100%',
+    maxHeight: '100%',
+    position: 'absolute',
+    top: '0',
+    right: '0',
+    bottom: '0',
+    overflow: 'hidden',
+}));
+export const Label = styled(Box)(({ variant }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: '0.5rem',
+    fontWeight: variant === 'active' ? 700 : 400,
+}));
+export const LabelWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+}));
+export const StyledStatusIcon = styled('img')(({ theme, variant, icon }) => {
+    var _a;
+    return (Object.assign(Object.assign({ fill: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary, color: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary }, (!(((_a = ['openFlag', 'closedFlag']) === null || _a === void 0 ? void 0 : _a.includes(icon !== null && icon !== void 0 ? icon : '')) && variant === 'inActive') &&
+        icon !== 'captured' && {
+        filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    })), { maxWidth: '14px', maxHeight: '14px' }));
+});
+export const IconWrapper = styled(Box)(({ variant }) => ({
+    width: '14px',
+    height: '14px',
+    display: 'flex',
+    alignItems: 'center',
+    '& img': {
+        width: '14px',
+        height: '14px',
+        filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    },
+}));

package/build/components/StatusButton/type.js

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

package/build/components/StatusChip/StatusChip.js

@@ -0,0 +1,58 @@
+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 { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AnimatePresence, motion } from 'framer-motion';
+import { copyText as copyTextHandler, isArabic } from '../../utils/index.js';
+import { copyIcon, greenCheckIcon } from '../../constants/index.js';
+import { ChipStyled, Wrapper, CopyWrapper } from './style';
+import { emptyStatusChipColors } from '../../constants/index.js';
+const StatusChip = (_a) => {
+    var { children, unknownText, copyText, expandDirection = 'right', chipStyles, containerStyles, fullWidth = false } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection", "chipStyles", "containerStyles", "fullWidth"]);
+    const [showCopy, setShowCopy] = useState(false);
+    const { t } = useTranslation();
+    const isSelected = props.isSelected;
+    const isCopyActive = isSelected && copyText;
+    const handleCopy = useCallback((e) => {
+        e.stopPropagation();
+        if (copyText) {
+            setShowCopy(true);
+            copyTextHandler(copyText);
+            const timer = setTimeout(() => {
+                setShowCopy(false);
+            }, 2000);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    }, [copyText]);
+    const copyButton = useMemo(() => (_jsx(CopyWrapper, Object.assign({ sx: Object.assign(Object.assign({}, (expandDirection === 'right' && { right: '8px' })), (expandDirection === 'left' && { left: '8px' })) }, { children: _jsx(motion.img, { initial: { opacity: 0, x: -5 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -2 }, transition: { duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
+                height: 12,
+                width: 12,
+                objectFit: 'contain',
+            } }) }))), [showCopy, handleCopy, expandDirection]);
+    const isExpandedRightActive = isCopyActive && expandDirection === 'right';
+    const isExpandedLeftActive = isCopyActive && expandDirection === 'left';
+    if (!children) {
+        return (_jsx(ChipStyled, Object.assign({}, emptyStatusChipColors, props, { isSelected: false, sx: (theme) => ({ borderColor: theme.palette.divider, width: fullWidth ? '100%' : 'auto' }) }, { children: unknownText ? t(unknownText) : t('unknown') })));
+    }
+    return (_jsxs(motion.div, Object.assign({ style: Object.assign(Object.assign({ position: 'relative' }, containerStyles), (fullWidth && { width: '100%', minWidth: 0 })), animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none', width: fullWidth ? '100%' : 'auto' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(motion.div, Object.assign({ style: {
+                    position: 'absolute',
+                    top: 0,
+                    zIndex: isSelected ? 3 : 0,
+                    width: fullWidth ? '100%' : 'auto',
+                    left: expandDirection === 'right' ? 0 : 'unset',
+                    right: expandDirection === 'left' ? 0 : 'unset',
+                }, transition: { delay: isSelected ? 0 : 0.3, duration: 0.2 } }, { children: _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, sx: { width: fullWidth ? '100%' : 'auto' } }, chipStyles, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: Object.assign({ display: 'flex', gap: '4px' }, (fullWidth && { maxWidth: '100%', width: '100%' })), animate: Object.assign(Object.assign({}, (isExpandedRightActive && { paddingRight: 12 })), (isExpandedLeftActive && { paddingLeft: 12 })), transition: { delay: isSelected ? 0 : 0.3, duration: 0.2 } }, { children: [_jsx(AnimatePresence, { children: isExpandedLeftActive && copyButton }), _jsx(Wrapper, Object.assign({ "data-is-arabic": typeof children === 'string' && isArabic(children) }, { children: children })), _jsx(AnimatePresence, { children: isExpandedRightActive && copyButton })] })) })) }))] })));
+};
+export default StatusChip;

package/build/components/StatusChip/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-2LMLVUW4.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import StatusChip from './StatusChip';
+export default StatusChip;

package/build/components/StatusChip/style.js

@@ -0,0 +1,37 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const ChipStyled = styled(Box, {
+    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'minWidth', 'padding', 'maxWidth', 'isSelected', 'disableAnimation'].includes(prop),
+})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, minWidth, maxWidth, disableAnimation, }) => {
+    return Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 8px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: minWidth || '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
+        boxShadow: 'white 7px 0px 8px 2px',
+    })), (disableAnimation && {
+        transition: 'none !important',
+        animation: 'none !important',
+        transform: 'none !important',
+        '& *': {
+            transition: 'none !important',
+            animation: 'none !important',
+            transform: 'none !important',
+        },
+    }));
+});
+export const Wrapper = styled(Box)(() => ({
+    gap: '4px',
+    textAlign: 'center',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+    flex: 1,
+}));
+export const CopyWrapper = styled(Box)(() => ({
+    position: 'absolute',
+    top: 0,
+    height: '100%',
+    width: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+}));

package/build/components/StatusChip/type.js

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

package/build/components/StatusChipWithCopy/StatusChipWithCopy.js

@@ -0,0 +1,23 @@
+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 { memo, useMemo } from 'react';
+import StatusChip from '../StatusChip';
+import { checkIsSelected } from './utils';
+function StatusChipWithCopy(_a) {
+    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, rest = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
+    const isSelected = useMemo(() => checkIsSelected({ rowIndex, colIndex, selectedId, chipIndex }), [rowIndex, colIndex, selectedId, chipIndex]);
+    return (_jsx(StatusChip, Object.assign({}, rest, { copyText: copyText, onClick: (e) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(e, chipIndex);
+        }, isSelected: isSelected }, { children: children })));
+}
+export default memo(StatusChipWithCopy);

package/build/components/StatusChipWithCopy/index.js

@@ -1 +1,4 @@
-export{a as checkIsSelected,b as default}from'../../chunk-XUDGW7IY.js';import'../../chunk-2LMLVUW4.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import StatusChipWithCopy from './StatusChipWithCopy';
+export * from './StatusChipWithCopy';
+export * from './utils';
+export default StatusChipWithCopy;

package/build/components/StatusChipWithCopy/utils.js

@@ -0,0 +1,4 @@
+export const checkIsSelected = ({ chipIndex, rowIndex, colIndex, selectedId, }) => {
+    const [, selectedRowIndex, selectedColumnIndex, selectedChipIndex] = (selectedId !== null && selectedId !== void 0 ? selectedId : '').split('-');
+    return Number(selectedRowIndex) === rowIndex && Number(selectedColumnIndex) === colIndex && Number(selectedChipIndex) === chipIndex;
+};

package/build/components/StatusFilter/StatusFilter.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import { Menu, MenuItem, RadioGroup } from '../index.js';
+import { FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle } from '../Filters';
+import { rightArrow } from '../../constants/index.js';
+import { ClickAwayListener, Popper } from '@mui/material';
+import { getInitialStatuses } from './utils';
+import { StatusValue } from '../../types/index.js';
+export default function StatusFilter({ anchorEl, options, apiKey = 'statuses', initialStatuses, onCloseDropdown, onClear, onConfirm, }) {
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const [statuses, setStatuses] = useState(() => {
+        return getInitialStatuses(initialStatuses, options);
+    });
+    const containerRef = useRef(null);
+    const [childAnchorEl, setChildAnchorEl] = useState(null);
+    const [hoveredStatus, setHoveredStatus] = useState(null);
+    const onChildMouseOver = (event, status) => {
+        setChildAnchorEl(event.currentTarget);
+        setHoveredStatus(status);
+    };
+    const onChildLeave = useCallback(() => {
+        setChildAnchorEl(null);
+        setHoveredStatus(null);
+    }, []);
+    const onCloseDropdowns = useCallback((e) => {
+        onCloseDropdown(e);
+        onChildLeave();
+    }, [onChildLeave, onCloseDropdown]);
+    const handleOkButtonClick = (e) => {
+        const newStatuses = Object.keys(statuses).reduce((acc, key) => {
+            const value = statuses[key];
+            if (value !== StatusValue.ALL) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        const isAllStatuses = Object.values(statuses).every((value) => value === StatusValue.ALL);
+        if (isAllStatuses) {
+            // when all statuses are selected as `all`, remove the active filter icon if it exists
+            onClear([apiKey]);
+        }
+        else {
+            onConfirm({ [apiKey]: newStatuses });
+        }
+        onCloseDropdown(e);
+    };
+    const onClickStatus = (value) => {
+        if (hoveredStatus) {
+            setStatuses((prev) => (Object.assign(Object.assign({}, prev), { [hoveredStatus]: value })));
+        }
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: (e) => {
+            e.stopPropagation();
+            onCloseDropdown(e);
+        } }, { children: _jsxs(Box, Object.assign({ ref: containerRef }, { children: [_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), options.map(({ value, label }) => (_jsxs(MenuItem, Object.assign({ onClick: (e) => {
+                                setChildAnchorEl(e.currentTarget);
+                            }, onMouseOver: (e) => {
+                                onChildMouseOver(e, value);
+                            }, sx: {
+                                minHeight: '35px',
+                                padding: '8px 16px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                cursor: 'pointer',
+                                '&:hover': { backgroundColor: '#fff', boxShadow: '0px 0px 16px 0px #00000021' },
+                            }, hideCheckbox: true }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: label })), _jsx(Box, { component: "img", src: rightArrow, width: 16, height: 12, sx: { marginLeft: 'auto' } })] }), value))), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCloseDropdowns }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })), _jsx(Popper, Object.assign({ open: Boolean(childAnchorEl), anchorEl: childAnchorEl, placement: "right-start", onMouseLeave: onChildLeave }, { children: _jsx(Box, Object.assign({ sx: {
+                            backgroundColor: '#fff',
+                            borderEndEndRadius: '8px',
+                            border: '1px solid #F2F2F2',
+                        } }, { children: _jsx(RadioGroup, { options: [
+                                {
+                                    value: StatusValue.ALL,
+                                    label: 'All',
+                                },
+                                {
+                                    value: StatusValue.ENABLED,
+                                    label: 'Enabled',
+                                },
+                                {
+                                    value: StatusValue.DISABLED,
+                                    label: 'Disabled',
+                                },
+                            ], value: statuses[hoveredStatus || ''], onOptionChange: onClickStatus }) })) }))] })) })));
+}

package/build/components/StatusFilter/index.js

@@ -1 +1 @@
-export{Ic as StatusFilter}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 StatusFilter } from './StatusFilter';

package/build/components/StatusFilter/utils.js

@@ -0,0 +1,10 @@
+import { StatusValue } from '../../types/index.js';
+export const getInitialStatuses = (statuses, options) => {
+    const rawStatuses = (statuses || {});
+    const mappedStatuses = {};
+    options === null || options === void 0 ? void 0 : options.forEach(({ value }) => {
+        const statusValue = rawStatuses === null || rawStatuses === void 0 ? void 0 : rawStatuses[value];
+        mappedStatuses[value] = statusValue === undefined ? StatusValue.ALL : statusValue;
+    });
+    return mappedStatuses;
+};

package/build/components/StatusGroupChips/StatusGroupChips.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 { StyledContainer, StyledStatusChip } from './style';
+const StatusGroupChips = (_a) => {
+    var { chips, containerSx, defaultChipSx } = _a, containerProps = __rest(_a, ["chips", "containerSx", "defaultChipSx"]);
+    if (!chips || chips.length === 0) {
+        return null;
+    }
+    return (_jsx(StyledContainer, Object.assign({ sx: containerSx }, containerProps, { children: chips.map((_a) => {
+            var { key, content, sx } = _a, chipProps = __rest(_a, ["key", "content", "sx"]);
+            return (_jsx(StyledStatusChip, Object.assign({ sx: Object.assign(Object.assign({}, defaultChipSx), sx) }, chipProps, { children: content }), key));
+        }) })));
+};
+export default StatusGroupChips;

package/build/components/StatusGroupChips/index.js

@@ -1 +1 @@
-export{a as StatusGroupChips}from'../../chunk-JQYBCTVW.js';import'../../chunk-XUDGW7IY.js';import'../../chunk-2LMLVUW4.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+export { default as StatusGroupChips } from './StatusGroupChips';

package/build/components/StatusGroupChips/style.js

@@ -0,0 +1,17 @@
+import { styled, Box } from '@mui/material';
+import StatusChipWithCopy from '../StatusChipWithCopy';
+export const StyledContainer = styled(Box)(() => ({
+    display: 'flex',
+    gap: '4px',
+    alignItems: 'center',
+    flexDirection: 'row',
+}));
+export const StyledStatusChip = styled(StatusChipWithCopy)(() => ({
+    padding: '0.75px 12px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+}));

package/build/components/StatusGroupChips/type.js

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

package/build/components/StatusIcons/AgreementIcon/AgreementIcon.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, useTheme } from '@mui/material';
+import { CountAnimatedBadge } from '../../CountBadge';
+import { AgreementImageWrapper } from '../../CountBadge/style';
+import Tooltip from '../../Tooltip';
+import { noAgreementIcon } from '../../../constants/index.js';
+import { formatOrdinal } from '../../../utils/index.js';
+import { agreementTypes, badgesTypes } from './constant';
+import { BadgeTextWrapper, TextLabel } from './style';
+import Icon from '../../Icon';
+function AgreementIcon({ type, hasSavedCard, totalPaymentsCount, isTextShown }) {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const sources = useMemo(() => [
+        ...(hasSavedCard ? [badgesTypes.SAVED_TOKEN] : []),
+        ...((totalPaymentsCount || 0) > 0 ? [badgesTypes.COUNT] : []),
+        ...(type && agreementTypes[type] ? [agreementTypes[type]] : []),
+    ], [hasSavedCard, totalPaymentsCount, type]);
+    const countBadge = (index) => isTextShown ? (_jsx(AgreementImageWrapper, Object.assign({ "data-testid": "AgreementCell_countBadge" }, { children: _jsx(Tooltip, Object.assign({ title: t('totalPaymentCount', { amount: formatOrdinal(totalPaymentsCount) }) }, { children: _jsx(BadgeTextWrapper, { children: _jsxs(TextLabel, Object.assign({ "data-testid": "AgreementCell_totalPaymentsCount", sx: {
+                        color: badgesTypes.COUNT.color,
+                    } }, { children: ["x", totalPaymentsCount] })) }) })) }), index)) : (_jsx(CountAnimatedBadge, { totalPaymentsCount: totalPaymentsCount, index: index }, index));
+    const agreementSources = sources.map((source, index) => {
+        return source.label === 'countBadge' ? (countBadge(index)) : (_jsx(Tooltip, Object.assign({ title: t(source.label) }, { children: _jsx(AgreementImageWrapper, { children: isTextShown ? (_jsx(BadgeTextWrapper, { children: _jsx(TextLabel, Object.assign({ "data-testid": "AgreementCell_agreementType", sx: {
+                            color: source.color,
+                        } }, { children: t(source.label) })) })) : (_jsx(Icon, { sx: { maxWidth: '16px', maxHeight: '16px', height: 'auto', width: 'auto' }, src: source.icon, alt: "agreement" })) }, source.color) }), source.color));
+    });
+    const noAgreementBadge = (_jsx(Tooltip, Object.assign({ title: "No agreement" }, { children: _jsx(AgreementImageWrapper, { children: isTextShown ? (_jsx(BadgeTextWrapper, { children: _jsx(TextLabel, Object.assign({ "data-testid": "AgreementCell_agreementType", sx: {
+                        color: theme.palette.text.secondary,
+                    } }, { children: "No agreement" })) })) : (_jsx(Icon, { sx: { maxWidth: '24px', maxHeight: '24px', height: 'auto', width: 'auto' }, src: noAgreementIcon, alt: "agreement" })) }, "no-agreement") }), "no-agreement"));
+    return _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: (agreementSources === null || agreementSources === void 0 ? void 0 : agreementSources.length) > 0 ? agreementSources : noAgreementBadge }));
+}
+export default AgreementIcon;