ui-soxo-bootstrap-core 2.6.25 → 2.6.26

package/core/lib/components/global-header/global-header.js

@@ -3,116 +3,72 @@
  * Global header component
  */
 
-import React, { useState, useEffect, useContext, useRef } from "react";
+import { useContext, useEffect, useRef, useState } from 'react';
 
-import { animationControls, motion, useAnimation } from "framer-motion";
+import { motion, useAnimation } from 'framer-motion';
 
-import {
-  boxVariants,
-} from "./animations"
+import { boxVariants } from './animations';
 
-import { GlobalContext, GlobalProvider } from "./../../Store";
+import { GlobalContext, GlobalProvider } from './../../Store';
 
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from 'react-router-dom';
 
-import { Typography, Avatar, Input, Tooltip } from "antd";
+import { Avatar, Input, Tooltip, Typography } from 'antd';
 
+import ProgressBar from '../progress-bar/progress-bar'; // Adjust the path as needed
 
+import { Button } from '../../elements';
 
-import ProgressBar from "../progress-bar/progress-bar"; // Adjust the path as needed
+import GenericHeader from '../header/generic-header';
 
-import { Button } from "../../elements";
+import * as AntIcons from '@ant-design/icons';
 
+import { CustomerServiceOutlined, MenuOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
 
+import { Drawer } from 'antd';
 
-import GenericHeader from "../header/generic-header";
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 
-import {
-  MenuOutlined,
-  UserOutlined,
-  SettingOutlined,
-  QuestionOutlined,
-} from "@ant-design/icons";
+import SideMenu from './../sidemenu/sidemenu';
 
-import { Drawer } from "antd";
+import './global-header.scss';
 
-import { ReloadOutlined, SearchOutlined } from "@ant-design/icons";
-
-import SideMenu from "./../sidemenu/sidemenu";
-
-import "./global-header.scss";
-
-import LanguageSwitcher from "../language-switcher/language-switcher";
-
-import { useTranslation } from "react-i18next";
-
-
-import BorderStyle from "pdf-lib/cjs/core/annotation/BorderStyle";
-
-import SettingsUtil from "../../../utils/settings.utils";
-import SpotlightSearch from "../spotlight-search/spotlight-search.component";
+import LanguageSwitcher from '../language-switcher/language-switcher';
 
+import { useTranslation } from 'react-i18next';
 
+import SettingsUtil from '../../../utils/settings.utils';
+import SpotlightSearch from '../spotlight-search/spotlight-search.component';
 
 const { Title } = Typography;
 
-
-
-
-function GlobalHeaderContent({
-  loading,
-  appSettings,
-  children,
-  isConnected,
-  history,
-  modules = [],
-  sidemenu = [],
-  reload,
-  meta = {},
-  ...props
-}) {
-
+function GlobalHeaderContent({ loading, appSettings, children, isConnected, history, modules = [], sidemenu = [], reload, meta = {}, ...props }) {
   let location = useLocation();
   // let location = {};
 
-
-
   const { isMobile, user = { locations: [] }, kiosk, state, settings } = useContext(GlobalContext);
 
-
-
   const [visible, setVisible] = useState(false);
-  const helpDeskSetting = settings?.HELPATR || {}
+  const helpDeskSetting = settings?.HELPATR || {};
 
   // Variable to handle toggling of menu
   const [collapsed, setCollapsed] = useState(false);
   // varibale handle branch switcher
 
-
-
   // const [searchModalVisible, setSearchModalVisible] = useState(false);
 
-
-  const { globalCustomerHeader = () => { } } = appSettings;
+  const { globalCustomerHeader = () => {} } = appSettings;
 
   const { t, i18n } = useTranslation();
 
   const spotlightRef = useRef();
 
   useEffect(() => {
-
     setTimeout(() => {
-
       i18n.changeLanguage(localStorage.selectedLanguage);
-
-    }, 0)
-
-
+    }, 0);
   }, []);
 
-
-
-
   /**
    * Function to handle toggling of menu
    */
@@ -128,9 +84,6 @@ function GlobalHeaderContent({
     SettingsUtil.openSpotlightModal();
   };
 
-
-
-
   /**
    * Function to remove toggling on mobile view
    */
@@ -158,58 +111,42 @@ function GlobalHeaderContent({
   const boxControls = useAnimation();
 
   async function animate() {
-    await boxControls.start("entered");
+    await boxControls.start('entered');
 
     //await boxControls.start("show");
   }
 
   useEffect(() => {
-
     animate();
-  }, [])
-
-  useEffect(() => {
-
-  }, [state.theme]);
-
-
-
-
-
+  }, []);
 
+  useEffect(() => {}, [state.theme]);
 
   return (
     <div
-      className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? "connected" : ""
-        }`}
+      className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
       style={{
-
         // background: state.theme.colors.bodyBackground,
 
         height: 10,
-
       }}
     >
       {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
 
       <div className="layout-content">
         <div
-
           //whileHover="hover"
           //whileTap="tap"
-          className={`left-bar ${!isConnected && !isMobile ? "" : "hide"}${!collapsed ? "open" : "close"}${kiosk && !isConnected ? "kioskon" : ""}`}
-        // style={{ background: state.theme.colors.leftSectionBackground }}
+          className={`left-bar ${!isConnected && !isMobile ? '' : 'hide'}${!collapsed ? 'open' : 'close'}${kiosk && !isConnected ? 'kioskon' : ''}`}
+          // style={{ background: state.theme.colors.leftSectionBackground }}
         >
-
           {!isMobile && !isConnected ? (
             <motion.div
               variants={boxVariants}
-              initial={["entering"]}
+              initial={['entering']}
               animate={boxControls}
-              className={`sidebar-container ${!collapsed ? "open" : "close"}${kiosk ? "" : "kioskon"}`}
-
+              className={`sidebar-container ${!collapsed ? 'open' : 'close'}${kiosk ? '' : 'kioskon'}`}
             >
-
               <SideMenu
                 // isOpen={isOpen}
                 collapsed={collapsed}
@@ -220,18 +157,10 @@ function GlobalHeaderContent({
                 modules={modules}
                 history={history}
               />
-
             </motion.div>
           ) : (
-            <Drawer
-              placement="left"
-              onClose={onClose}
-              visible={visible}
-              className="side-drawer-content"
-            >
-              <div
-                className={`sidebar-container ${!collapsed ? "open" : "close"}`}
-              >
+            <Drawer placement="left" onClose={onClose} visible={visible} className="side-drawer-content">
+              <div className={`sidebar-container ${!collapsed ? 'open' : 'close'}`}>
                 <SideMenu
                   // isOpen={isOpen}
                   collapsed={collapsed}
@@ -248,28 +177,26 @@ function GlobalHeaderContent({
         </div>
 
         {/* Right Section of the Component Loader */}
-        <div className={`right-section ${!collapsed ? "open" : "close"} ${kiosk ? "kioskon" : ""}`} style={{ background: state.theme.colors.bodyBackground }}>
+        <div
+          className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
+          style={{ background: state.theme.colors.bodyBackground }}
+        >
           {/* For not connected section */}
           {!isConnected && !kiosk ? (
-
-            <div className={`page-wrapper ${!collapsed ? "open" : "close"}`}
-            // style={{ background: state.theme.colors.headerBg }}
+            <div
+              className={`page-wrapper ${!collapsed ? 'open' : 'close'}`}
+              // style={{ background: state.theme.colors.headerBg }}
             >
               {/*  */}
               <div className="page-header-name">
-
                 <ProgressBar isLoading={loading} />
 
-                <span type
-                  onClick={!isMobile ? toggleCollapsed : hideToggle}
-                  className="toggle-box toggle-menu"
-                >
+                <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
                   <MenuOutlined />
-
                 </span>
 
                 {/* Back Button */}
-                {location.pathname !== "/" ? (
+                {location.pathname !== '/' ? (
                   <span
                     className="toggle-box"
                     onClick={() => {
@@ -281,8 +208,7 @@ function GlobalHeaderContent({
                 ) : null}
                 {/* Back Button Ends */}
 
-
-                {location.pathname !== "/" ? (
+                {location.pathname !== '/' ? (
                   <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
                     {menu.caption}
                   </h4>
@@ -295,32 +221,19 @@ function GlobalHeaderContent({
                 <div className="page-menu">
                   {/* Search Input in header start */}
                   {!isMobile && (
-
                     <div>
-                      <Input
-                        placeholder="Search (Shift + F)"
-                        prefix={<SearchOutlined />}
-                        onClick={openSearchModal}
-
-                        readOnly
-                        style={{ width: 250 }}
-                      />
-
+                      <Input placeholder="Search (Shift + F)" prefix={<SearchOutlined />} onClick={openSearchModal} readOnly style={{ width: 250 }} />
 
                       <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props} />
-
                     </div>
                   )}
                   {/* Search Input in header start */}
 
                   {/** branchswitcher Option  */}
                   {/* branch switcher controlled with env for matria and nura */}
-                  {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? (
-                    <div className="branch-switcher">{globalCustomerHeader()}</div>
-                  ) : null}
+                  {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? <div className="branch-switcher">{globalCustomerHeader()}</div> : null}
                   {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
 
-
                   {/* Search Option */}
 
                   {/* <ModalSearch /> */}
@@ -333,10 +246,7 @@ function GlobalHeaderContent({
                       {/* Models */}
                       {menu && menu.id ? (
                         <Link to={`/menus/${menu.id}`}>
-
-                          <Button type="default" size={"small"} icon={<SettingOutlined />}>
-
-                          </Button>
+                          <Button type="default" size={'small'} icon={<SettingOutlined />}></Button>
                         </Link>
                       ) : null}
                       {/* Models Ends */}
@@ -344,37 +254,37 @@ function GlobalHeaderContent({
                   ) : null}
                   {/* Configurator Actions Ends */}
 
-
-
-
-
-
                   {/* Reload Button */}
 
-                  <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={"small"} >
-
-                  </Button>
+                  <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
 
                   {/* Reload Button Ends */}
 
                   {/* Help-desk-btn */}
-                  {helpDeskSetting?.showSupportBtn ? <Tooltip title={helpDeskSetting?.toolTipText}>
-                    <span>
-                      <Button
-                        onClick={() => window.open(helpDeskSetting?.helpDeskLink ?? '', '_blank')}
-                        icon={<QuestionOutlined />}
-                        type="default"
-                        size="small"
-                      />
-                    </span>
-                  </Tooltip> : null}
+                  {helpDeskSetting?.showSupportBtn
+                    ? (() => {
+                        const HelpIcon = AntIcons[helpDeskSetting?.icon] ?? CustomerServiceOutlined;
+                        return (
+                          <Tooltip title={helpDeskSetting?.toolTipText} overlayClassName="modern-tooltip">
+                            <span>
+                              <Button
+                                onClick={() => window.open(helpDeskSetting?.helpDeskLink ?? '', '_blank')}
+                                icon={<HelpIcon />}
+                                type="default"
+                                size="small"
+                              />
+                            </span>
+                          </Tooltip>
+                        );
+                      })()
+                    : null}
 
                   {/** Switch Languages starts */}
                   {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
                   {/** Switch Languages ends */}
 
                   {/* User Profile */}
-                  <div style={{ padding: "10px" }}>
+                  <div style={{ padding: '10px' }}>
                     <ProfileAvatar />
                     <span style={{ color: state.theme.colors.colorText }}> {user.name} </span>
                   </div>
@@ -396,7 +306,6 @@ function GlobalHeaderContent({
   );
 }
 
-
 export default function GlobalHeader(props) {
   const context = useContext(GlobalContext);
 
@@ -411,27 +320,20 @@ export default function GlobalHeader(props) {
   );
 }
 
-
-
 /**
- * 
- * @returns 
+ *
+ * @returns
  */
 function ProfileAvatar() {
-
   const { user = { locations: [] } } = useContext(GlobalContext);
 
-  useEffect(() => { }, []);
+  useEffect(() => {}, []);
 
   return (
     <Link className="profile-avatar" to="/profile">
       {user.photograph ? (
         <>
-          <img
-            className="profile-picture"
-            src={user.photograph}
-            alt={"user photograph"}
-          />
+          <img className="profile-picture" src={user.photograph} alt={'user photograph'} />
         </>
       ) : (
         <Avatar shape="square" size="small" icon={<UserOutlined />} />

package/core/lib/components/global-header/global-header.scss

@@ -155,12 +155,10 @@
       }
     }
 
-   @media only screen and (max-width: 768px) {
+    @media only screen and (max-width: 768px) {
       margin-left: 0 !important; // remove left margin on mobile
       padding: 10px !important;
     }
-
-
   }
 
   .profile-avatar {
@@ -220,17 +218,16 @@
       left: 212px;
     }
 
-  @media only screen and (max-width: 768px) {
-    padding: 8px 10px 8px 14px !important;
-    left: 0 !important;
-    width: 100% !important;
-
-    &.open {
-      width: 100% !important;
+    @media only screen and (max-width: 768px) {
+      padding: 8px 10px 8px 14px !important;
       left: 0 !important;
-    }
-  }
+      width: 100% !important;
 
+      &.open {
+        width: 100% !important;
+        left: 0 !important;
+      }
+    }
 
     .page-header-name {
       display: flex;
@@ -289,7 +286,7 @@
       .branch-selection {
         margin: 0px 10px;
       }
-       .branch-switcher {
+      .branch-switcher {
         .branches {
           .ant-select {
             min-width: 150px;
@@ -317,13 +314,44 @@
   }
 }
 
+// Tooltip — must be top-level because antd Tooltip renders in a portal on document.body
+.modern-tooltip {
+  .ant-tooltip-inner {
+    background: #ffffff;
+    color: #1f1f1f;
+    font-size: 13px;
+    padding: 8px 14px;
+    border-radius: 10px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+    line-height: 1.4;
+    letter-spacing: 0.2px;
+    min-height: auto;
+  }
+
+  .ant-tooltip-arrow {
+    --antd-arrow-background-color: #ffffff;
+
+    &::before {
+      background: #ffffff !important;
+    }
+  }
+
+  .ant-tooltip-arrow-content {
+    background: #ffffff !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+    &::before {
+      background: #ffffff !important;
+    }
+  }
+}
+
 .side-drawer-content-wrapper {
   .drawer-content {
     .ant-drawer-body {
       padding: 0px;
     }
   }
- 
 }
 
 .sidebar-container {
@@ -361,7 +389,7 @@
       .ant-drawer-body {
         padding: 0px;
       }
-      .ant-drawer-header{
+      .ant-drawer-header {
         padding: 2px 20px;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.25",
+  "version": "2.6.26",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"