Added Hasura submission

apps/wrapper/src/App.js

@@ -6,11 +6,13 @@ function App() {
   const [flows, setFlows] = useState([
     {
       name: 'Jumping Forms',
-      config: 'workflow_first.json'
+      config: 'workflow_first.json',
+      submitToHasura: false
     },
     {
       name: 'Hasura Submissions',
-      config: 'workflow_3_config.json'
+      config: 'workflow_second.json',
+      submitToHasura: true
     },
     {
       name: 'Offline Capabilities',

apps/wrapper/src/api/index.js

+const GITPOD_URL = process.env.REACT_APP_GITPOD_WORKSPACE_URL
+
+const makeHasuraCalls = async (query) => {
+    // const userData = getCookie("userData");
+    return fetch(`${GITPOD_URL.slice(0, GITPOD_URL.indexOf('/') + 2) + "8080-" + GITPOD_URL.slice(GITPOD_URL.indexOf('/') + 2)}`, {
+        method: "POST",
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            'x-hasura-admin-secret': `myadminsecretkey`,
+        },
+        body: JSON.stringify(query),
+    })
+        .then(async (response) => await validateResponse(response))
+        .catch((error) => {
+            return error;
+        });
+};
+
+const validateResponse = async (response) => {
+    const apiRes = await response.json();
+    const jsonResponse = {
+        ...apiRes,
+        responseStatus: false,
+    };
+    return jsonResponse;
+};
+
+export const saveFormSubmission = (data) => {
+    const query = {
+        query: `mutation ($object: [form_submissions_insert_input!] = {}) {
+        insert_form_submissions(objects: $object) {
+          returning {
+            id
+            created_at
+          }
+        }
+      }`,
+        variables: { object: data },
+    };
+    return makeHasuraCalls(query);
+};
\ No newline at end of file

apps/wrapper/src/components/GenericForm/index.js

 import React, { useState, useEffect } from 'react';
 import styles from './index.module.css';
 import beautify from "xml-beautifier";
+import { saveFormSubmission } from '../../api';
 
 const GITPOD_URL = process.env.REACT_APP_GITPOD_WORKSPACE_URL
 
@@ -32,21 +33,21 @@ const GenericForm = (props) => {
   useEffect(() => {
     // Manage onNext
     window.addEventListener('message', async function (e) {
-      const data = e.data;
-
+      const data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
       try {
-        /* message = {
-          nextForm: "formID",
-          formData: {},
-        }
-        */
-        const { nextForm, formData, onSuccessData, onFailureData } = JSON.parse(data);
-        console.log({ nextForm, formData, onSuccessData, onFailureData });
+        const { nextForm, formData, onSuccessData, onFailureData } = data;
+        // console.log({ nextForm, formData, onSuccessData, onFailureData });
         if (formData) {
           setFormData(beautify(formData))
           let jsonRes = await parseFormData(formData);
           if (jsonRes) setFormDataJSON(JSON.stringify(jsonRes.data, null, 2));
         }
+        if (data?.state == "ON_FORM_SUCCESS_COMPLETED" && selectedFlow.submitToHasura) {
+          saveFormSubmission({
+            form_data: formData,
+            form_name: formSpec.startingForm,
+          });
+        }
         if (nextForm.type === 'form') {
           setFormId(nextForm.id);
           setOnFormSuccessData(onSuccessData);

apps/wrapper/src/workflow_second.json

 {
   "forms": {
-    "form1": {
+    "jumping_form_1": {
       "skipOnSuccessMessage": true,
       "prefill": {},
-      "submissionURL": "http://esamwad.samagra.io/api/v4/form/submit",
-      "name": "SampleForm",
-      "successCheck": "async (formData) => { console.log('From isSuccess', formData.getElementsByTagName('reg_no')[0].textContent); return formData.getElementsByTagName('reg_no')[0].textContent === 'registration123'; }",
-      "onSuccess": {
-        "notificationMessage": "Form submitted successfully or not Maybe",
-        "sideEffect": "async (formData) => { return JSON.parse(decodeURIComponent('%7B%0A%20%20%20%20%20%20%20%20%22name%22%3A%20%22DEVA%22%2C%0A%20%20%20%20%20%20%20%20%22batch%22%3A%20%222021-2023%22%2C%0A%20%20%20%20%20%20%20%20%22id%22%3A%208%2C%0A%20%20%20%20%20%20%20%20%22DOB%22%3A%20%222005-03-04%22%2C%0A%20%20%20%20%20%20%20%20%22affiliationType%22%3A%20%22NCVT%22%2C%0A%20%20%20%20%20%20%20%20%22registrationNumber%22%3A%20%22ICA211021569832%22%2C%0A%20%20%20%20%20%20%20%20%22tradeName%22%3A%20%22Electrician%22%2C%0A%20%20%20%20%20%20%20%20%22iti%22%3A%207%2C%0A%20%20%20%20%20%20%20%20%22industry%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%22itiByIti%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22id%22%3A%207%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22GITI%20Nagina%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22industryByIndustry%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22id%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Kaushal%20Bhawan%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22latitude%22%3A%2030.695753%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22longitude%22%3A%2076.872025%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22schedules%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22is_industry%22%3A%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D')); }",
-        "next": {
-          "type": "form",
-          "id": "form2"
-        }
-      },
+      "submissionURL": "",
+      "successCheck": "async (formData) => { return true; }",
       "onFailure": {
         "message": "Form submission failed",
         "sideEffect": "async (formData) => { console.log(formData); }",
@@ -21,49 +12,20 @@
           "type": "url",
           "id": "google"
         }
-      }
-    },
-    "form2": {
-      "skipOnSuccessMessage": true,
-      "prefill": {
-        "pf_name": "`${onFormSuccessData.name}`",
-        "pf_iti": "`${onFormSuccessData.itiByIti.name}`",
-        "pf_trade": "`${onFormSuccessData.tradeName}`",
-        "pf_batch": "`${onFormSuccessData.batch}`",
-        "pf_industry": "`${onFormSuccessData.industryByIndustry.name}`"
       },
-      "submissionURL": "http://esamwad.samagra.io/api/v4/form/submit",
-      "name": "SampleForm",
-      "successCheck": "async (formData) => { console.log('From isSuccess', formData.getElementsByTagName('reg_no')[0].textContent); return formData.getElementsByTagName('reg_no')[0].textContent === 'registration123'; }",
-      "onSuccess": {
-        "message": "Form submitted successfully",
-        "sideEffect": "async (formData) => { console.log(formData); }",
-        "next": {
-          "type": "form",
-          "id": "form2"
-        }
-      },
-      "onFailure": {
-        "notificationMessage": "Form submission failed",
-        "sideEffect": "async (formData) => { console.log(formData); }",
-        "next": {
-          "type": "url",
-          "id": "https://google.com"
-        }
-      }
-    }
-  },
-  "urls": {
-    "google": {
-      "url": "https://google.com",
-      "queryParams": {},
+      "name": "Jumping Form First",
+      "isSuccess": "async (formData) => { console.log('From isSuccess', formData.getElementsByTagName('reg_no')[0].textContent); return formData.getElementsByTagName('reg_no')[0].textContent === 'registration123'; }",
+      "messageOnFailure": "Form submission failed",
+      "messageOnSuccess": "Form submitted successfully or Maybe you are already registered",
+      "onFormSuccess": "async (formData) => { return JSON.parse(decodeURIComponent('%7B%0A%20%20%20%20%20%20%20%20%22name%22%3A%20%22DEVA%22%2C%0A%20%20%20%20%20%20%20%20%22batch%22%3A%20%222021-2023%22%2C%0A%20%20%20%20%20%20%20%20%22id%22%3A%208%2C%0A%20%20%20%20%20%20%20%20%22DOB%22%3A%20%222005-03-04%22%2C%0A%20%20%20%20%20%20%20%20%22affiliationType%22%3A%20%22NCVT%22%2C%0A%20%20%20%20%20%20%20%20%22registrationNumber%22%3A%20%22ICA211021569832%22%2C%0A%20%20%20%20%20%20%20%20%22tradeName%22%3A%20%22Electrician%22%2C%0A%20%20%20%20%20%20%20%20%22iti%22%3A%207%2C%0A%20%20%20%20%20%20%20%20%22industry%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%22itiByIti%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22id%22%3A%207%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22GITI%20Nagina%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22industryByIndustry%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22id%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Kaushal%20Bhawan%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22latitude%22%3A%2030.695753%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22longitude%22%3A%2076.872025%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22schedules%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22is_industry%22%3A%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D')); }",
+      "onFormFailure": "async (formData) => { console.log(formData); }",
       "onSuccess": {
-        "message": null,
+        "notificationMessage": "Form submitted successfully",
         "sideEffect": "async (formData) => { console.log(formData); }",
-        "next": null
+        "message": "Form submitted successfully"
       }
     }
   },
-  "start": "form1",
+  "startingForm": "jumping_form_1",
   "metaData": {}
 }
\ No newline at end of file