@legalplace/wizardx-core 2.2.0 → 2.4.0

package/src/PluginLoader.tsx

@@ -1,17 +1,12 @@
-import React, { Props } from 'react';
-import { Action } from 'redux';
-import PropTypes from 'prop-types';
-import { LoadableComponent } from '@loadable/component';
-import { getConfig } from './config';
-import * as connectorActions from './redux/actions';
-import { getStore } from './redux/store';
-import { getHistory } from './redux/routerHistory';
-import { EventsTracking } from './libs/EventsTracking';
-import { ComponentsConnectors } from './types/getConnectors.type';
-import { SelectorsType } from './types/getSelectors.type';
-import Globals from './Globals';
-import * as selectorsList from './redux/selectors';
-import * as connectorsList from './componentsConnectors';
+import React, { Props } from "react";
+import { Action } from "redux";
+import PropTypes from "prop-types";
+import { LoadableComponent } from "@loadable/component";
+import { getConfig } from "./config";
+import { getStore } from "./redux/store";
+import { getHistory } from "./redux/routerHistory";
+import { EventsTracking } from "./libs/EventsTracking";
+import Globals from "./Globals";
 
 // This object will be used to contain all anchors
 let globalAnchors: Record<string, React.FC[]> = {};
@@ -49,9 +44,9 @@ const pluginAppStates = (declaration: PluginsAppStatesDeclarations) => {
   PluginsAppStatesRegistrers.push(declaration.register);
 
   // Adding page app states
-  if (typeof declaration.pageAppState === 'object')
+  if (typeof declaration.pageAppState === "object")
     Object.keys(declaration.pageAppState).forEach((appState) => {
-      if (typeof declaration.pageAppState[appState] === 'string') {
+      if (typeof declaration.pageAppState[appState] === "string") {
         const page = declaration.pageAppState[appState];
 
         // Verifying if appState is already declared
@@ -135,11 +130,7 @@ export const getPluginsPageAppStates = (): Readonly<
   typeof PluginsPageAppStates
 > => PluginsPageAppStates;
 
-const loadPluginFiles = async (
-  pluginsList: Record<string, string>,
-  connectorSelectors: SelectorsType,
-  connectors: ComponentsConnectors
-) => {
+const loadPluginFiles = async (pluginsList: Record<string, string>) => {
   const plugins = Object.keys(pluginsList);
   // We load all needed plugin first to continue in synchronous way
   const pluginModules = await Promise.all(
@@ -153,20 +144,12 @@ const loadPluginFiles = async (
 
     // Loading selectors if module has a loader function
     if (loader !== undefined) {
-      loader(
-        connectorSelectors,
-        connectors,
-        getStore().dispatch,
-        connectorActions,
-        getHistory(),
-        getConfig(),
-        EventsTracking
-      );
+      loader(getStore().dispatch, getHistory(), getConfig(), EventsTracking);
     }
 
     // Looking for anchors inside the plugin
     Object.keys(anchors).forEach((anchor) => {
-      if (anchor === 'replace') {
+      if (anchor === "replace") {
         Object.keys(anchors[anchor]).forEach((replacer) => {
           // Adding current replacer
           replacers[replacer] = anchors[anchor][replacer];
@@ -177,14 +160,14 @@ const loadPluginFiles = async (
       /**
        * App States
        */
-      if (anchor === 'appstates') {
+      if (anchor === "appstates") {
         pluginAppStates(anchors.appstates);
       }
 
       /**
        * Redux Anchors
        */
-      if (anchor === 'redux') {
+      if (anchor === "redux") {
         Object.keys(anchors[anchor]).forEach((action) => {
           if (reduxAnchors[action] === undefined) reduxAnchors[action] = [];
           // Adding current action
@@ -196,7 +179,7 @@ const loadPluginFiles = async (
       /**
        * Action Override
        */
-      if (anchor === 'actionOverride') {
+      if (anchor === "actionOverride") {
         Object.keys(anchors[anchor]).forEach((action) => {
           if (actionOverrideAnchor[action] === undefined)
             actionOverrideAnchor[action] = [];
@@ -209,7 +192,7 @@ const loadPluginFiles = async (
       /**
        * Additional route
        */
-      if (anchor === 'additionalRoutes') {
+      if (anchor === "additionalRoutes") {
         Object.keys(anchors[anchor]).forEach((route) => {
           PluginAdditionRoutes[anchors[anchor][route].path] =
             anchors[anchor][route].component;
@@ -241,7 +224,7 @@ export const loadPlugins = async (plugins?: Record<string, string>) => {
     pluginsList = getConfig().plugins;
   }
   // We need to make sure all plugins are loaded before going on
-  await loadPluginFiles(pluginsList, selectorsList, connectorsList);
+  await loadPluginFiles(pluginsList);
 
   pluginsLoadingDone = true;
 };
@@ -333,7 +316,7 @@ export function ReplaceComponent<T = {}>(
     componentName ||
     OriginalComponent.displayName ||
     OriginalComponent.name ||
-    'Component';
+    "Component";
   const anchorsList = !Array.isArray(replacerName)
     ? [replacerName]
     : replacerName;

package/src/Shimmer.tsx

@@ -1,75 +1,88 @@
-import React, { CSSProperties } from 'react';
-import { connect } from 'react-redux';
-import { Loader } from '@legalplace/storybook';
-import { StateType } from './types/State.type';
-import { getThemeShimmer } from './ThemeLoader';
-import { PluginLoader } from './PluginLoader';
-import UserLockedComponent from './components/UserLocked/UserLockedComponent';
+import React, { CSSProperties, useState } from "react";
+import { connect } from "react-redux";
+import { StateType } from "./types/State.type";
+import { addOnThemeLoadCallback, getThemeShimmer } from "./ThemeLoader";
+import { PluginLoader } from "./PluginLoader";
+import UserLockedComponent from "./components/UserLocked/UserLockedComponent";
 
 const Shimmer: React.FC<{
-  fetchStatus: StateType.App.Meta['fetchStatus'];
-  report: StateType.App.Meta['report'];
+  fetchStatus: StateType.App.Meta["fetchStatus"];
+  report: StateType.App.Meta["report"];
 }> = (props) => {
+  const [themeLoaded, setThemeloaded] = useState(false);
+
   if (
-    props.fetchStatus === 'succeeded' ||
-    props.fetchStatus === 'nonBlocking'
+    props.fetchStatus === "succeeded" ||
+    props.fetchStatus === "nonBlocking"
   ) {
     return <>{props.children}</>;
   }
+
+  addOnThemeLoadCallback(() => {
+    if (!themeLoaded) setThemeloaded(true);
+  });
+
+  if (!themeLoaded) return null;
+
   const ThemeShimmer = getThemeShimmer();
 
   const style: CSSProperties = {
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-    color: '#AAA',
-    fontWeight: 'bold',
-    textTransform: 'uppercase',
-    fontSize: '12px',
-    userSelect: 'none',
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    color: "#AAA",
+    fontWeight: "bold",
+    textTransform: "uppercase",
+    fontSize: "12px",
+    userSelect: "none",
   };
 
   const unhealthyStyle: CSSProperties = {
-    color: '#AAA',
-    fontWeight: 'bold',
-    textTransform: 'uppercase',
-    fontSize: '24px',
-    width: '700px',
-    margin: 'auto',
-    textAlign: 'center',
-    padding: '20px',
+    color: "#AAA",
+    fontWeight: "bold",
+    textTransform: "uppercase",
+    fontSize: "24px",
+    width: "700px",
+    margin: "auto",
+    textAlign: "center",
+    padding: "20px",
   };
 
   const unhealthyStylePre: CSSProperties = {
-    background: '#FDDCD0',
-    textAlign: 'left',
-    fontSize: '12px',
-    color: '#6B0435',
-    padding: '10px',
-    borderRadius: '4px',
+    background: "#FDDCD0",
+    textAlign: "left",
+    fontSize: "12px",
+    color: "#6B0435",
+    padding: "10px",
+    borderRadius: "4px",
   };
-  if (ThemeShimmer !== null && props.fetchStatus === 'waiting') {
+  if (ThemeShimmer !== null && props.fetchStatus === "waiting") {
     return <ThemeShimmer />;
   }
   return (
     <>
-      {['waiting', 'failed'].includes(props.fetchStatus) && (
+      {["waiting", "failed"].includes(props.fetchStatus) && (
         <div style={style}>
-          {props.fetchStatus === 'waiting' && <Loader />}
-          {props.fetchStatus === 'failed' &&
-            'Une erreur a eu lieu pendant le chargement du questionnaire'}
+          {props.fetchStatus === "waiting" && (
+            <div className="lds-ripple">
+              <div />
+              <div />
+            </div>
+          )}
+          {props.fetchStatus === "failed" &&
+            "Une erreur a eu lieu pendant le chargement du questionnaire"}
         </div>
       )}
 
-      {props.fetchStatus === 'userLocked' && (
+      {props.fetchStatus === "userLocked" && (
         <>
           <PluginLoader anchor={[`userLockedScreen`]} props={props} />
           <UserLockedComponent unhealthyStyle={unhealthyStyle} />
         </>
       )}
 
-      {props.fetchStatus === 'unhealthy' && (
+      {props.fetchStatus === "unhealthy" && (
         <div style={unhealthyStyle}>
           Le modèle semble contenir des erreurs
           <pre style={unhealthyStylePre}>{props.report?.raw}</pre>
@@ -82,12 +95,12 @@ const Shimmer: React.FC<{
 const mapStateToProps = (
   state: StateType
 ): {
-  fetchStatus: StateType.App.Meta['fetchStatus'];
-  report: StateType.App.Meta['report'];
+  fetchStatus: StateType.App.Meta["fetchStatus"];
+  report: StateType.App.Meta["report"];
 } => ({
   fetchStatus:
-    state.app.meta.fetchStatus === 'succeeded'
-      ? 'nonBlocking'
+    state.app.meta.fetchStatus === "succeeded"
+      ? "nonBlocking"
       : state.app.meta.fetchStatus,
   report: state.app.meta.report,
 });

package/src/ThemeLoader.test.tsx

@@ -35,6 +35,7 @@ describe('<ThemeLoader />', () => {
   });
 
   it('Loads WizardComponent properly', async () => {
+    await loadTheme();
     const WizardComponent = loadThemeComponent('WizardComponent');
     const { container } = render(<WizardComponent />);
     await waitFor(() =>

package/src/ThemeLoader.tsx

@@ -1,20 +1,15 @@
-import loadable, { LoadableComponent } from '@loadable/component';
-import { getConfig, updateConfig } from './config';
-import { IWizardParamsTheme } from './types/config.type';
-/**
- * Connectors
- */
-import * as connectorSelectors from './redux/selectors';
-import * as connectors from './componentsConnectors';
-import { SelectorsType } from './types/getSelectors.type';
-import Globals from './Globals';
+import React from "react";
+import { getConfig, updateConfig } from "./config";
+import { IWizardParamsTheme } from "./types/config.type";
+import Globals from "./Globals";
 
 // Getting current theme from config
 let wizardTheme: string;
-let themeParams: IWizardParamsTheme['params'];
+let themeParams: IWizardParamsTheme["params"];
+const themeLoadCallbacks: (() => void)[] = [];
 
 // This variable will store our theme's index
-let themeIndex: Record<string, LoadableComponent<unknown>>;
+let themeIndex: Record<string, React.LazyExoticComponent<React.FC<{}>>>;
 
 /**
  * Theme loading function
@@ -38,58 +33,44 @@ export const loadTheme = async (theme?: string, force?: boolean) => {
 
   // Importing theme's loader function
   let themeLoader: {
-    loader?:
-      | ((
-          p: any,
-          c: typeof connectors,
-          s: SelectorsType
-        ) => Record<string, LoadableComponent<unknown>>)
-      | undefined;
-    default?: Record<string, LoadableComponent<unknown>>;
-  } = {
-    loader: undefined,
+    default?: Record<string, React.LazyExoticComponent<React.FC<{}>>>;
   };
 
   try {
     themeLoader = await Globals.loadTheme(currentTheme);
   } catch (e) {
     throw new Error(
-      'We are unable to load the theme, please make sure the theme param is valid'
+      "We are unable to load the theme, please make sure the theme param is valid"
     );
   }
 
   // Extracting loader & default
-  const { loader, default: themeDefault } = themeLoader;
+  const { default: themeDefault } = themeLoader;
 
-  // Making sure loader function exists
-  if (typeof loader !== 'function' && typeof themeDefault === 'undefined')
-    throw new Error('Theme loader function not found');
-
-  if (typeof loader === 'function')
-    themeIndex = loader(themeParams, connectors, connectorSelectors);
-  else if (typeof themeDefault !== 'undefined') themeIndex = themeDefault;
-  else throw new Error('Unable to retrieve theme index');
+  if (typeof themeDefault !== "undefined") themeIndex = themeDefault;
+  else throw new Error("Unable to retrieve theme index");
 
   // In case the theme still didn't load we throw an error
-  if (typeof themeIndex !== 'object')
-    throw new Error('Theme loader function did not return components object');
+  if (typeof themeIndex !== "object")
+    throw new Error("Theme loader function did not return components object");
+
+  themeLoadCallbacks.forEach((cb) => {
+    cb();
+  });
 };
 
 /**
  * Theme component's loader
  */
-const importThemeComponent = async (
+const importThemeComponent = (
   name: string
-): Promise<LoadableComponent<any>> => {
-  if (typeof themeIndex !== 'object') await loadTheme();
-  return themeIndex[name];
-};
+): React.LazyExoticComponent<React.FC<{}>> => themeIndex[name];
 /**
  * Theme component's loader
  */
 export const getThemeShimmer = () =>
   getConfig().theme?.shimmer === true
-    ? loadable(() => importThemeComponent('ShimmerComponent'))
+    ? importThemeComponent("ShimmerComponent")
     : null;
 
 export const setWizardTheme = async (theme: IWizardParamsTheme) => {
@@ -106,5 +87,9 @@ export const setWizardTheme = async (theme: IWizardParamsTheme) => {
 
 export const getThemeParams = () => themeParams;
 
-export const loadThemeComponent = (name: string) =>
-  loadable(() => importThemeComponent(name));
+export const loadThemeComponent = (name: string) => importThemeComponent(name);
+
+export const addOnThemeLoadCallback = (cb: () => void) => {
+  if (themeIndex !== undefined) cb();
+  themeLoadCallbacks.push(cb);
+};

package/src/components/PluginRoute.tsx

@@ -1,7 +1,7 @@
-import React, { Suspense, useCallback, useEffect, useState } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { getPluginsAdditionalRoutes, loadPlugins } from '../PluginLoader';
-import Shimmer from '../Shimmer';
+import React, { Suspense, useCallback, useEffect, useState } from "react";
+import { RouteComponentProps } from "react-router-dom";
+import { getPluginsAdditionalRoutes, loadPlugins } from "../PluginLoader";
+import Shimmer from "../Shimmer";
 
 export interface IRouteProps {
   path: string;
@@ -9,7 +9,7 @@ export interface IRouteProps {
 
 export type IProps = RouteComponentProps<IRouteProps>;
 
-export const PluginRoute = ({
+const PluginRoute = ({
   match: {
     params: { path },
   },
@@ -23,7 +23,7 @@ export const PluginRoute = ({
 
       if (!routes.length) {
         /** @TODO load plugin from backend instead of defaulting to authentication plugin */
-        await loadPlugins({ authentication: '1.0.0' });
+        await loadPlugins({ authentication: "1.0.0" });
         routes = getPluginsAdditionalRoutes();
       }
 
@@ -44,3 +44,5 @@ export const PluginRoute = ({
     </Suspense>
   );
 };
+
+export default PluginRoute;

package/src/components/SmartScript.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import queryString from 'query-string';
-import { Action } from 'redux';
-import moment from 'moment-business-days';
-import { getConfig } from '../config';
-import { SmartScriptStore } from '../libs/SmartScriptStore';
-import { StateType } from '../types/State.type';
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import queryString from "query-string";
+import { Action } from "redux";
+import type { Moment } from "moment-business-days";
+import { getConfig } from "../config";
+import { SmartScriptStore } from "../libs/SmartScriptStore";
+import { StateType } from "../types/State.type";
 
 export type TInitTriggersCallback = (
-  triggers: StateType.SmartScript['triggers'],
+  triggers: StateType.SmartScript["triggers"],
   actions: Action[]
 ) => void;
 
@@ -30,9 +30,9 @@ declare global {
     displayOption: typeof SmartScriptStore.displayOption;
     hideVariable: typeof SmartScriptStore.hideVariable;
     displayVariable: typeof SmartScriptStore.displayVariable;
-    moment: typeof moment;
+    moment: Moment;
     triggerListeners: (
-      type: 'option' | 'variable',
+      type: "option" | "variable",
       id: number,
       inputs: StateType.Inputs
     ) => Action[];
@@ -74,13 +74,12 @@ const SmartScriptComponent = () => {
   window.displayVariable = SmartScriptStore.displayVariable;
   window.hideOption = SmartScriptStore.hideOption;
   window.displayOption = SmartScriptStore.displayOption;
-  window.moment = moment;
 
   // Loading SmartScript
 
   // API Endpoint
   const apiEndpoint =
-    getConfig().apiEndpoint + (/\/$/.test(getConfig().apiEndpoint) ? '' : '/');
+    getConfig().apiEndpoint + (/\/$/.test(getConfig().apiEndpoint) ? "" : "/");
 
   // Permalink
   const { permalink, uniqid } = useParams<{
@@ -97,20 +96,22 @@ const SmartScriptComponent = () => {
   useEffect(() => {
     if (!smartScriptLoaded) {
       const src = `${apiEndpoint}wizard/contractv1/smartscript/${permalink}${
-        uniqid ? `/${uniqid}` : ''
-      }${modelVersion ? `?version=${modelVersion}` : ''}`;
-      const scriptElement = document.createElement('script');
-      scriptElement.setAttribute('src', src);
+        uniqid ? `/${uniqid}` : ""
+      }${modelVersion ? `?version=${modelVersion}` : ""}`;
+      const scriptElement = document.createElement("script");
+      scriptElement.setAttribute("src", src);
       scriptElement.onload = () => {
-        if (typeof initTriggersCallback === 'function') {
-          if (isNewInstance) SmartScriptStore.execOnInit();
-          SmartScriptStore.execOnLoad();
-          initTriggersCallback(
-            SmartScriptStore.triggers,
-            SmartScriptStore.grabActions()
-          );
-        }
-        setSmartScriptLoaded(true);
+        import("moment-business-days").then(() => {
+          if (typeof initTriggersCallback === "function") {
+            if (isNewInstance) SmartScriptStore.execOnInit();
+            SmartScriptStore.execOnLoad();
+            initTriggersCallback(
+              SmartScriptStore.triggers,
+              SmartScriptStore.grabActions()
+            );
+          }
+          setSmartScriptLoaded(true);
+        });
       };
       document.body.append(scriptElement);
     }
@@ -142,7 +143,7 @@ const SmartScriptComponent = () => {
   // Triggering listeners
   window.triggerListeners = (type, id, inputs) => {
     const hooks =
-      SmartScriptStore.hooks[type === 'option' ? 'options' : 'variables'];
+      SmartScriptStore.hooks[type === "option" ? "options" : "variables"];
     const listeners = hooks[id];
 
     if (Array.isArray(listeners)) {
@@ -152,7 +153,7 @@ const SmartScriptComponent = () => {
         listeners.forEach((_cb) => _cb());
       } catch (e) {
         // eslint-disable-next-line no-console
-        console.error('SmartScript (onInit) error: ', e.message);
+        console.error("SmartScript (onInit) error: ", e.message);
       }
     }
 

package/src/components/UserLocked/UserLockedComponent.tsx

@@ -1,5 +1,5 @@
-import React, { CSSProperties } from 'react';
-import { ReplaceComponent } from '../../PluginLoader';
+import React, { CSSProperties } from "react";
+import { ReplaceComponent } from "../../PluginLoader";
 
 export interface IProps {
   unhealthyStyle: CSSProperties;
@@ -20,7 +20,7 @@ const UserLockHooc =
   // eslint-disable-next-line react/display-name
   (props) => {
     // Component replace
-    const replaceAnchors = ['UserLockedComponent'];
+    const replaceAnchors = ["UserLockedComponent"];
     const FinalComponent = ReplaceComponent(replaceAnchors, Component);
 
     return (

package/src/components/View.test.tsx

@@ -12,6 +12,7 @@ import {
   goPageAction,
 } from '../redux/actions/app';
 import View from './View';
+import { loadTheme } from '../ThemeLoader';
 
 afterEach(cleanup);
 
@@ -79,6 +80,7 @@ describe('<View />', () => {
   });
 
   it('Loads WizardComponent properly', async () => {
+    await loadTheme();
     const { container } = render(
       <Provider store={store}>
         <View />
@@ -93,6 +95,7 @@ describe('<View />', () => {
 
   it('Loads TermsheetComponent properly', async () => {
     store.dispatch(goPageAction(3));
+    await loadTheme();
     const { container } = render(
       <Provider store={store}>
         <View />