apps/web/components/plain/PlainContactForm.tsx (4)

76-80: Bug: interpolate Response.text without awaiting; users will see “[object Function]”

uploadRes.text is a function. Interpolating it shows a function string, not the server error. Await the body text (or JSON).

Apply:

-      if (!uploadRes.ok) {
-        showToast(`Failed while uploading file: ${uploadRes.text}`, "error");
-        setIsUploadingImage(false);
-        return;
-      }
+      if (!uploadRes.ok) {
+        let errText = "";
+        try {
+          errText = await uploadRes.text();
+        } catch {}
+        showToast(errText ? `Failed while uploading file: ${errText}` : "Failed while uploading file", "error");
+        setIsUploadingImage(false);
+        return;
+      }

---

62-63: isUploadingImage set to false too early; enables premature submit before S3 upload completes

You set isUploadingImage(false) right after /api/support/upload, before the S3 POST finishes. This can re-enable the form and allow submission without the attachmentId added.

Keep isUploadingImage true until the S3 upload completes or fails.

-      setIsUploadingImage(false);

Leave the existing setIsUploadingImage(false) in the S3 error branch and at the end of the happy path (lines ~78 and ~89).

Also applies to: 89-90

---

199-207: Align FileUploader config with handler: single file only

The handler processes only the first new/removed file, but props allow up to 5. Either iterate all files, or set maxFiles to 1 to match current behavior.

-                    multiple={false}
-                    showFilesList
-                    maxFiles={5}
+                    multiple={false}
+                    showFilesList
+                    maxFiles={1}

If multiple files are desired, update handleUpload to loop all newFiles/removedFiles and collect attachmentIds.

---

161-161: i18n: wrap all user-facing strings with t() per guidelines

Several UI strings and toasts are hardcoded. Please use t() for localization in TSX.

Example:

-            <p className="mb-5 text-lg font-semibold">Contact support</p>
+            <p className="mb-5 text-lg font-semibold">{t("contactSupport")}</p>

-                <h4 className="mb-2 text-lg font-medium ">Message Sent</h4>
+                <h4 className="mb-2 text-lg font-medium ">{t("messageSent")}</h4>

-                <p className="text-subtle mb-4 text-sm">
-                  Thank you for contacting us. We&apos;ll get back to you as soon as possible.
-                </p>
+                <p className="text-subtle mb-4 text-sm">{t("thanksWeWillReplySoon")}</p>

-                <Button ...>Send Another Message</Button>
+                <Button ...>{t("sendAnotherMessage")}</Button>

-                  <Label htmlFor="message">Describe the issue</Label>
+                  <Label htmlFor="message">{t("describeTheIssue")}</Label>

-                    placeholder="Please describe the issue you're facing, e.g. 'Busy slots are marked available', ..., etc."
+                    placeholder={t("describeIssuePlaceholder")}

Also localize:

• Attachments label (“Attachments (optional)”)
• FileUploader buttonMsg (“Add Files”)
• Submit button/loader (“Sending”, “Send Message”)
• Toasts (“Error uploading attachment”, “File uploaded successfully”, “Failed to submit contact form”, “An error occurred”)

If the project uses a specific i18n helper, import and follow that convention.

Also applies to: 174-174, 175-177, 179-179, 185-185, 191-191, 197-197, 200-200, 223-223, 228-228, 52-52, 90-90, 120-120, 132-132

apps/web/components/plain/PlainContactForm.tsx (2)

163-168: Accessibility: icon-only close button should have an aria-label

Add an aria-label for screen readers.

             <Button
               color="minimal"
               variant="button"
               StartIcon="x"
               size="sm"
               onClick={() => setIsOpen(false)}
+              aria-label="Close"
             />

---

12-17: Unused interface ContactFormData

The ContactFormData interface isn’t used and diverges from the actual payload. Remove it or align the form to use it.

-interface ContactFormData {
-  name: string;
-  email: string;
-  message: string;
-  attachments?: FileData[];
-}

Alternatively, define a type matching the current API payload:

type SupportPayload = { message: string; attachmentIds: string[] };

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro