Merge pull request #142 from zarathustra323/alchemer-forms

Create Omeda+Alchemer (SurveyGizo) form pre-fill

packages/marko-web-p1-fii/browser/index.js

@@ -1,5 +1,7 @@
 const OmedaWufooForm = () => import(/* webpackChunkName: "p1-fii-omeda-wufoo-form" */ './omeda-wufoo-form.vue');
+const OmedaAlchemerForm = () => import(/* webpackChunkName: "p1-fii-omeda-alchemer-form" */ './omeda-alchemer-form.vue');
 
 export default (Browser) => {
+  Browser.register('P1FIIOmedaAlchemerForm', OmedaAlchemerForm);
   Browser.register('P1FIIOmedaWufooForm', OmedaWufooForm);
 };

packages/marko-web-p1-fii/browser/omeda-alchemer-form.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="marko-web-p1-fii-omeda-alchemer-form">
+    <p v-if="isLoading">
+      Loading form...
+    </p>
+    <iframe
+      v-show="url"
+      :id="formId"
+      :src="url"
+      frameborder="0"
+      style="width: 1px; min-width: 100%; border: none;"
+    />
+    <div v-if="error" class="alert alert-danger">
+      {{ error.message }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    surveyId: { type: [Number, String], required: true },
+    alchemerZone: { type: [Number, String], required: true },
+    omedaZone: { type: String, required: true },
+    encryptedCustomerId: { type: String, default: null },
+    context: { type: Object, default: () => ({}) },
+    height: { type: Number, default: 1000 },
+    width: { type: Number, default: 500 },
+    debugIframe: { type: Boolean, default: false },
+  },
+  data: () => ({
+    endpoint: '/__p1fii',
+    error: null,
+    isLoading: false,
+    url: null,
+  }),
+
+  computed: {
+    formId() {
+      return `alchemer-${this.surveyId}`;
+    },
+  },
+
+  async mounted() {
+    const [url] = await Promise.all([
+      this.getFormUrl(),
+      this.loadResizerLibrary(),
+    ]);
+    this.url = url;
+    window.iFrameResize({
+      checkOrigin: ['https://survey.alchemer.com'],
+      heightCalculationMethod: 'taggedElement',
+      log: this.debugIframe,
+    }, `#${this.formId}`);
+  },
+
+  methods: {
+    async loadResizerLibrary() {
+      if (!window.iFrameResize) {
+        await (new Promise((resolve, reject) => {
+          const s = document.createElement('script');
+          s.src = 'https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js';
+          s.async = 1;
+          s.onerror = () => reject(new Error('Unable to load resizer form script.'));
+          s.onload = resolve;
+          const scr = document.getElementsByTagName('script')[0];
+          scr.parentNode.insertBefore(s, scr);
+        }));
+      }
+    },
+    async getFormUrl() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const { encryptedCustomerId } = this;
+        const params = {
+          for: `${this.alchemerZone}`,
+          using: this.omedaZone,
+          surveyId: parseInt(this.surveyId, 10),
+          ...(encryptedCustomerId && { encryptedCustomerId }),
+          context: this.context,
+        };
+        const res = await fetch(this.endpoint, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({
+            action: 'form.alchemer.prepopWithOmeda',
+            params,
+          }),
+        });
+        const json = await res.json();
+        if (!res.ok) throw new Error(json.message);
+        return json.data.url;
+      } catch (e) {
+        const { error } = console;
+        this.error = e;
+        error(e);
+        return null;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>

packages/marko-web-p1-fii/browser/omeda-wufoo-form.vue

@@ -1,5 +1,13 @@
 <template>
-  <div :id="formId" class="marko-web-p1-fii-omeda-wufoo-form" />
+  <div class="marko-web-p1-fii-omeda-wufoo-form">
+    <p v-if="isLoading">
+      Loading form...
+    </p>
+    <div :id="formId" />
+    <div v-if="error" class="alert alert-danger">
+      {{ error.message }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -15,6 +23,8 @@ export default {
   },
   data: () => ({
     endpoint: '/__p1fii',
+    error: null,
+    isLoading: false,
   }),
 
   computed: {
@@ -60,11 +70,14 @@ export default {
     },
     async getFormQueryString() {
       try {
+        this.error = null;
+        this.isLoading = true;
+        const { encryptedCustomerId } = this;
         const params = {
           for: this.wufooZone,
           using: this.omedaZone,
           formHash: this.formHash,
-          encryptedCustomerId: this.encryptedCustomerId,
+          ...(encryptedCustomerId && { encryptedCustomerId }),
           context: this.context,
         };
         const res = await fetch(this.endpoint, {
@@ -81,7 +94,10 @@ export default {
       } catch (e) {
         const { error } = console;
         error(e);
+        this.error = e;
         return '';
+      } finally {
+        this.isLoading = false;
       }
     },
   },

packages/marko-web-p1-fii/components/marko.json

@@ -1,4 +1,15 @@
 {
+  "<marko-web-p1-fii-omeda-alchemer-form>": {
+    "template": "./omeda-alchemer-form.marko",
+    "@survey-id": {
+      "type": "number",
+      "required": true
+    },
+    "@alchemer-zone": "string",
+    "@omeda-zone": "string",
+    "@context": "object",
+    "@debug-iframe": "boolean"
+  },
   "<marko-web-p1-fii-omeda-wufoo-form>": {
     "template": "./omeda-wufoo-form.marko",
     "@form-hash": {

packages/marko-web-p1-fii/components/omeda-alchemer-form.marko

@@ -0,0 +1,27 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import { getAsObject } from "@parameter1/base-cms-object-path";
+import { warn } from "@parameter1/base-cms-utils";
+import getOmedaId from "../utils/get-omeda-id";
+
+$ const { site, req } = out.global;
+$ const context = getAsObject(input, "context");
+
+$ const alchemerZone = site.get("p1fii.alchemerZone", input.alchemerZone);
+$ const omedaZone = site.get("p1fii.omedaZone", input.omedaZone);
+
+<if(alchemerZone && omedaZone)>
+  <marko-web-browser-component
+    name="P1FIIOmedaAlchemerForm"
+    props={
+      surveyId: input.surveyId,
+      alchemerZone,
+      omedaZone,
+      encryptedCustomerId: getOmedaId(req),
+      context,
+      debugIframe: defaultValue(input, "debugIframe"),
+    }
+  />
+</if>
+<else>
+  $ warn("Unable to load P1 FII Wufoo form: no `p1fii.alchemerZone` or `p1fii.omedaZone` values were configured.");
+</else>