feat: add forms feature set

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"