npm - ui-soxo-bootstrap-core - Versions diffs - 2.4.26 → 2.5.0 - Mend

ui-soxo-bootstrap-core 2.4.26 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/core/components/external-window/DEVELOPER_GUIDE.md +705 -0
package/core/components/external-window/external-window.js +225 -0
package/core/components/external-window/external-window.test.js +80 -0
package/core/components/index.js +4 -1
package/core/components/landing-api/landing-api.js +18 -18
package/core/lib/Store.js +20 -18
package/core/lib/components/index.js +4 -1
package/core/lib/elements/basic/rangepicker/rangepicker.js +118 -29
package/core/lib/elements/basic/switch/switch.js +34 -24
package/core/models/dashboard/dashboard.js +14 -0
package/core/modules/index.js +2 -0
package/core/modules/steps/action-buttons.js +88 -0
package/core/modules/steps/steps.js +332 -0
package/core/modules/steps/steps.scss +158 -0
package/core/modules/steps/timeline.js +54 -0
package/jest.config.js +8 -0
package/jest.setup.js +1 -0
package/package.json +9 -4

package/core/components/external-window/external-window.js ADDED Viewed

@@ -0,0 +1,225 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { message } from 'antd';
+/**
+ * Renders children in a separate browser window
+ * @param {ReactNode} children - Content to render in new window
+ * @param {Function} onClose - Callback when window closes
+ * @param {string} title - Window title
+ * @param {number} width - Window width
+ * @param {number} height - Window height
+ * @param {number} left - Window left position
+ * @param {number} top - Window top position
+ * @param {boolean} copyStyles - Whether to copy parent styles (default: true)
+ * @param {string} centerScreen - Center window on screen ('horizontal', 'vertical', 'both', or false)
+ * @param {Object} shortcuts - Keyboard shortcuts config { close: 'Escape', focus: 'Ctrl+Shift+F', ... }
+ * @param {Function} onMinimize - Callback when window is minimized
+ * @param {Function} onMaximize - Callback when window is maximized
+ */
+export function ExternalWindow({
+    children,
+    onClose,
+    title = 'New Window',
+    width = 600,
+    height = 400,
+    left,
+    top,
+    copyStyles = true,
+    centerScreen = false,
+    shortcuts = {},
+    onMinimize,
+    onMaximize
+}) {
+    const [container, setContainer] = useState(null);
+    const windowRef = useRef(null);
+    // Default shortcuts
+    const defaultShortcuts = useMemo(() => ({
+        close: 'Escape',
+        focus: 'Ctrl+Shift+F',
+        ...shortcuts
+    }), [shortcuts]);
+    // Calculate window position
+    const { posX, posY } = useMemo(() => {
+        let posX = left;
+        let posY = top;
+        if (centerScreen) {
+            const screenWidth = window.screen.availWidth;
+            const screenHeight = window.screen.availHeight;
+            if (centerScreen === 'both' || centerScreen === 'horizontal') {
+                posX = (screenWidth - width) / 2;
+            }
+            if (centerScreen === 'both' || centerScreen === 'vertical') {
+                posY = (screenHeight - height) / 2;
+            }
+        }
+        return {
+            posX: posX ?? 200,
+            posY: posY ?? 200
+        };
+    }, [left, top, width, height, centerScreen]);
+    const windowFeatures = useMemo(() =>
+        `width=${width},height=${height},left=${posX},top=${posY},resizable=yes,scrollbars=yes`,
+        [width, height, posX, posY]
+    );
+    // Initialize window document
+    const initializeWindow = useCallback((win) => {
+        const doc = win.document;
+        // Write minimal HTML structure (like your working example)
+        doc.open();
+        doc.write(`
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <title>${title}</title>
+                    <style>
+                        * {
+                            box-sizing: border-box;
+                        }
+                        html, body {
+                            width: 100%;
+                            height: 100%;
+                            margin: 0 !important;
+                            padding: 0 !important;
+                            overflow: auto;
+                            background: ${getComputedStyle(document.body).backgroundColor || '#ffffff'};
+                            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+                            color: ${getComputedStyle(document.body).color || '#000000'};
+                        }
+                        body {
+                            display: block;
+                            min-height: 100vh;
+                        }
+                        #root {
+                            width: 100%;
+                            min-height: 100%;
+                            margin: 0;
+                            padding: 0;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <div id="root"></div>
+                </body>
+            </html>
+        `);
+        doc.close();
+        return doc.getElementById('root');
+    }, [title]);
+    // Copy styles from parent window
+    const copyStylesToWindow = useCallback((targetWindow) => {
+        if (!copyStyles) return;
+        const fragment = targetWindow.document.createDocumentFragment();
+        // Copy all stylesheets from parent
+        Array.from(document.styleSheets).forEach(sheet => {
+            try {
+                if (sheet.href) {
+                    // External stylesheet
+                    const link = targetWindow.document.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.href = sheet.href;
+                    fragment.appendChild(link);
+                } else if (sheet.cssRules) {
+                    // Inline stylesheet
+                    const style = targetWindow.document.createElement('style');
+                    const cssText = Array.from(sheet.cssRules).map(r => r.cssText).join('\n');
+                    style.textContent = cssText;
+                    fragment.appendChild(style);
+                }
+            } catch (e) {
+                // Silently ignore cross-origin stylesheet errors
+                console.warn('Could not copy stylesheet:', e);
+            }
+        });
+        targetWindow.document.head.appendChild(fragment);
+    }, [copyStyles]);
+    // Keyboard shortcut handler
+    const createKeyDownHandler = useCallback((win) => (e) => {
+        const key = [
+            e.ctrlKey && 'Ctrl',
+            e.shiftKey && 'Shift',
+            e.altKey && 'Alt',
+            e.metaKey && 'Meta',
+            e.key
+        ].filter(Boolean).join('+');
+        if (defaultShortcuts.close && key === defaultShortcuts.close) {
+            e.preventDefault();
+            onClose();
+        } else if (defaultShortcuts.focus && key === defaultShortcuts.focus) {
+            e.preventDefault();
+            win.focus();
+        } else if (defaultShortcuts.minimize && key === defaultShortcuts.minimize) {
+            e.preventDefault();
+            win.blur();
+            onMinimize?.();
+        } else if (defaultShortcuts.maximize && key === defaultShortcuts.maximize) {
+            e.preventDefault();
+            win.moveTo(0, 0);
+            win.resizeTo(screen.availWidth, screen.availHeight);
+            onMaximize?.();
+        }
+    }, [defaultShortcuts, onClose, onMinimize, onMaximize]);
+    useEffect(() => {
+        const win = window.open('', '', windowFeatures);
+        if (!win) {
+            message.error('Please allow popups for this site');
+            onClose();
+            return;
+        }
+        windowRef.current = win;
+        // Initialize window document structure
+        const root = initializeWindow(win);
+        // Copy styles from parent (async to not block)
+        requestAnimationFrame(() => {
+            copyStylesToWindow(win);
+        });
+        // Set container for portal immediately
+        setContainer(root);
+        // Setup keyboard shortcuts
+        const handleKeyDown = createKeyDownHandler(win);
+        window.addEventListener('keydown', handleKeyDown);
+        win.addEventListener('keydown', handleKeyDown);
+        // Handle window close
+        const handleClose = () => {
+            setContainer(null);
+            onClose();
+        };
+        win.addEventListener('beforeunload', handleClose);
+        // Cleanup
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            win.removeEventListener('keydown', handleKeyDown);
+            win.removeEventListener('beforeunload', handleClose);
+            if (!win.closed) win.close();
+        };
+        // Only re-run if window features change, not on every render
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [windowFeatures]);
+    return container ? createPortal(children, container) : null;
+}

package/core/components/external-window/external-window.test.js ADDED Viewed

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import { ExternalWindow } from './external-window';
+// Mock window.open
+global.open = jest.fn(() => {
+  const newWindow = {
+    document: {
+      open: jest.fn(),
+      write: jest.fn(),
+      close: jest.fn(),
+      getElementById: jest.fn().mockReturnValue(document.createElement('div')),
+      head: {
+        appendChild: jest.fn(),
+      },
+      createDocumentFragment: jest.fn().mockReturnThis(),
+      createElement: jest.fn().mockReturnThis(),
+      body: document.createElement('body'),
+    },
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    close: jest.fn(),
+    screen: {
+      availWidth: 1920,
+      availHeight: 1080,
+    },
+    getComputedStyle: jest.fn().mockReturnValue({}),
+  };
+  return newWindow;
+});
+// Mock getComputedStyle
+global.getComputedStyle = jest.fn(() => ({
+  backgroundColor: '#ffffff',
+  color: '#000000'
+}));
+// Mock message.error
+jest.mock('antd', () => ({
+  ...jest.requireActual('antd'),
+  message: {
+    error: jest.fn(),
+  },
+}));
+describe('ExternalWindow', () => {
+  it('renders children in a portal', () => {
+    const handleClose = jest.fn();
+    render(
+      <ExternalWindow onClose={handleClose}>
+        <div>External Content</div>
+      </ExternalWindow>
+    );
+    // The content is rendered via a portal, so it won't be in the main container.
+    // Instead, we can check if window.open was called, which is the primary
+    // effect of this component.
+    expect(global.open).toHaveBeenCalled();
+  });
+  it('calls window.close on unmount', () => {
+    const handleClose = jest.fn();
+    const { unmount } = render(<ExternalWindow onClose={handleClose} />);
+    const newWindow = global.open.mock.results[0].value;
+    unmount(); // cleanup
+    expect(newWindow.close).toHaveBeenCalledTimes(1);
+  });
+  it('should not open a window if popups are blocked', () => {
+    // block popups
+    global.open.mockReturnValueOnce(null);
+    const handleClose = jest.fn();
+    render(<ExternalWindow onClose={handleClose} />);
+    expect(handleClose).toHaveBeenCalled();
+  });
+});

package/core/components/index.js CHANGED Viewed

@@ -10,9 +10,12 @@ import RootApplicationAPI from './root-application-api/root-application-api';
 import { HomePageAPI } from '../modules';
+import { ExternalWindow } from './external-window/external-window';
 export {
     LandingAPI,
     RootApplicationAPI,
     ExtraInfoDetail,
-    HomePageAPI
+    HomePageAPI,
+    ExternalWindow
 }

package/core/components/landing-api/landing-api.js CHANGED Viewed

@@ -153,30 +153,30 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
     /**If there is roles assigned to the user */
     // for matria
-   const useCoreMenus= process.env.REACT_APP_USE_CORE_MENUS === 'true';
-   if(useCoreMenus){
-     if (result && result.result && reportMenus) {
-      setAllModules([...result.result, ...reportMenus, ...coreModules]);
-    } else {
-      //If there is no roles assigned to the user
-      setAllModules([...coreModules]);
-    }
+    const useCoreMenus = process.env.REACT_APP_USE_CORE_MENUS === 'true';
+    if (useCoreMenus) {
+      if (result && result.result && reportMenus) {
+        setAllModules([...result.result, ...reportMenus, ...coreModules]);
+      } else {
+        //If there is no roles assigned to the user
+        setAllModules([...coreModules]);
+      }
-   } else{
-    //  for nura
-    if (result && result.result.menus && reportMenus) {
-      setAllModules([...result.result.menus, ...reportMenus, ...coreModules]);
     } else {
-      //If there is no roles assigned to the user
-      setAllModules([...coreModules]);
+      //  for nura
+      if (result && result.result.menus && reportMenus) {
+        setAllModules([...result.result.menus, ...reportMenus, ...coreModules]);
+      } else {
+        //If there is no roles assigned to the user
+        setAllModules([...coreModules]);
+      }
     }
+    setLoader(false);
   }
-  setLoader(false);
-   }
   /**
    * Load the scripts

package/core/lib/Store.js CHANGED Viewed

@@ -48,25 +48,25 @@ import { ConfigProvider, theme } from 'antd';
 const initialTheme = () => {
   try {
     //  manage theme with env
-      const isEnvThemeTrue = process.env.REACT_APP_THEME;
+    const isEnvThemeTrue = process.env.REACT_APP_THEME;
-      console.log('REACT_APP_THEME:', isEnvThemeTrue);
-       const matchedTheme = themes.find(t => t.name === isEnvThemeTrue);
+    console.log('REACT_APP_THEME:', isEnvThemeTrue);
+    const matchedTheme = themes.find((t) => t.name === isEnvThemeTrue);
     if (matchedTheme) return matchedTheme;
-      // Check saved theme
-      const savedTheme = localStorage.getItem('selectedTheme');
-      if (savedTheme) {
-        return JSON.parse(savedTheme);
-      }
-      // Fallback to default
-      return themes[0];
-    } catch (e) {
-      console.error('Error loading theme:', e);
-      return themes[0];
+    // Check saved theme
+    const savedTheme = localStorage.getItem('selectedTheme');
+    if (savedTheme) {
+      return JSON.parse(savedTheme);
     }
+    // Fallback to default
+    return themes[0];
+  } catch (e) {
+    console.error('Error loading theme:', e);
+    return themes[0];
+  }
 };
 const initialState = {
@@ -87,7 +87,7 @@ let app = {};
  * @param {*} param0
  * @returns
  */
-export const GlobalProvider = ({ children, CustomModels, appSettings: settings }) => {
+export const GlobalProvider = ({ children, CustomModels,CustomComponents, appSettings: settings }) => {
   // console.log("Setting up store");
   const [branches, setBranches] = useState([]);
@@ -226,13 +226,14 @@ export const GlobalProvider = ({ children, CustomModels, appSettings: settings }
   let store = {
     app: app,
     user: state.user,
-    settings:state.settings,
+    settings: state.settings,
     dispatch: dispatch,
     twilio: state.twilio,
     isMobile,
     branches,
     defaultBranch: state.defaultBranch,
     CustomModels: CustomModels,
+    CustomComponents:CustomComponents,
     selectedBranch: state.selectedBranch,
     kiosk: state.kiosk,
     state,
@@ -314,7 +315,8 @@ export const AppReducer = (state, action) => {
     case 'CustomModels':
       return { ...state, CustomModels: action.CustomModels };
+    case 'CustomComponents':
+      return { ...state, CustomComponents: action.CustomComponents };
     // # TODO Below Variable might be removed
     case 'selectedLocation':
       localStorage.selectedLocation = JSON.stringify(action.payload);

package/core/lib/components/index.js CHANGED Viewed

@@ -109,6 +109,8 @@ import ConsentComponent from './consent/consent'
 import TaskOverviewLegacy from './../models/process/components/task-overview-legacy/task-overview-legacy'
 import ReportingDashboard from '../../modules/reporting/components/reporting-dashboard/reporting-dashboard';
+import ProcessStepsPage from '../../modules/steps/steps'
 export {
   // Bootstrap Components
@@ -197,7 +199,8 @@ export {
   // WebCamera,
   ConsentComponent,
-  ReportingDashboard
+  ReportingDashboard,
+  ProcessStepsPage
 }

package/core/lib/elements/basic/rangepicker/rangepicker.js CHANGED Viewed

@@ -1,46 +1,135 @@
-import { DatePicker } from 'antd';
+/**
+ * @file rangepicker.js
+ * @description A reusable, enhanced Ant Design RangePicker component.
+ *
+ * Features:
+ * - Manual selections require "Apply" button confirmation
+ * - Preset ranges apply immediately without confirmation
+ * - Optimized state management and event handling
+ */
+import { useCallback, useRef, useState } from 'react';
+import { DatePicker, Space } from 'antd';
 import moment from 'moment-timezone';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import Button from '../button/button';
 import './rangepicker.scss';
+/**
+ * Enhanced RangePicker with Apply/Cancel controls for manual selections.
+ * @param {object} props
+ * @param {moment.Moment[]} props.value - Current applied date range
+ * @param {function(moment.Moment[]): void} props.onChange - Callback when range is applied
+ * @param {string} [props.format='DD/MM/YYYY'] - Date display format
+ * @param {object} [props.ranges] - Preset date ranges
+ * @param {boolean} [props.allowClear=false] - Whether to show clear button
+ * @param {boolean} [props.inputReadOnly=true] - Whether input is read-only
+ */
 const { RangePicker } = DatePicker;
-export default function RangePickerComponent({ onChange, value, ranges }) {
-  // value is still: [moment, moment]
-  const startDate = value[0];
-  const endDate = value[1];
+export default function RangePickerComponent({
+  value,
+  onChange,
+  format = 'DD/MM/YYYY',
+  ranges,
+  allowClear = false,
+  inputReadOnly = true,
+  ...restProps
+}) {
+  const { t } = useTranslation();
+  // Temporary range during selection (before Apply is clicked)
+  const [tempRange, setTempRange] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  // Ref to track if a selection just happened, to prevent the picker from closing.
+  const selectionJustHappened = useRef(false);
-  function handleChange(dates) {
-    if (!dates) {
-      onChange(null);
+  /**
+   * Handles any completed date selection (both manual and preset).
+   * It updates the temporary range and sets a flag to keep the picker open.
+   */
+  const handleChange = useCallback((dates) => {
+    setTempRange(dates || []);
+    selectionJustHappened.current = true;
+  }, []);
+  /**
+   * Handles picker open/close events.
+   * Prevents closing after a selection, requiring user to click Apply/Cancel.
+   */
+  const handleOpenChange = useCallback((open) => {
+    // If the picker is trying to close, check if it was due to a selection.
+    if (!open && selectionJustHappened.current) {
+      // It was a selection, so ignore the close request and reset the flag.
+      selectionJustHappened.current = false;
       return;
     }
-    // Convert dayjs → moment so your external code does NOT break
-    const converted = [moment(dates[0].toDate()), moment(dates[1].toDate())];
+    // For all other cases (opening, or closing by clicking outside), proceed as normal.
+    if (open) {
+      // Reset temp range when opening for a fresh selection.
+      setTempRange(null);
+    }
+    setIsOpen(open);
+  }, []);
+  /**
+   * Applies the temporary range and closes picker
+   */
+  const handleApply = useCallback(() => {
+    if (tempRange?.length === 2 && onChange) {
+      onChange(tempRange);
+    }
+    selectionJustHappened.current = false; // Clear the flag
+    setIsOpen(false);
+  }, [tempRange, onChange]);
-    onChange(converted);
-  }
+  /**
+   * Cancels selection and closes picker
+   */
+  const handleCancel = useCallback(() => {
+    selectionJustHappened.current = false; // Clear the flag
+    setTempRange(null);
+    setIsOpen(false);
+  }, []);
-  // Convert your old "ranges" object into AntD presets array
-  const presets = Object.entries(ranges).map(([label, range]) => ({
-    label,
-    value: range,
-  }));
+  // Memoized preset ranges - use provided ranges or default set
+  const defaultRanges = useRef({
+    Today: [moment(), moment()],
+    Yesterday: [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
+    'This Week': [moment().startOf('week'), moment().endOf('week')],
+    'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
+    'This Month': [moment().startOf('month'), moment().endOf('month')],
+    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
+  }).current;
   return (
-    <div className="rangepicker">
-      <RangePicker
-        allowClear={false}
-        inputReadOnly
-        format="DD/MM/YYYY"
-        // moment → allowed
-        value={[startDate, endDate]}
-        onChange={handleChange}
-        presets={presets}
-        ranges={ranges}
-      />
-    </div>
+    <RangePicker
+      allowClear={allowClear}
+      inputReadOnly={inputReadOnly}
+      format={format}
+      value={tempRange || value}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      onChange={handleChange}
+      ranges={ranges !== undefined ? ranges : defaultRanges}
+      {...restProps}
+      renderExtraFooter={() => (
+        <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', order: 1 }}>
+          <Space>
+            <Button size="small" onClick={handleCancel}>
+              {t('Cancel')}
+            </Button>
+            <Button type="primary" size="small" onClick={handleApply}>
+              {t('Apply')}
+            </Button>
+          </Space>
+        </div>
+      )}
+    />
   );
 }