Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/settings.form-templates.tsx

@@ -110,63 +110,70 @@ function TemplateEditor({ formKey, userId }: { formKey: FormKey; userId: string
   return (
     <Card>
       <CardContent className="p-5 space-y-5">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-1.5">
-            <Label>Title (centered, top of document)</Label>
-            <Input
-              value={config.title ?? ""}
-              onChange={(e) => update("title", e.target.value)}
-              placeholder="e.g. NOTICE OF LATE ASSESSMENT"
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Label>Certified mail label</Label>
-            <Input
-              value={config.certifiedMailLabel ?? ""}
-              onChange={(e) => update("certifiedMailLabel", e.target.value)}
-              placeholder="U.S. Certified Mail #"
-            />
-          </div>
-        </div>
+        {!isLetter && (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-1.5">
+                <Label>Title (centered, top of document)</Label>
+                <Input
+                  value={config.title ?? ""}
+                  onChange={(e) => update("title", e.target.value)}
+                  placeholder="e.g. NOTICE OF LATE ASSESSMENT"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label>Certified mail label</Label>
+                <Input
+                  value={config.certifiedMailLabel ?? ""}
+                  onChange={(e) => update("certifiedMailLabel", e.target.value)}
+                  placeholder="U.S. Certified Mail #"
+                />
+              </div>
+            </div>
 
-        <div className="space-y-1.5">
-          <Label>Body</Label>
-          <Textarea
-            rows={8}
-            value={config.body ?? ""}
-            onChange={(e) => update("body", e.target.value)}
-            className="font-mono text-sm"
-          />
-          <p className="text-[11px] text-muted-foreground">
-            Tokens: <code>{`{{client.name}}`}</code>, <code>{`{{owner.name}}`}</code>,{" "}
-            <code>{`{{firm.name}}`}</code>, <code>{`{{date}}`}</code>,{" "}
-            <code>{`{{dueDate}}`}</code>, <code>{`{{total}}`}</code>
-            {formKey === "itf" && <> , <code>{`{{lienRef}}`}</code></>}. Use a blank line to start a
-            new paragraph.
-          </p>
-        </div>
+            <div className="space-y-1.5">
+              <Label>Body</Label>
+              <Textarea
+                rows={8}
+                value={config.body ?? ""}
+                onChange={(e) => update("body", e.target.value)}
+                className="font-mono text-sm"
+              />
+              <p className="text-[11px] text-muted-foreground">
+                Tokens: <code>{`{{client.name}}`}</code>, <code>{`{{owner.name}}`}</code>,{" "}
+                <code>{`{{firm.name}}`}</code>, <code>{`{{date}}`}</code>,{" "}
+                <code>{`{{dueDate}}`}</code>, <code>{`{{total}}`}</code>
+                {formKey === "itf" && <> , <code>{`{{lienRef}}`}</code></>}. Use a blank line to start a
+                new paragraph.
+              </p>
+            </div>
 
-        <div className="space-y-1.5">
-          <Label>Closing paragraph</Label>
-          <Textarea
-            rows={4}
-            value={config.closing ?? ""}
-            onChange={(e) => update("closing", e.target.value)}
-            className="font-mono text-sm"
-          />
-        </div>
+            <div className="space-y-1.5">
+              <Label>Closing paragraph</Label>
+              <Textarea
+                rows={4}
+                value={config.closing ?? ""}
+                onChange={(e) => update("closing", e.target.value)}
+                className="font-mono text-sm"
+              />
+            </div>
 
-        <div className="space-y-1.5">
-          <Label>Signature block</Label>
-          <Textarea
-            rows={4}
-            value={config.signature ?? ""}
-            onChange={(e) => update("signature", e.target.value)}
-            className="font-mono text-sm"
-            placeholder="Sincerely,&#10;&#10;{{firm.name}}"
-          />
-        </div>
+            <div className="space-y-1.5">
+              <Label>Signature block</Label>
+              <Textarea
+                rows={4}
+                value={config.signature ?? ""}
+                onChange={(e) => update("signature", e.target.value)}
+                className="font-mono text-sm"
+                placeholder="Sincerely,&#10;&#10;{{firm.name}}"
+              />
+            </div>
+          </>
+        )}
 
+        {showLetterheadEditor && (
+          <LetterheadFooterEditor config={config} update={update} />
+        )}
         <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
           <div className="space-y-1.5">
             <Label className="text-xs">Font</Label>