feat: integrate backend email submission for hire-me quotes

- Connected quote submission to backend mail endpoint at https://thebackend.rocket-champ.pw/mail
- Added submitSuccess state to track successful quote submissions
- Display success message after quote is sent confirming receipt and next steps
- Updated error message to reflect actual submission failure instead of preparation error
- Marked email integration tasks as complete in TODO documentation

Author: daniel-iliesh

app/hire-me/page.tsx

@@ -36,6 +36,7 @@ export default function HireMePage() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
 
   const suggestedBudgetRange = budgetRanges.find((range) => {
     const max = range.max ?? Number.POSITIVE_INFINITY;
@@ -50,14 +51,28 @@ export default function HireMePage() {
     try {
       setIsSubmitting(true);
       setSubmitError(null);
+      setSubmitSuccess(false);
 
       const payload = buildPayload();
-      // TODO: Wire this payload to a backend/email route.
-      // For now, we just log it so we can inspect the shape during development.
-      console.log("Hire Me quote payload", payload);
+      const response = await fetch("https://thebackend.rocket-champ.pw/mail", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          type: "hire-quote",
+          quote: payload,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to submit quote");
+      }
+
+      setSubmitSuccess(true);
     } catch {
       setSubmitError(
-        "Something went wrong while preparing your quote. Please try again in a moment."
+        "Something went wrong while sending your request. Please try again in a moment."
       );
     } finally {
       setIsSubmitting(false);
@@ -150,13 +165,21 @@ export default function HireMePage() {
         )}
 
         {state.currentStep === 6 && (
-          <ContactStep
-            contact={state.contact}
-            isSubmitting={isSubmitting}
-            error={submitError}
-            onChangeField={updateContactField}
-            onSubmit={handleSubmit}
-          />
+          <div className="space-y-3">
+            {submitSuccess && (
+              <p className="rounded-md border border-green-500/60 bg-green-500/10 p-3 text-xs text-green-300">
+                Thanks for your request. I&apos;ll review your answers and get back to you with a
+                refined proposal.
+              </p>
+            )}
+            <ContactStep
+              contact={state.contact}
+              isSubmitting={isSubmitting}
+              error={submitError}
+              onChangeField={updateContactField}
+              onSubmit={handleSubmit}
+            />
+          </div>
         )}
       </div>
     </QuoteStepper>

src/features/hireme/docs/TODO.md

@@ -80,13 +80,14 @@ Create reusable components under `src/features/hireme/components`:
 ## 6. Email / Backend Integration
 - [ ] Decide on submission strategy:
   - [ ] Next.js route handler under `app/api/hire-quote/route.ts`, or
-  - [ ] External email service (e.g. EmailJS, existing backend if any).
-- [ ] Define `QuotePayload` DTO matching the state shape.
-- [ ] Implement API route that:
-  - [ ] Receives JSON payload.
-  - [ ] Constructs email to YOU using conditional templates (budget mismatch vs aligned).
-  - [ ] Triggers confirmation email to client (simple version first).
-- [ ] Wire `submitQuote` in the client to POST to this API and handle loading/success/error states.
+  - [x] External backend endpoint (`https://thebackend.rocket-champ.pw/mail`).
+- [x] Define `QuotePayload` DTO matching the state shape.
+- [x] Implement backend `/mail` route that:
+  - [x] Receives JSON payload.
+  - [x] Validates `hire-quote` DTO (types, required fields, agreeToTerms, price > 0).
+  - [x] Constructs email to YOU using conditional templates (budget mismatch vs aligned).
+  - [x] Triggers confirmation email to client with styling consistent with the site.
+- [x] Wire `submitQuote` in the client to POST to this backend and handle loading/success/error states.
 - [ ] Add basic server-side validation and spam protection (honeypot field or rate limiting, if needed).
 
 ## 7. Styling & Responsiveness