@legalplace/wizardx-core 2.6.3 → 2.7.0

package/src/Shimmer.tsx

@@ -1,108 +0,0 @@
-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"];
-}> = (props) => {
-  const [themeLoaded, setThemeloaded] = useState(false);
-
-  if (
-    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",
-  };
-
-  const unhealthyStyle: CSSProperties = {
-    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",
-  };
-  if (ThemeShimmer !== null && props.fetchStatus === "waiting") {
-    return <ThemeShimmer />;
-  }
-  return (
-    <>
-      {["waiting", "failed"].includes(props.fetchStatus) && (
-        <div style={style}>
-          {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" && (
-        <>
-          <PluginLoader anchor={[`userLockedScreen`]} props={props} />
-          <UserLockedComponent unhealthyStyle={unhealthyStyle} />
-        </>
-      )}
-
-      {props.fetchStatus === "unhealthy" && (
-        <div style={unhealthyStyle}>
-          Le modèle semble contenir des erreurs
-          <pre style={unhealthyStylePre}>{props.report?.raw}</pre>
-        </div>
-      )}
-    </>
-  );
-};
-
-const mapStateToProps = (
-  state: StateType
-): {
-  fetchStatus: StateType.App.Meta["fetchStatus"];
-  report: StateType.App.Meta["report"];
-} => ({
-  fetchStatus:
-    state.app.meta.fetchStatus === "succeeded"
-      ? "nonBlocking"
-      : state.app.meta.fetchStatus,
-  report: state.app.meta.report,
-});
-
-export default connect(mapStateToProps)(Shimmer);

package/src/ThemeLoader.test.tsx

@@ -1,82 +0,0 @@
-import 'regenerator-runtime/runtime';
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, cleanup, waitFor } from '@testing-library/react';
-
-afterEach(cleanup);
-
-// Mocking config
-jest.mock('./config', () => ({
-  __esModule: true,
-  getConfig: () => ({
-    theme: { name: 'jestTestTheme' },
-    plugins: {},
-  }),
-  loadConfig: async (): Promise<Record<string, any>> => ({
-    theme: { name: 'jestTestTheme' },
-    plugins: {},
-  }),
-  isConfigReady: () => true,
-}));
-
-jest.mock('./Globals', () => ({
-  loadTheme: (theme: string) => import(`./tests-misc/themes/${theme}`),
-}));
-
-let loadThemeComponent: any;
-let loadTheme: any;
-describe('<ThemeLoader />', () => {
-  beforeEach(() => {
-    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-    loadThemeComponent = require('./ThemeLoader').loadThemeComponent;
-    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-    loadTheme = require('./ThemeLoader').loadTheme;
-    jest.spyOn(console, 'error').mockImplementation(() => {});
-  });
-
-  it('Loads WizardComponent properly', async () => {
-    await loadTheme();
-    const WizardComponent = loadThemeComponent('WizardComponent');
-    const { container } = render(<WizardComponent />);
-    await waitFor(() =>
-      expect(container).toContainHTML(
-        '<div><h1>Wizard test theme, WizardComponent</h1></div>'
-      )
-    );
-  });
-
-  it('Loads TermsheetComponent properly', async () => {
-    const TermsheetComponent = loadThemeComponent('TermsheetComponent');
-    const { container } = render(<TermsheetComponent />);
-    await waitFor(() =>
-      expect(container).toContainHTML(
-        '<div><h1>Wizard test theme, TermsheetComponent</h1></div>'
-      )
-    );
-  });
-});
-
-describe('loadTheme', () => {
-  it("loadTheme reloads theme properly if it's not yet loaded", async () => {
-    expect(loadTheme(undefined, true)).resolves.toEqual(undefined);
-  });
-  it('loadTheme throws an error if theme param is invalid', async () => {
-    expect(loadTheme('madeUpTheme')).rejects.toEqual(
-      new Error(
-        'We are unable to load the theme, please make sure the theme param is valid'
-      )
-    );
-  });
-  it('loadTheme throws an error if theme param is invalid', async () => {
-    expect(loadTheme('jestTestTheme/faltyIndexLoader')).rejects.toEqual(
-      new Error(
-        'We are unable to load the theme, please make sure the theme param is valid'
-      )
-    );
-  });
-  it('loadTheme throws an error if loader result is invalid', async () => {
-    expect(loadTheme('jestTestTheme/faltyIndex')).rejects.toEqual(
-      new Error('Theme loader function did not return components object')
-    );
-  });
-});

package/src/ThemeLoader.tsx

@@ -1,95 +0,0 @@
-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"];
-const themeLoadCallbacks: (() => void)[] = [];
-
-// This variable will store our theme's index
-let themeIndex: Record<string, React.LazyExoticComponent<React.FC<{}>>>;
-
-/**
- * Theme loading function
- */
-export const loadTheme = async (theme?: string, force?: boolean) => {
-  let currentTheme;
-
-  if (theme === undefined) {
-    currentTheme = force ? theme : wizardTheme;
-  } else {
-    currentTheme = theme;
-  }
-
-  // Double checking theme from config
-  if (currentTheme === undefined) {
-    const config = getConfig();
-    wizardTheme = config.theme.name;
-    themeParams = config.theme.params;
-    currentTheme = wizardTheme;
-  }
-
-  // Importing theme's loader function
-  let themeLoader: {
-    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"
-    );
-  }
-
-  // Extracting loader & default
-  const { default: themeDefault } = themeLoader;
-
-  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");
-
-  themeLoadCallbacks.forEach((cb) => {
-    cb();
-  });
-};
-
-/**
- * Theme component's loader
- */
-const importThemeComponent = (
-  name: string
-): React.LazyExoticComponent<React.FC<{}>> => themeIndex[name];
-/**
- * Theme component's loader
- */
-export const getThemeShimmer = () =>
-  getConfig().theme?.shimmer === true
-    ? importThemeComponent("ShimmerComponent")
-    : null;
-
-export const setWizardTheme = async (theme: IWizardParamsTheme) => {
-  const { name, params } = theme;
-  wizardTheme = name;
-  if (params) themeParams = params;
-  await loadTheme();
-  const previousConfig = getConfig();
-  updateConfig({
-    ...previousConfig,
-    theme,
-  });
-};
-
-export const getThemeParams = () => themeParams;
-
-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,48 +0,0 @@
-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>;
-
-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>
-  );
-};
-
-export default PluginRoute;

package/src/components/SmartScript.tsx

@@ -1,166 +0,0 @@
-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"],
-  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: 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;
-
-  // 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 = () => {
-        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);
-    }
-  }, [
-    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

@@ -1,33 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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';
-import { loadTheme } from '../ThemeLoader';
-
-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 () => {
-    await loadTheme();
-    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));
-    await loadTheme();
-    const { container } = render(
-      <Provider store={store}>
-        <View />
-      </Provider>
-    );
-    await waitFor(() =>
-      expect(container).toContainHTML(
-        '<div><h1>Wizard test theme, TermsheetComponent</h1></div>'
-      )
-    );
-  });
-});