@legalplace/wizardx-core 2.3.0 → 2.5.0

package/src/components/View.tsx

@@ -1,18 +1,18 @@
-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';
+import React, { CSSProperties } from "react";
+import { connect, MapDispatchToPropsFunction } from "react-redux";
+// import loadable from '@loadable/component';
+import Shimmer from "../Shimmer";
+import { addOnThemeLoadCallback, loadThemeComponent } from "../ThemeLoader";
+import { selectCurrentAppState } from "../redux/selectors/app";
+import Globals from "../Globals";
+import { goPageAction } from "../redux/actions/app";
+import { loadPluginComponent, pluginsLoaded } from "../PluginLoader";
+
+// const Mousetrap = loadable.lib(() => import('mousetrap'));
 
 export type OwnProps = { currentAppState: string; goPage: (p: number) => void };
+export type OwnState = { themeLoaded: boolean };
+
 /**
  * ViewComponent
  * -------------
@@ -20,76 +20,74 @@ export type OwnProps = { currentAppState: string; goPage: (p: number) => void };
  * 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;
-      }
+class ViewComponent extends React.Component<OwnProps, OwnState> {
+  constructor(props: OwnProps) {
+    super(props);
 
-      const totalSections = selectAvailableSections().length;
-      const availableAppStates = selectAvailableAppStates();
-      const emailIndex = availableAppStates.indexOf('email');
-      const wizardIndex = availableAppStates.indexOf('wizard');
+    this.state = {
+      themeLoaded: false,
+    };
+  }
 
-      const emailPage = totalSections + (emailIndex - wizardIndex);
-      this.props.goPage(emailPage);
+  componentDidMount() {
+    addOnThemeLoadCallback(() => {
+      if (!this.state.themeLoaded) this.setState({ themeLoaded: true });
     });
   }
 
-  shouldComponentUpdate(newProps: OwnProps) {
-    if (this.props.currentAppState !== newProps.currentAppState) {
-      return true;
-    }
-
-    return false;
+  shouldComponentUpdate(newProps: OwnProps, newState: OwnState) {
+    return (
+      this.props.currentAppState !== newProps.currentAppState ||
+      this.state.themeLoaded !== newState.themeLoaded
+    );
   }
 
   render() {
+    if (!this.state.themeLoaded) return null;
     let AppStateComponent;
     switch (this.props.currentAppState) {
-      case 'termsheet':
-        AppStateComponent = loadThemeComponent('TermsheetComponent');
+      case "termsheet":
+        AppStateComponent = loadThemeComponent("TermsheetComponent");
         break;
-      case 'email':
-        AppStateComponent = loadThemeComponent('EmailComponent');
+      case "email":
+        AppStateComponent = loadThemeComponent("EmailComponent");
         break;
-      case 'wizard':
-        AppStateComponent = loadThemeComponent('WizardComponent');
+      case "wizard":
+        AppStateComponent = loadThemeComponent("WizardComponent");
         break;
       default:
         if (pluginsLoaded())
           AppStateComponent =
             loadPluginComponent(this.props.currentAppState) ||
-            loadThemeComponent('WizardComponent');
+            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',
+      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%)',
+      position: "fixed",
+      transform: "translateX(-50%)",
       opacity: 0.6,
-      userSelect: 'none',
+      userSelect: "none",
     };
 
     return (
       <Shimmer>
-        {Globals.env !== 'production' &&
+        {Globals.appEnv !== "production" &&
           process.env.JEST_WORKER_ID === undefined && (
             <div style={envStyle}>
-              {Globals.env} ({Globals.version})
+              {Globals.appEnv} ({Globals.version})
             </div>
           )}
         <React.Suspense fallback={null}>

package/src/componentsConnectors/connectBox.tsx

@@ -1,12 +1,12 @@
-import type { OptionV3 } from '@legalplace/models-v3-types';
+import type { OptionV3 } from "@legalplace/models-v3-types";
 import {
   componentConnector,
   ConnectorStateToProps,
-} from './connector/componentConnector';
+} from "./connector/componentConnector";
 import {
   getRelatedVariablesValues,
   parseContentWithVariables,
-} from '../helpers/outputsParsing';
+} from "../helpers/outputsParsing";
 
 export type ConnectBoxOwnProps = {
   id: number;
@@ -15,7 +15,7 @@ export type ConnectBoxOwnProps = {
 export type ConnectBoxMapProps = {
   type: string;
   content: string;
-  box: OptionV3['meta']['box'];
+  box: OptionV3["meta"]["box"];
   condition?: boolean;
   options: number[];
   tags?: string[];
@@ -45,7 +45,7 @@ const stateToProps: ConnectorStateToProps<
   const condition = selectors.selectOptionConditionValue(id, index);
   const content =
     condition === false
-      ? ''
+      ? ""
       : parseContentWithVariables(boxReference.raw, id, index, variables);
 
   // Destructuring needed params
@@ -65,6 +65,6 @@ const stateToProps: ConnectorStateToProps<
 };
 
 export const connectBox = componentConnector({
-  componentName: 'Box',
+  componentName: "Box",
   stateToProps,
 });

package/src/componentsConnectors/connectDocument.tsx

@@ -1,10 +1,10 @@
 import {
   componentConnector,
   ConnectorStateToProps,
-} from './connector/componentConnector';
-import { NumAuto } from '../libs/NumAuto';
-import { DocumentsOutputs } from '../libs/DocumentsOutputs';
-import { selectAllSectionsReferences } from '../redux/selectors/references';
+} from "./connector/componentConnector";
+import { NumAuto } from "../libs/NumAuto";
+import { DocumentsOutputs } from "../libs/DocumentsOutputs";
+import { selectAllSectionsReferences } from "../redux/selectors/references";
 
 export type ConnectDocumentOwnProps = { document: string };
 export type ConnectDocumentMapProps = {
@@ -28,7 +28,7 @@ const stateToProps: ConnectorStateToProps<
   } = selectors;
 
   // Getting current document
-  const document = ownProps.document === 'default' ? 'main' : ownProps.document;
+  const document = ownProps.document === "default" ? "main" : ownProps.document;
 
   const documentOutputs = new DocumentsOutputs(
     {
@@ -59,6 +59,6 @@ const stateToProps: ConnectorStateToProps<
 };
 
 export const connectDocument = componentConnector({
-  componentName: 'Document',
+  componentName: "Document",
   stateToProps,
 });

package/src/componentsConnectors/connectHeader.tsx

@@ -1,7 +1,7 @@
 import {
   componentConnector,
   ConnectorStateToProps,
-} from './connector/componentConnector';
+} from "./connector/componentConnector";
 
 export type ConnectHeaderOwnProps = { isPreviewDisplayed: boolean };
 export type ConnectHeaderMapProps = {
@@ -16,6 +16,6 @@ const stateToProps: ConnectorStateToProps<
 });
 
 export const connectHeader = componentConnector({
-  componentName: 'AppHeader',
+  componentName: "AppHeader",
   stateToProps,
 });

package/src/componentsConnectors/connectMetaTitle.tsx

@@ -1,7 +1,7 @@
-import { componentConnector } from './connector/componentConnector';
+import { componentConnector } from "./connector/componentConnector";
 
 export const connectMetaTitle = componentConnector({
-  componentName: 'MetaTitle',
+  componentName: "MetaTitle",
   stateToProps: (selectors) => () => ({
     title: selectors.selectDocumentTitle(),
   }),

package/src/componentsConnectors/connectOption.tsx

@@ -1,15 +1,15 @@
-import type { OptionV3 } from '@legalplace/models-v3-types';
+import type { OptionV3 } from "@legalplace/models-v3-types";
 import {
   parseOptionLabel,
   parseRawWithVariables,
-} from '../helpers/outputsParsing';
+} from "../helpers/outputsParsing";
 import {
   componentConnector,
   ConnectorStateToProps,
   ConnectorDispatchProps,
   ConnectorMapSelectors,
-} from './connector/componentConnector';
-import { isStepAvailable } from '../redux/selectors/app';
+} from "./connector/componentConnector";
+import { isStepAvailable } from "../redux/selectors/app";
 
 export type ConnectOptionOwnProps = {
   id: number;
@@ -27,7 +27,7 @@ export type ConnectOptionMapProps = {
   mandatoryValidated: boolean;
   mandatoryIgnore: boolean;
   display: boolean;
-  meta: OptionV3['meta'];
+  meta: OptionV3["meta"];
   selectedRadioChild: number;
   childOptions: number[];
   childVariables: number[];
@@ -68,9 +68,9 @@ const canOptionDisplay = (
 
   // Checking if current user is granted access to this option
   const grantLevel =
-    typeof option.meta.grantLevel === 'string'
+    typeof option.meta.grantLevel === "string"
       ? option.meta.grantLevel
-      : 'GUEST';
+      : "GUEST";
   display = display && selectors.isLevelAccessibleForUser(grantLevel);
 
   // Returning result
@@ -97,7 +97,7 @@ const selectedRadioChilds = (
     const childReference = selectors.selectOptionReference(childId);
 
     return (
-      childReference.meta.type === 'radio' &&
+      childReference.meta.type === "radio" &&
       selectors.selectOptionInputByIndex(childId, index)
     );
   })[0];
@@ -147,12 +147,12 @@ const stateToProps: ConnectorStateToProps<
 
   // Parsing helper's variables
   const helper = meta.helper
-    ? parseRawWithVariables(meta.helper, undefined, '________________')
+    ? parseRawWithVariables(meta.helper, undefined, "________________")
     : undefined;
 
   // Parsing warning's variables
   const warning = meta.warning
-    ? parseRawWithVariables(meta.warning, undefined, '________________')
+    ? parseRawWithVariables(meta.warning, undefined, "________________")
     : undefined;
 
   const { type } = meta;
@@ -206,7 +206,7 @@ const dispatchToProps: ConnectorDispatchProps<
  * Creating our component connector
  */
 export const connectOption = componentConnector({
-  componentName: 'Option',
+  componentName: "Option",
   stateToProps,
   dispatchToProps,
   additionnalHooks: (props, hookType) => {

package/src/componentsConnectors/connectPagination.tsx

@@ -2,7 +2,7 @@ import {
   componentConnector,
   ConnectorStateToProps,
   ConnectorDispatchProps,
-} from './connector/componentConnector';
+} from "./connector/componentConnector";
 
 export type ConnectPaginationOwnProps = {};
 export type ConnectPaginationMapProps = {
@@ -72,7 +72,7 @@ const stateToProps: ConnectorStateToProps<
     firstUnfinishedSectionId,
     currentSection,
     mandatoryIgnore,
-    isUserAuthenticated: userStatus === 'authenticated',
+    isUserAuthenticated: userStatus === "authenticated",
     currentPage,
   };
 };
@@ -96,7 +96,7 @@ const dispatchToProps: ConnectorDispatchProps<
  * Creating our component connector
  */
 export const connectPagination = componentConnector({
-  componentName: 'Pagination',
+  componentName: "Pagination",
   stateToProps,
   dispatchToProps,
 });

package/src/componentsConnectors/connectPreview.tsx

@@ -1,5 +1,5 @@
-import { componentConnector } from './connector/componentConnector';
+import { componentConnector } from "./connector/componentConnector";
 
 export const connectPreview = componentConnector({
-  componentName: 'PreviewComponent',
+  componentName: "PreviewComponent",
 });

package/src/componentsConnectors/connectProgress.tsx

@@ -1,7 +1,7 @@
 import {
   componentConnector,
   ConnectorStateToProps,
-} from './connector/componentConnector';
+} from "./connector/componentConnector";
 
 export type ConnectPreviewOwnProps = {
   id?: number;
@@ -34,7 +34,7 @@ const stateToProps: ConnectorStateToProps<
   } = selectors;
 
   const currentSectionId =
-    typeof ownProps.id === 'number' ? ownProps.id : selectCurrentSectionId();
+    typeof ownProps.id === "number" ? ownProps.id : selectCurrentSectionId();
   const sectionReference = selectSectionReference(currentSectionId);
   const currentSectionTitle = sectionReference.label;
   const availableSections = selectAvailableSections();
@@ -54,6 +54,6 @@ const stateToProps: ConnectorStateToProps<
  * Creating our component connector
  */
 export const connectProgress = componentConnector({
-  componentName: 'Progress',
+  componentName: "Progress",
   stateToProps,
 });

package/src/componentsConnectors/connectRootOption.tsx

@@ -1,9 +1,9 @@
-import type { OptionV3 } from '@legalplace/models-v3-types';
+import type { OptionV3 } from "@legalplace/models-v3-types";
 import {
   componentConnector,
   ConnectorStateToProps,
   ConnectorDispatchProps,
-} from './connector/componentConnector';
+} from "./connector/componentConnector";
 
 export type ConnectRootOptionOwnProps = {
   id: number;
@@ -15,7 +15,7 @@ export type ConnectRootOptionMapProps = {
   isMultiple: boolean;
   hasMany: boolean;
   lastIndex: number;
-  meta: OptionV3['meta'];
+  meta: OptionV3["meta"];
 };
 export type ConnectRootOptionDispatchProps = {
   addMultipleOccurency: () => void;
@@ -76,7 +76,7 @@ const dispatchToProps: ConnectorDispatchProps<
  * Creating our component connector
  */
 export const connectRootOption = componentConnector({
-  componentName: 'RootOption',
+  componentName: "RootOption",
   stateToProps,
   dispatchToProps,
   additionnalHooks: (props, hookType) => {

package/src/componentsConnectors/connectSection.tsx

@@ -1,7 +1,7 @@
 import {
   componentConnector,
   ConnectorStateToProps,
-} from './connector/componentConnector';
+} from "./connector/componentConnector";
 
 export type ConnectSectionOwnProps = {
   id?: number;
@@ -34,7 +34,7 @@ const stateToProps: ConnectorStateToProps<
 
   // If we recieve id in props we use it at the section's id
   const id =
-    typeof ownProps.id !== 'undefined' ? ownProps.id : selectCurrentSectionId();
+    typeof ownProps.id !== "undefined" ? ownProps.id : selectCurrentSectionId();
 
   const section = selectSectionReference(id);
   if (section === undefined) throw new Error(`Section ${id} does not exist`);
@@ -44,7 +44,7 @@ const stateToProps: ConnectorStateToProps<
       const optionReference = selectOptionReference(optionId);
       if (optionReference === undefined)
         throw new Error(`Option ${optionId} does not exist`);
-      return !['hidden', 'repeated'].includes(optionReference.meta.type);
+      return !["hidden", "repeated"].includes(optionReference.meta.type);
     });
   }
 
@@ -64,7 +64,7 @@ const stateToProps: ConnectorStateToProps<
  * Creating our component connector
  */
 export const connectSection = componentConnector({
-  componentName: 'Section',
+  componentName: "Section",
   stateToProps,
   additionnalHooks: (props, hookType) => {
     const { tags } = props;

package/src/componentsConnectors/connectSummary.tsx

@@ -1,7 +1,7 @@
 import {
   componentConnector,
   ConnectorStateToProps,
-} from './connector/componentConnector';
+} from "./connector/componentConnector";
 
 export type ConnectSummaryOwnProps = {};
 export type ConnectSummaryMapProps = {
@@ -16,6 +16,6 @@ const stateToProps: ConnectorStateToProps<
 });
 
 export const connectSummary = componentConnector({
-  componentName: 'Summary',
+  componentName: "Summary",
   stateToProps,
 });

package/src/componentsConnectors/connectSummaryItem.tsx

@@ -1,10 +1,10 @@
-import queryString from 'query-string';
+import queryString from "query-string";
 import {
   componentConnector,
   ConnectorStateToProps,
-} from './connector/componentConnector';
-import { PathReader } from '../libs/PathReader';
-import { SectionValidity } from '../libs/SectionValidity';
+} from "./connector/componentConnector";
+import { PathReader } from "../libs/PathReader";
+import { SectionValidity } from "../libs/SectionValidity";
 
 export type ConnectSummaryItemOwnProps = {
   id: number;
@@ -55,7 +55,7 @@ const stateToProps: ConnectorStateToProps<
   let disableClick = false;
   // disableClick Conditions
   if (
-    queryString.parse(window.location.search).ignore !== 'true' &&
+    queryString.parse(window.location.search).ignore !== "true" &&
     id > currentSection &&
     mandatoryIgnore === false
   ) {
@@ -97,6 +97,6 @@ const stateToProps: ConnectorStateToProps<
 };
 
 export const connectSummaryItem = componentConnector({
-  componentName: 'SummaryItem',
+  componentName: "SummaryItem",
   stateToProps,
 });