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

const GenericForm = (props) => {
  const { selectedFlow, setSelectedFlow } = props;
  const formSpec = require(`../../${selectedFlow.config}`);
  const [formData, setFormData] = useState("");
  const [formDataJson, setFormDataJSON] = useState("");
  const [isXml, setIsXml] = useState(false);

  // Encode string method to URI
  const encodeFunction = (func) => {
    return encodeURIComponent(JSON.stringify(func));
  }

  const getFormURI = (form, ofsd, prefillSpec) => {
    console.log(form, ofsd, prefillSpec);
    // return encodeURIComponent(`https://3006-samagradevelop-workflow-gkbrz650idv.ws-us89b.gitpod.io/prefill?form=${form}&onFormSuccessData=${encodeFunction(ofsd)}&prefillSpec=${encodeFunction(prefillSpec)}`);
    return encodeURIComponent(`${GITPOD_URL.slice(0, GITPOD_URL.indexOf('/') + 2) + "3006-" + GITPOD_URL.slice(GITPOD_URL.indexOf('/') + 2)}/prefill?form=${form}&onFormSuccessData=${encodeFunction(ofsd)}&prefillSpec=${encodeFunction(prefillSpec)}`);
  }

  const startingForm = formSpec.startingForm;
  const [formId, setFormId] = useState(startingForm);
  const [encodedFormSpec, setEncodedFormSpec] = useState(encodeURI(JSON.stringify(formSpec.forms[formId])));
  const [onFormSuccessData, setOnFormSuccessData] = useState(undefined);
  const [onFormFailureData, setOnFormFailureData] = useState(undefined);
  const [encodedFormURI, setEncodedFormURI] = useState(getFormURI(formId, formSpec.forms[formId].onFormSuccess, formSpec.forms[formId].prefill));

  useEffect(() => {
    // Manage onNext
    window.addEventListener('message', async function (e) {
      const data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
      try {
        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);
          setOnFormFailureData(onFailureData);
          setEncodedFormSpec(encodeURI(JSON.stringify(formSpec.forms[formId])));
          setEncodedFormURI(getFormURI(nextForm.id, onSuccessData, formSpec.forms[nextForm.id].prefill));
        } else {
          window.location.href = nextForm.url;
        }
      }
      catch (e) {
        // console.log(e)
      }
    });
  }, []);

  const handleFormView = async (e) => {
    setIsXml(e)
    if (e) {
      let jsonRes = await parseFormData(formData);