Qol 8650 formio squiz improvement

.eslintrc

@@ -23,7 +23,8 @@
     "document": true,
     "window": true,
     "$": true,
-    "premium": true
+    "premium": true,
+    "FormioLoader": true
   },
   "overrides": [
     {

.storybook/preview.js

@@ -1,5 +1,5 @@
 import "../src/stories/stories.css";
-import "../src/style/formio-qld.scss";
+// import "../src/style/formio-qld.scss";
 import storybookOptions from "../src/options/storybook.options";
 import * as components from "../src/components";
 import { getComponents } from "../src/utils/getComponents";

src/components/PlsPlusAddress/PlsPlusAddress.test.js

@@ -211,10 +211,7 @@ test("PlsPlusAddress remove button is functional", async () => {
   await testWait();
 
   // warning should be visible
-  const warning = await findByText(
-    form,
-    "Please fix the following errors before submitting."
-  );
+  const warning = await findByText(form, `Please check your answers`);
   expect(warning).toBeVisible();
 });
 

src/index.js

@@ -6,7 +6,7 @@ import { getComponents } from "./utils/getComponents";
 import * as components from "./components";
 import templates from "./templates";
 import providers from "./providers";
-import "./style/formio-qld.scss";
+// import "./style/formio-qld.scss";
 
 Formio.use({
   components: getComponents(components),

src/matrixHelpers/FormioLoader/FormioLoader.stories.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
-import { createForm, createBuilder } from "../../utils";
-import * as FormioLoader from "./index.js";
+import * as FormioLoader from "./index";
 
 <Meta title="Helpers/FormioLoader" />
 
@@ -21,7 +20,7 @@ Sample Formio div placeholder:
 ```jsx
 <div
   id="formio"
-  class="formio_container"
+  class="qg-forms-v2"
   data-formio
   data-formio-project-name="dev-svcwlpuksmwawwk"
   data-formio-form-name="plsPlusFormDemo"
@@ -44,12 +43,12 @@ To initiate Formio instance on page load, simply include the script in your webp
   <Story name="initFormioMethod">
     {() => {
       setTimeout(() => {
-        // script to be executed after appending the div, if you've include the `form-loader.js` script in your application before page load, you can omit this as it will be automatically run.
+        // script to be executed after appending the div, if you've include the `form-script.js` script in your application, you can omit this as it will be automatically run.
         FormioLoader.initFormio();
       });
       return `
         <div id="formio" 
-          class="formio_container"
+          class="qg-forms-v2"
           data-formio 
           data-formio-project-name="dev-svcwlpuksmwawwk" 
           data-formio-form-name="plsPlusFormDemo" 
@@ -82,7 +81,7 @@ This is useful if you want to dynamically inject a form element. (Although the `
         });
       });
       return `
-        <div id="formio-alt" class="formio_container" ></div>
+        <div id="formio-alt" class="qg-forms-v2" ></div>
       `;
     }}
   </Story>

src/matrixHelpers/FormioLoader/index.js

@@ -1,3 +1,5 @@
+import createFormOptions from "../../options/createForm.options";
+
 const initFormioInstance = (formioElem, opts) => {
   // if already initiated, reject
   if (formioElem.dataset.formioFormUrl) return;
@@ -48,16 +50,7 @@ const initFormioInstance = (formioElem, opts) => {
     formUrl,
     // form,
     {
-      // Turn off default buttons
-      buttonSettings: {
-        showCancel: false,
-        showPrevious: false,
-        showNext: false,
-        showSubmit: false,
-      },
-      i18n: {
-        en: { pattern: "Must use the format shown" },
-      },
+      ...createFormOptions,
       formio,
       namespace: formio.options.namespace,
     }
@@ -188,8 +181,6 @@ const initFormio = () => {
   });
 };
 
-initFormio();
-
 // Persistent fix for iPhone/Safari
 window.onpageshow = (event) => {
   if (event.persisted) {

src/matrixHelpers/FormioScript/index.js

@@ -1,7 +1,10 @@
 export const defaultVersion = window.formioQldCdnVersion || "v1/v1.x.x-latest";
 
 export const createScripts = (scripts, i = 0) => {
-  if (i > scripts.length - 1) return;
+  if (i > scripts.length - 1) {
+    FormioLoader.initFormio();
+    return;
+  }
   const { type, async, src, href, rel } = scripts[i];
   if (
     !document.querySelector(`${type}[src='${src}']`) &&
@@ -14,7 +17,10 @@ export const createScripts = (scripts, i = 0) => {
       if (href !== undefined) elem.setAttribute("href", href);
       if (rel !== undefined) elem.setAttribute("rel", rel);
       document.body.appendChild(elem);
-      elem.onload = resolve;
+      elem.onload = () => {
+        console.info("FormioScript loaded:", src || href);
+        resolve();
+      };
     });
     promise.then(() => {
       createScripts(scripts, i + 1);
@@ -64,3 +70,12 @@ export const getDefaultScripts = ({ subdomain, version = defaultVersion }) => {
     },
   ];
 };
+
+export const initScript = (scripts) => {
+  if (window.formioScriptLoaded) {
+    if (typeof FormioLoader !== "undefined") FormioLoader.initFormio();
+  } else {
+    window.formioScriptLoaded = true;
+    createScripts(scripts);
+  }
+};

src/matrixHelpers/FormioScript/scriptDev.js

@@ -1,7 +1,7 @@
-import { createScripts, getDefaultScripts } from ".";
+import { initScript, getDefaultScripts } from ".";
 
 const scripts = getDefaultScripts({
   subdomain: "dev-static",
 });
 
-createScripts(scripts);
+initScript(scripts);

src/matrixHelpers/FormioScript/scriptGitBridge.js

@@ -1,4 +1,4 @@
-import { createScripts } from ".";
+import { initScript } from ".";
 
 const version = window.formioQldCdnVersion || "248740";
 
@@ -41,4 +41,4 @@ const scripts = [
   },
 ];
 
-createScripts(scripts);
+initScript(scripts);

src/matrixHelpers/FormioScript/scriptProd.js

@@ -1,4 +1,4 @@
-import { createScripts, defaultVersion as version } from ".";
+import { initScript, defaultVersion as version } from ".";
 
 const scripts = [
   {
@@ -39,4 +39,4 @@ const scripts = [
   },
 ];
 
-createScripts(scripts);
+initScript(scripts);

src/matrixHelpers/FormioScript/scriptStaging.js

@@ -1,7 +1,7 @@
-import { createScripts, getDefaultScripts } from ".";
+import { initScript, getDefaultScripts } from ".";
 
 const scripts = getDefaultScripts({
   subdomain: "beta-static",
 });
 
-createScripts(scripts);
+initScript(scripts);

src/matrixHelpers/FormioScript/scriptTest.js

@@ -1,7 +1,7 @@
-import { createScripts, getDefaultScripts } from ".";
+import { initScript, getDefaultScripts } from ".";
 
 const scripts = getDefaultScripts({
   subdomain: "test-static",
 });
 
-createScripts(scripts);
+initScript(scripts);

src/options/createForm.options.js

@@ -0,0 +1,16 @@
+module.exports = {
+  // Turn off default buttons
+  buttonSettings: {
+    showCancel: false,
+    showPrevious: false,
+    showNext: false,
+    showSubmit: false,
+  },
+  i18n: {
+    en: {
+      pattern: "Must use the format shown",
+      error:
+        '<h2><span class="fa fa-exclamation-triangle"></span> Please check your answers</h2>',
+    },
+  },
+};