Stabilize admin state and submission metadata

apps/submission/src/features/submission/api.ts

@@ -6,6 +6,8 @@ export interface CreateSubmissionResponse {
 }
 
 export interface CreateSubmissionInput {
+  contributorName?: string;
+  lovedOneName?: string;
   displayName?: string;
   caption?: string;
   promptAnswer?: string;
@@ -29,7 +31,10 @@ export const createSubmission = async (
 
     const formData = new FormData();
     formData.append("file", input.file);
-    formData.append("displayName", input.displayName ?? "");
+    formData.append("contributorName", input.contributorName ?? "");
+    formData.append("lovedOneName", input.lovedOneName ?? "");
+    // Compatibility label for older deployed APIs that only know displayName.
+    formData.append("displayName", input.displayName ?? input.lovedOneName ?? input.contributorName ?? "");
     formData.append("caption", input.caption ?? "");
     formData.append("promptAnswer", input.promptAnswer ?? "");
     formData.append("allowArchive", String(input.allowArchive));

apps/submission/src/features/submission/useSubmissionForm.ts

@@ -2,7 +2,8 @@ import { useState } from "react";
 import { createSubmission } from "./api";
 
 export interface SubmissionFormState {
-  displayName: string;
+  contributorName: string;
+  lovedOneName: string;
   caption: string;
   promptAnswer: string;
   allowArchive: boolean;
@@ -11,7 +12,8 @@ export interface SubmissionFormState {
 }
 
 const initialState: SubmissionFormState = {
-  displayName: "",
+  contributorName: "",
+  lovedOneName: "",
   caption: "",
   promptAnswer: "",
   allowArchive: false,
@@ -56,7 +58,8 @@ export const useSubmissionForm = () => {
     try {
       await createSubmission(
         {
-          displayName: state.displayName,
+          contributorName: state.contributorName,
+          lovedOneName: state.lovedOneName,
           caption: state.caption,
           promptAnswer: state.promptAnswer,
           allowArchive: state.allowArchive,

apps/submission/src/routes/SubmissionRoute.tsx

@@ -32,13 +32,25 @@ export const SubmissionRoute = () => {
             </div>
 
             <div className="submission-field">
-              <label htmlFor="displayName">Name or initials (optional)</label>
+              <label htmlFor="contributorName">Your name (optional)</label>
               <input
-                id="displayName"
+                id="contributorName"
                 type="text"
-                value={state.displayName}
+                value={state.contributorName}
                 maxLength={80}
-                onChange={(event) => updateField("displayName", event.target.value)}
+                autoComplete="name"
+                onChange={(event) => updateField("contributorName", event.target.value)}
+              />
+            </div>
+
+            <div className="submission-field">
+              <label htmlFor="lovedOneName">Name of your loved one (optional)</label>
+              <input
+                id="lovedOneName"
+                type="text"
+                value={state.lovedOneName}
+                maxLength={80}
+                onChange={(event) => updateField("lovedOneName", event.target.value)}
               />
             </div>