@zohodesk/library-platform 1.1.12 → 1.2.0-exp.1

package/es/platform/components/smart-navigation/adapters/resources/SmartNavigationResource.js

@@ -0,0 +1,96 @@
+import { AbstractResource } from "../../../../sdk/application/interfaces/gateways/AbstractResource";
+import { translateModule } from "../presenters/OneUnifiedNavigationTranslator";
+import { ONE_UNIFICATION } from "../../../../../cc/one-unification/Constants";
+export class SmartNavigationResource extends AbstractResource {
+  initialize() {}
+
+  destroy() {}
+
+  initializeModel(model) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.initUIModel(model);
+  }
+
+  modifyTab(tabKey, tabData) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.modifyTab(tabKey, tabData);
+  }
+
+  modifyModule(moduleKey, moduleData) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.modifyModule(moduleKey, moduleData);
+  }
+
+  addModule(moduleParentKey, moduleData) {
+    this.validateLibraryLoaded();
+    const transformedModuleData = moduleData.map(module => translateModule(module));
+    globalThis.ZOUnifiedNavLib.addModule(moduleParentKey, transformedModuleData);
+  }
+
+  appendModule(moduleData) {
+    this.validateLibraryLoaded();
+    const transformedModuleData = moduleData.map(module => translateModule(module))[0];
+    ZOUnifiedNavLib.addModule('default-tab', transformedModuleData);
+  }
+
+  loadModule(moduleKey, moduleData) {
+    this.validateLibraryLoaded();
+    const transformedModuleData = moduleData.map(module => translateModule(module));
+    globalThis.ZUnify.UnifiedNavigation.onLoadComplete({
+      key: moduleKey,
+      items: transformedModuleData
+    });
+  }
+
+  selectModule(moduleKey) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.selectModule(moduleKey);
+  }
+
+  setNotificationCount(key, count) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.setNotificationCount(key, count);
+  }
+
+  pinModule(moduleKey) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.pinModule(moduleKey);
+  }
+
+  favouriteModule(moduleKey) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.favouriteModule(moduleKey);
+  }
+
+  hideModule(moduleKey) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.hideModule(moduleKey);
+  }
+
+  activateFilterOnModule(moduleKey) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.activateFitlerOnModule(moduleKey);
+  }
+
+  changeDepartment(departmentKey) {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.onSwitcherSelectionComplete(ONE_UNIFICATION.ELEMENTS.DEPARTMENT_SWITCHER, departmentKey);
+  }
+
+  expandPanel() {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.setCollapsed(false);
+  }
+
+  collapsePanel() {
+    this.validateLibraryLoaded();
+    globalThis.ZUnify.UnifiedNavigation.setCollapsed(true);
+  }
+
+  validateLibraryLoaded() {
+    if (!globalThis.ZUnify || !globalThis.ZUnify.UnifiedNavigation) {
+      throw new Error('Unification library is not loaded yet.');
+    }
+  }
+
+}

package/es/platform/components/smart-navigation/frameworks/CustomElementRenderer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function createButtonElement(config) {
+  return /*#__PURE__*/React.createElement('button', {
+    onClick: config.onClick
+  }, config.label);
+}
+
+export function renderIconSlot(iconSlot, buttonConfig) {
+  const container = document.getElementById(iconSlot.id);
+
+  if (!container) {
+    __DEVELOPMENT__ && console.warn(`[CustomElementRenderer] DOM node not found for iconSlot.id: "${iconSlot.id}"`);
+    return null;
+  }
+
+  if (iconSlot.width !== undefined) container.style.width = `${iconSlot.width}px`;
+  if (iconSlot.height !== undefined) container.style.height = `${iconSlot.height}px`;
+  ReactDOM.render(createButtonElement(buttonConfig), container);
+  return () => ReactDOM.unmountComponentAtNode(container);
+}

package/es/platform/components/smart-navigation/frameworks/SmartNavigation.js

@@ -0,0 +1,12 @@
+import React from 'react';
+const library = 'one-unification';
+
+if (library === 'one-unification') {
+  import("./one-unification/SmartNavigation").then(module => {
+    const SmartNavigation = module.SmartNavigation;
+    return SmartNavigation;
+  });
+} else {
+  /*#__PURE__*/
+  React.createElement("div", null, "Unsupported library for Smart Navigation");
+}

package/es/platform/components/smart-navigation/frameworks/one-unification/OneUnificationEventHandlers.js

@@ -0,0 +1,156 @@
+import { ONE_UNIFICATION } from "../../../../../cc/one-unification/Constants";
+import { UnifiedNavigationActions } from "./UnifiedNavigationActions";
+export class UnifiedNavigationEvent {
+  static defineCallBackProxy(dispatch) {
+    return {
+      get(target, prop, receiver) {
+        return function (args) {
+          dispatch({
+            type: ONE_UNIFICATION.EVENTS.ACTION_TRIGGERED,
+            payload: {
+              actionMethod: prop,
+              data: args
+            }
+          });
+
+          if (target[prop] && target[prop] instanceof Function) {
+            return target[prop].apply(this, args);
+          }
+        };
+      }
+
+    };
+  }
+
+  static getConfigJSON() {
+    return {
+      AccessibilitySettings: {
+        darkModeEnabled: true
+      },
+      AppsMenu: {
+        libraryURL: 'https://one-lab.localzoho.com/zd/library.js?app_name=support&org_id=115233295&zaaid=115233993'
+      },
+      unifiedNavigation: {
+        sidePaneSelector: ONE_UNIFICATION.ELEMENTS.SIDE_PANE,
+        topBarSelector: ONE_UNIFICATION.ELEMENTS.TOP_BAR,
+        appDisplayName: 'Desk',
+        appLogo: 'desk-logo',
+        appLogoURL: 'https://www.zohowebstatic.com/sites/zweb/images/desk/images/desk-128.png',
+        isInCollapsedState: false
+      }
+    };
+  }
+
+  onScriptLoad(_ref) {
+    let {
+      action,
+      dispatch
+    } = _ref;
+    const {
+      scriptId
+    } = action.payload;
+
+    if (scriptId !== ONE_UNIFICATION.SCRIPT_ID) {
+      return;
+    }
+
+    globalThis.onZUnifyLibReady = () => dispatch({
+      type: ONE_UNIFICATION.EVENTS.LIBRARY_READY
+    }); // moved to App Level
+
+
+    globalThis.onZDLibraryReady = () => dispatch({
+      type: ONE_UNIFICATION.EVENTS.ZD_LIBRARY_READY
+    }); // moved to App Level
+
+  }
+
+  onZUnifyReady(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      ZUnify,
+      ZUnifyImpl
+    } = globalThis;
+    ZUnify.register(UnifiedNavigationEvent.getConfigJSON());
+    UnifiedNavigationEvent.loadNavigationData({
+      state,
+      dispatch
+    });
+  }
+
+  static loadNavigationData(_ref3) {
+    let {
+      state,
+      dispatch
+    } = _ref3;
+    const {
+      ZUnify,
+      ZUnifyImpl
+    } = globalThis;
+    const {
+      model
+    } = state.properties;
+    ZUnify.UnifiedNavigation.initUIModel(model);
+    ZUnifyImpl.UnifiedNavigation = new Proxy(ZUnifyImpl.UnifiedNavigation, UnifiedNavigationEvent.defineCallBackProxy(dispatch));
+    dispatch({
+      type: ONE_UNIFICATION.EVENTS.UNIFIED_NAVIGATION_INITIALIZED,
+      payload: {
+        model
+      }
+    }); // ZUnifyImpl.UnifiedNavigation.clickModule = (...args) => console.log('<DK>', 'click module is also working fine', args[0]);
+  } // TODO: Yet to implement this method
+
+
+  onZDLibraryReady(_ref4) {
+    let {
+      state,
+      dispatch
+    } = _ref4;
+    globalThis.ZDLibrary.Launcher.init({
+      csrfName: 'crmcsrfparam',
+      // Product specific csrf value;
+      getCsrfValue: function () {
+        return ''; //getCSRFCookie(); // Product specific csrf value;
+      }
+    });
+  }
+
+  onActionTriggered(_ref5) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref5;
+    const {
+      actionMethod,
+      data
+    } = action.payload;
+    UnifiedNavigationActions.handle(actionMethod, data, dispatch);
+  }
+
+  getHandlers() {
+    return {
+      [ONE_UNIFICATION.EVENTS.LIBRARY_READY]: this.onZUnifyReady,
+      [ONE_UNIFICATION.EVENTS.ZD_LIBRARY_READY]: this.onZDLibraryReady,
+      [ONE_UNIFICATION.EVENTS.ACTION_TRIGGERED]: this.onActionTriggered,
+      // Library Loader moved to App level
+      ['LIBRARY_LOADER#SUCCESS']: this.onScriptLoad,
+      ['LIBRARY_LOADER#FAILURE']: _ref6 => {
+        let {
+          state,
+          action,
+          dispatch
+        } = _ref6;
+        const {
+          scriptId,
+          error
+        } = action.payload;
+        console.error(`Failed to load library: ${scriptId}, Error: ${error}`);
+      }
+    };
+  }
+
+}

package/es/platform/components/smart-navigation/frameworks/one-unification/SmartNavigation.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { createCustomComponent } from "../../../../../library/custom-component";
+import { OneUnifiedNavigationTranslator } from "../../adapters/presenters/OneUnifiedNavigationTranslator";
+import { sdkRegistry } from "../../../../sdk/frameworks/SdkRegistry";
+import ResourceNamesEnum from "../../../../../bc/sdk/ResourceNamesEnum";
+import { SmartNavigationResource } from "../../adapters/resources/SmartNavigationResource";
+import { UnifiedNavigation } from "./UnifiedNavigation";
+import { SmartNavigationProperties } from "../../../../../cc/smart-navigation";
+import { SmartNavigationEvent } from "./SmartNavigationEventHandlers";
+sdkRegistry.registerResource({
+  resourceName: ResourceNamesEnum.SMART_NAVIGATION,
+  resource: SmartNavigationResource
+});
+
+function SmartNavigationView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UnifiedNavigation, {
+    getRef: ref,
+    model: state
+  });
+}
+
+function constructSmartNavigationBehaviours() {
+  // const libraryLoaderBehaviour = LibraryLoaderBehaviour(ONE_UNIFICATION.SCRIPT_ID, 'https://static.localzohocdn.com/zunify/zunify.min.js');
+  // const sdkBehaviour = SdkBehaviourFactory.create([ResourceNamesEnum.SMART_NAVIGATION]);
+  return [];
+}
+
+function constructSmartNavigationEventHandlers() {
+  // const unifiedNavigationEventHandlers = new UnifiedNavigationEvent().getHandlers();
+  const smartNavigation = new SmartNavigationEvent().getHandlers();
+  const defaultEventHandlers = {
+    'SmartNavigation#MOUNT': () => {
+      sdkRegistry.createResourceInstance({
+        resourceName: ResourceNamesEnum.SMART_NAVIGATION,
+        instanceName: null
+      });
+    }
+  };
+  return { ...defaultEventHandlers,
+    ...smartNavigation
+  };
+}
+
+export const SmartNavigation = createCustomComponent({
+  name: 'SmartNavigation',
+  View: SmartNavigationView,
+  transformState: OneUnifiedNavigationTranslator,
+  behaviours: constructSmartNavigationBehaviours(),
+  eventHandlers: constructSmartNavigationEventHandlers(),
+  properties: SmartNavigationProperties
+});
+export function createSmartNavigation(_ref2) {
+  let {
+    dataSource
+  } = _ref2;
+  const {
+    getModules,
+    getViews,
+    getDepartments,
+    getClientActions,
+    getLayout,
+    getOnDemandModules
+  } = dataSource;
+  return props => {
+    const {
+      selectedModule,
+      iconMap
+    } = props;
+    return /*#__PURE__*/React.createElement(SmartNavigation, {
+      selectedModule: selectedModule,
+      modules: getModules(),
+      views: getViews(),
+      iconMap: iconMap,
+      departments: getDepartments(),
+      clientActions: getClientActions(),
+      overLayModules: getLayout()?.overLayModules || [],
+      onDemandModules: getOnDemandModules?.() || []
+    });
+  };
+}

package/es/platform/components/smart-navigation/frameworks/one-unification/SmartNavigation.module.css

@@ -0,0 +1,3 @@
+.smartNavigation {
+  height: 100% ;
+}

package/es/platform/components/smart-navigation/frameworks/one-unification/SmartNavigationEventHandlers.js

@@ -0,0 +1,173 @@
+import { SmartNavigationConstants } from "../../../../../cc/smart-navigation";
+import { SmartNavigationPresenter } from "../../adapters/presenters/Present";
+import { ONE_UNIFICATION } from "../../../../../cc/one-unification/Constants";
+export class SmartNavigationEvent {
+  handleModuleClick(_ref) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref;
+    const {
+      key: moduleApiName,
+      content,
+      navigationPathKeys
+    } = action.payload;
+    const smartNavigationPresenter = new SmartNavigationPresenter(state);
+    const selectedModule = smartNavigationPresenter.findModule(moduleApiName);
+    dispatch({
+      type: SmartNavigationConstants.MODULE_CHANGE,
+      payload: {
+        selectedModule,
+        moduleParentApiNames: navigationPathKeys
+      }
+    });
+  }
+
+  handleAdd(_ref2) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      key: moduleApiName,
+      content,
+      coords,
+      navigationPathKeys
+    } = action.payload;
+    const smartNavigationPresenter = new SmartNavigationPresenter(state);
+    const selectedModuleData = smartNavigationPresenter.findModule(moduleApiName);
+    dispatch({
+      type: SmartNavigationConstants.MODULE_ADD,
+      payload: {
+        newLink: selectedModuleData.newLink,
+        currentModule: selectedModuleData,
+        moduleParentApiNames: navigationPathKeys
+      }
+    });
+  }
+
+  handleLoadData(_ref3) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref3;
+    const {
+      data
+    } = action.payload;
+    const {
+      key: moduleApiName
+    } = data;
+    const smartNavigationPresenter = new SmartNavigationPresenter(state);
+    const module = smartNavigationPresenter.findModule(moduleApiName);
+    dispatch({
+      type: SmartNavigationConstants.LOAD_DATA,
+      payload: {
+        module
+      }
+    });
+  }
+
+  handleSearch(_ref4) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref4;
+    const {
+      key: moduleApiName,
+      query
+    } = action.payload;
+    const smartNavigationPresenter = new SmartNavigationPresenter(state);
+    const currentModule = smartNavigationPresenter.findModule(moduleApiName);
+    dispatch({
+      type: SmartNavigationConstants.SEARCH,
+      payload: {
+        currentModule,
+        searchValue: query
+      }
+    });
+  }
+
+  handleNavigationStateChange(_ref5) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref5;
+    const {
+      isInCollapsedState
+    } = action.payload;
+    const eventType = isInCollapsedState ? SmartNavigationConstants.NAVIGATION_PANEL_COLLAPSED : SmartNavigationConstants.NAVIGATION_PANEL_EXPANDED;
+    dispatch({
+      type: eventType
+    });
+  }
+
+  handleCustomAction(_ref6) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref6;
+    const {
+      action: actionName,
+      key: moduleApiName,
+      content,
+      navigationPathKeys: moduleParentApiNames
+    } = action.payload;
+    const smartNavigationPresenter = new SmartNavigationPresenter(state);
+    const currentModule = smartNavigationPresenter.findModule(moduleApiName);
+    dispatch({
+      type: SmartNavigationConstants.CUSTOM_ACTION,
+      payload: {
+        actionName,
+        currentModule,
+        moduleParentApiNames
+      }
+    });
+  }
+
+  handleDepartmentSwitch(_ref7) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref7;
+    const {
+      id: departmentApiName
+    } = action.payload;
+    const smartNavigationPresenter = new SmartNavigationPresenter(state);
+    const currentDepartment = smartNavigationPresenter.findDepartment(departmentApiName);
+    dispatch({
+      type: SmartNavigationConstants.DEPARTMENT_SWITCH,
+      payload: {
+        currentDepartment
+      }
+    });
+  }
+
+  loadSlotComponents(_ref8) {// const { } = state;
+
+    let {
+      state,
+      dispatch
+    } = _ref8;
+  }
+
+  getHandlers() {
+    return {
+      [ONE_UNIFICATION.EVENTS.ITEM_CHANGE]: this.handleModuleClick,
+      [ONE_UNIFICATION.EVENTS.ITEM_ADD]: this.handleAdd,
+      [ONE_UNIFICATION.EVENTS.LOAD_DATA]: this.handleLoadData,
+      [ONE_UNIFICATION.EVENTS.SEARCH]: this.handleSearch,
+      [ONE_UNIFICATION.EVENTS.NAVIGATION_STATE_CHANGE]: this.handleNavigationStateChange,
+      [ONE_UNIFICATION.EVENTS.CUSTOM_ACTION]: this.handleCustomAction,
+      [ONE_UNIFICATION.EVENTS.DEPARTMENT_SWITCH]: this.handleDepartmentSwitch,
+      [ONE_UNIFICATION.EVENTS.UNIFIED_NAVIGATION_INITIALIZED]: this.loadSlotComponents
+    };
+  }
+
+}

package/es/platform/components/smart-navigation/frameworks/one-unification/UnifiedNavigation.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ONE_UNIFICATION } from "../../../../../cc/one-unification/Constants";
+import styles from "./SmartNavigation.module.css";
+import { createCustomComponent } from "../../../../../library/custom-component";
+import { LibraryLoaderBehaviour } from "../../../../../library/behaviours/library-loader/frameworks/LibraryLoaderBehaviour";
+import { UnifiedNavigationEvent } from "./OneUnificationEventHandlers";
+
+function UnifiedNavigationView(_ref, ref) {
+  let {} = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: ONE_UNIFICATION.ELEMENTS.SIDE_PANE,
+    ref: ref,
+    className: styles.smartNavigation
+  });
+}
+
+function constructUnifiedNavigationBehaviours() {
+  const libraryLoaderBehaviour = LibraryLoaderBehaviour(ONE_UNIFICATION.SCRIPT_ID, 'https://static.localzohocdn.com/zunify/zunify.min.js');
+  return [];
+}
+
+function constructUnifiedNavigationEventHandlers() {
+  const unifiedNavigationEventHandlers = new UnifiedNavigationEvent().getHandlers();
+  const defaultEventHandlers = {
+    ['UnifiedNavigation#MOUNT']: UnifiedNavigationEvent.loadNavigationData
+  };
+  return { ...defaultEventHandlers,
+    ...unifiedNavigationEventHandlers
+  };
+}
+
+export const UnifiedNavigation = createCustomComponent({
+  name: 'UnifiedNavigation',
+  View: UnifiedNavigationView,
+  properties: {
+    model: {
+      required: false,
+      defaultValue: [],
+      typeMetadata: {
+        schema: {
+          type: 'object'
+        }
+      }
+    }
+  },
+  behaviours: constructUnifiedNavigationBehaviours(),
+  eventHandlers: constructUnifiedNavigationEventHandlers()
+});