@tap-payments/os-micro-frontend-shared 0.1.135 → 0.1.136-test.2

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.js

@@ -57,11 +57,16 @@ function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, foo
             setShowBackdrop(isVisible);
         };
         const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            // TODO: start index and stop index are not working as expected
+            // console.log('startIndex', startIndex, 'stopIndex', stopIndex,
+            // 'rows.length', rows.length)
             if (areAllRowsLoaded)
                 return;
             yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
         });
-        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(Box, Object.assign({ sx: { height: `${tableHeight - (tableHeaderHeight !== null && tableHeaderHeight !== void 0 ? tableHeaderHeight : 0)}px` }, id: "auto-sizer-wrapper" }, { children: _jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height: h, width: w }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: h || 0, width: w || 0, itemCount: itemsCount, itemSize: () => rowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapperWithCard }))) })) }))) })));
+        return (
+        // @ts-ignore
+        _jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(Box, Object.assign({ sx: { height: `${tableHeight - (tableHeaderHeight !== null && tableHeaderHeight !== void 0 ? tableHeaderHeight : 0)}px` }, id: "auto-sizer-wrapper" }, { children: _jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height: h, width: w }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: h || 0, width: w || 0, itemCount: itemsCount, itemSize: () => rowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapperWithCard }))) })) }))) })));
     }, [
         error,
         isLoading,

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

@@ -8,6 +8,7 @@ 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, onClearFilterFields, wrapperSx } }) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     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 : '' })); }, {}));

package/build/components/VirtualTables/components/TableFooter/TableFooter.js

@@ -17,6 +17,15 @@ import { StyledFooter, Label, Title, ValueWrapper, EngravingLine } from './style
 function TableFooter(_a) {
     var { totalCount, showBackDrop = false, showSeparator, sandboxMode, maximized, children } = _a, other = __rest(_a, ["totalCount", "showBackDrop", "showSeparator", "sandboxMode", "maximized", "children"]);
     const { t } = useTranslation();
+    // const min = 10000
+    // const max = 50000
+    // const average = 30000
+    // const sum = 100000
+    // const currency = 'SAR'
+    // const { integerAmount: minIntegerAmount, decimalAmount: minDecimalAmount } = formatAmount(min)
+    // const { integerAmount: maxIntegerAmount, decimalAmount: maxDecimalAmount } = formatAmount(max)
+    // const { integerAmount: averageIntegerAmount, decimalAmount: averageDecimalAmount } = formatAmount(average)
+    // const { integerAmount: sumIntegerAmount, decimalAmount: sumDecimalAmount } = formatAmount(sum)
     return (_jsxs(StyledFooter, Object.assign({ component: "footer", "data-testid": "TableFooter", maximized: maximized !== null && maximized !== void 0 ? maximized : false, sandboxMode: sandboxMode, showBackDrop: showBackDrop, areTotalRowsNotFillingHeight: !!showSeparator }, other, { children: [showSeparator && _jsx(EngravingLine, {}), totalCount || totalCount === 0 ? (_jsxs(Label, Object.assign({ sx: { gap: '6px', cursor: 'text' } }, { children: [_jsx(Title, { children: t('count') }), _jsx(ValueWrapper, { children: formatNumber(totalCount || 0) })] }))) : null, children] })));
 }
 export default React.memo(TableFooter);

package/build/components/VirtualTables/components/TableRow.js

@@ -6,23 +6,25 @@ import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
 import { getSelectionStyles, getRowSelectionBorderStyles } from '../../../utils/index.js';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedRow = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
-    const renderCell = (column, rowIndex, colIndex) => {
-        const { render, format, selector } = column;
-        const handleChipClick = (event, chipIndex) => {
-            onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(rowIndex, colIndex, event, chipIndex, column.pinned);
+    const renderCell = useMemo(() => {
+        return (column, rowIndex, colIndex) => {
+            const { render, format, selector } = column;
+            const handleChipClick = (event, chipIndex) => {
+                onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(rowIndex, colIndex, event, chipIndex, column.pinned);
+            };
+            if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
+                return null;
+            const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
+            const formattedValue = format ? format({ value, row, index }) : value;
+            return render ? (render({
+                row,
+                column,
+                index,
+                value: row[column === null || column === void 0 ? void 0 : column.id],
+                selectionProps: { onClick: handleChipClick, rowIndex, colIndex, selectedId: selectedChip },
+            })) : (_jsx(_Fragment, { children: formattedValue }));
         };
-        if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
-            return null;
-        const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
-        const formattedValue = format ? format({ value, row, index }) : value;
-        return render ? (render({
-            row,
-            column,
-            index,
-            value: row[column === null || column === void 0 ? void 0 : column.id],
-            selectionProps: { onClick: handleChipClick, rowIndex, colIndex, selectedId: selectedChip },
-        })) : (_jsx(_Fragment, { children: formattedValue }));
-    };
+    }, [row, index, selectedChip, onChipClick]);
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             var _a, _b;
             const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
@@ -38,17 +40,22 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 isRowSelected,
                 isLastRow,
             });
+            // Determine if this cell should be treated as first/last for border radius
             const isFirstColumn = column.id === columns[0].id;
             const isLastColumn = column.id === columns[columns.length - 1].id;
+            // For scrollable table, adjust first/last based on pinned tables
             let effectiveFirst = isFirstColumn;
             let effectiveLast = isLastColumn;
             if (!column.pinned) {
+                // If there are pinned start columns, scrollable table shouldn't have left border radius
                 effectiveFirst = isFirstColumn && column.pinned !== 'start';
+                // If there are pinned end columns, scrollable table shouldn't have right border radius
                 effectiveLast = isLastColumn && column.pinned !== 'end';
             }
+            // Handle border styling for row selection
             const rowSelectionBorderStyles = isRowSelected
                 ? getRowSelectionBorderStyles({
-                    effectiveFirst,
+                    isFirstColumn,
                     isPinnedStart: column.pinned === 'start',
                     isPinnedEnd: column.pinned === 'end',
                 })
@@ -57,7 +64,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
                     onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
                 }, sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: isIndexColumn ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
-        }) })), [columns, row, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, selectedChip, isSheetView]);
+        }) })), [columns, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, isSheetView, renderCell]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }
 export default memo(TableRow, areEqual);

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapper.js

@@ -39,6 +39,7 @@ export const LastRowContent = React.memo(({ isLoadingRow, isSheetView, columns,
     }
     return _jsx(StyledParagraph, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent" }, { children: t('allRecordsHaveBeenSuccessfullyLoaded') }));
 });
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createRowClickHandler = (row, onRowClick) => (e) => {
     var _a;
     (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
@@ -58,6 +59,7 @@ function ListItemWrapper(_a) {
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
     const isLoadedRow = index <= newLoadedRowsEndIndex;
     const rowClickHandler = React.useCallback(() => createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    // Memoize the row props object
     const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler]);
     const renderSheetViewLoadingRow = React.useCallback((lastRowContent) => {
         return (_jsx(Box, Object.assign({ sx: {
@@ -66,9 +68,9 @@ function ListItemWrapper(_a) {
                 width: '100%',
             } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })));
     }, [isError]);
+    const isLastRow = React.useMemo(() => isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1), [isLoadingRow, areAllRowsLoaded, index, lastItemIndex]);
     const memoizedListItemComponent = React.useMemo(() => {
         const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow, columns: columns, currentRowCount: rows.length });
-        const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
         if (isPinned && isLastRow) {
             if (isSheetView && isLoadingRow && columns && columns.length > 0) {
                 return renderSheetViewLoadingRow(lastRowContent);

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapperWithCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import TableRowWithCard from '../TableRowWithCard';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createRowClickHandler = (row, onRowClick) => (e) => {
     var _a;
     (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
@@ -19,6 +20,7 @@ function ListItemWrapperWithCard({ index, style, data: { renderedScrollTopRef, r
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
     const isLoadedRow = index <= newLoadedRowsEndIndex;
     const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    // Memoize the row props object
     const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler, isLoadingRow, areAllRowsLoaded, lastItemIndex]);
     const memoizedListItemComponent = React.useMemo(() => _jsx(TableRowWithCard, { index: index, row: row, renderCardComponent: renderCardComponent, rowProps: memoizedRowProps }, `row-${index}`), [index, row, memoizedRowProps]);
     return (_jsx("div", Object.assign({ "data-testid": "ListCardWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListCardWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));

package/build/components/VirtualTables/components/virtualScroll/VirtualScrollList.js

@@ -22,10 +22,21 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
         setBackdropVisibility,
         clearBackdropVisibilityTimeout,
     });
+    // renderedScrollTopRef - when render is started (listRef.current.scrollTo is called)
+    //   this ref holds scrollTop position which has been passed to scrollTo function
+    // scrollTopRef - this is scrollTop from last onScroll event.
+    //   onScroll can be fired when render is still in progress. So scrollTop will be just saved
+    //   When scroll will end, saved scrollTop will be used to start new render.
+    //   Subsequent onScroll will overwrite this number, as we will not render intermediate scroll states
+    // scrollLocked - is true, when render has been started.
+    //   This is used to now start several renders simulaneously
+    // listRef - VariableSizeList ref to call scrollTo method
     const renderedScrollTopRef = useRef(0);
     const scrollTopRef = useRef(undefined);
     const scrollLocked = useRef(false);
+    // Use external ref if provided, otherwise create local
     const internalListRef = useRef(null);
+    // If ref is provided, use it; else use externalListRef; else use internalListRef
     const listRef = ref || externalListRef || internalListRef;
     const scrollTo = useCallback(() => {
         var _a, _b;
@@ -59,6 +70,10 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(props);
         scrollLocked.current = scrollTo();
     }, [scrollTo, onScroll]);
-    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, outerElementType: VirtualScrollOuter, innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
+    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, 
+            // @ts-ignore
+            outerElementType: VirtualScrollOuter, 
+            // @ts-ignore
+            innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
 });
 export default VirtualScrollList;

package/build/components/Widget/style.js

@@ -43,6 +43,7 @@ export const ItemText = styled(Text)(({ theme }) => ({
     fontSize: '11px',
     fontWeight: 500,
     lineHeight: '13.2px',
+    // width: 110
 }));
 export const ItemTextWrapper = styled(Box)(() => ({
     display: 'flex',

package/build/components/Window/style.js

@@ -19,6 +19,7 @@ export const contentStyle = {
     overflow: 'visible',
     borderRadius: '12px',
 };
+// eslint-disable-next-line
 export const initalStyle = {
     width: 'inherit',
     height: 'inherit',

package/build/components/index.d.ts

@@ -1,7 +1,10 @@
 export { default as AccordionAdapter } from './AccordionAdapter';
 export { default as ActionMenu, ActionMenuDropDown, ActionMenuItem, type ActionMenuProps } from './ActionMenu';
 export { default as ActivityAreaChart, type ActivityAreaChartProps, type ChartDataPoint, ChartTooltip, type ChartTooltipProps, LoadingChart, type PayloadItem, } from './ActivityAreaChart';
-export { default as AppWindowWrapper, type AccountHeaderProps, AccountHeaderTitle, AppWindowHeader, type AppWindowHeaderProps, type AppWindowHeaderBaseProps, AppWindow, type AccountHeaderTitleProps, type AppWindowProps, type WindowProps, AppWindowContext, AppWindowContextProvider, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration, StyledFooter, StyledHideButton, StyledMenuLink, StyledSubmitButton, SubmitButtonWrapper, } from './AppWindowWrapper';
+export { default as AppWindowWrapper, type AccountHeaderProps, AccountHeaderTitle, AppWindowHeader, type AppWindowHeaderProps, type AppWindowHeaderBaseProps, AppWindow, type AccountHeaderTitleProps, type AppWindowProps, type WindowProps, AppWindowContext, AppWindowContextProvider, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration, StyledFooter, // used account , leads
+StyledHideButton, StyledMenuLink, // used account only
+StyledSubmitButton, // used account , leads
+SubmitButtonWrapper, } from './AppWindowWrapper';
 export { default as BackgroundAnimation, type BlobGradient, type Blob } from './BackgroundAnimation';
 export { default as Button, PlusButton, StyledButton } from './Button';
 export { default as Calender, type CalenderProps, type DateObject } from './Calender';
@@ -12,7 +15,10 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTables';
+export { VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, // To not to be confused/conflicted with the other seperated `components/TableHeader`
+TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, // used src\features\shared\MerchantsDropdown\MerchantsDropdown.tsx only
+ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, // used src\features\shared\Account\UserDetailsContent\components\TableCell\TableCell.tsx only
+TableFooter, TableError, } from './VirtualTables';
 export { default as SheetViewVirtualTable } from './VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';

package/build/components/index.js

@@ -1,7 +1,11 @@
 export { default as AccordionAdapter } from './AccordionAdapter';
 export { default as ActionMenu, ActionMenuDropDown, ActionMenuItem } from './ActionMenu';
 export { default as ActivityAreaChart, ChartTooltip, LoadingChart, } from './ActivityAreaChart';
-export { default as AppWindowWrapper, AccountHeaderTitle, AppWindowHeader, AppWindow, AppWindowContext, AppWindowContextProvider, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration, StyledFooter, StyledHideButton, StyledMenuLink, StyledSubmitButton, SubmitButtonWrapper, } from './AppWindowWrapper';
+export { default as AppWindowWrapper, AccountHeaderTitle, AppWindowHeader, AppWindow, AppWindowContext, AppWindowContextProvider, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration, StyledFooter, // used account , leads
+StyledHideButton, StyledMenuLink, // used account only
+StyledSubmitButton, // used account , leads
+SubmitButtonWrapper, // used account , leads
+ } from './AppWindowWrapper';
 export { default as BackgroundAnimation } from './BackgroundAnimation';
 export { default as Button, PlusButton, StyledButton } from './Button';
 export { default as Calender } from './Calender';
@@ -12,7 +16,10 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTables';
+export { VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, // To not to be confused/conflicted with the other seperated `components/TableHeader`
+TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, // used src\features\shared\MerchantsDropdown\MerchantsDropdown.tsx only
+ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, // used src\features\shared\Account\UserDetailsContent\components\TableCell\TableCell.tsx only
+TableFooter, TableError, } from './VirtualTables';
 export { default as SheetViewVirtualTable } from './VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
@@ -28,6 +35,7 @@ export { default as WindowSideBar, TITLE_BAR_HEIGHT } from './WindowSideBar';
 export { default as WindowAppIcon } from './WindowAppIcon';
 export { default as Window } from './Window';
 export * from './ToolbarIcon';
+// StyledHeaderWrapper used src\features\AppWindow\components\AppWindowHeader\AppWindowHeader.tsx only
 export { default as Toolbar, StyledHeaderWrapper, StyledHeaderWrapperStyled } from './Toolbar';
 export { default as ToggleButtons } from './ToggleButtons';
 export { default as Text } from './Text';
@@ -58,6 +66,7 @@ export * from './Inputs';
 export { default as JSONViewer, FooterButton, JSONTitleBar, JsonViewerDialogContext, JSONViewerList, useJsonViewerContext, JsonViewerDialogContextProvider, } from './JSONViewer';
 export { default as Loader } from './Loader';
 export { default as MUIThemeProvider } from './MUIThemeProvider';
+// ImageWrapper used src\features\shared\Account\BrandDetails\components\AppsIcons\AppsIcons.tsx only
 export { default as ImageWrapper } from './ImageWrapper';
 export { default as Input } from './Input';
 export { default as IconGallery } from './IconGallery';

package/build/constants/assets.js

@@ -2,6 +2,7 @@ const cdnUrl = 'https://cdn.tap.company/tap-assets';
 export const lightUrl = `${cdnUrl}/icons/dashboard/light`;
 export const appBaseUrl = `${lightUrl}/other`;
 export const functionBaseUrl = `${lightUrl}/function`;
+// Icons getters
 export const getLightUrlIcon = (source) => `${lightUrl}/${source}.svg`;
 export const getPaymentMethodsIcon = (source) => `${lightUrl}/payment-method/v2/${source}.svg`;
 export const getPaymentIssuersIcon = (source) => `${lightUrl}/payment-issuer/${source}.svg`;
@@ -297,6 +298,7 @@ export const braveIcon = `${appBaseUrl}/braveBrowser.svg`;
 export const arcIcon = `${appBaseUrl}/arcBrowser.svg`;
 export const chromiumIcon = `${appBaseUrl}/chromiumBrowser.svg`;
 export const userIcon = `${appBaseUrl}/userIcon.svg`;
+// table status icons
 export const abandonedTableIcon = `${lightUrl}/status/table/abandoned.svg`;
 export const cancelledTableIcon = `${lightUrl}/status/table/cancelled.svg`;
 export const capturedTableIcon = `${lightUrl}/status/table/captured.svg`;
@@ -397,6 +399,7 @@ export const windowEntityIcon = `${lightUrl}/window/entity.svg`;
 export const windowBankIcon = `${lightUrl}/window/bank.svg`;
 export const windowIndividualIcon = `${lightUrl}/window/individual.svg`;
 export const windowPasswordIcon = `${lightUrl}/window/password.svg`;
+// New Invoice Icons
 export const actionsIcon = `${lightUrl}/actionsIcon.svg`;
 export const addItem = `${lightUrl}/addItem.svg`;
 export const attachIcon = `${lightUrl}/attachIcon.svg`;
@@ -494,6 +497,7 @@ export const rightLightArrowIcon = `${appBaseUrl}/rightLightArrow.svg`;
 export const segmentInstitutionIcon = `${appBaseUrl}/segmentInstitution.svg`;
 export const segmentTechnologyIcon = `${appBaseUrl}/segmentTechnology.svg`;
 export const segmentDevelopmentHouseIcon = `${appBaseUrl}/segmentDevelopmentHouse.svg`;
+// Terminal App
 export const terminalAppIcon = `${appBaseUrl}/terminal.svg`;
 export const terminalWindowIcon = `${lightUrl}/window/terminal.svg`;
 export const terminalCardPhone = `${lightUrl}/terminalCardPhone.svg`;

package/build/constants/server.js

@@ -1,4 +1,5 @@
 var _a;
+// NOTE: This environment variables should be defined in .env file of the hosting server
 const isSAOCI = import.meta.env.VITE_DEPLOYMENT_REGION === 'sa-oci';
 export const BASE_URL = (_a = (isSAOCI ? 'https://mw-os.tap.com.sa' : import.meta.env.VITE_MW_BASE_URL)) !== null && _a !== void 0 ? _a : import.meta.env.VITE_BASE_URL;
 export const API_URL = `${BASE_URL}/api`;

package/build/constants/table.d.ts

@@ -3,6 +3,6 @@ export declare const TABLE_CONTENT_ROW_HEIGHT = 70;
 export declare const TABLE_ROW_HEIGHT = 57;
 export declare const TABLE_THRESHOLD = 200;
 export declare const TABLE_LIST_OVER_SCAN = 5;
-export declare const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 50;
+export declare const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 20;
 export declare const SHEET_VIEW_TABLE_THRESHOLD = 20;
 export declare const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;

package/build/constants/table.js

@@ -3,6 +3,6 @@ export const TABLE_CONTENT_ROW_HEIGHT = 70;
 export const TABLE_ROW_HEIGHT = 57;
 export const TABLE_THRESHOLD = 200;
 export const TABLE_LIST_OVER_SCAN = 5;
-export const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 50;
+export const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 20;
 export const SHEET_VIEW_TABLE_THRESHOLD = 20;
 export const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;

package/build/hooks/useCountdown.js

@@ -4,16 +4,19 @@ export function useCountdown() {
     const [timer, setTimer] = useState(0);
     const timerInterval = useRef(null);
     const formattedTime = secondsToTimeString(timer);
+    // Stop the timer
     const stopTimer = () => {
         if (timerInterval.current) {
             clearInterval(timerInterval.current);
             timerInterval.current = null;
         }
     };
+    // Reset the timer
     const resetTimer = () => {
         stopTimer();
         setTimer(0);
     };
+    // Start the timer
     const startTimer = (expiryTime) => {
         if (expiryTime <= 0)
             return;
@@ -31,6 +34,7 @@ export function useCountdown() {
             });
         }, 1000);
     };
+    // Auto-stop and cleanup on unmount
     useEffect(() => {
         return () => {
             stopTimer();

package/build/hooks/useStickyHeaderShadow.js

@@ -1,4 +1,10 @@
 import { useEffect, useState } from 'react';
+/* Usage: you will need to add an empty div before your sticky header and pass it's ref to this hook
+    Example:
+     <Box ref={interceptRef} />
+     <StickyHeader></StickyHeader>
+*/
+// TODO: enhance the hook to take only the ref of the sticky bar and handle adding the interceptRef internally from the hook
 export const useStickyHeaderShadow = (interceptRef) => {
     const [showShadow, setShowShadow] = useState(false);
     useEffect(() => {

package/build/utils/api.js

@@ -61,6 +61,7 @@ api.interceptors.request.use((config) => {
         }, 0);
     });
 });
+// create interceptor to add token to all requests
 api.interceptors.request.use((config) => {
     config.headers.Authorization = getLoggedInUserJwtToken();
     const secretKey = getSecretKey();
@@ -81,7 +82,9 @@ export function setApiToken(token) {
         api.defaults.headers.common.Authorization = token;
     });
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getHeaders(attrs) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const _a = attrs !== null && attrs !== void 0 ? attrs : {}, { sandboxMode, fixedSecretKey, applicationId, serviceId, functionId, userFunctionId, segmentId } = _a, rest = __rest(_a, ["sandboxMode", "fixedSecretKey", "applicationId", "serviceId", "functionId", "userFunctionId", "segmentId"]);
     return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { live_mode: sandboxMode ? 'false' : 'true' }), (!!fixedSecretKey && { 'x-test-secret': fixedSecretKey })), (!!applicationId && { application_id: applicationId })), (!!serviceId && { service_id: serviceId })), (!!functionId && { function_id: functionId })), (!!userFunctionId && { user_function_id: userFunctionId }));
 }

package/build/utils/array.js

@@ -1,10 +1,14 @@
 import orderBy from 'lodash/orderBy';
 import get from 'lodash/get';
 export const generateArray = (length) => Array.from({ length }, (_, i) => i);
-export const groupBy = (arr, groupFn) => arr.reduce((grouped, obj) => (Object.assign(Object.assign({}, grouped), { [groupFn(obj)]: [...(grouped[groupFn(obj)] || []), obj] })), {});
+// eslint-disable-next-line
+export const groupBy = (arr, groupFn) => arr.reduce(
+// eslint-disable-next-line
+(grouped, obj) => (Object.assign(Object.assign({}, grouped), { [groupFn(obj)]: [...(grouped[groupFn(obj)] || []), obj] })), {});
 export function sortList({ list, sortBy, orders }) {
     return (sortBy === null || sortBy === void 0 ? void 0 : sortBy.length) && (orders === null || orders === void 0 ? void 0 : orders.length) ? orderBy(list, sortBy, orders) : list;
 }
+// eslint-disable-next-line
 export const sortByString = (list = [], key) => {
     if (!list.length)
         return [];

package/build/utils/billing.js

@@ -28,5 +28,6 @@ export const getDefaultInvoiceInfo = () => ({
     isItemsNotValid: false,
     isAmountIsMissing: false,
     errors: [],
+    // eslint-disable-next-line
     brand: {},
 });

package/build/utils/country.js

@@ -4,6 +4,7 @@ export function getCountryNameByISO(countryCode) {
     try {
         const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
         return regionNames.of(countryCode);
+        // eslint-disable-next-line
     }
     catch (error) {
         toast.error((_c = (_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message);

package/build/utils/currency.js

@@ -22,6 +22,7 @@ export const intlCurrency = (charge, currencyType) => {
             minimumFractionDigits: currencyConfig[currencyType] ? 3 : 2,
         }).format(charge);
         return currency;
+        // eslint-disable-next-line
     }
     catch (error) {
         toast.error((_c = (_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message);
@@ -56,7 +57,9 @@ export const formatCurrencyWithInput = (charge, selectedCurrency) => {
     return chargeString;
 };
 export function formatAmount(amount, decimal = 2) {
+    // Ensure the input is a number
     const num = parseFloat(amount.toString());
+    // Check if it's a valid number
     if (isNaN(num)) {
         const [integerAmount, decimalAmount] = (0).toFixed(decimal).split('.');
         const fullAmount = `${integerAmount}.${decimalAmount}`;
@@ -66,8 +69,11 @@ export function formatAmount(amount, decimal = 2) {
             fullAmount,
         };
     }
+    // Use toFixed(limit) to limit to 2 decimal places
     const fixedNumber = num.toFixed(decimal);
+    // Split integer and decimal parts
     const [integerPart, decimalPart] = fixedNumber.split('.');
+    // Add commas to the integer part
     const formattedInteger = parseInt(integerPart).toLocaleString();
     return {
         integerAmount: formattedInteger,

package/build/utils/date.d.ts

@@ -2,6 +2,11 @@ export declare function getGreetingMessageId(userTimeHours: number): string;
 export declare function getDatePickerFormat(date: Date | [Date, Date], locale: string): string;
 export declare const getUTCOffset: (offsetStr?: string | number) => number;
 export declare const formatUTCOffset: (offset?: number) => string;
+/**
+ * Get the default date range for the calendar
+ * @param startDay - Number of days to subtract from today, default value is 6 days to get the date range of the last 7 days including today
+ * @returns - Array of two dates [startDate, endDate]
+ */
 export declare const getDefaultDateRange: (startDay?: number) => [Date, Date];
 export declare const getUTCTimestamp: (date: Date | string | number) => number;
 export declare const getTimestampByTimezone: (date: Date | string | number, selectedTimezone?: string) => number;

package/build/utils/date.js

@@ -34,6 +34,7 @@ export function getDatePickerFormat(date, locale) {
             month: locale === 'hijri' ? 'short' : 'short',
             day: 'numeric',
         });
+        // @ts-expect-error formatRange is not defined in the type
         return formatter.formatRange(startDate, endDate).replace('AH', '').trim().replace('–', ' – ');
     }
     const formatter = new Intl.DateTimeFormat(calendarMode, {
@@ -58,25 +59,41 @@ export const formatUTCOffset = (offset = 0) => {
     const paddedOffset = Math.abs(offset).toString().padStart(2, '0');
     return `UTC${sign}${paddedOffset}:00`;
 };
+/**
+ * Get the default date range for the calendar
+ * @param startDay - Number of days to subtract from today, default value is 6 days to get the date range of the last 7 days including today
+ * @returns - Array of two dates [startDate, endDate]
+ */
 export const getDefaultDateRange = (startDay = 6) => {
     const monthDaysMinus = dayjs().subtract(startDay, 'day').hour(0).minute(0).second(0).toDate();
     const today = dayjs(new Date()).hour(23).minute(59).second(59).toDate();
     return [monthDaysMinus, today];
 };
 export const getUTCTimestamp = (date) => {
+    // Create a Date object with the local date string
     const localDate = new Date(date);
+    // Get the local timezone offset in minutes
     const localTimezoneOffset = localDate.getTimezoneOffset();
-    const utcTimestamp = localDate.getTime() - localTimezoneOffset * 60000;
+    // Calculate the UTC timestamp by subtracting the local timezone offset
+    const utcTimestamp = localDate.getTime() - localTimezoneOffset * 60000; // Convert minutes to milliseconds
+    // Create a new Date object with the UTC timestamp
     const utcDate = new Date(utcTimestamp);
+    // Convert the UTC date to a string
     const utcDateString = utcDate.toISOString();
     return dayjs(utcDateString).valueOf();
 };
+/*
+ * Convert local date to the selected timezone
+ * @param date - Date object, date string or timestamp
+ * @param selectedTimezone - Timezone string
+ * @returns - Milliseconds
+ */
 export const getTimestampByTimezone = (date, selectedTimezone = TIMEZONES.KW) => {
     const localDate = new Date(date);
     const localTimezoneOffset = localDate.getTimezoneOffset();
-    const selectedTimezoneOffset = getUTCOffset(selectedTimezone) * 60;
+    const selectedTimezoneOffset = getUTCOffset(selectedTimezone) * 60; // Convert hours to minutes
     const timezoneDiff = selectedTimezoneOffset - localTimezoneOffset;
-    const timezoneTimestamp = localDate.getTime() + timezoneDiff * 60000;
+    const timezoneTimestamp = localDate.getTime() + timezoneDiff * 60000; // Convert minutes to milliseconds
     const timezoneDate = new Date(timezoneTimestamp);
     const timezoneDateString = timezoneDate.toISOString();
     return dayjs(timezoneDateString).valueOf();
@@ -86,12 +103,23 @@ export const convertCalendarDateToUTC = (date, hoursOffset = 0) => {
     const adjustedDate = utcDate.subtract(hoursOffset, 'hour');
     return adjustedDate.valueOf();
 };
+/*
+ * Convert UTC date to local date
+ * @param date - Date object, date string or timestamp
+ * @returns - Date object
+ */
 export const convertUTCtoLocalDate = (date) => {
     const localDate = new Date(date);
     const localTimezoneOffset = localDate.getTimezoneOffset();
     const localTimestamp = localDate.getTime() + localTimezoneOffset * 60000;
     return new Date(localTimestamp);
 };
+/*
+ * Convert Local date to the selected timezone
+ * @param date - Date object, date string or timestamp
+ * @param selectedTimezone - Timezone string
+ * @returns - Date object
+ */
 export const changeDateTimezone = (date, { currentTimezone, targetTimezone }) => {
     if (!date) {
         return '';

package/build/utils/encrypt.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 function encryptWithPublicKey(publicKeyPem, text) {
     return __awaiter(this, void 0, void 0, function* () {
+        // Convert PEM to CryptoKey
         function importPublicKey(pem) {
             return __awaiter(this, void 0, void 0, function* () {
                 const pemHeader = '-----BEGIN PUBLIC KEY-----';
@@ -18,7 +19,7 @@ function encryptWithPublicKey(publicKeyPem, text) {
                 const binaryDer = Uint8Array.from(binaryDerString, (c) => c.charCodeAt(0));
                 return yield window.crypto.subtle.importKey('spki', binaryDer.buffer, {
                     name: 'RSA-OAEP',
-                    hash: 'SHA-1',
+                    hash: 'SHA-1', // <-- Important: match Java's default OAEP hash
                 }, true, ['encrypt']);
             });
         }
@@ -27,6 +28,7 @@ function encryptWithPublicKey(publicKeyPem, text) {
         const encryptedBuffer = yield window.crypto.subtle.encrypt({
             name: 'RSA-OAEP',
         }, key, encoder.encode(text));
+        // Convert to Base64 for safe transport
         const bytes = new Uint8Array(encryptedBuffer);
         let binary = '';
         for (let i = 0; i < bytes.byteLength; i++) {

package/build/utils/error.js

@@ -4,10 +4,12 @@ export const isNetworkError = (error) => {
 export const hasError = (error) => {
     return Boolean(error);
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isTimeoutError = (error) => {
     var _a, _b;
     return (_b = ((error === null || error === void 0 ? void 0 : error.code) === 'ECONNABORTED' || ((_a = error === null || error === void 0 ? void 0 : error.message) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('timeout')))) !== null && _b !== void 0 ? _b : false;
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isNotFoundError = (error) => {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status) === 404)

package/build/utils/freshdesk.js

@@ -17,6 +17,7 @@ const prepareFreshDeskData = ({ individualDetails, activeSegment, language, }) =
     };
 };
 export const setFreshDeskProperties = ({ individualDetails, activeSegment, language, }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const fcWidgetObj = window.fcWidget;
     if (!fcWidgetObj) {
         return;
@@ -46,6 +47,7 @@ export const setFreshDeskProperties = ({ individualDetails, activeSegment, langu
     });
 };
 export const openFreshDeskChat = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const fcWidgetObj = window.fcWidget;
     if (!fcWidgetObj) {
         return;