Merge pull request #21 from docusign/added-embedding-of-workflow

Added embedding of maestro workflow

Author: karissarjacobsen

client/src/assets/text.json

@@ -78,8 +78,9 @@
   },
   "popups": {
     "workflowTriggered": {
-      "title": "Workflow triggered",
-      "description": "To complete the workflow steps, select Continue"
+      "title": "Incompatible workflow",
+      "descriptiona": "See  and redirect the user back to the workflows page",
+      "description": "See <a href='https://developers.docusign.com/docs/maestro-api/maestro101/embed-workflow/#embedded-workflow-instance-recommendations-and-restrictions' target='_blank'>Embedded workflow instance recommendations and restrictions</a> and redirect the user back to the workflows page"
     }
   },
   "buttons": {
@@ -99,4 +100,4 @@
     "createsandbox": "https://go.docusign.com/o/sandbox/",
     "learnmore": "https://developers.docusign.com/docs/maestro-api/"
   }
-}
+}

client/src/components/Popups/WorkflowTriggerResult/WorkflowTriggerResult.jsx

@@ -20,11 +20,11 @@ const WorkflowTriggerResult = ({ workflowInstanceUrl }) => {
     <div className={styles.popupContainer}>
       <img src={imgSuccess} alt="" />
       <h2>{textContent.popups.workflowTriggered.title}</h2>
-      <p>{textContent.popups.workflowTriggered.description}</p>
+      <p className={styles.popupMessageContainer} dangerouslySetInnerHTML={{ __html: textContent.popups.workflowTriggered.description }}></p>
       <a href={workflowInstanceUrl} target="_blank" rel="noreferrer" onClick={handleFinishTrigger}>
         {textContent.buttons.continue}
       </a>
-    </div>
+    </div >
   );
 };
 const WorkflowTriggerResultPopup = withPopup(WorkflowTriggerResult);

client/src/components/Popups/WorkflowTriggerResult/WorkflowTriggerResult.module.css

@@ -52,8 +52,30 @@
   border: 1px solid var(--black-extraextralight);
 }
 
+.popupMessageContainer {
+  width: 100%;
+  height: 55px;
+}
+
+.popupMessageContainer a {
+  color: #646cff;
+  text-decoration: inherit;
+  background-color: white;
+  text-align: center;
+  margin: 1rem 0 2rem 0;
+  width: 80%;
+  font-size: 16px;
+  font-weight: 430;
+  padding: 0;
+}
+
+.popupMessageContainer a:hover {
+  color: #535bf2;
+  background-color: white;
+}
+
 .popupContainer span {
   margin: 1rem;
   font-family: 'Courier New', Courier, monospace;
   font-size: 10px;
-}
+}

client/src/components/TriggerForm/TriggerForm.jsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import styles from './TriggerForm.module.css';
 import WorkflowTriggerResultPopup from '../Popups/WorkflowTriggerResult/WorkflowTriggerResult.jsx';
 import { triggerForm, buttons } from '../../assets/text.json';
-import { ROUTE, TemplateType } from '../../constants.js';
+import { ROUTE, TemplateType, WorkflowTriggerResponse } from '../../constants.js';
 import { api } from '../../api';
 import { openPopupWindow, closePopupWindow, updateWorkflowDefinitions } from '../../store/actions';
 
@@ -49,7 +49,13 @@ const TriggerForm = ({ workflowId, templateType }) => {
       case "-":
         try {
           api.workflows.getWorkflowTriggerRequirements(workflowId).then(data => {
-            setRelevantFormFields(generateDynamicForm(data.data.trigger_input_schema, 'Custom'));
+            const result = Object.values(data.data.trigger_input_schema)
+              .filter(entry => entry.field_name !== "startDate")
+              .map(entry => ({
+                field_name: entry.field_name,
+              }));
+
+            setRelevantFormFields(generateDynamicForm(result, 'Custom'));
           });
         } catch (error) {
           console.error("Failed to fetch trigger requirements:", error);
@@ -92,44 +98,50 @@ const TriggerForm = ({ workflowId, templateType }) => {
 
     setDataSending(true);
 
-    if(!relevantFormFields.length) {
+    if (!relevantFormFields.length) {
       body = {};
     }
 
     const { data: triggeredWorkflow } = await api.workflows.triggerWorkflow(workflowId, templateType, body);
     setWorkflowInstanceUrl(triggeredWorkflow.instance_url);
 
-    // Update workflowDefinitions. "...workflow" creates new workflow-object to avoid mutation in redux
-    const updatedWorkflowDefinitions = workflows.map(w => {
-      if (w.id !== workflowId) return { ...w };
-
-      return {
-        ...w,
-        instanceId: triggeredWorkflow.instanceId,
-        isTriggered: true,
-      };
-    });
+    if (triggeredWorkflow.instance_url !== undefined) {
+      navigate(`${ROUTE.TRIGGERFORM}/${workflowId}?type=${templateType}&triggerUrl=${encodeURIComponent(triggeredWorkflow.instance_url)}`)
+    }
 
-    dispatch(updateWorkflowDefinitions(updatedWorkflowDefinitions));
-    setDataSending(false);
-    dispatch(openPopupWindow());
+    if (triggeredWorkflow === WorkflowTriggerResponse.TRIGGER_ISSUE) {
+      // Update workflowDefinitions. "...workflow" creates new workflow-object to avoid mutation in redux
+      const updatedWorkflowDefinitions = workflows.map(w => {
+        if (w.id !== workflowId) return { ...w };
+
+        return {
+          ...w,
+          instanceId: triggeredWorkflow.instanceId,
+          isTriggered: true,
+        };
+      });
+
+      dispatch(updateWorkflowDefinitions(updatedWorkflowDefinitions));
+      setDataSending(false);
+      dispatch(openPopupWindow());
+    }
   };
 
   if (!relevantFormFields.length)
     return (
       <div className={styles.formContainer}>
-      <h2>{triggerForm.formTitleWithoutInputs}</h2>
-      
-      <form className={styles.triggerForm} onSubmit={handleSubmit}>
-        <button className="btn btn-primary" type="submit" disabled={isDataSending}>
-          <span className="sr-only">{buttons.triggerWorkflow}</span>
-          {isDataSending ? <span className="spinner-border spinner-border-sm" /> : null}
-        </button>
-      </form>
-      {isPopupOpened && (
-        <WorkflowTriggerResultPopup workflowInstanceUrl={workflowInstanceUrl} togglePopup={handleCloseTriggerPopup} />
-      )}
-    </div>
+        <h2>{triggerForm.formTitleWithoutInputs}</h2>
+
+        <form className={styles.triggerForm} onSubmit={handleSubmit}>
+          <button className="btn btn-primary" type="submit" disabled={isDataSending}>
+            <span className="sr-only">{buttons.triggerWorkflow}</span>
+            {isDataSending ? <span className="spinner-border spinner-border-sm" /> : null}
+          </button>
+        </form>
+        {isPopupOpened && (
+          <WorkflowTriggerResultPopup workflowInstanceUrl={workflowInstanceUrl} togglePopup={handleCloseTriggerPopup} />
+        )}
+      </div>
     );
 
   return (

client/src/constants.js

@@ -13,6 +13,10 @@ export const WorkflowItemsInteractionType = {
   TRIGGER: 'Trigger',
 };
 
+export const WorkflowTriggerResponse = {
+  TRIGGER_ISSUE: 'Incompatible workflow',
+};
+
 export const TemplateType = {
   I9: { name: 'Maestro: I-9', type: 'I-9 document' },
   OFFER: { name: 'Maestro: Offer Letter', type: 'Offer letter' },

client/src/pages/TriggerWorkflowForm/TriggerWorkflowForm.jsx

@@ -15,6 +15,28 @@ const TriggerWorkflowForm = () => {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const type = searchParams.get('type');
+  const triggerUrl = searchParams.get('triggerUrl');
+
+  if (triggerUrl !== null) {
+    return (
+      <div className="page-box">
+        <Header />
+        <div className={styles.contentContainer}>
+          <WorkflowDescription
+            title={textContent.pageTitles.completeWorkflow}
+            behindTheScenesComponent={<TriggerBehindTheScenes />}
+            backRoute={ROUTE.TRIGGER}
+          />
+
+          <div className={styles.formContainer}>
+            <iframe src={triggerUrl} width="800" height="600">
+            </iframe>
+          </div>
+        </div>
+        <Footer withContent={false} />
+      </div>
+    );
+  }
 
   return (
     <div className="page-box">

server/constants.js

@@ -14,11 +14,16 @@ const METHOD = {
   ACG: 'grand-auth',
 };
 
+const ISSUES = {
+  TRIGGER_ISSUE: 'Incompatible workflow',
+};
+
 const MAESTRO_SCOPES = ['signature', 'aow_manage', 'impersonation'];
 
 module.exports = {
   scopes: MAESTRO_SCOPES,
   BACKEND_ROUTE,
   TEMPLATE_TYPE,
   METHOD,
+  ISSUES,
 };

server/controllers/workflowsController.js

@@ -15,7 +15,7 @@ const docusign = require('docusign-esign');
 const config = require('../config');
 const WorkflowsService = require('../services/workflowsService');
 const createPrefixedLogger = require('../utils/logger');
-const { getPayloadBySchema } = require('../utils/utils');
+const { ISSUES } = require('../constants');
 
 const oAuth = docusign.ApiClient.OAuth;
 const restApi = docusign.ApiClient.RestApi;
@@ -76,11 +76,10 @@ class WorkflowsController {
 
     try {
       const triggerRequirements = await WorkflowsService.getWorkflowTriggerRequirements(args);
-      const payload = getPayloadBySchema(body, triggerRequirements.trigger_input_schema);
-      const result = await WorkflowsService.triggerWorkflowInstance(args, payload, triggerRequirements);
+      const result = await WorkflowsService.triggerWorkflowInstance(args, body, triggerRequirements);
       res.status(200).send(result);
     } catch (error) {
-      this.handleErrorResponse(error, res);
+      res.status(200).send(ISSUES.TRIGGER_ISSUE);
     }
   };
 

server/services/workflowsService.js

@@ -29,7 +29,7 @@ class WorkflowsService {
   static triggerWorkflowInstance = async (args, payload, triggerRequirements) => {
     const api = initMaestroApi(args.accountId, args.basePath, args.accessToken);
     const triggerPayload = {
-      instance_name: '',
+      instance_name: 'test',
       trigger_inputs: payload,
     };
     const triggerResponse = await api.triggerWorkflow(triggerPayload, triggerRequirements.trigger_http_config.url);

server/utils/utils.js

@@ -15,14 +15,4 @@ const extractPortFromUrl = url => {
   return null;
 };
 
-const getPayloadBySchema = (data, schema) => {
-  return schema.reduce((acc, field) => {
-    const fieldName = field.field_name;
-    if (fieldName in data) {
-      acc[fieldName] = data[fieldName];
-    }
-    return acc;
-  }, {});
-};
-
-module.exports = { getParameterValueFromUrl, extractPortFromUrl, getPayloadBySchema };
+module.exports = { getParameterValueFromUrl, extractPortFromUrl };