add dynamic no. in contat page and other changes

This commit is contained in:
priyanshuvish
2025-07-24 19:00:07 +05:30
parent 08d33fb2cf
commit 5fba23e5cc
7 changed files with 82 additions and 52 deletions

View File

@@ -278,9 +278,8 @@ const ProjectFormSection = () => {
<Input
type={type}
placeholder={placeholder}
className={`bg-gray-800/30 border-gray-600/50 text-white h-12 text-base ${
errors[field] ? "border-red-500" : ""
}`}
className={`bg-gray-800/30 border-gray-600/50 text-white h-12 text-base ${errors[field] ? "border-red-500" : ""
}`}
value={formData[field] as string}
onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
onBlur={() => handleBlur(field)}
@@ -295,7 +294,8 @@ const ProjectFormSection = () => {
field: keyof typeof formData,
label: string,
placeholder: string,
options: { value: string; label: string }[]
options: { value: string; label: string }[],
onValueChange?: (value: string) => void
) => (
<div className="space-y-3" id={field}>
<label className="block text-sm font-medium text-white">{label} *</label>
@@ -306,12 +306,14 @@ const ProjectFormSection = () => {
setFormData(updated);
setTouched({ ...touched, [field]: true });
validateField(field, updated);
if (onValueChange) {
onValueChange(value);
}
}}
>
<SelectTrigger
className={`bg-gray-800/30 border-gray-600/50 text-white h-12 ${
errors[field] ? "border-red-500" : ""
}`}
className={`bg-gray-800/30 border-gray-600/50 text-white h-12 min-h-12 ${errors[field] ? "border-red-500" : ""
}`}
>
<SelectValue placeholder={placeholder} />
</SelectTrigger>
@@ -329,6 +331,18 @@ const ProjectFormSection = () => {
</div>
);
// Add this near the top of your file with other constants
const COUNTRY_CODES: Record<string, string> = {
us: "+1",
uk: "+44",
ca: "+1",
au: "+61",
in: "+91",
de: "+49",
fr: "+33",
other: "+",
};
const renderTextarea = (
field: keyof typeof formData,
label: string,
@@ -347,9 +361,8 @@ const ProjectFormSection = () => {
<Textarea
placeholder={placeholder}
rows={rows}
className={`bg-gray-800/30 border-gray-600/50 text-white text-base resize-none ${
errors[field] ? "border-red-500" : ""
}`}
className={`bg-gray-800/30 border-gray-600/50 text-white text-base resize-none ${errors[field] ? "border-red-500" : ""
}`}
value={formData[field] as string}
onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
onBlur={() => handleBlur(field)}
@@ -498,12 +511,22 @@ const ProjectFormSection = () => {
{ value: "de", label: "Germany" },
{ value: "fr", label: "France" },
{ value: "other", label: "Other" },
]
],
(value) => {
// When country changes, update the phone field if it's empty or starts with a +
const updated = { ...formData, country: value };
if (!formData.phone || formData.phone.startsWith("+")) {
updated.phone = COUNTRY_CODES[value] || "";
}
setFormData(updated);
setTouched({ ...touched, country: true });
validateField("country", updated);
}
)}
{renderInputField(
"phone",
"Contact Number",
"+1 (555) 123-4567"
formData.country ? `${COUNTRY_CODES[formData.country] || "+"} (XXX) XXX-XXXX` : "+XX (XXX) XXX-XXXX"
)}
</div>
</div>
@@ -728,8 +751,8 @@ const ProjectFormSection = () => {
{!formData.agreeTerms && !isRecaptchaVerified
? "Please agree to terms and complete verification to submit"
: !formData.agreeTerms
? "Please agree to terms and conditions to submit"
: "Please complete the security verification to submit"}
? "Please agree to terms and conditions to submit"
: "Please complete the security verification to submit"}
</p>
)}
</div>