Refactor feedback forms to include MAIL_REQUEST_FROM in API requests. Updated API utility to use mailApi for mail-related endpoints. Enhanced FeedbackFormModal and LeadForm components for improved data handling and user experience.

src/components/FeedbackForm.tsx

@@ -1,4 +1,5 @@
 import ky from "ky";
+import { MAIL_REQUEST_FROM } from "@/mailFrom";
 import { ChangeEvent, FormEvent, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import InputMask from "react-input-mask";
@@ -29,6 +30,7 @@ function FeedbackForm() {
             phone,
             email,
             request: description,
+            from: MAIL_REQUEST_FROM,
           },
         })
         .json();

src/landing/components/modals/FeedbackFormModal.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@/landing/ui/Button";
-import { api } from "@/landing/lib/api";
+import { MAIL_REQUEST_FROM } from "@/mailFrom";
+import { mailApi } from "@/landing/lib/api";
 import { useModalStore } from "@/landing/stores/useModalStore";
 import CustomCheckbox from "@/landing/ui/CustomCheckbox";
 import CheckIcon from "@/landing/components/icons/CheckIcon";
@@ -17,7 +18,9 @@ function FeedbackModal({ id }: { id: string }) {
   );
 
   async function sendSources() {
-    await api.put(`mail/${id}`, { json: { source: selectedOptions } });
+    await mailApi.put(`mail/${id}`, {
+      json: { source: selectedOptions, from: MAIL_REQUEST_FROM },
+    });
     setModal(null);
   }
 
@@ -30,7 +33,7 @@ function FeedbackModal({ id }: { id: string }) {
   }
 
   return (
-    <div className="fixed top-[50%] translate-y-[-50%] flex md:flex-row flex-col md:max-w-[695px] max-w-[422px] max-[360px]:max-w-[340px] z-[15] md:p-[48px] p-[32px] max-[360px]:p-[24px]  bg-[#37393B99] backdrop-blur-xl backdrop-opacity-60 rounded-2xl">
+    <div className="fixed top-[50%] translate-y-[-50%] flex md:flex-row flex-col md:max-w-[695px] max-w-[422px] max-[360px]:max-w-[340px] z-[15] md:p-[48px] p-[32px] max-[360px]:p-[24px] bg-[#37393B99] backdrop-blur-xl backdrop-opacity-60 rounded-2xl text-white">
       <div className="flex md:flex-col flex-row md:justify-center items-center md:max-w-[200px] md:gap-y-[16px] gap-x-[24px]">
         <div className="p-3 rounded-full bg-gradient translate-x-[4px]">
           <div className="z-10 absolute top-[-4px] left-[-4.3px] w-[56px] h-[56px] rounded-full bg-gradient-to-r from-[#6078F299] to-[#C868F599]" />
@@ -61,7 +64,7 @@ function FeedbackModal({ id }: { id: string }) {
 
         <ul className="md:mb-[49px] mb-[58px] flex flex-col gap-y-[12px]">
           {modalOptions.map((item) => (
-            <li key={item} className="flexfont-normal">
+            <li key={item} className="font-normal">
               <CustomCheckbox value={item} onChange={onCheckboxChange} />
             </li>
           ))}

src/landing/features/lead-form/LeadForm.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { api } from "@/landing/lib/api";
+import { MAIL_REQUEST_FROM } from "@/mailFrom";
+import { mailApi } from "@/landing/lib/api";
 import { productOptionsFromT } from "@/landing/lib/productLabels";
 import type { Product } from "@/landing/types";
 import { Button } from "@/landing/ui/Button";
@@ -52,8 +53,10 @@ export function LeadForm({
   const onSubmit: SubmitHandler<LeadFormValues> = async (data) => {
     setSubmitError(null);
     try {
-      const { id } = await api
+      const { id } = await mailApi
-        .post("mail", { json: { ...data, referer } })
+        .post("mail", {
+          json: { ...data, referer, from: MAIL_REQUEST_FROM },
+        })
         .json<{ id: string }>();
       onSuccess(id);
     } catch {

src/landing/lib/api.ts

@@ -13,3 +13,8 @@ export const api = ky.create({
   prefixUrl: base || undefined,
   credentials: "include",
 });
+
+/** Lead/mail endpoints are served from graff.estate, not `VITE_API_URL`. */
+export const mailApi = ky.create({
+  prefixUrl: "https://graff.estate/api/",
+});

src/mailFrom.ts

@@ -0,0 +1,2 @@
+/** Sent with graff.estate mail API payloads to identify this client. */
+export const MAIL_REQUEST_FROM = "stream.graff.tech";