feat: add max char error states

Author: wackerow

app/[locale]/enterprise/_components/ContactForm/index.tsx

@@ -8,12 +8,18 @@ import Input from "@/components/ui/input"
 import { Spinner } from "@/components/ui/spinner"
 import { Textarea } from "@/components/ui/textarea"
 
+import { cn } from "@/lib/utils/cn"
+
+import { MAX_EMAIL_LENGTH, MAX_MESSAGE_LENGTH } from "../../constants"
+
 type EnterpriseContactFormProps = {
   strings: {
     error: {
       domain: React.ReactNode // Link injected
       emailInvalid: string
+      emailTooLong: string // Length injected via {length}
       general: string
+      messageTooLong: string // Length injected via {length}
       required: string
     }
     placeholder: {
@@ -83,6 +89,13 @@ const sanitizeInput = (input: string): string =>
     .trim()
 
 const EnterpriseContactForm = ({ strings }: EnterpriseContactFormProps) => {
+  const getCharacterCountClasses = (currentLength: number, maxLength: number) =>
+    cn(
+      currentLength >= Math.floor(maxLength * 0.9) && "block", // Show char count when within 10% remaining to limit
+      currentLength > maxLength - 64 && "text-warning-border", // Warning color within 64 chars (border version for proper contrast ratio),
+      currentLength > maxLength && "text-error" // Error color over limit
+    )
+
   const [formData, setFormData] = useState<FormState>({
     email: "",
     message: "",
@@ -126,6 +139,8 @@ const EnterpriseContactForm = ({ strings }: EnterpriseContactFormProps) => {
 
     if (!sanitized) return strings.error.required
 
+    if (sanitized.length > MAX_EMAIL_LENGTH) return strings.error.emailTooLong
+
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
     if (!emailRegex.test(sanitized)) return strings.error.emailInvalid
 
@@ -142,6 +157,9 @@ const EnterpriseContactForm = ({ strings }: EnterpriseContactFormProps) => {
 
     if (!sanitized) return strings.error.required
 
+    if (sanitized.length > MAX_MESSAGE_LENGTH)
+      return strings.error.messageTooLong
+
     return undefined
   }
 
@@ -220,15 +238,28 @@ const EnterpriseContactForm = ({ strings }: EnterpriseContactFormProps) => {
       </div>
 
       <div className="space-y-2">
-        <Textarea
-          placeholder={strings.placeholder.textarea}
-          value={formData.message}
-          onChange={handleInputChange("message")}
-          onBlur={handleBlur("message")}
-          hasError={!!errors.message}
-          disabled={submissionState === "submitting"}
-          className="min-h-[120px]"
-        />
+        <div className="relative">
+          <Textarea
+            placeholder={strings.placeholder.textarea}
+            value={formData.message}
+            onChange={handleInputChange("message")}
+            onBlur={handleBlur("message")}
+            hasError={!!errors.message}
+            disabled={submissionState === "submitting"}
+            className="min-h-[120px]"
+          />
+          <div
+            className={cn(
+              "absolute bottom-1 end-3 hidden rounded bg-background px-1 py-0.5 text-xs shadow",
+              getCharacterCountClasses(
+                formData.message.length,
+                MAX_MESSAGE_LENGTH
+              )
+            )}
+          >
+            {formData.message.length}/{MAX_MESSAGE_LENGTH}
+          </div>
+        </div>
         {errors.message && (
           <p className="text-sm text-error" role="alert">
             {errors.message}

app/[locale]/enterprise/constants.ts

@@ -0,0 +1,2 @@
+export const MAX_EMAIL_LENGTH = 2 ** 6 // 64
+export const MAX_MESSAGE_LENGTH = 2 ** 12 // 4,096

app/[locale]/enterprise/page.tsx

@@ -51,6 +51,7 @@ import { BASE_TIME_UNIT } from "@/lib/constants"
 import CasesColumn from "./_components/CasesColumn"
 import EnterpriseContactForm from "./_components/ContactForm/lazy"
 import FeatureCard from "./_components/FeatureCard"
+import { MAX_EMAIL_LENGTH, MAX_MESSAGE_LENGTH } from "./constants"
 import type { Case, EcosystemPlayer, Feature } from "./types"
 import { parseActivity } from "./utils"
 
@@ -504,7 +505,19 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
                 emailInvalid: t(
                   "page-enterprise-team-form-error-email-invalid"
                 ),
+                emailTooLong: t(
+                  "page-enterprise-team-form-error-email-too-long",
+                  {
+                    length: MAX_EMAIL_LENGTH,
+                  }
+                ),
                 general: t("page-enterprise-team-form-error-general"),
+                messageTooLong: t(
+                  "page-enterprise-team-form-error-message-too-long",
+                  {
+                    length: MAX_MESSAGE_LENGTH,
+                  }
+                ),
                 required: t("page-enterprise-team-form-error-required"),
               },
               placeholder: {

src/intl/en/page-enterprise.json

@@ -45,7 +45,9 @@
   "page-enterprise-team-form-button-loading": "Beaming request",
   "page-enterprise-team-form-error-domain": "Please use a business, institutional, or organizational email address (e.g., no @gmail). For general question <a>join our Discord</a>.",
   "page-enterprise-team-form-error-email-invalid": "Please enter a valid email address",
+  "page-enterprise-team-form-error-email-too-long": "Email address is too long (maximum {length} characters)",
   "page-enterprise-team-form-error-general": "Unable to send your message. Please try again or contact us directly at [email protected]",
+  "page-enterprise-team-form-error-message-too-long": "Message is too long (maximum {length} characters)",
   "page-enterprise-team-form-error-required": "Required",
   "page-enterprise-team-form-error-short": "Please provide at least <span>#</span> characters describing your inquiry",
   "page-enterprise-team-form-placeholder-input": "Your e-mail",