Submit actions (#358)

* Add submission registry class

* In-progress

* Add ability to register multiple handlers to the form platform, to later be registered at the plugin level. Wire this submission handler system up to the submit-form service

* Wire "next page" action handler to UI.

* Add "package download" pattern, which provides a submit button to download a PDF package.

* Wire package download button up to UI. There are still issues with PDF data serialization that need to be resolved.

* Get submit action string when submitting via JS

* Fix typo

* Add initial documentation for the forms package and its patterns directory

apps/spotlight/src/features/form-page/components/AppFormPage.tsx

@@ -61,7 +61,9 @@ const AppFormRoute = () => {
             uswdsRoot: ctx.uswdsRoot,
           }}
           session={formSessionResponse.formSession}
-          onSubmit={data => actions.onSubmitForm({ formId: id, data })}
+          onSubmit={data => {
+            actions.onSubmitForm({ formId: id, data });
+          }}
         />
       )}
     </>

packages/common/src/locales/en/app.ts

@@ -22,6 +22,11 @@ export const en = {
       displayName: 'Short answer',
       maxLength: 'Maximum length',
     },
+    packageDownload: {
+      ...defaults,
+      displayName: 'Package download',
+      fieldLabel: 'Package download label',
+    },
     page: {
       fieldLabel: 'Page title',
     },

packages/database/src/clients/kysely/types.ts

@@ -54,6 +54,8 @@ interface FormSessionsTable {
   id: string;
   form_id: string;
   data: string;
+  created_at: Generated<Date>;
+  updated_at: Generated<Date>;
 }
 export type FormSessionsTableSelectable = Selectable<FormSessionsTable>;
 export type FormSessionsTableInsertable = Insertable<FormSessionsTable>;

packages/design/src/Form/components/PackageDownload/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { type PackageDownloadProps } from '@atj/forms';
+
+import { type PatternComponent } from '../../../Form/index.js';
+import ActionBar from '../../../Form/ActionBar/index.js';
+
+const PackageDownload: PatternComponent<PackageDownloadProps> = props => {
+  return (
+    <>
+      <p className="maxw-tablet">{props.text}</p>
+      <ActionBar actions={props.actions} />
+    </>
+  );
+};
+export default PackageDownload;

packages/design/src/Form/components/index.tsx

@@ -4,6 +4,7 @@ import Address from './Address/index.js';
 import Checkbox from './Checkbox/index.js';
 import Fieldset from './Fieldset/index.js';
 import FormSummary from './FormSummary/index.js';
+import PackageDownload from './PackageDownload/index.js';
 import Page from './Page/index.js';
 import PageSet from './PageSet/index.js';
 import Paragraph from './Paragraph/index.js';
@@ -19,6 +20,7 @@ export const defaultPatternComponents: ComponentForPattern = {
   fieldset: Fieldset as PatternComponent,
   'form-summary': FormSummary as PatternComponent,
   input: TextInput as PatternComponent,
+  'package-download': PackageDownload as PatternComponent,
   page: Page as PatternComponent,
   'page-set': PageSet as PatternComponent,
   paragraph: Paragraph as PatternComponent,

packages/design/src/Form/index.tsx

@@ -106,10 +106,22 @@ export default function Form({
                 className="usa-form margin-bottom-3 maxw-full"
                 onSubmit={
                   onSubmit
-                    ? formMethods.handleSubmit(async data => {
+                    ? formMethods.handleSubmit(async (data, event) => {
+                        const submitEvent = event?.nativeEvent as
+                          | SubmitEvent
+                          | undefined;
+                        if (submitEvent === undefined) {
+                          console.error(
+                            "Can't handle submission without event"
+                          );
+                          return;
+                        }
+                        const action = (
+                          submitEvent.submitter as HTMLButtonElement
+                        )?.value;
                         updatePrompt(data);
                         console.log('Submitting form...');
-                        onSubmit(data);
+                        onSubmit({ ...data, action });
                       })
                     : undefined
                 }

packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx

@@ -94,6 +94,7 @@ const sidebarPatterns: DropdownPattern[] = [
   ['paragraph', defaultFormConfig.patterns['paragraph']],
   ['rich-text', defaultFormConfig.patterns['rich-text']],
   ['radio-group', defaultFormConfig.patterns['radio-group']],
+  ['package-download', defaultFormConfig.patterns['package-download']],
 ] as const;
 export const fieldsetPatterns: DropdownPattern[] = [
   ['form-summary', defaultFormConfig.patterns['form-summary']],
@@ -102,6 +103,7 @@ export const fieldsetPatterns: DropdownPattern[] = [
   ['paragraph', defaultFormConfig.patterns['paragraph']],
   ['rich-text', defaultFormConfig.patterns['rich-text']],
   ['radio-group', defaultFormConfig.patterns['radio-group']],
+  ['package-download', defaultFormConfig.patterns['package-download']],
 ] as const;
 
 export const SidebarAddPatternMenuItem = ({

packages/design/src/FormManager/FormEdit/components/PackageDownloadPatternEdit.tsx

@@ -0,0 +1,77 @@
+import classnames from 'classnames';
+import React from 'react';
+
+import { enLocale as message } from '@atj/common';
+import {
+  type PackageDownloadPattern,
+  type PackageDownloadProps,
+  type PatternId,
+} from '@atj/forms';
+
+import PackageDownload from '../../../Form/components/PackageDownload/index.js';
+import { PatternEditComponent } from '../types.js';
+
+import { PatternEditActions } from './common/PatternEditActions.js';
+import { PatternEditForm } from './common/PatternEditForm.js';
+import { usePatternEditFormContext } from './common/hooks.js';
+import { useFormManagerStore } from '../../store.js';
+
+const PackageDownloadPatternEdit: PatternEditComponent<
+  PackageDownloadProps
+> = ({ focus, previewProps }) => {
+  return (
+    <>
+      {focus ? (
+        <PatternEditForm
+          pattern={focus.pattern}
+          editComponent={<EditComponent patternId={focus.pattern.id} />}
+        ></PatternEditForm>
+      ) : (
+        <div className="padding-left-3 padding-bottom-3 padding-right-3">
+          <PackageDownload {...previewProps} />
+        </div>
+      )}
+    </>
+  );
+};
+
+const EditComponent = ({ patternId }: { patternId: PatternId }) => {
+  const pattern = useFormManagerStore<PackageDownloadPattern>(
+    state => state.session.form.patterns[patternId]
+  );
+  const { fieldId, getFieldState, register } =
+    usePatternEditFormContext<PackageDownloadPattern>(patternId);
+  const text = getFieldState('text');
+
+  return (
+    <div className="grid-row grid-gap-1">
+      <div className="tablet:grid-col-12">
+        <label
+          className={classnames('usa-label', {
+            'usa-label--error': text.error,
+          })}
+          htmlFor={fieldId('text')}
+        >
+          {message.patterns.packageDownload.fieldLabel}
+        </label>
+        {text.error ? (
+          <span className="usa-error-message" role="alert">
+            {text.error.message}
+          </span>
+        ) : null}
+        <textarea
+          id={fieldId('text')}
+          className="usa-textarea bg-primary-lighter text-bold"
+          style={{ height: 'unset' }}
+          rows={4}
+          {...register('text')}
+          defaultValue={pattern.data.text}
+          autoFocus
+        ></textarea>
+      </div>
+      <PatternEditActions />
+    </div>
+  );
+};
+
+export default PackageDownloadPatternEdit;

packages/design/src/FormManager/FormEdit/components/index.ts

@@ -7,6 +7,7 @@ import CheckboxPatternEdit from './CheckboxPatternEdit.js';
 import FieldsetEdit from './FieldsetEdit.js';
 import FormSummaryEdit from './FormSummaryEdit.js';
 import InputPatternEdit from './InputPatternEdit.js';
+import PackageDownloadPatternEdit from './PackageDownloadPatternEdit.js';
 import { PageEdit } from './PageEdit.js';
 import PageSetEdit from './PageSetEdit.js';
 import ParagraphPatternEdit from './ParagraphPatternEdit.js';
@@ -21,6 +22,7 @@ export const defaultPatternEditComponents: EditComponentForPattern = {
   input: InputPatternEdit as PatternEditComponent,
   'form-summary': FormSummaryEdit as PatternEditComponent,
   fieldset: FieldsetEdit as PatternEditComponent,
+  'package-download': PackageDownloadPatternEdit as PatternEditComponent,
   page: PageEdit as PatternEditComponent,
   'page-set': PageSetEdit as PatternEditComponent,
   'radio-group': RadioGroupPatternEdit as PatternEditComponent,

packages/forms/README.md

@@ -0,0 +1,9 @@
+# @atj/forms
+
+This library includes all of the core business logic of the Forms Platform.
+
+- [./src/services](./src/services): The public interface of the Forms Platform is implemented here
+- [./src/patterns](./src/patterns/README.md): Form building blocks, aka "patterns"
+- [./src/repository](./src/repository): Database routines
+- [./src/documents](./src/documents): Document ingest and creation
+- [./src/context](./src/context): Runtime contexts for the platform (testing, in-browser, server-side) are defined here

packages/forms/src/components.ts

@@ -6,6 +6,13 @@ import {
   getPatternConfig,
 } from './pattern.js';
 import { type FormSession, nullSession, sessionIsComplete } from './session.js';
+import { type ActionName } from './submission.js';
+
+export type PackageDownloadProps = PatternProps<{
+  type: 'package-download';
+  text: string;
+  actions: PromptAction[];
+}>;
 
 export type TextInputProps = PatternProps<{
   type: 'input';
@@ -92,7 +99,7 @@ export type PatternProps<T = {}> = {
 
 export type SubmitAction = {
   type: 'submit';
-  submitAction: 'next' | 'submit';
+  submitAction: 'next' | 'submit' | ActionName;
   text: string;
 };
 export type LinkAction = {