feat: add forms feature set

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>
+  );
+}