CallBackRequest.js 8.44 KB
import Image from "next/image";
import React from "react";
import { Col, Container, Form, Row } from "react-bootstrap";
import Heading from "./Heading";
import { motion } from "framer-motion";
import { slideFromLeft } from "./variants";
import { useRouter } from "next/router";
import { useForm } from "react-hook-form";
import axios from "axios";
const CallBackRequest = () => {
  const {
    handleSubmit,
    control,
    formState: { errors },
    register,
    reset,
  } = useForm({
    mode: "onBlur",
  });

  // email api
  const router = useRouter();
  const onSubmit = async (data) => {
    const leadData = {
      mobilenumber: data.Mobile,
      email: data.Email,
      message: data.AdditionalMessage || "",
      name: data.Name,
      service: data.service,
      source: data.source,
    };
    console.log(leadData, "form-data");

    try {
      const response = await axios.post("/api/homegooglesheet", leadData, {
        headers: {
          "Content-Type": "application/json",
        },
      });
      console.log("Google Sheet API response:", response?.data);
      if (response.data.success) {
        router.push("/thank-you");
        sendEmaill(data);
      }
    } catch (error) {
      console.error(
        "Error submitting to Google Sheet API:",
        error.response ? error.response.data : error.message
      );
    }
    reset();
  };

  const sendEmaill = (data) => {
    fetch("/api/sendEmailHome", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
      .then((response) => {
        console.log("response received", response);
        if (response.status === 200) {
          console.log("response succeeded");
        } else {
          console.log("response failed");
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <>
      <div className="free-quote-area ptb-100">
        <Container>
          <Row className="align-items-center">
            <Col lg={6} md={12}>
              <div className="free-quote-image">
                <motion.div
                  variants={slideFromLeft(0.5)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.4 }}
                >
                  <Image
                    src="/images/calltoaction.webp"
                    layout="fill"
                    className="img-fluid image"
                    alt="image"
                  />
                </motion.div>
              </div>
            </Col>

            <Col lg={6} md={12}>
              <div className="free-quote-text">
                <Heading el="h2" heading="Write to Us!" />
                <span>
                  Have a quick question or need more information? Fill out the
                  form below, and we'll get back to you as soon as possible
                </span>
                <form onSubmit={handleSubmit(onSubmit)}>
                  <Row>
                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <label>Your Name</label>
                        <Form.Group>
                          <Form.Control
                            type="text"
                            className="form-control"
                            {...register("Name", {
                              required: "Enter Your Name",
                              maxLength: {
                                value: 100,
                                message: "Name is too long",
                              },
                            })}
                          />
                          {errors.Name && (
                            <span className="error">{errors.Name.message}</span>
                          )}

                          <Form.Control
                            required
                            type="text"
                            placeholder="Name"
                            defaultValue={"Home page form"} // Set defaultValue
                            className="text-dark d-none"
                            {...register("source", {})}
                          />
                        </Form.Group>
                      </div>
                    </Col>

                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <label>Your Email</label>
                        <Form.Group>
                        <Form.Control
                        required
                        type="text"
                         className="form-control" 
                         {...register("Email", {
                          required: "Enter Your Email",
                          pattern: {
                            value:
                              /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                            message: "Invalid email address",
                          },
                        })}
                      />
                        {errors.Email && (
                          <span className="error">{errors.Email.message}</span>
                        )}
                        </Form.Group>
                      </div>
                    </Col>

                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <label>Phone Number</label>
                        <Form.Group>
                        <Form.Control
                          required
                        type="text" 
                        className="form-control"
                        {...register("Mobile", {
                          required: "Enter Your Mobile Number",
                          maxLength: {
                            value: 10,
                            message: "Invalid Mobile number",
                          },
                        })}
                      />
                      {errors.Mobile && (
                        <span className="error">{errors.Mobile.message}</span>
                      )}
                    </Form.Group>
                      </div>
                    </Col>

                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <label>Services</label>
                        <Form.Group>
                          <Form.Control as="select"
                          required
                          type="select"
                          {...register("service", {
                            required: "Select Service",
                          })}
                          className="form-select">
          
                          <option disabled> Select Service</option>
                          <option value="Virtual FC & CFO Services">Virtual FC & CFO Services</option>
                          <option value="Transaction Advisory">Transaction Advisory</option>
                          <option value="Risk Advisory">Risk Advisory</option>
                          <option value="Business Advisory">Business Advisory</option>
                          <option value="Personal Tax">Personal Tax</option>
                          <option value="Corporate Tax" >Corporate Tax</option>
                          <option value="Company Law & FEMA">Company Law & FEMA</option>
                          <option value="Transfer Pricing">Transfer Pricing</option>
                          <option value="GST & other Indirect Tax">GST & other Indirect Tax</option>
                          <option value="Family Business Advisory">Family Business Advisory</option>
                          <option value="Others">Others</option>
                        </Form.Control>
                        {errors.service && (
                          <span className="error">{errors.service.message}</span>
                        )}
                        </Form.Group>
                      </div>
                    </Col>

                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <button type="submit" className="default-btn">
                          Submit
                          <i className="ri-arrow-right-line"></i>
                        </button>
                      </div>
                    </Col>
                  </Row>
                </form>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default CallBackRequest;