From 73ba6d5a0d8262068fe0d19d7b68e2d14aed2d39 Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Fri, 20 Mar 2026 00:41:49 -0600
Subject: [PATCH] fix(05-04): replace locked client display with editable email
 input

- Remove isLocked variable and read-only div for assigned client
- Add primaryEmail state pre-filled with assigned client's email, user-editable
- Show client name as helper text below the input for reference
- Update buildEmailAddresses() to use primaryEmail when assignedClientId is set
- Update button disabled logic to gate on primaryEmail when assigned client exists
---
 .../[docId]/_components/PreparePanel.tsx      | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx
index 6504734..bd50233 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreparePanel.tsx
@@ -40,15 +40,15 @@ export function PreparePanel({
 }: PreparePanelProps) {
   const router = useRouter();
 
-  // If the document already has an explicit assigned client, lock to that client.
-  // Otherwise default to the document owner (defaultClientId) but allow changing.
-  const isLocked = assignedClientId !== null;
-
   // selectedClientId: id from the dropdown (empty string = "pick manually by email")
   const [selectedClientId, setSelectedClientId] = useState<string>(
     assignedClientId ?? defaultClientId,
   );
 
+  // primaryEmail: editable email for the assigned client (pre-filled, can be overridden)
+  const assignedClient = clients.find(c => c.id === assignedClientId);
+  const [primaryEmail, setPrimaryEmail] = useState(assignedClient?.email ?? '');
+
   // emailInput: raw text for manual email entry (used when selectedClientId is '' or
   // as additional CC addresses)
   const [emailInput, setEmailInput] = useState('');
@@ -61,12 +61,15 @@ export function PreparePanel({
   const canPrepare = currentStatus === 'Draft';
 
   // The email addresses that will be sent with the prepare request.
-  // If a known client is selected, start with that client's email.
+  // When an assigned client exists, use the (editable) primaryEmail.
+  // Otherwise use the dropdown-selected client's email.
   // Any manually-entered addresses are appended.
   function buildEmailAddresses(): string[] {
     const addresses: string[] = [];
 
-    if (selectedClientId) {
+    if (assignedClientId && primaryEmail.trim()) {
+      addresses.push(primaryEmail.trim());
+    } else if (selectedClientId) {
       const client = clients.find((c) => c.id === selectedClientId);
       if (client?.email) addresses.push(client.email);
     }
@@ -136,22 +139,25 @@ export function PreparePanel({
     <div className="rounded-lg border border-gray-200 p-4 space-y-4">
       <h2 className="font-semibold text-gray-900">Prepare Document</h2>
 
-      {/* Client / recipient selection */}
+      {/* Primary recipient */}
       <div>
         <label className="block text-sm font-medium text-gray-700 mb-1">
-          {isLocked ? 'Assigned client (locked)' : 'Assign to client'}
+          Recipient email
         </label>
-
-        {isLocked ? (
-          // Document already has an assigned client — show read-only info
-          <div className="w-full border rounded px-2 py-1.5 text-sm bg-gray-50 text-gray-600">
-            {(() => {
-              const c = clients.find((c) => c.id === assignedClientId);
-              return c ? `${c.name} (${c.email})` : assignedClientId;
-            })()}
-          </div>
+        {assignedClientId ? (
+          <>
+            <input
+              type="email"
+              value={primaryEmail}
+              onChange={(e) => setPrimaryEmail(e.target.value)}
+              className="w-full border rounded px-2 py-1.5 text-sm"
+              placeholder="recipient@example.com"
+            />
+            <p className="text-xs text-gray-400 mt-0.5">
+              Assigned client: {clients.find(c => c.id === assignedClientId)?.name ?? assignedClientId}
+            </p>
+          </>
         ) : (
-          // No explicit assignment yet — allow choosing from list or entering email manually
           <select
             value={selectedClientId}
             onChange={(e) => setSelectedClientId(e.target.value)}
@@ -168,17 +174,15 @@ export function PreparePanel({
       {/* Additional / manual email addresses */}
       <div>
         <label className="block text-sm font-medium text-gray-700 mb-1">
-          {isLocked
+          {assignedClientId || selectedClientId
             ? 'Additional email addresses (optional, comma-separated)'
-            : selectedClientId
-              ? 'Additional email addresses (optional, comma-separated)'
-              : 'Email address(es) — required if no client selected above'}
+            : 'Email address(es) — required if no client selected above'}
         </label>
         <textarea
           value={emailInput}
           onChange={(e) => setEmailInput(e.target.value)}
           placeholder={
-            isLocked || selectedClientId
+            assignedClientId || selectedClientId
               ? 'e.g. cc@example.com, another@example.com'
               : 'Enter recipient email, e.g. client@example.com'
           }
@@ -197,7 +201,7 @@ export function PreparePanel({
 
       <button
         onClick={handlePrepare}
-        disabled={loading || (!selectedClientId && parseEmails(emailInput).length === 0)}
+        disabled={loading || (assignedClientId ? !primaryEmail.trim() : (!selectedClientId && parseEmails(emailInput).length === 0))}
         className="w-full py-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
         type="button"
       >