@tap-payments/os-micro-frontend-shared 0.0.30 → 0.0.31-dev-shared-migration-v1

package/build/components/TableHeader_V2/components/TableView/style.js

@@ -0,0 +1,102 @@
+import { Box, styled } from '@mui/material';
+export const ButtonStyled = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: '4px',
+    background: theme.palette.common.white,
+    padding: '8px',
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    gap: 8,
+    height: 32,
+    cursor: 'pointer',
+    '&:hover': {
+        border: '1px solid',
+        borderColor: theme.palette.info.dark,
+        boxShadow: theme.shadows[7],
+    },
+}));
+export const ViewWrapper = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    fontWeight: theme.typography.fontWeightRegular,
+    textTransform: 'capitalize',
+    position: 'relative',
+    transition: '0.5s',
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        left: -8,
+        right: 0,
+        width: '100%',
+        height: '100%',
+        boxShadow: theme.shadows[11],
+        borderRadius: theme.spacing(0.5),
+        paddingInlineStart: theme.spacing(1),
+        paddingTop: '9px',
+        paddingBottom: '9px',
+        paddingInlineEnd: '9px',
+        zIndex: -1,
+    },
+}));
+export const ListStyled = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: theme.spacing(0.5),
+    boxShadow: theme.shadows[8],
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    zIndex: 5,
+    fontSize: '11px',
+    width: 192,
+}));
+export const DropdownStyled = styled(Box)(() => ({
+    minWidth: 160,
+    position: 'relative',
+}));
+export const MenuItem = styled(Box, { shouldForwardProp: (props) => props !== 'addColumnViewEl' })(({ theme }) => ({
+    padding: theme.spacing(1),
+    paddingInlineEnd: 2,
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    display: 'flex',
+    alignItems: 'center',
+    height: 32,
+    cursor: 'pointer',
+    img: {
+        height: 12,
+    },
+    '.check-icon': {
+        height: 'auto',
+        marginInlineEnd: theme.spacing(1),
+    },
+    '&:hover': {
+        color: theme.palette.info.dark,
+        fontWeight: theme.typography.fontWeightBold,
+    },
+    '&.add-column': {
+        justifyContent: 'space-between',
+        paddingInlineEnd: theme.spacing(1),
+        position: 'relative',
+        border: 'none',
+        zIndex: 5,
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+        borderTopRightRadius: theme.spacing(1),
+        borderTopLeftRadius: theme.spacing(1),
+        '&:hover': {
+            boxShadow: theme.shadows[6],
+        },
+    },
+}));
+export const Space = styled(Box)(({ theme }) => ({
+    width: 12,
+    marginInlineEnd: theme.spacing(1),
+}));
+export const SpaceAfter = styled(Box)(() => ({
+    width: 16,
+}));

package/build/components/TableHeader_V2/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StatusButtons';
+export * from './TableView';

package/build/components/TableHeader_V2/components/index.js

@@ -0,0 +1,2 @@
+export * from './StatusButtons';
+export * from './TableView';

package/build/components/TableHeader_V2/data.d.ts

@@ -0,0 +1,5 @@
+export declare const dummyViewList: {
+    label: string;
+    id: string;
+    columns: string[];
+}[];

package/build/components/TableHeader_V2/data.js

@@ -0,0 +1,7 @@
+export const dummyViewList = [
+    {
+        label: 'Default',
+        id: 'default',
+        columns: ['default', 'default'],
+    },
+];

package/build/components/TableHeader_V2/index.d.ts

@@ -0,0 +1,5 @@
+import TableHeader from './TableHeader';
+export default TableHeader;
+export * from './style';
+export { FiltersRow } from './FiltersRow';
+export * from './components';

package/build/components/TableHeader_V2/index.js

@@ -0,0 +1,5 @@
+import TableHeader from './TableHeader';
+export default TableHeader;
+export * from './style';
+export { FiltersRow } from './FiltersRow';
+export * from './components';

package/build/components/TableHeader_V2/style.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const TitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const TableHeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const TableHeaderTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const TableHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StatusButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const FiltersRowWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/TableHeader_V2/style.js

@@ -0,0 +1,43 @@
+import { Box, styled } from '@mui/material';
+import Text from '../Text';
+export const TitleContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(3),
+    width: '100%',
+    marginBottom: theme.spacing(2.25),
+    marginTop: theme.spacing(2),
+}));
+export const TableHeaderContainer = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    paddingInline: theme.spacing(4),
+    paddingBottom: theme.spacing(2),
+    paddingTop: theme.spacing(2),
+    overflowX: 'clip',
+}));
+export const TableHeaderTitle = styled(Text)(({ theme }) => ({
+    fontSize: '1.75rem',
+    fontWeight: theme.typography.fontWeightMedium,
+    lineHeight: '120%',
+}));
+export const TableHeaderRow = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(3),
+    width: '100%',
+}));
+export const StatusButtonsContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+export const FiltersRowWrapper = styled(Box)(() => ({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: '8px',
+    flexShrink: 0,
+}));

package/build/components/TableHeader_V2/type.d.ts

@@ -0,0 +1,67 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import type { CalenderMode, TableHeaderStatus, ColumnViewProps } from '../../types/index.js';
+import type { StatusButtonProps } from '../StatusButton/type';
+declare const viewsOptions: {
+    default: {};
+    developer: {};
+    marketing: {};
+    finance: {};
+    custom: {};
+};
+export type View = keyof typeof viewsOptions;
+export type AvailableStatus = StatusButtonProps & {
+    status: TableHeaderStatus | TableHeaderStatus[];
+};
+export interface TableHeaderProps {
+    availableStatuses?: AvailableStatus[];
+    status?: TableHeaderStatus;
+    search?: string;
+    view?: View;
+    date?: Date | [Date, Date];
+    showMaximizedView?: boolean;
+    title?: string | null;
+    calendarMode?: CalenderMode;
+    onStatusChange?: (status: Partial<TableHeaderStatus>) => void;
+    onSearch?: (search: string) => void;
+    onViewChange?: () => void;
+    onDateChange?: (date: Date | [Date, Date], timezoneOffset?: number) => void;
+    tableReportsComponent?: React.ReactNode;
+    tableFilterComponent?: React.ReactNode;
+    onCalendarModeSwitch: (mode: CalenderMode) => void;
+    filteredIds?: string[];
+    onCancelFilteredIdsClick?: () => void;
+    isFilteredIdsShown?: boolean;
+    totalCount?: number;
+    cardNumber?: string;
+    leftActions?: ReactNode;
+    rightActions?: ReactNode;
+    isReportsButtonVisible?: boolean;
+    onSearchChange?: (search: string) => void;
+    onToggleViewButtonClick?: () => void;
+    leftComponent?: React.ReactNode;
+    setTableViews?: (columns: ColumnViewProps[]) => void;
+    tableViews?: ColumnViewProps[];
+    resetTableViews?: (view: {
+        id: string;
+        label: string;
+    }) => void;
+    onToggleTextButtonClick?: () => void;
+    isTextShown?: boolean;
+    children?: ReactNode;
+    calendarGroupBy?: string;
+    onCalendarGroupChange?: (value: string) => void;
+    maxDateRange?: number;
+    isAcceptance?: boolean;
+}
+export type FilterRowProps = PropsWithChildren<{}>;
+export interface Column {
+    label: string;
+    name: string;
+    groupName: string;
+    selected: boolean;
+}
+export interface ViewOption {
+    id: string;
+    label: string;
+}
+export {};

package/build/components/TableHeader_V2/type.js

@@ -0,0 +1,8 @@
+const viewsOptions = {
+    default: {},
+    developer: {},
+    marketing: {},
+    finance: {},
+    custom: {},
+};
+export {};

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -20,9 +20,14 @@ function ColumnFilter(filter) {
     const listFilterData = useMemo(() => {
         var _a;
         const listFilter = filter;
-        return ((_a = listFilter === null || listFilter === void 0 ? void 0 : listFilter.data) === null || _a === void 0 ? void 0 : _a[listFilter.apiKey]) || [];
+        const rawData = (_a = listFilter === null || listFilter === void 0 ? void 0 : listFilter.data) === null || _a === void 0 ? void 0 : _a[listFilter.apiKey];
+        return Array.isArray(rawData) ? rawData : [];
     }, [filter]);
-    const showClearIcon = useMemo(() => Object.values(filterData || {}).some((value) => Boolean(value)) || listFilterData.length > 0, [filterData, listFilterData]);
+    const showClearIcon = useMemo(() => Object.values(filterData || {}).some((value) => {
+        if (typeof value === 'string' || Array.isArray(value))
+            return value.length > 0;
+        return Boolean(value);
+    }) || listFilterData.length > 0, [filterData, listFilterData]);
     const open = Boolean(anchorEl);
     const filterApiKeys = useMemo(() => {
         var _a;
@@ -32,18 +37,19 @@ function ColumnFilter(filter) {
         return (_a = ((filter === null || filter === void 0 ? void 0 : filter.options) || [])) === null || _a === void 0 ? void 0 : _a.map(({ apiKey }) => apiKey);
     }, [filter]);
     const renderFilter = useMemo(() => {
-        var _a;
         if (filter.type === 'list')
             return _jsx(List, { onCloseDropdown: onCloseDropdown, filter: filter });
         if (filter.type === 'inputs')
             return _jsx(Inputs, { onCloseDropdown: onCloseDropdown, filter: filter });
-        const componentSharedProps = {
-            anchorEl,
-            setAnchorEl,
-        };
-        const Component = (_a = filter.render) === null || _a === void 0 ? void 0 : _a.call(filter, componentSharedProps);
-        return Component;
-    }, [open, filter]);
+        if (filter.type === 'custom') {
+            const componentSharedProps = {
+                anchorEl,
+                setAnchorEl,
+            };
+            return filter.render(componentSharedProps);
+        }
+        return null;
+    }, [open, filter, anchorEl, setAnchorEl]);
     return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'inline-block', marginTop: 'auto' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
                                 filter.onClear(filterApiKeys);
                             } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { marginInlineStart: '8px', cursor: 'pointer' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.js

@@ -4,30 +4,79 @@ import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import lodashValues from 'lodash/values';
 import { useTranslation } from 'react-i18next';
+import { PhoneInputBase } from '../../../../InputBase';
 import { grayCloseIcon, searchIcon } from '../../../../../constants/index.js';
 import { Wrapper, Text, InputStyled, InputsWrapper, ClearButton, ClearWrapper } from './style';
 import { CancelButton, Footer, OkayButton } from '../style';
 function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter } }) {
     const [values, setValues] = useState({});
     useEffect(() => {
-        setValues((options || []).reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = data === null || data === void 0 ? void 0 : data[apiKey]) !== null && _a !== void 0 ? _a : '' })); }, {}));
+        setValues((options || []).reduce((acc, { apiKey, type }) => {
+            var _a;
+            const optionData = data === null || data === void 0 ? void 0 : data[apiKey];
+            if (type === 'phone') {
+                const phoneData = optionData;
+                return Object.assign(Object.assign({}, acc), { [apiKey]: (_a = phoneData === null || phoneData === void 0 ? void 0 : phoneData.phone) !== null && _a !== void 0 ? _a : '', [`${apiKey}_country`]: phoneData === null || phoneData === void 0 ? void 0 : phoneData.country });
+            }
+            return Object.assign(Object.assign({}, acc), { [apiKey]: optionData !== null && optionData !== void 0 ? optionData : '' });
+        }, {}));
     }, []);
     const { t } = useTranslation();
     const onClickOkay = () => {
-        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(values);
+        const transformedValues = options.reduce((acc, { apiKey, type }) => {
+            if (type === 'phone') {
+                const phoneValue = values[apiKey];
+                const countryValue = values[`${apiKey}_country`];
+                if (phoneValue || countryValue) {
+                    acc[apiKey] = {
+                        phone: phoneValue || '',
+                        country: countryValue,
+                    };
+                }
+            }
+            else {
+                const value = values[apiKey];
+                if (value !== undefined && value !== '') {
+                    acc[apiKey] = value;
+                }
+            }
+            return acc;
+        }, {});
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(transformedValues);
         onCloseDropdown();
     };
     const onClickCancel = () => {
         onCloseDropdown();
     };
     const onClickClear = () => {
-        setValues(options.reduce((acc, { apiKey }) => (Object.assign(Object.assign({}, acc), { [apiKey]: '' })), {}));
+        setValues(options.reduce((acc, { apiKey, type }) => {
+            if (type === 'phone') {
+                return Object.assign(Object.assign({}, acc), { [apiKey]: '', [`${apiKey}_country`]: undefined });
+            }
+            return Object.assign(Object.assign({}, acc), { [apiKey]: '' });
+        }, {}));
     };
-    const isInputHasValue = (key) => values[key] !== undefined && values[key].length > 0;
-    const getInputValue = (key) => (values[key] !== undefined && values[key].length ? values[key] : '');
-    const onClickResetInput = (key) => {
-        if (isInputHasValue(key))
-            setValues(Object.assign(Object.assign({}, values), { [key]: '' }));
+    const isInputHasValue = (key, type) => {
+        if (type === 'phone') {
+            return values[key] !== undefined && typeof values[key] === 'string' && values[key].length > 0 && values[`${key}_country`] !== undefined;
+        }
+        return values[key] !== undefined && typeof values[key] === 'string' && values[key].length > 0;
+    };
+    const getInputValue = (key, type) => {
+        if (type === 'phone') {
+            return values[key] !== undefined && typeof values[key] === 'string' && values[key].length ? values[key] : '';
+        }
+        return values[key] !== undefined && typeof values[key] === 'string' && values[key].length ? values[key] : '';
+    };
+    const onClickResetInput = (key, type) => {
+        if (isInputHasValue(key, type)) {
+            if (type === 'phone') {
+                setValues(Object.assign(Object.assign({}, values), { [key]: '', [`${key}_country`]: undefined }));
+            }
+            else {
+                setValues(Object.assign(Object.assign({}, values), { [key]: '' }));
+            }
+        }
     };
     const showClearButton = useMemo(() => lodashValues(values).some((x) => Boolean(x)), [values]);
     const getFilterByApiKey = useCallback((apiKey) => {
@@ -38,7 +87,7 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
         const isAnyInputWithValue = Object.entries(values).some(([inputKey, val]) => { var _a; return Boolean(val) && (((_a = getFilterByApiKey(inputKey)) === null || _a === void 0 ? void 0 : _a.filterGroup) !== filterGroup || !filterGroup); });
         return isOnlyOneFilter && !inputWithValue && isAnyInputWithValue;
     }, [options, values, isOnlyOneFilter]);
-    return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main" }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, customInput }) => {
+    return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main" }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, customInput, type, countries, isCountriesLoading }) => {
                     if (customInput) {
                         return customInput({
                             key: apiKey,
@@ -47,17 +96,20 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
                                 setValues(Object.assign(Object.assign({}, values), { [apiKey]: value }));
                             },
                             isDisabled: isInputDisabled(apiKey, filterGroup),
-                            getInputValue,
-                            isInputHasValue: isInputHasValue(apiKey),
+                            getInputValue: (keyToGet) => getInputValue(keyToGet, type),
+                            isInputHasValue: () => isInputHasValue(apiKey, type),
                             onClickReset: () => {
-                                onClickResetInput(apiKey);
+                                onClickResetInput(apiKey, type);
                             },
                         });
                     }
+                    if (type === 'phone') {
+                        return (_jsx(PhoneInputBase, { "data-testid": `ColumnFilterInputs_PhoneInput_${apiKey}`, phoneValue: getInputValue(apiKey, 'phone'), onPhoneChange: (val) => setValues(Object.assign(Object.assign({}, values), { [apiKey]: val, [`${apiKey}_country`]: values[`${apiKey}_country`] })), countryValue: values[`${apiKey}_country`], onCountryChange: (country) => setValues(Object.assign(Object.assign({}, values), { [`${apiKey}_country`]: country, [apiKey]: values[apiKey] })), countries: countries || [], isCountriesLoading: isCountriesLoading || false, hasError: false, disabled: isDisabled || isInputDisabled(apiKey, filterGroup), placeholder: placeholder }, apiKey));
+                    }
                     return (_jsx(InputStyled, { className: "input", "data-testid": "ColumnFilterInputs_InputStyled", name: apiKey, placeholder: placeholder, onChange: (e) => {
                             setValues(Object.assign(Object.assign({}, values), { [apiKey]: e.target.value }));
-                        }, disabled: isDisabled || isInputDisabled(apiKey, filterGroup), value: getInputValue(apiKey), inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue(apiKey) ? 'close' : 'search', src: isInputHasValue(apiKey) ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue(apiKey) ? 'pointer' : 'default' }, onClick: () => {
-                                onClickResetInput(apiKey);
+                        }, disabled: isDisabled || isInputDisabled(apiKey, filterGroup), value: getInputValue(apiKey, type), inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue(apiKey, type) ? 'close' : 'search', src: isInputHasValue(apiKey, type) ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue(apiKey, type) ? 'pointer' : 'default' }, onClick: () => {
+                                onClickResetInput(apiKey, type);
                             } }) }, apiKey));
                 }) })), _jsx(Collapse, Object.assign({ in: showClearButton, component: "section", "data-testid": "ColumnFilterInputs_Collapse" }, { children: _jsx(ClearWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_ClearWrapper" }, { children: _jsx(ClearButton, Object.assign({ type: "button", onClick: onClickClear, "data-testid": "ColumnFilterInputs_ClearButton" }, { children: t('clear') })) })) })), _jsxs(Footer, Object.assign({ component: "footer", "data-testid": "ColumnFilterInputs_footer" }, { children: [_jsx(CancelButton, Object.assign({ type: "button", onClick: onClickCancel, "data-testid": "ColumnFilterInputs_CancelButton" }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ type: "button", onClick: onClickOkay, "data-testid": "ColumnFilterInputs_OkayButton" }, { children: t('okay') }))] }))] })));
 }

package/build/components/VirtualTable/components/ColumnFilter/List/List.js

@@ -10,7 +10,7 @@ function List({ onCloseDropdown, filter, styles }) {
     const isItemSelected = (apiKey) => {
         var _a, _b;
         const selectedValues = (_b = (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[filter.apiKey]) !== null && _b !== void 0 ? _b : [];
-        if (selectedValues.length) {
+        if (Array.isArray(selectedValues) && selectedValues.length) {
             const selectedValueSet = new Set(selectedValues);
             return selectedValueSet.has(apiKey);
         }

package/build/components/VirtualTable/components/index.d.ts

@@ -1,4 +1,4 @@
-export * from './ColumnFilter';
+export { default as ColumnFilter, Inputs, List } from './ColumnFilter';
 export * from './EmptyList';
 export * from './ErrorList';
 export * from './TableFooter';

package/build/components/VirtualTable/components/index.js

@@ -1,4 +1,4 @@
-export * from './ColumnFilter';
+export { default as ColumnFilter, Inputs, List } from './ColumnFilter';
 export * from './EmptyList';
 export * from './ErrorList';
 export * from './TableFooter';

package/build/components/VirtualTable/index.d.ts

@@ -1,4 +1,5 @@
 import VirtualTable from './VirtualTable';
 export { default as VirtualTableWithCard } from './VirtualTableWithCard';
 export * from './components';
+export { StyledCell } from './style';
 export default VirtualTable;

package/build/components/VirtualTable/index.js

@@ -1,4 +1,5 @@
 import VirtualTable from './VirtualTable';
 export { default as VirtualTableWithCard } from './VirtualTableWithCard';
 export * from './components';
+export { StyledCell } from './style';
 export default VirtualTable;

package/build/components/index.d.ts

@@ -11,7 +11,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { default as VirtualTable, TableRowLoading, TableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, } from './VirtualTable';
+export { default as VirtualTable, TableRowLoading, TableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, } from './VirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon, type ChevronIconProps, type StatusButtonIcon, type StatusButtonProps } from './StatusButton';

package/build/components/index.js

@@ -11,7 +11,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { default as VirtualTable, TableRowLoading, TableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, } from './VirtualTable';
+export { default as VirtualTable, TableRowLoading, TableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, } from './VirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon } from './StatusButton';

package/build/constants/api.d.ts

@@ -51,4 +51,7 @@ export declare const API_LIST_CONSTANTS: {
     readonly MerchantsList: {
         readonly limit: 50;
     };
+    readonly TerminalDevices: {
+        readonly limit: 50;
+    };
 };

package/build/constants/api.js

@@ -51,4 +51,7 @@ export const API_LIST_CONSTANTS = {
     MerchantsList: {
         limit: API_BASE_LIMIT,
     },
+    TerminalDevices: {
+        limit: API_BASE_LIMIT,
+    },
 };

package/build/constants/apps.d.ts

@@ -644,6 +644,9 @@ export declare const APP_CODES: {
             };
         };
     };
+    terminals: {
+        code: string;
+    };
 };
 export declare const APP_DIMENSIONS: {
     [x: string]: {

package/build/constants/apps.js

@@ -1,4 +1,4 @@
-import { tokenAppIcon, billingAppIcon, acceptanceAppIcon, payoutsAppIcon, protectAppIcon, customersAppIcon, businessesAppIcon, accountAppIcon, walletAppIcon, authenticationAppIcon, acceptanceWindowIcon, walletWindowIcon, billingWindowIcon, customersWindowIcon, payoutWindowIcon, protectWindowIcon, tokensWindowIcon, accountWindowIcon, businessesWindowIcon, authenticationWindowIcon, reportsWindowIcon, reportAppIcon, orderAppIcon, orderWindowIcon, leadAppIcon, leadTitleIcon, } from './assets';
+import { tokenAppIcon, billingAppIcon, acceptanceAppIcon, payoutsAppIcon, protectAppIcon, customersAppIcon, businessesAppIcon, accountAppIcon, walletAppIcon, authenticationAppIcon, acceptanceWindowIcon, walletWindowIcon, billingWindowIcon, customersWindowIcon, payoutWindowIcon, protectWindowIcon, tokensWindowIcon, accountWindowIcon, businessesWindowIcon, authenticationWindowIcon, reportsWindowIcon, reportAppIcon, orderAppIcon, orderWindowIcon, leadAppIcon, leadTitleIcon, terminalAppIcon, terminalWindowIcon, } from './assets';
 import { FOOTER_HEIGHT, HEADER_HEIGHT } from './style';
 export const SERVICE_COMMON_FUNCTIONS = {
     view: {
@@ -255,6 +255,9 @@ export const APP_CODES = {
             },
         },
     },
+    terminals: {
+        code: 'TERMINALS',
+    },
 };
 export const APP_DIMENSIONS = {
     general: {
@@ -341,5 +344,10 @@ export const APP_ICONS = [
         iconUrl: leadAppIcon,
         toolbarIconUrl: leadTitleIcon,
     },
+    {
+        code: APP_CODES.terminals.code,
+        iconUrl: terminalAppIcon,
+        toolbarIconUrl: terminalWindowIcon,
+    },
 ];
 export const excludedApps = ['login'];

package/build/constants/assets.d.ts

@@ -459,3 +459,11 @@ export declare const rightLightArrowIcon: string;
 export declare const segmentInstitutionIcon: string;
 export declare const segmentTechnologyIcon: string;
 export declare const segmentDevelopmentHouseIcon: string;
+export declare const terminalAppIcon: string;
+export declare const terminalWindowIcon: string;
+export declare const terminalCardPhone: string;
+export declare const toastPOSIcon: string;
+export declare const terminalTypeIcon: string;
+export declare const terminalBrushIcon: string;
+export declare const terminalBrushMuted: string;
+export declare const navigationIcon: string;

package/build/constants/assets.js

@@ -463,3 +463,11 @@ export const rightLightArrowIcon = `${appBaseUrl}/rightLightArrow.svg`;
 export const segmentInstitutionIcon = `${lightUrl}/other/segmentInstitution.svg`;
 export const segmentTechnologyIcon = `${lightUrl}/other/segmentTechnology.svg`;
 export const segmentDevelopmentHouseIcon = `${lightUrl}/other/segmentDevelopmentHouse.svg`;
+export const terminalAppIcon = `${lightUrl}/other/terminal.svg`;
+export const terminalWindowIcon = `${lightUrl}/window/terminal.svg`;
+export const terminalCardPhone = `${lightUrl}/terminalCardPhone.svg`;
+export const toastPOSIcon = `${lightUrl}/ToastPOS.svg`;
+export const terminalTypeIcon = `${lightUrl}/terminalTypeIcon.svg`;
+export const terminalBrushIcon = `${lightUrl}/terminalBrush.svg`;
+export const terminalBrushMuted = `${lightUrl}/terminalBrushMuted.svg`;
+export const navigationIcon = `${lightUrl}/navigationIcon.svg`;

package/build/constants/table/cell/index.d.ts

@@ -17,3 +17,4 @@ export * from './walletTableCellWidth';
 export * from './walletDetailsTableCellWidth';
 export * from './walletStatementTableCellWidth';
 export * from './merchantsTableCellWidth';
+export * from './terminalsTableCellWidth';

package/build/constants/table/cell/index.js

@@ -17,3 +17,4 @@ export * from './walletTableCellWidth';
 export * from './walletDetailsTableCellWidth';
 export * from './walletStatementTableCellWidth';
 export * from './merchantsTableCellWidth';
+export * from './terminalsTableCellWidth';