@tap-payments/os-micro-frontend-shared 0.1.371 → 0.1.372-test.2-test.3

package/build/components/TableHeader/TableView/utils.js

@@ -0,0 +1,410 @@
+import { advancedColumns, sheetColumns } from './data';
+/**
+ * Transform API layout response to internal ColumnViewProps format
+ */
+export const transformLayoutToColumns = (layout, lang = 'en') => {
+    const columns = [];
+    layout.forEach((section) => {
+        section.columns.forEach((col) => {
+            var _a, _b, _c, _d;
+            const label = ((_a = col.name.find((n) => n.lang === lang)) === null || _a === void 0 ? void 0 : _a.text) || ((_b = col.name[0]) === null || _b === void 0 ? void 0 : _b.text) || col.code;
+            const menuItems = ((_c = col.fields) === null || _c === void 0 ? void 0 : _c.length)
+                ? col.fields.map((field) => {
+                    var _a, _b;
+                    return ({
+                        name: field.code,
+                        label: ((_a = field.name.find((n) => n.lang === lang || n.lang === '')) === null || _a === void 0 ? void 0 : _a.text) || field.code,
+                        selected: (_b = field.default) !== null && _b !== void 0 ? _b : false,
+                    });
+                })
+                : undefined;
+            columns.push({
+                name: col.code,
+                label,
+                selected: (_d = col.default) !== null && _d !== void 0 ? _d : false,
+                menuItems: (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? menuItems : undefined,
+            });
+        });
+    });
+    return columns;
+};
+export const getColumnsByMode = (mode, layoutData) => {
+    if (layoutData && layoutData.length > 0) {
+        const section = layoutData.find((s) => s.code.toLowerCase() === mode.toLowerCase());
+        if (section) {
+            return transformLayoutToColumns([section]);
+        }
+    }
+    return mode === 'advanced' ? [...advancedColumns] : [...sheetColumns];
+};
+export const isDateColumn = (name) => {
+    return name.toLowerCase() === 'date';
+};
+export const getColumnCheckState = (column) => {
+    var _a, _b;
+    if (!((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length)) {
+        return { checked: (_b = column.selected) !== null && _b !== void 0 ? _b : false, indeterminate: false };
+    }
+    const selectedCount = column.menuItems.filter((item) => item.selected).length;
+    return {
+        checked: selectedCount > 0,
+        indeterminate: selectedCount > 0 && selectedCount < column.menuItems.length,
+    };
+};
+export const createCustomViewMenuItem = (name, selectedColumns, isDefault = false) => ({
+    label: name,
+    id: `custom_${Date.now()}`,
+    columns: selectedColumns.map((col) => col.name),
+    submenu: selectedColumns,
+    isCustom: true,
+    default: isDefault,
+});
+/**
+ * Extract layout data from templates (combine all sections from all templates)
+ * This is used for the built-in "Default" view's layoutData prop
+ */
+export const getLayoutDataFromTemplates = (templates) => {
+    const sectionsMap = new Map();
+    templates.forEach((template) => {
+        template.layout.forEach((section) => {
+            const existingSection = sectionsMap.get(section.code);
+            if (existingSection) {
+                // Merge columns, avoiding duplicates
+                const existingCodes = new Set(existingSection.columns.map((col) => col.code));
+                section.columns.forEach((col) => {
+                    if (!existingCodes.has(col.code)) {
+                        existingSection.columns.push(col);
+                    }
+                });
+            }
+            else {
+                sectionsMap.set(section.code, Object.assign(Object.assign({}, section), { columns: [...section.columns] }));
+            }
+        });
+    });
+    return Array.from(sectionsMap.values());
+};
+/**
+ * Set a view as default and ensure only one view is default at a time
+ */
+export const setViewAsDefault = (views, viewId) => {
+    return views.map((view) => (Object.assign(Object.assign({}, view), { default: view.id === viewId })));
+};
+/**
+ * Transform API templates response to ViewMenuItem array
+ * Filters templates by mode and only shows the section matching the current mode
+ * Separates default templates (to be merged into built-in Default view) from custom views
+ */
+export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lang = 'en') => {
+    const customViews = [];
+    let defaultTemplateColumns;
+    templates.forEach((template) => {
+        // Get columns for the specified mode
+        const section = template.layout.find((s) => s.code.toLowerCase() === mode.toLowerCase());
+        const columns = section ? transformLayoutToColumns([section], lang) : [];
+        if (template.default) {
+            // Store default template columns to merge into built-in Default view
+            defaultTemplateColumns = columns;
+        }
+        else {
+            // Add non-default templates as custom views
+            customViews.push({
+                id: template.id,
+                label: template.name,
+                isCustom: true,
+                default: false,
+                columns: columns.map((col) => col.name),
+                submenu: columns,
+            });
+        }
+    });
+    return { customViews, defaultTemplateColumns };
+};
+/**
+ * Convert ColumnViewProps back to LayoutSection format for API requests
+ */
+export const convertColumnsToLayoutSection = (columns, mode, lang = 'en') => {
+    const columnItems = columns.map((col, index) => {
+        var _a, _b;
+        const fieldItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((field) => {
+            var _a;
+            return ({
+                code: field.name,
+                name: [
+                    {
+                        text: typeof field.label === 'string' ? field.label : field.name,
+                        lang: lang || '',
+                    },
+                ],
+                default: (_a = field.selected) !== null && _a !== void 0 ? _a : false,
+            });
+        });
+        const columnLabel = typeof col.label === 'string' ? col.label : col.name;
+        return Object.assign({ code: col.name, name: [
+                {
+                    text: columnLabel,
+                    lang,
+                },
+            ], order: index + 1, default: (_b = col.selected) !== null && _b !== void 0 ? _b : false }, (fieldItems && fieldItems.length > 0 && { fields: fieldItems }));
+    });
+    return {
+        code: mode === 'advanced' ? 'Advanced' : 'Sheet',
+        columns: columnItems,
+    };
+};
+/**
+ * Initialize columns for editing mode
+ */
+export const initializeEditingColumns = (editingColumns, availableColumns) => {
+    return availableColumns
+        .filter((col) => !isDateColumn(col.name))
+        .map((col) => {
+        var _a;
+        const savedCol = editingColumns.find((ec) => ec.name === col.name);
+        return (savedCol || Object.assign(Object.assign({}, col), { selected: false, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+    });
+};
+/**
+ * Initialize columns for create mode (all unchecked except date)
+ */
+export const initializeCreateColumns = (availableColumns) => {
+    return availableColumns
+        .filter((col) => !isDateColumn(col.name))
+        .map((col) => {
+        var _a;
+        return (Object.assign(Object.assign({}, col), { selected: false, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+    });
+};
+/**
+ * Initialize columns for create mode with current tableViews state (preserves checked/unchecked values)
+ */
+export const initializeCreateColumnsWithCurrentState = (availableColumns, currentTableViews) => {
+    return availableColumns
+        .filter((col) => !isDateColumn(col.name))
+        .map((col) => {
+        var _a, _b, _c;
+        const currentCol = currentTableViews.find((tc) => tc.name === col.name);
+        if (currentCol) {
+            return Object.assign(Object.assign({}, col), { selected: (_a = currentCol.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                    var _a, _b;
+                    const currentMenuItem = (_a = currentCol.menuItems) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.name === item.name);
+                    return Object.assign(Object.assign({}, item), { selected: (_b = currentMenuItem === null || currentMenuItem === void 0 ? void 0 : currentMenuItem.selected) !== null && _b !== void 0 ? _b : false });
+                }) });
+        }
+        return Object.assign(Object.assign({}, col), { selected: false, menuItems: (_c = col.menuItems) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) });
+    });
+};
+/**
+ * Reset columns to their default selection state
+ */
+export const resetColumnsToDefault = (columns) => {
+    return columns
+        .filter((col) => !isDateColumn(col.name))
+        .map((col) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => { var _a; return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false })); }) }));
+    });
+};
+/**
+ * Toggle a column's selection (including all children if present)
+ */
+export const toggleColumn = (columns, columnName) => {
+    return columns.map((col) => {
+        var _a;
+        if (col.name !== columnName)
+            return col;
+        const newSelected = !col.selected;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
+        return Object.assign(Object.assign({}, col), { selected: newSelected, menuItems: updatedMenuItems });
+    });
+};
+/**
+ * Toggle a sub-item's selection and update parent state
+ */
+export const toggleSubItem = (columns, columnName, subItemName) => {
+    return columns.map((col) => {
+        var _a, _b;
+        if (col.name !== columnName)
+            return col;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (item.name === subItemName ? Object.assign(Object.assign({}, item), { selected: !item.selected }) : item));
+        const hasSelectedChildren = (_b = updatedMenuItems === null || updatedMenuItems === void 0 ? void 0 : updatedMenuItems.some((item) => item.selected)) !== null && _b !== void 0 ? _b : false;
+        return Object.assign(Object.assign({}, col), { menuItems: updatedMenuItems, selected: hasSelectedChildren });
+    });
+};
+/**
+ * Select or deselect all columns (except date)
+ */
+export const toggleAllColumns = (columns, selectAll) => {
+    return columns.map((col) => {
+        var _a;
+        if (isDateColumn(col.name))
+            return col;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: selectAll })));
+        return Object.assign(Object.assign({}, col), { selected: selectAll, menuItems: updatedMenuItems });
+    });
+};
+/**
+ * Check if all non-date columns are selected
+ */
+export const areAllColumnsSelected = (columns) => {
+    const nonDateColumns = columns.filter((col) => !isDateColumn(col.name));
+    return (nonDateColumns.length > 0 &&
+        nonDateColumns.every((col) => {
+            var _a;
+            if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
+                // For columns with menuItems, all items must be selected
+                return col.menuItems.every((item) => item.selected);
+            }
+            return col.selected;
+        }));
+};
+/**
+ * Check if some (but not all) non-date columns are selected
+ */
+export const areSomeColumnsSelected = (columns, allSelected) => {
+    const nonDateColumns = columns.filter((col) => !isDateColumn(col.name));
+    const hasAnySelected = nonDateColumns.some((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
+            return col.menuItems.some((item) => item.selected);
+        }
+        return col.selected;
+    });
+    return hasAnySelected && !allSelected;
+};
+/**
+ * Validate template name
+ */
+export const isValidTemplateName = (name, maxLength) => {
+    return name.trim().length > 0 && name.length <= maxLength;
+};
+/**
+ * Deep clone columns array with all nested properties
+ */
+export const deepCloneColumns = (columns) => {
+    return columns.map((col) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                var _a;
+                return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false }));
+            }) }));
+    });
+};
+/**
+ * Toggle a single column's selection state
+ */
+export const toggleSingleColumn = (columns, columnName) => {
+    return columns.map((col) => {
+        var _a;
+        if (col.name !== columnName)
+            return col;
+        const newSelected = !col.selected;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
+        return Object.assign(Object.assign({}, col), { selected: newSelected, menuItems: updatedMenuItems });
+    });
+};
+/**
+ * Get submenu items for a view menu item
+ */
+export const getSubmenuItems = (item, defaultColumns) => {
+    var _a;
+    if (item.isCustom && ((_a = item.submenu) === null || _a === void 0 ? void 0 : _a.length)) {
+        return item.submenu;
+    }
+    if (item.id === 'default') {
+        return defaultColumns;
+    }
+    return item.submenu || [];
+};
+/**
+ * Check if a view menu item has submenu
+ */
+export const hasSubmenu = (item, defaultColumns) => {
+    return getSubmenuItems(item, defaultColumns).length > 0;
+};
+/**
+ * Check if all columns in current state are selected
+ */
+export const areAllCurrentColumnsSelected = (columns) => {
+    if (columns.length === 0)
+        return false;
+    return columns.every((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
+            // For columns with menuItems, all items must be selected
+            return col.menuItems.every((item) => item.selected);
+        }
+        return col.selected;
+    });
+};
+/**
+ * Check if some (but not all) columns in current state are selected
+ */
+export const areSomeCurrentColumnsSelected = (columns, allSelected) => {
+    if (columns.length === 0)
+        return false;
+    const hasAny = columns.some((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
+            return col.menuItems.some((item) => item.selected);
+        }
+        return col.selected;
+    });
+    return hasAny && !allSelected;
+};
+/**
+ * Toggle all columns selection (select all or unselect all)
+ */
+export const toggleAllCurrentColumns = (columns, shouldSelect) => {
+    return columns.map((col) => {
+        var _a;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: shouldSelect })));
+        return Object.assign(Object.assign({}, col), { selected: shouldSelect, menuItems: updatedMenuItems });
+    });
+};
+/**
+ * Normalize columns by converting undefined selected values to false for consistent comparison
+ */
+export const normalizeColumnsSelected = (columns) => {
+    return columns.map((col) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                var _a;
+                return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false }));
+            }) }));
+    });
+};
+/**
+ * Compare two columns arrays to check if they are equal (same order, same selection states)
+ */
+export const areColumnsEqual = (cols1, cols2) => {
+    if (cols1.length !== cols2.length)
+        return false;
+    const normalizedCols1 = normalizeColumnsSelected(cols1);
+    const normalizedCols2 = normalizeColumnsSelected(cols2);
+    for (let i = 0; i < normalizedCols1.length; i++) {
+        const col1 = normalizedCols1[i];
+        const col2 = normalizedCols2[i];
+        if (col1.name !== col2.name)
+            return false;
+        if (col1.selected !== col2.selected)
+            return false;
+        if (col1.menuItems && col2.menuItems) {
+            if (col1.menuItems.length !== col2.menuItems.length)
+                return false;
+            for (let j = 0; j < col1.menuItems.length; j++) {
+                const item1 = col1.menuItems[j];
+                const item2 = col2.menuItems[j];
+                if (item1.name !== item2.name)
+                    return false;
+                if (item1.selected !== item2.selected) {
+                    return false;
+                }
+            }
+        }
+        else if (col1.menuItems || col2.menuItems) {
+            return false;
+        }
+    }
+    return true;
+};

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import type { CalenderMode, TableHeaderStatus, ColumnViewProps, TableMode, Timezone, SegmentCountry } from '../../types/index.js';
 import { AvailableStatus } from '../StatusBar/type';
 import { PartialExcept } from '../../types/index.js';
+import type { ViewMenuItem, LayoutSection } from './TableView/types';
 type ViewsOptions = {
     default: {};
     developer: {};
@@ -44,6 +45,25 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
         id: string;
         label: string;
     }) => void;
+    customViews?: ViewMenuItem[];
+    onCreateCustomView?: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onEditCustomView?: (viewId: string, data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onDeleteCustomView?: (viewId: string) => Promise<void>;
+    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
+    initialTableViews?: ColumnViewProps[];
+    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
+    initialCustomViews?: ViewMenuItem[];
+    layoutData?: import('./TableView/types').LayoutSection[];
+    templates?: import('./TableView/types').TemplatesListResponse | import('./TableView/types').TemplateResponse[];
+    lang?: string;
     onToggleTextButtonClick?: () => void;
     children?: ReactNode;
     calendarGroupBy?: string;

package/build/components/TableReports/components/DownloadButton/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 type ExportButtonProps = {
     notificationState?: {
         success: boolean;

package/build/components/Toolbar/Toolbar.js

@@ -15,6 +15,6 @@ import { ToolbarStyled, StyledBox, ActionsBox } from './style';
 import WindowAppIcon from '../WindowAppIcon';
 function Toolbar(_a) {
     var { onMouseEnter, onMouseLeave, isMaximized, isHovered, children, rightActions, leftActions, title, icon } = _a, props = __rest(_a, ["onMouseEnter", "onMouseLeave", "isMaximized", "isHovered", "children", "rightActions", "leftActions", "title", "icon"]);
-    return (_jsx(ToolbarStyled, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "toolbar", isHovered: isHovered }, props, { children: _jsxs(StyledBox, Object.assign({ className: "toolbar-wrapper" }, { children: [leftActions ? _jsx(ActionsBox, Object.assign({ className: "action-box" }, { children: leftActions })) : _jsx("div", {}), _jsx(WindowAppIcon, { title: title, icon: icon }), rightActions ? _jsx(ActionsBox, Object.assign({ className: "action-box" }, { children: rightActions })) : _jsx("div", {})] })) })));
+    return (_jsx(ToolbarStyled, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "toolbar", isHovered: isHovered }, props, { children: _jsxs(StyledBox, Object.assign({ className: "toolbar-wrapper" }, { children: [leftActions ? _jsx(ActionsBox, Object.assign({ className: "action-box" }, { children: leftActions })) : _jsx("div", {}), _jsx(WindowAppIcon, { title: title, icon: icon }), rightActions ? (_jsx(ActionsBox, Object.assign({ sx: { justifyContent: 'flex-end' }, className: "action-box" }, { children: rightActions }))) : (_jsx("div", {}))] })) })));
 }
 export default memo(Toolbar);

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/build/constants/assets.d.ts

@@ -338,6 +338,7 @@ export declare const TAP3DSPROVIDERIcon: string;
 export declare const greyPlusIcon: string;
 export declare const greyMinusIcon: string;
 export declare const noPreviewIcon: string;
+export declare const editIcon: string;
 export declare const viewInvoiceIcon: string;
 export declare const checkoutStatusIcon: string;
 export declare const checkoutStatusBlueIcon: string;

package/build/constants/assets.js

@@ -344,6 +344,7 @@ export const TAP3DSPROVIDERIcon = `${lightUrl}/provider/TAP3DS.svg`;
 export const greyPlusIcon = `${lightUrl}/greyPlusIcon.svg`;
 export const greyMinusIcon = `${lightUrl}/greyMinusIcon.svg`;
 export const noPreviewIcon = `${lightUrl}/noPreviewIcon.svg`;
+export const editIcon = `${lightUrl}/other/editIcon.svg`;
 export const viewInvoiceIcon = `${appBaseUrl}/viewInvoice.svg`;
 export const checkoutStatusIcon = `${appBaseUrl}/checkoutStatus.svg`;
 export const checkoutStatusBlueIcon = `${appBaseUrl}/checkStatusOutBlue.svg`;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.371",
-  "testVersion": 0,
+  "version": "0.1.372-test.2-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -164,4 +164,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}