@legalplace/wizardx-core 0.0.1-alpha.0

package/src/components/PluginRoute.tsx

@@ -0,0 +1,46 @@
+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;
+}
+
+export type IProps = RouteComponentProps<IRouteProps>;
+
+export const PluginRoute = ({
+  match: {
+    params: { path },
+  },
+}: IProps) => {
+  const [RenderComponent, setRenderComponent] =
+    useState<React.ElementType | null>(null);
+
+  const loadRouteComponent = useCallback(async (routePath: string) => {
+    try {
+      let routes = getPluginsAdditionalRoutes();
+
+      if (!routes.length) {
+        /** @TODO load plugin from backend instead of defaulting to authentication plugin */
+        await loadPlugins({ authentication: '1.0.0' });
+        routes = getPluginsAdditionalRoutes();
+      }
+
+      if (routes[routePath]) setRenderComponent(routes[routePath]);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadRouteComponent(path);
+  }, [path, loadRouteComponent]);
+
+  return (
+    <Suspense fallback={() => Shimmer}>
+      <>{RenderComponent && <RenderComponent />}</>
+    </Suspense>
+  );
+};

package/src/components/SmartScript.tsx

@@ -0,0 +1,165 @@
+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';
+
+export type TInitTriggersCallback = (
+  triggers: StateType.SmartScript['triggers'],
+  actions: Action[]
+) => void;
+
+declare global {
+  interface Window {
+    onInit: typeof SmartScriptStore.onInit;
+    onLoad: typeof SmartScriptStore.onLoad;
+    onOptionChange: typeof SmartScriptStore.onOptionChange;
+    onVariableChange: typeof SmartScriptStore.onVariableChange;
+    updateOptionInput: typeof SmartScriptStore.updateOptionInput;
+    updateVariableInput: typeof SmartScriptStore.updateVariableInput;
+    updateOptionMeta: typeof SmartScriptStore.updateOptionMeta;
+    updateVariableMeta: typeof SmartScriptStore.updateVariableMeta;
+    option: (id: number, index: number) => boolean;
+    variable: (id: number, index: number) => string | number;
+    optionAll: (id: number) => boolean[];
+    variableAll: (id: number) => (string | number)[];
+    hideOption: typeof SmartScriptStore.hideOption;
+    displayOption: typeof SmartScriptStore.displayOption;
+    hideVariable: typeof SmartScriptStore.hideVariable;
+    displayVariable: typeof SmartScriptStore.displayVariable;
+    moment: typeof moment;
+    triggerListeners: (
+      type: 'option' | 'variable',
+      id: number,
+      inputs: StateType.Inputs
+    ) => Action[];
+    initTriggers: (
+      callback: TInitTriggersCallback,
+      inputs: StateType.Inputs,
+      newInstance: boolean
+    ) => void;
+  }
+}
+
+/**
+ * SmartScriptComponent
+ * --------------------
+ * This component loads smartscript code to be executed
+ * inside an iframe and assures communication with wizardx
+ * store
+ */
+const SmartScriptComponent = () => {
+  const [smartScriptLoaded, setSmartScriptLoaded] = useState(false);
+  const [isNewInstance, setIsNewInstance] = useState(true);
+  const [initTriggersCallback, setInitTriggersCallback] =
+    useState<TInitTriggersCallback | null>(null);
+
+  // Defining store
+  window.onInit = SmartScriptStore.onInit;
+  window.onLoad = SmartScriptStore.onLoad;
+  window.onOptionChange = SmartScriptStore.onOptionChange;
+  window.onVariableChange = SmartScriptStore.onVariableChange;
+  window.updateOptionInput = SmartScriptStore.updateOptionInput;
+  window.updateVariableInput = SmartScriptStore.updateVariableInput;
+  window.updateOptionMeta = SmartScriptStore.updateOptionMeta;
+  window.updateVariableMeta = SmartScriptStore.updateVariableMeta;
+  window.option = SmartScriptStore.getOptionInput;
+  window.variable = SmartScriptStore.getVariableInput;
+  window.optionAll = SmartScriptStore.getOptionAllInput;
+  window.variableAll = SmartScriptStore.getVariableAllInput;
+  window.hideVariable = SmartScriptStore.hideVariable;
+  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) ? '' : '/');
+
+  // Permalink
+  const { permalink, uniqid } = useParams<{
+    permalink: string;
+    uniqid?: string;
+  }>();
+
+  // Model version
+  const modelVersion = queryString.parse(window.location.search).version;
+
+  /**
+   * Loads smartscript
+   */
+  useEffect(() => {
+    if (!smartScriptLoaded) {
+      const src = `${apiEndpoint}wizard/contractv1/smartscript/${permalink}${
+        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);
+      };
+      document.body.append(scriptElement);
+    }
+  }, [
+    smartScriptLoaded,
+    apiEndpoint,
+    initTriggersCallback,
+    modelVersion,
+    permalink,
+    uniqid,
+    isNewInstance,
+  ]);
+
+  // Init triggers
+  window.initTriggers = (callback, inputs, newInstance = true) => {
+    // Updating Inputs
+    SmartScriptStore.inputs = inputs;
+
+    if (smartScriptLoaded) {
+      if (newInstance) SmartScriptStore.execOnInit();
+      SmartScriptStore.execOnLoad();
+      callback(SmartScriptStore.triggers, SmartScriptStore.grabActions());
+    } else {
+      setInitTriggersCallback(callback);
+      setIsNewInstance(newInstance);
+    }
+  };
+
+  // Triggering listeners
+  window.triggerListeners = (type, id, inputs) => {
+    const hooks =
+      SmartScriptStore.hooks[type === 'option' ? 'options' : 'variables'];
+    const listeners = hooks[id];
+
+    if (Array.isArray(listeners)) {
+      // Updating Inputs
+      SmartScriptStore.inputs = inputs;
+      try {
+        listeners.forEach((_cb) => _cb());
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('SmartScript (onInit) error: ', e.message);
+      }
+    }
+
+    return SmartScriptStore.grabActions();
+  };
+
+  return <>SmartScript</>;
+};
+
+export default SmartScriptComponent;

package/src/components/UserLocked/UserLockedComponent.tsx

@@ -0,0 +1,33 @@
+import React, { CSSProperties } from 'react';
+import { ReplaceComponent } from '../../PluginLoader';
+
+export interface IProps {
+  unhealthyStyle: CSSProperties;
+}
+const UserLockedComponent = ({ unhealthyStyle }: IProps) => (
+  <div style={unhealthyStyle}>
+    Merci d&lsquo;avoir complété votre questionnaire ! Votre Expert-Comptable a
+    été notifié de vos réponses et vous contactera pour la suite de la procédure
+  </div>
+);
+
+/**
+ * UserLock Higher-Order-Component
+ * @param Component UI Component
+ */
+const UserLockHooc =
+  (Component: React.ComponentType<IProps>): React.FC<IProps> =>
+  // eslint-disable-next-line react/display-name
+  (props) => {
+    // Component replace
+    const replaceAnchors = ['UserLockedComponent'];
+    const FinalComponent = ReplaceComponent(replaceAnchors, Component);
+
+    return (
+      <>
+        <FinalComponent {...props} />
+      </>
+    );
+  };
+
+export default UserLockHooc(UserLockedComponent);

package/src/components/View.test.tsx

@@ -0,0 +1,107 @@
+import 'regenerator-runtime/runtime';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, cleanup, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import loadable from '@loadable/component';
+import { createAppStore, getStore } from '../redux/store';
+import {
+  initPaginationAction,
+  initMetaAction,
+  fetchModelSucceededAction,
+  goPageAction,
+} from '../redux/actions/app';
+import View from './View';
+
+afterEach(cleanup);
+
+// Mocking config
+jest.mock('../config', () => ({
+  __esModule: true,
+  getConfig: () => ({
+    theme: { name: 'jestTestTheme' },
+    plugins: {},
+    apiEndpoint: 'https://api.legalplace.fr/api/v1/',
+    router: {
+      wizardPath:
+        '/:permalink/:modelId([0-9]+)?/questionnaire/:page([0-9]+|sommaire)',
+      wizardInstancePath:
+        '/:permalink/:modelId([0-9]+)?/questionnaire/:uniqid([0-9a-zA-Z]+)/:page([0-9]+|sommaire)',
+    },
+    appStates: ['wizard', 'termsheet'],
+  }),
+  isConfigReady: () => true,
+  loadConfig: async (): Promise<Record<string, any>> => ({
+    theme: { name: 'jestTestTheme' },
+    plugins: {},
+    apiEndpoint: 'https://api.legalplace.fr/api/v1/',
+    router: {
+      wizardPath:
+        '/:permalink/:modelId([0-9]+)?/questionnaire/:page([0-9]+|sommaire)',
+      wizardInstancePath:
+        '/:permalink/:modelId([0-9]+)?/questionnaire/:uniqid([0-9a-zA-Z]+)/:page([0-9]+|sommaire)',
+    },
+    appStates: ['wizard', 'termsheet'],
+  }),
+}));
+
+jest.mock('../Globals', () => ({
+  loadTheme: (plugin: string) => import(`../tests-misc/themes/${plugin}`),
+}));
+
+describe('<View />', () => {
+  let store: any;
+  beforeEach(() => {
+    createAppStore('memory');
+    store = getStore();
+    store.dispatch(
+      initPaginationAction({
+        currentPage: 1,
+        greatestPage: 1,
+        currentSectionId: 1,
+        availableSections: [1, 2],
+        currentAppState: 'wizard',
+        availableAppStates: ['wizard', 'termsheet'],
+      })
+    );
+    store.dispatch(
+      initMetaAction({
+        title: 'My Test Document',
+        id: 132,
+        prefix: '',
+        permalink: 'my-test-document',
+        modelVersion: 1,
+        productType: 'demarche',
+      })
+    );
+    store.dispatch(fetchModelSucceededAction());
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  it('Loads WizardComponent properly', async () => {
+    const { container } = render(
+      <Provider store={store}>
+        <View />
+      </Provider>
+    );
+    await waitFor(() =>
+      expect(container).toContainHTML(
+        '<div><h1>Wizard test theme, WizardComponent</h1></div>'
+      )
+    );
+  });
+
+  it('Loads TermsheetComponent properly', async () => {
+    store.dispatch(goPageAction(3));
+    const { container } = render(
+      <Provider store={store}>
+        <View />
+      </Provider>
+    );
+    await waitFor(() =>
+      expect(container).toContainHTML(
+        '<div><h1>Wizard test theme, TermsheetComponent</h1></div>'
+      )
+    );
+  });
+});

package/src/components/View.tsx

@@ -0,0 +1,116 @@
+import React, { CSSProperties } from 'react';
+import { connect, MapDispatchToPropsFunction } from 'react-redux';
+import Moustrap from 'mousetrap';
+import Shimmer from '../Shimmer';
+import { loadThemeComponent } from '../ThemeLoader';
+import {
+  selectCurrentAppState,
+  selectAvailableAppStates,
+  selectAvailableSections,
+} from '../redux/selectors/app';
+import Globals from '../Globals';
+import { goPageAction } from '../redux/actions/app';
+import { loadPluginComponent, pluginsLoaded } from '../PluginLoader';
+
+export type OwnProps = { currentAppState: string; goPage: (p: number) => void };
+/**
+ * ViewComponent
+ * -------------
+ * This wrapper loads & renders the current app state's
+ * related component from the theme
+ * @param props {currentAppState} mapper from redux state
+ */
+class ViewComponent extends React.Component<OwnProps> {
+  componentDidMount() {
+    Moustrap.bind('g o d l d', () => {
+      const currentAppState = selectCurrentAppState();
+      if (currentAppState === 'email') {
+        return;
+      }
+
+      const totalSections = selectAvailableSections().length;
+      const availableAppStates = selectAvailableAppStates();
+      const emailIndex = availableAppStates.indexOf('email');
+      const wizardIndex = availableAppStates.indexOf('wizard');
+
+      const emailPage = totalSections + (emailIndex - wizardIndex);
+      this.props.goPage(emailPage);
+    });
+  }
+
+  shouldComponentUpdate(newProps: OwnProps) {
+    if (this.props.currentAppState !== newProps.currentAppState) {
+      return true;
+    }
+
+    return false;
+  }
+
+  render() {
+    let AppStateComponent;
+    switch (this.props.currentAppState) {
+      case 'termsheet':
+        AppStateComponent = loadThemeComponent('TermsheetComponent');
+        break;
+      case 'email':
+        AppStateComponent = loadThemeComponent('EmailComponent');
+        break;
+      case 'wizard':
+        AppStateComponent = loadThemeComponent('WizardComponent');
+        break;
+      default:
+        if (pluginsLoaded())
+          AppStateComponent =
+            loadPluginComponent(this.props.currentAppState) ||
+            loadThemeComponent('WizardComponent');
+        else AppStateComponent = () => <></>;
+        break;
+    }
+    const envStyle: CSSProperties = {
+      top: '0',
+      left: '50%',
+      fontSize: '8pt',
+      padding: '4px 8px',
+      lineHeight: '16px',
+      background: '#E0182D',
+      color: '#FFF',
+      textTransform: 'uppercase',
+      fontWeight: 'bold',
+      borderRadius: '0 0 4px 4px',
+      zIndex: 99999999,
+      position: 'fixed',
+      transform: 'translateX(-50%)',
+      opacity: 0.6,
+      userSelect: 'none',
+    };
+
+    return (
+      <Shimmer>
+        {Globals.env !== 'production' &&
+          process.env.JEST_WORKER_ID === undefined && (
+            <div style={envStyle}>
+              {Globals.env} ({Globals.version})
+            </div>
+          )}
+        <React.Suspense fallback={null}>
+          <AppStateComponent />
+        </React.Suspense>
+      </Shimmer>
+    );
+  }
+}
+
+const mapStateToProps = () => {
+  const currentAppState = selectCurrentAppState();
+  return {
+    currentAppState,
+  };
+};
+
+const mapDispatchToProps: MapDispatchToPropsFunction<any, any> = (dispatch) => {
+  return {
+    goPage: (page: number) => dispatch(goPageAction(page)),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ViewComponent);

package/src/componentsConnectors/connectBox.test.tsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { StateType } from '../types/State.type';
+import { initOptionAction, initVariableAction } from '../redux/actions/inputs';
+import { getStore, createAppStore } from '../redux/store';
+import { initReferencesAction } from '../redux/actions/references';
+import {
+  initConditionsAction,
+  updateOptionConditionsAction,
+} from '../redux/actions/conditions';
+
+const references: StateType.References = {
+  options: {
+    1: {
+      meta: {
+        id: 1,
+        label: 'textbox',
+        type: 'box',
+        step: '*',
+        box: {
+          content: 'This content should be parsed with [var:1] value',
+          collapsable: true,
+          aggregatable: false,
+          type: 'error',
+          title: 'My Test Box',
+        },
+        tags: ['ivann'],
+      },
+      options: [],
+      variables: [],
+    },
+    2: {
+      meta: {
+        id: 2,
+        label: 'My test question',
+        step: '*',
+        type: 'static',
+      },
+      options: [],
+      variables: [1],
+    },
+  },
+  variables: {
+    1: {
+      id: 1,
+      label: 'My Test Variable',
+      step: '*',
+      type: 'text',
+    },
+  },
+  relations: {
+    options: {
+      1: {
+        options: [],
+        variables: [],
+        validators: {
+          options: [],
+          variables: [],
+        },
+        sections: {},
+        prefillers: [],
+        documents: [],
+        parents: [],
+        children: {
+          options: [],
+          variables: [],
+        },
+        dependants: [],
+      },
+      2: {
+        options: [],
+        variables: [],
+        validators: {
+          options: [],
+          variables: [],
+        },
+        sections: {},
+        prefillers: [],
+        documents: [],
+        parents: [],
+        children: {
+          options: [],
+          variables: [2],
+        },
+        dependants: [],
+      },
+    },
+    variables: {
+      1: {
+        options: [],
+        variables: [],
+        validators: {
+          options: [],
+          variables: [],
+        },
+        sections: {},
+        prefillers: [],
+        prefillingsContents: [],
+        documents: [],
+        parents: [2],
+      },
+    },
+    sections: {},
+  },
+  conditions: {
+    options: {},
+    variables: {},
+    prefillers: {},
+    validators: {
+      options: {},
+      variables: {},
+    },
+    sections: {},
+    documents: {},
+  },
+  sections: {},
+  documents: {},
+  defaults: {},
+  outputs: {},
+  evaluations: {},
+  boxes: {
+    1: {
+      variables: [1],
+      raw: 'This content should be parsed with [var:1] value',
+    },
+  },
+};
+
+const conditions: StateType.Conditions = {
+  options: {
+    1: [true],
+  },
+  variables: {},
+  prefillers: {},
+  sections: {
+    main: {},
+  },
+  documents: {},
+  validators: {
+    options: {},
+    variables: {},
+  },
+};
+
+describe('connectBox test suit', () => {
+  let store: any;
+  let connectBox: any;
+  beforeEach(async () => {
+    createAppStore('memory');
+    store = getStore();
+    store.dispatch(initReferencesAction(references));
+    store.dispatch(initVariableAction(1, ['My Test Variable']));
+    store.dispatch(initConditionsAction(conditions));
+    store.dispatch(initOptionAction(1, [true]));
+    // eslint-disable-next-line global-require
+    connectBox = require('./connectBox').connectBox;
+  });
+
+  it('Should parse variables', () => {
+    const ConnectedBox = connectBox((props: any) => {
+      return <h1>{props.content}</h1>;
+    });
+    const component = renderer.create(
+      // @ts-ignore
+      <ConnectedBox store={store} id={1} index={0} />
+    );
+    // @ts-ignore
+    expect(component.toTree().rendered.props.content).toEqual(
+      'This content should be parsed with My Test Variable value'
+    );
+  });
+
+  it('Should not parse on false condition', () => {
+    store.dispatch(updateOptionConditionsAction(1, 0, false));
+    const ConnectedBox = connectBox((props: any) => {
+      return <h1>{props.content}</h1>;
+    });
+    const component = renderer.create(
+      // @ts-ignore
+      <ConnectedBox store={store} id={1} index={0} />
+    );
+    // @ts-ignore
+    expect(component.toTree().rendered.props.content).toEqual('');
+  });
+
+  it('Should retrun props properly', () => {
+    store.dispatch(updateOptionConditionsAction(1, 0, true));
+    const ConnectedBox = connectBox((props: any) => {
+      return <h1>{props.content}</h1>;
+    });
+    const component = renderer.create(
+      <ConnectedBox store={store} id={1} index={0} />
+    );
+
+    // @ts-ignore
+    const { props } = component.toTree().rendered;
+
+    const { id, index, type, content, condition, box, tags, options } = props;
+
+    expect({
+      id,
+      index,
+      type,
+      content,
+      condition,
+      box,
+      tags,
+      options,
+    }).toEqual({
+      id: 1,
+      index: 0,
+      type: 'box',
+      content: 'This content should be parsed with My Test Variable value',
+      condition: true,
+      box: {
+        type: 'error',
+        title: 'My Test Box',
+        content: 'This content should be parsed with [var:1] value',
+        aggregatable: false,
+        collapsable: true,
+      },
+      tags: ['ivann'],
+      options: [],
+    });
+  });
+});