import { useState } from "react"; import {Accordion, Button, Col, Container, Form, Image, Modal, Row, Stack, Tab, Tabs, ListGroupItem } from "react-bootstrap"; import ReCAPTCHA from "react-google-recaptcha"; interface FormValues { name: string; email: string; phoneNumber: string; service: string; requirements: string; captchaToken: string | null; } const HomeOurProcess = () => { const [show, seShow] = useState(false); const [loading, setLoading] = useState(false); const [hiredeveloperform, sethiredeveloperform] = useState({ name: "", email: "", phoneNumber: "", service: "", requirements: "", captchaToken: null }); const [errors, seterrors] = useState({ name: "", email: "", phoneNumber: "", service: "", requirements: "", captchaToken: null }); const handleCaptchaChange = (token: string | null) => { sethiredeveloperform((prevFormData) => ({ ...prevFormData, captchaToken: token, })); seterrors((prevErrors) => ({ ...prevErrors, captchaToken: null, // Clear the error })); setResponse(null); }; const [response, setResponse] = useState<{ status: string; message: string } | null>(null); const handleShow = () => { seShow(true) } const handleClose = () => { seShow(false); sethiredeveloperform({ name: "", email: "", phoneNumber: "", service: "", requirements: "", captchaToken: null }); seterrors({ name: "", email: "", phoneNumber: "", service: "", requirements: "", captchaToken: null }) } const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; let updatedValue = value.replace(/<[^>]*>/g, ""); if (name === "name") { updatedValue = updatedValue.replace(/[0-9]/g, ""); } if (name === "phoneNumber") { updatedValue = updatedValue.replace(/[^\d+]/g, ""); } sethiredeveloperform({ ...hiredeveloperform, [name]: updatedValue }); seterrors((prev) => ({ ...prev, [name]: "" })); }; const handleFocus = (e: React.FocusEvent) => { seterrors((prev: any) => ({ ...prev, [e.target.name]: '', })); }; const handleHireDeveloperForm = async (e: React.FormEvent) => { e.preventDefault(); const newErrors: typeof errors = { name: "", email: "", phoneNumber: "", service: "", requirements: "", captchaToken: "" }; sethiredeveloperform((prev) => ({ ...prev, name: prev.name.trim(), email: prev.email.trim(), phoneNumber: prev.phoneNumber.trim(), service: prev.service.trim(), requirements: prev.requirements.trim(), })) if (!hiredeveloperform.name.trim()) { newErrors.name = "Please Enter Your Name"; } if(!hiredeveloperform.email.trim()){ newErrors.email = 'Please Enter Your Email' } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(hiredeveloperform.email)) { newErrors.email = "Please enter a valid email address"; } if (!hiredeveloperform.phoneNumber.trim()) { newErrors.phoneNumber = "Please Enter your Phone Number"; } else if (hiredeveloperform.phoneNumber.length < 10) { newErrors.phoneNumber = "Please Enter up to 10 digits"; } if (!hiredeveloperform.service.trim()) { newErrors.service = "Please select your service."; } if (!hiredeveloperform.requirements.trim()) { newErrors.requirements = "Please enter your requirements"; } if (!hiredeveloperform.captchaToken) { newErrors.captchaToken = "Please Validate the Captcha"; } seterrors(newErrors); if (Object.values(newErrors).some((error) => error)) return; const formData = new FormData(); formData.append("name", hiredeveloperform.name); formData.append("email", hiredeveloperform.email); formData.append("phoneNumber", hiredeveloperform.phoneNumber); formData.append("service", hiredeveloperform.service); formData.append("requirements", hiredeveloperform.requirements); if (hiredeveloperform.captchaToken) { formData.append("captcha", hiredeveloperform.captchaToken); } setLoading(true); try { const response = await fetch(`${process.env.REACT_APP_HIRE_DEVELOPER_API}`, { method: "POST", body: formData, }); const result = await response.json(); if (result.status === 'true') { setResponse(result); sethiredeveloperform({ name: "", email: "", phoneNumber: "", service: "", requirements: "", captchaToken: null }); setTimeout(() => { setResponse(null); window.location.reload(); }, 5000); const items = document.querySelectorAll('.form-field .form-label'); items.forEach((item) => { if (item.classList.contains('label-view')) { item.classList.remove('label-view'); } }); } else { setResponse(result); setTimeout(() => { setResponse(null); }, 5000) } } catch (error) { setResponse({ status: "false", message: "Something went wrong. Please try again." }); setTimeout(() => { setResponse(null); },5000) } finally { setLoading(false); } }; const handlelabel = (event: React.FormEvent) => { const inputElement = event.currentTarget; const fieldName = inputElement.getAttribute("name"); const labelElement = document.querySelector(`label[data-name=${fieldName}]`) if(labelElement) { if(inputElement.value !== "") { labelElement.classList.add('label-view') } else { labelElement.classList.remove('label-view') } } } return (

Our Process

Step 1 Give Us Your Requirement

Your journey with us begins by sharing your requirements. Our dedicated Business Analyst (BA) works closely with you to understand your needs, ensuring every detail is meticulously captured.

STEP 2 Tailored Team Assembly

Tailored team assembly is the strategic process of building customized teams that align with specific project requirements. By carefully selecting individuals based on their skills, experience, and expertise, organizations can ensure efficient collaboration and enhanced productivity.

STEP 3 Seamless Project Execution

Seamless project execution refers to the smooth and efficient management of tasks, resources, and timelines to deliver successful project outcomes. It involves clear planning, effective communication, and proactive problem-solving to ensure every phase of the project runs without disruptions.

Get In Touch

Full Name {errors.name} Email Address {errors.email} Phone Number {errors.phoneNumber} Select Your Service {errors.service} Describe Your Requirements {errors.requirements} {errors.captchaToken ? ( {errors.captchaToken} ) : null}

) } export default HomeOurProcess