Merge pull request #2490 from automatisch/forms

feat: add forms feature set

packages/backend/package.json

@@ -69,6 +69,7 @@
     "prettier": "^2.5.1",
     "raw-body": "^2.5.2",
     "showdown": "^2.1.0",
+    "slugify": "^1.6.6",
     "uuid": "^9.0.1",
     "winston": "^3.7.1",
     "xmlrpc": "^1.3.2"

packages/backend/src/apps/forms/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M17 20v-9h-2V4h7l-2 5h2zm-2-7v7H4c-1.1 0-2-.9-2-2v-3c0-1.1.9-2 2-2zm-8.75 2.75h-1.5v1.5h1.5zM13 4v7H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM6.25 6.75h-1.5v1.5h1.5z"></path></svg>

packages/backend/src/apps/forms/index.ee.js

@@ -0,0 +1,15 @@
+import defineApp from '../../helpers/define-app.js';
+import triggers from './triggers/index.ee.js';
+
+export default defineApp({
+  name: 'Forms',
+  key: 'forms',
+  iconUrl: '{BASE_URL}/apps/forms/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/forms/connection',
+  supportsConnections: false,
+  enterprise: true,
+  baseUrl: '',
+  apiBaseUrl: '',
+  primaryColor: '#0059F7',
+  triggers,
+});

packages/backend/src/apps/forms/triggers/form-submission/index.ee.js

@@ -0,0 +1,64 @@
+import Crypto from 'crypto';
+import isEmpty from 'lodash/isEmpty.js';
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New form submission',
+  key: 'newFormSubmission',
+  pollInterval: 15,
+  type: 'webhook',
+  description: 'Triggers when a new form is submitted.',
+  arguments: [
+    {
+      label: 'Fields',
+      key: 'fields',
+      type: 'dynamic',
+      required: false,
+      description: 'Add or remove fields as needed',
+      value: [],
+      fields: [
+        {
+          label: 'Field name',
+          key: 'fieldName',
+          type: 'string',
+          required: true,
+          description: 'Displayed name to the user',
+          variables: true,
+        },
+        {
+          label: 'Type',
+          key: 'fieldType',
+          type: 'dropdown',
+          required: true,
+          description: 'Field type',
+          variables: true,
+          options: [{ label: 'String', value: 'string' }],
+        },
+      ],
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: Crypto.randomUUID(),
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const lastExecutionStep = await $.getLastExecutionStep();
+
+    if (!isEmpty(lastExecutionStep?.dataOut)) {
+      $.pushTriggerItem({
+        raw: lastExecutionStep.dataOut,
+        meta: {
+          internalId: '',
+        },
+      });
+    }
+  },
+});

packages/backend/src/apps/forms/triggers/index.ee.js

@@ -0,0 +1,3 @@
+import formSubmittion from './form-submission/index.ee.js';
+
+export default [formSubmittion];

packages/backend/src/controllers/internal/api/v1/forms/create-form-submission.ee.js

@@ -0,0 +1,21 @@
+import Flow from '../../../../../models/flow.js';
+import logger from '../../../../../helpers/logger.js';
+import handler from '../../../../../helpers/form-handler.ee.js';
+import { renderError } from '../../../../../helpers/renderer.js';
+
+export default async (request, response) => {
+  logger.debug(`Handling incoming form submission at ${request.originalUrl}.`);
+  logger.debug(JSON.stringify(request.body, null, 2));
+
+  const formId = request.params.formId;
+  const flow = await Flow.query().findById(formId).throwIfNotFound();
+  const triggerStep = await flow.getTriggerStep();
+
+  if (triggerStep.appKey !== 'forms') {
+    return renderError(response, [{ general: ['Invalid trigger step'] }], 400);
+  }
+
+  await handler(formId, request, response);
+
+  response.sendStatus(204);
+};

packages/backend/src/controllers/internal/api/v1/forms/create-form-submission.ee.test.js

@@ -0,0 +1,88 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import Crypto from 'crypto';
+import app from '../../../../../app.js';
+import { createUser } from '../../../../../../test/factories/user.js';
+import { createFlow } from '../../../../../../test/factories/flow.js';
+import { createStep } from '../../../../../../test/factories/step.js';
+import * as license from '../../../../../helpers/license.ee.js';
+import * as formHandler from '../../../../../helpers/form-handler.ee.js';
+
+describe('POST /internal/api/v1/forms/:formId', () => {
+  let currentUser, flow, formStep;
+
+  beforeEach(async () => {
+    vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true);
+    vi.spyOn(formHandler, 'default').mockResolvedValue(undefined);
+
+    currentUser = await createUser();
+    flow = await createFlow({ userId: currentUser.id });
+
+    formStep = await createStep({
+      flowId: flow.id,
+      appKey: 'forms',
+      key: 'form',
+      type: 'trigger',
+      parameters: {
+        fields: [
+          {
+            fieldName: 'email',
+            fieldKey: 'email',
+            fieldType: 'string',
+            required: true,
+          },
+          {
+            fieldName: 'name',
+            fieldKey: 'name',
+            fieldType: 'string',
+            required: true,
+          },
+        ],
+      },
+    });
+  });
+
+  it('should process form submission successfully', async () => {
+    const formData = {
+      name: 'John Doe',
+      email: 'john@example.com',
+    };
+
+    await request(app)
+      .post(`/internal/api/v1/forms/${flow.id}`)
+      .send(formData)
+      .expect(204);
+  });
+
+  it('should return 400 for invalid trigger step', async () => {
+    await formStep.$query().patch({ appKey: 'github' });
+
+    const formData = {
+      name: 'John Doe',
+      email: 'john@example.com',
+    };
+
+    const response = await request(app)
+      .post(`/internal/api/v1/forms/${flow.id}`)
+      .send(formData)
+      .expect(400);
+
+    expect(response.body.errors).toStrictEqual({
+      general: ['Invalid trigger step'],
+    });
+  });
+
+  it('should return 404 for non-existent form', async () => {
+    const nonExistentFormId = Crypto.randomUUID();
+
+    const formData = {
+      name: 'John Doe',
+      email: 'john@example.com',
+    };
+
+    await request(app)
+      .post(`/internal/api/v1/forms/${nonExistentFormId}`)
+      .send(formData)
+      .expect(404);
+  });
+});

packages/backend/src/controllers/internal/api/v1/forms/get-form.ee.js

@@ -0,0 +1,18 @@
+import { renderObject, renderError } from '../../../../../helpers/renderer.js';
+import Flow from '../../../../../models/flow.js';
+
+export default async (request, response) => {
+  const form = await Flow.query()
+    .withGraphJoined({ steps: true })
+    .orderBy('steps.position', 'asc')
+    .findById(request.params.formId)
+    .throwIfNotFound();
+
+  const triggerStep = await form.getTriggerStep();
+
+  if (triggerStep.appKey !== 'forms') {
+    return renderError(response, [{ general: ['Invalid trigger step'] }], 400);
+  }
+
+  renderObject(response, form, { serializer: 'Form' });
+};

packages/backend/src/controllers/internal/api/v1/forms/get-form.ee.test.js

@@ -0,0 +1,73 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import Crypto from 'crypto';
+import app from '../../../../../app.js';
+import { createUser } from '../../../../../../test/factories/user.js';
+import { createFlow } from '../../../../../../test/factories/flow.js';
+import { createStep } from '../../../../../../test/factories/step.js';
+import * as license from '../../../../../helpers/license.ee.js';
+import getFormMock from '../../../../../../test/mocks/rest/internal/api/v1/forms/get-form.ee.js';
+
+describe('GET /internal/api/v1/forms/:formId', () => {
+  let currentUser, flow, formStep;
+
+  beforeEach(async () => {
+    vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true);
+
+    currentUser = await createUser();
+    flow = await createFlow({ userId: currentUser.id });
+
+    formStep = await createStep({
+      flowId: flow.id,
+      appKey: 'forms',
+      key: 'form',
+      type: 'trigger',
+      parameters: {
+        fields: [
+          {
+            fieldKey: 'email',
+            fieldName: 'email',
+            fieldType: 'string',
+            required: true,
+          },
+          {
+            fieldKey: 'name',
+            fieldName: 'name',
+            fieldType: 'string',
+            required: true,
+          },
+        ],
+      },
+    });
+  });
+
+  it('should return form data when trigger step is forms', async () => {
+    const response = await request(app)
+      .get(`/internal/api/v1/forms/${flow.id}`)
+      .expect(200);
+
+    const expectedPayload = getFormMock(flow, formStep);
+
+    expect(response.body).toStrictEqual(expectedPayload);
+  });
+
+  it('should return 400 for invalid trigger step', async () => {
+    await formStep.$query().patch({ appKey: 'github' });
+
+    const response = await request(app)
+      .get(`/internal/api/v1/forms/${flow.id}`)
+      .expect(400);
+
+    expect(response.body.errors).toStrictEqual({
+      general: ['Invalid trigger step'],
+    });
+  });
+
+  it('should return 404 for non-existent form', async () => {
+    const nonExistentFormId = Crypto.randomUUID();
+
+    await request(app)
+      .get(`/internal/api/v1/forms/${nonExistentFormId}`)
+      .expect(404);
+  });
+});

packages/backend/src/helpers/form-handler.ee.js

@@ -0,0 +1,71 @@
+import isEmpty from 'lodash/isEmpty.js';
+
+import Flow from '../models/flow.js';
+import { processTrigger } from '../services/trigger.js';
+import triggerQueue from '../queues/trigger.js';
+import globalVariable from './global-variable.js';
+import QuotaExceededError from '../errors/quote-exceeded.js';
+import {
+  REMOVE_AFTER_30_DAYS_OR_150_JOBS,
+  REMOVE_AFTER_7_DAYS_OR_50_JOBS,
+} from './remove-job-configuration.js';
+
+export default async (flowId, request, response) => {
+  const flow = await Flow.query().findById(flowId).throwIfNotFound();
+  const user = await flow.$relatedQuery('user');
+
+  const testRun = !flow.active;
+  const quotaExceeded = !testRun && !(await user.isAllowedToRunFlows());
+
+  if (quotaExceeded) {
+    throw new QuotaExceededError();
+  }
+
+  const triggerStep = await flow.getTriggerStep();
+  const app = await triggerStep.getApp();
+
+  const $ = await globalVariable({
+    flow,
+    app,
+    step: triggerStep,
+    testRun,
+    request,
+  });
+
+  const triggerCommand = await triggerStep.getTriggerCommand();
+  await triggerCommand.run($);
+
+  const triggerItem = $.triggerOutput.data?.[0];
+
+  if (isEmpty(triggerItem)) {
+    return response.status(204);
+  }
+
+  if (testRun) {
+    await processTrigger({
+      flowId,
+      stepId: triggerStep.id,
+      triggerItem,
+      testRun,
+    });
+
+    return response.status(204);
+  }
+
+  const jobName = `${triggerStep.id}-${triggerItem.meta.internalId}`;
+
+  const jobOptions = {
+    removeOnComplete: REMOVE_AFTER_7_DAYS_OR_50_JOBS,
+    removeOnFail: REMOVE_AFTER_30_DAYS_OR_150_JOBS,
+  };
+
+  const jobPayload = {
+    flowId,
+    stepId: triggerStep.id,
+    triggerItem,
+  };
+
+  await triggerQueue.add(jobName, jobPayload, jobOptions);
+
+  return response.status(204);
+};

packages/backend/src/helpers/get-app.js

@@ -13,9 +13,14 @@ const apps = fs
   .reduce((apps, dirent) => {
     if (!dirent.isDirectory()) return apps;
 
-    apps[dirent.name] = import(
-      pathToFileURL(join(__dirname, '../apps', dirent.name, 'index.js'))
-    );
+    const indexPath = join(__dirname, '../apps', dirent.name, 'index.js');
+    const indexEePath = join(__dirname, '../apps', dirent.name, 'index.ee.js');
+
+    if (fs.existsSync(indexEePath)) {
+      apps[dirent.name] = import(pathToFileURL(indexEePath));
+    } else {
+      apps[dirent.name] = import(pathToFileURL(indexPath));
+    }
 
     return apps;
   }, {});
@@ -85,10 +90,8 @@ const addStaticSubsteps = (stepType, appData, step) => {
       arguments: step.arguments,
     });
   }
-
   computedStep.substeps.push(testStep(stepType));
 
   return computedStep;
 };
-
 export default getApp;

packages/backend/src/helpers/global-variable.js

@@ -80,8 +80,9 @@ const globalVariable = async (options) => {
       $.triggerOutput.data.push(triggerItem);
 
       const isWebhookApp = app.key === 'webhook';
+      const isFormsApp = app.key === 'forms';
 
-      if ($.execution.testRun && !isWebhookApp) {
+      if ($.execution.testRun && !isWebhookApp && !isFormsApp) {
         // early exit after receiving one item as it is enough for test execution
         throw new EarlyExitError();
       }

packages/backend/src/models/__snapshots__/app.test.js.snap

@@ -1,5 +1,172 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`App model > list > should exclude enterprise apps when license is not valid 1`] = `
+[
+  "airtable",
+  "anthropic",
+  "appwrite",
+  "azure-openai",
+  "brave-search",
+  "carbone",
+  "clickup",
+  "code",
+  "cryptography",
+  "datastore",
+  "deepl",
+  "delay",
+  "discord",
+  "disqus",
+  "dropbox",
+  "filter",
+  "flickr",
+  "flowers-software",
+  "formatter",
+  "freescout",
+  "ghost",
+  "gitea",
+  "github",
+  "gitlab",
+  "gmail",
+  "google-calendar",
+  "google-drive",
+  "google-forms",
+  "google-sheets",
+  "google-tasks",
+  "helix",
+  "http-request",
+  "hubspot",
+  "invoice-ninja",
+  "jotform",
+  "mailchimp",
+  "mailerlite",
+  "mattermost",
+  "miro",
+  "mistral-ai",
+  "monday",
+  "notion",
+  "ntfy",
+  "odoo",
+  "openai",
+  "openrouter",
+  "perplexity",
+  "pipedrive",
+  "placetel",
+  "postgresql",
+  "pushover",
+  "reddit",
+  "removebg",
+  "rss",
+  "salesforce",
+  "scheduler",
+  "self-hosted-llm",
+  "signalwire",
+  "slack",
+  "smtp",
+  "spotify",
+  "strava",
+  "stripe",
+  "telegram-bot",
+  "todoist",
+  "together-ai",
+  "trello",
+  "twilio",
+  "twitter",
+  "typeform",
+  "virtualq",
+  "vtiger-crm",
+  "webhook",
+  "wordpress",
+  "xero",
+  "you-need-a-budget",
+  "youtube",
+  "zendesk",
+]
+`;
+
+exports[`App model > list > should list all applications including enterprise ones when license is valid 1`] = `
+[
+  "airtable",
+  "anthropic",
+  "appwrite",
+  "azure-openai",
+  "brave-search",
+  "carbone",
+  "clickup",
+  "code",
+  "cryptography",
+  "datastore",
+  "deepl",
+  "delay",
+  "discord",
+  "disqus",
+  "dropbox",
+  "filter",
+  "flickr",
+  "flowers-software",
+  "formatter",
+  "forms",
+  "freescout",
+  "ghost",
+  "gitea",
+  "github",
+  "gitlab",
+  "gmail",
+  "google-calendar",
+  "google-drive",
+  "google-forms",
+  "google-sheets",
+  "google-tasks",
+  "helix",
+  "http-request",
+  "hubspot",
+  "invoice-ninja",
+  "jotform",
+  "mailchimp",
+  "mailerlite",
+  "mattermost",
+  "miro",
+  "mistral-ai",
+  "monday",
+  "notion",
+  "ntfy",
+  "odoo",
+  "openai",
+  "openrouter",
+  "perplexity",
+  "pipedrive",
+  "placetel",
+  "postgresql",
+  "pushover",
+  "reddit",
+  "removebg",
+  "rss",
+  "salesforce",
+  "scheduler",
+  "self-hosted-llm",
+  "signalwire",
+  "slack",
+  "smtp",
+  "spotify",
+  "strava",
+  "stripe",
+  "telegram-bot",
+  "todoist",
+  "together-ai",
+  "trello",
+  "twilio",
+  "twitter",
+  "typeform",
+  "virtualq",
+  "vtiger-crm",
+  "webhook",
+  "wordpress",
+  "xero",
+  "you-need-a-budget",
+  "youtube",
+  "zendesk",
+]
+`;
+
 exports[`App model > list should have list of applications keys 1`] = `
 [
   "airtable",

packages/backend/src/models/app.js

@@ -3,26 +3,46 @@ import path, { join } from 'path';
 import { fileURLToPath } from 'url';
 import appInfoConverter from '../helpers/app-info-converter.js';
 import getApp from '../helpers/get-app.js';
+import { hasValidLicense } from '../helpers/license.ee.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 class App {
   static folderPath = join(__dirname, '../apps');
 
-  static list = fs
-    .readdirSync(this.folderPath)
-    .filter((file) => fs.statSync(join(this.folderPath, file)).isDirectory());
+  static async list() {
+    const directories = fs
+      .readdirSync(this.folderPath)
+      .filter((file) => fs.statSync(join(this.folderPath, file)).isDirectory());
+
+    if (!(await hasValidLicense())) {
+      // Filter out enterprise apps if no valid license
+      const nonEnterpriseApps = [];
+
+      for (const dir of directories) {
+        const appData = await getApp(dir, true);
+
+        if (!appData.enterprise) {
+          nonEnterpriseApps.push(dir);
+        }
+      }
+
+      return nonEnterpriseApps;
+    }
+
+    return directories;
+  }
 
   static async findAll(name, stripFuncs = true) {
+    const appList = await this.list();
+
     if (!name)
       return Promise.all(
-        this.list.map(
-          async (name) => await this.findOneByName(name, stripFuncs)
-        )
+        appList.map(async (name) => await this.findOneByName(name, stripFuncs))
       );
 
     return Promise.all(
-      this.list
+      appList
         .filter((app) => app.includes(name.toLowerCase()))
         .map((name) => this.findOneByName(name, stripFuncs))
     );

packages/backend/src/models/app.test.js

@@ -1,23 +1,38 @@
 import { describe, it, expect, vi } from 'vitest';
-
 import App from './app.js';
 import * as getAppModule from '../helpers/get-app.js';
 import * as appInfoConverterModule from '../helpers/app-info-converter.js';
+import * as licenseModule from '../helpers/license.ee.js';
 
 describe('App model', () => {
   it('folderPath should return correct path', () => {
     expect(App.folderPath.endsWith('/packages/backend/src/apps')).toBe(true);
   });
 
-  it('list should have list of applications keys', () => {
-    expect(App.list).toMatchSnapshot();
+  describe('list', () => {
+    it('should list all applications including enterprise ones when license is valid', async () => {
+      vi.spyOn(licenseModule, 'hasValidLicense').mockResolvedValue(true);
+      const appList = await App.list();
+
+      expect(appList).toMatchSnapshot();
+      expect(appList).toContain('forms');
+    });
+
+    it('should exclude enterprise apps when license is not valid', async () => {
+      vi.spyOn(licenseModule, 'hasValidLicense').mockResolvedValue(false);
+      const appList = await App.list();
+
+      expect(appList).toMatchSnapshot();
+      expect(appList).not.toContain('forms');
+    });
   });
 
   describe('findAll', () => {
     it('should return all applications', async () => {
       const apps = await App.findAll();
+      const appList = await App.list();
 
-      expect(apps.length).toBe(App.list.length);
+      expect(apps.length).toBe(appList.length);
     });
 
     it('should return matching applications when name argument is given', async () => {

packages/backend/src/routes/internal/api/index.js

@@ -21,6 +21,7 @@ import permissionsRouter from './v1/admin/permissions.ee.js';
 import adminUsersRouter from './v1/admin/users.ee.js';
 import installationUsersRouter from './v1/installation/users.js';
 import foldersRouter from './v1/folders.js';
+import formsRouter from './v1/forms.ee.js';
 
 const router = Router();
 
@@ -45,5 +46,6 @@ router.use('/v1/admin/api-tokens', adminApiTokensRouter);
 router.use('/v1/templates', templatesRouter);
 router.use('/v1/installation/users', installationUsersRouter);
 router.use('/v1/folders', foldersRouter);
+router.use('/v1/forms', formsRouter);
 
 export default router;

packages/backend/src/routes/internal/api/v1/forms.ee.js

@@ -0,0 +1,10 @@
+import { Router } from 'express';
+import getFormAction from '../../../../controllers/internal/api/v1/forms/get-form.ee.js';
+import useCreateFormSubmission from '../../../../controllers/internal/api/v1/forms/create-form-submission.ee.js';
+
+const router = Router();
+
+router.get('/:formId', getFormAction);
+router.post('/:formId', useCreateFormSubmission);
+
+export default router;

packages/backend/src/serializers/form.ee.js

@@ -0,0 +1,21 @@
+import slugify from 'slugify';
+
+const formSerializer = (form) => {
+  const formData = {
+    id: form.id,
+    name: form.name,
+    fields: form?.steps[0]?.parameters?.fields?.map((parameter) => ({
+      fieldKey: slugify(parameter.fieldName, {
+        lower: true,
+        strict: true,
+        replacement: '-',
+      }),
+      fieldName: parameter.fieldName,
+      fieldType: parameter.fieldType,
+    })),
+  };
+
+  return formData;
+};
+
+export default formSerializer;

packages/backend/src/serializers/index.js

@@ -26,6 +26,7 @@ import templateSerializer from './template.ee.js';
 import triggerSerializer from './trigger.js';
 import userAppSerializer from './user-app.js';
 import userSerializer from './user.js';
+import formSerializer from './form.ee.js';
 
 const serializers = {
   Action: actionSerializer,
@@ -34,6 +35,7 @@ const serializers = {
   AdminSamlAuthProvider: adminSamlAuthProviderSerializer,
   AdminTemplate: adminTemplateSerializer,
   AdminUser: adminUserSerializer,
+  Form: formSerializer,
   App: appSerializer,
   AppConfig: appConfigSerializer,
   Auth: authSerializer,

packages/backend/test/mocks/rest/internal/api/v1/forms/get-form.ee.js

@@ -0,0 +1,24 @@
+const getFormMock = (flow, formStep) => {
+  const data = {
+    id: flow.id,
+    name: flow.name,
+    fields: formStep?.parameters?.fields?.map((field) => ({
+      fieldKey: field.fieldKey,
+      fieldName: field.fieldName,
+      fieldType: field.fieldType,
+    })),
+  };
+
+  return {
+    data,
+    meta: {
+      count: 1,
+      currentPage: null,
+      isArray: false,
+      totalPages: null,
+      type: 'Flow',
+    },
+  };
+};
+
+export default getFormMock;

packages/backend/yarn.lock

@@ -4177,6 +4177,11 @@ simple-update-notifier@^1.0.7:
   dependencies:
     semver "~7.0.0"
 
+slugify@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.6.tgz#2d4ac0eacb47add6af9e04d3be79319cbcc7924b"
+  integrity sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==
+
 smart-buffer@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
@@ -4261,7 +4266,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4293,7 +4307,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

packages/web/package.json

@@ -12,6 +12,7 @@
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.11.9",
+    "@mui/joy": "^5.0.0-beta.52",
     "@mui/lab": "^5.0.0-alpha.120",
     "@mui/material": "^5.11.10",
     "@mui/x-date-pickers": "^7.28.0",

packages/web/src/components/FlowStep/index.jsx

@@ -369,6 +369,7 @@ function FlowStep(props) {
                             onSubmit={expandNextStep}
                             onChange={handleChange}
                             step={step}
+                            flowId={flowId}
                           />
                         )}
                     </Form>

packages/web/src/components/FlowSubstep/index.jsx

@@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form';
 import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
 import Button from '@mui/material/Button';
+import Alert from '@mui/material/Alert';
 import Stack from '@mui/material/Stack';
 import { EditorContext } from 'contexts/Editor';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
@@ -22,6 +23,7 @@ function FlowSubstep(props) {
     onCollapse,
     onSubmit,
     step,
+    flowId,
   } = props;
   const { name, arguments: args } = substep;
   const editorContext = React.useContext(EditorContext);
@@ -51,6 +53,19 @@ function FlowSubstep(props) {
             position: 'relative',
           }}
         >
+          {step.appKey === 'forms' && (
+            <Alert severity="info" sx={{ mb: 2, width: '100%' }}>
+              You may preview the form at{' '}
+              <a
+                href={new URL(`/forms/${flowId}`, window.location.href).href}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {new URL(`/forms/${flowId}`, window.location.href).href}
+              </a>
+              .
+            </Alert>
+          )}
           {!!args?.length && (
             <Stack width="100%" spacing={2}>
               {args.map((argument) => (
@@ -92,6 +107,7 @@ FlowSubstep.propTypes = {
   onCollapse: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
   step: StepPropType.isRequired,
+  flowId: PropTypes.string.isRequired,
 };
 
 export default FlowSubstep;

packages/web/src/config/urls.js

@@ -15,6 +15,7 @@ export const APP = (appKey) => `/app/${appKey}`;
 export const APP_PATTERN = '/app/:appKey';
 export const APP_CONNECTIONS = (appKey) => `/app/${appKey}/connections`;
 export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
+export const FORM_FLOW_PATTERN = '/forms/:flowId';
 
 export const APP_ADD_CONNECTION = (appKey, shared = false) =>
   `/app/${appKey}/connections/add?shared=${shared}`;

packages/web/src/hooks/useCreateFormSubmission.ee.js

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useCreateFormSubmission(formId) {
+  const mutation = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.post(`/v1/forms/${formId}`, payload);
+
+      return data;
+    },
+  });
+
+  return mutation;
+}

packages/web/src/hooks/useForm.ee.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useForm(formId) {
+  const query = useQuery({
+    queryKey: ['forms', formId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/forms/${formId}`, {
+        signal,
+      });
+
+      return data;
+    },
+    enabled: !!formId,
+  });
+
+  return query;
+}

packages/web/src/pages/FormFlow/index.jsx

@@ -0,0 +1,74 @@
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+import Button from '@mui/joy/Button';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
+import { CssVarsProvider } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+import Container from 'components/Container';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+
+import useForm from 'hooks/useForm.ee';
+import useCreateFormSubmission from 'hooks/useCreateFormSubmission.ee';
+
+export default function FormFlow() {
+  const { flowId } = useParams();
+  const { data: flow, isLoading } = useForm(flowId);
+  const { mutate: createFormSubmission, isSuccess } =
+    useCreateFormSubmission(flowId);
+
+  if (isLoading) return 'loading...';
+
+  const formFields = flow.data.fields;
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    console.log(event.target);
+    const formData = new FormData(event.target);
+
+    const data = Object.fromEntries(formData.entries());
+
+    console.log('data', data);
+    createFormSubmission(data);
+  };
+
+  return (
+    <CssVarsProvider>
+      <Box sx={{ display: 'flex', flex: 1, alignItems: 'center' }}>
+        <Container maxWidth="sm">
+          <Typography gutterBottom color="primary" level="h1">
+            {flow.data.name}
+          </Typography>
+
+          <Stack
+            component="form"
+            direction="column"
+            gap={2}
+            onSubmit={handleSubmit}
+          >
+            {formFields.map(({ fieldName, fieldKey, fieldType }, index) => (
+              <>
+                {fieldType === 'string' && (
+                  <FormControl key={index}>
+                    <FormLabel>{fieldName}</FormLabel>
+                    <Input name={fieldKey} />
+                  </FormControl>
+                )}
+              </>
+            ))}
+
+            <Button variant="solid" type="submit">
+              Submit
+            </Button>
+
+            {isSuccess && <Alert>Form submitted successfully!</Alert>}
+          </Stack>
+        </Container>
+      </Box>
+    </CssVarsProvider>
+  );
+}

packages/web/src/routes.jsx

@@ -11,6 +11,7 @@ import NoResultFound from 'components/NotFound';
 import PublicLayout from 'components/PublicLayout';
 import AdminSettingsLayout from 'components/AdminSettingsLayout';
 import Applications from 'pages/Applications';
+import FormFlow from 'pages/FormFlow';
 import Application from 'pages/Application';
 import Executions from 'pages/Executions';
 import Execution from 'pages/Execution';
@@ -175,6 +176,8 @@ function Routes() {
 
       <Route path={URLS.SETTINGS}>{settingsRoutes}</Route>
 
+      <Route path={URLS.FORM_FLOW_PATTERN} element={<FormFlow />} />
+
       <Route path={URLS.ADMIN_SETTINGS} element={<AdminSettingsLayout />}>
         {adminSettingsRoutes}
       </Route>

packages/web/yarn.lock

@@ -1592,6 +1592,20 @@
   dependencies:
     "@babel/runtime" "^7.23.9"
 
+"@mui/joy@^5.0.0-beta.52":
+  version "5.0.0-beta.52"
+  resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.52.tgz#9c7cd9629603089c80e8f8f7b78a41534ef06e91"
+  integrity sha512-e8jQanA5M1f/X52mJrw0UIW8Er7EAHuLuigmGFw7yIsAgIluhIP4rZ7JcbVrUi6z5Gk0weC9QWUUtjLejAbO8g==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/base" "5.0.0-beta.40-1"
+    "@mui/core-downloads-tracker" "^5.17.1"
+    "@mui/system" "^5.17.1"
+    "@mui/types" "~7.2.15"
+    "@mui/utils" "^5.17.1"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/lab@^5.0.0-alpha.120":
   version "5.0.0-alpha.176"
   resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.176.tgz#4e6101c8224d896d66588b08b9b7883408a0ecc3"