api intergration

2024-09-25 13:49:58 +05:30
parent 0298122dad
commit f360679ec9
5 changed files with 167 additions and 45 deletions
--- a/src/components/Form.jsx
+++ b/src/components/Form.jsx
@@ -23,11 +23,16 @@ import { FiPaperclip } from "react-icons/fi";
 import captcha from "../assets/captcha.png";
 import axios from "axios";
 import ReCAPTCHA from "react-google-recaptcha";
+import { Spinner } from "@chakra-ui/react";
+import { TbNumber2Small } from "react-icons/tb";

 const Form = () => {
  const [sliderValue, setSliderValue] = useState(0);
  const [fileAdded, setFileAdded] = useState(false);
  const [captchaToken, setCaptchaToken] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(null);
+  const [formError, setformError] = useState(null);

  const {
    register,
@@ -35,31 +40,54 @@ const Form = () => {
    formState: { errors },
    setValue,
    trigger,
+    reset,
  } = useForm();

-  const onSubmit = (data) => {
-    if (!captchaToken) {
-      console.log("Please complete the CAPTCHA");
-      return;
-    }
+  const onSubmit = async (data) => {
+    // if (!captchaToken) {
+    //   console.log("Please complete the CAPTCHA");
+    //   return;
+    // }

    const formData = { ...data, captchaToken };
+    console.log(formData);
+    setLoading(true);
+    setformError(null);

    try {
-      const response = axios.post("/api/submit", formData, {
+      const response = await axios.post(
+        "https://contact.wdipl.com/api/v1/mails/client-enquiry-for-idea",
+        formData,
+        {
          headers: {
            "Content-Type": "application/json",
          },
-      });
-      console.log(response.data); // Handle the response from the backend
+        }
+      );
+      console.log(response);
+
+      if (response.status === 200) {
+        console.log(response);
+        setSuccess("Your message has been sent successfully");
+        setformError(null);
+        reset();
+        setSliderValue(0);
+      } else {
+        setformError("Failed to send message");
+      }
    } catch (error) {
      console.error("Error submitting the form", error);
+      setformError("There was an error submitting the form.");
+    } finally {
+      setTimeout(() => {
+        setLoading(false);
+      }, 3000);
    }
  };

  const onCaptchaChange = (value) => {
    setCaptchaToken(value);
-    console.log("Captcha value:", value); // The token to send to the backend
+    console.log("Captcha value:", value);
  };

  const handleClick = () => {
@@ -141,8 +169,8 @@ const Form = () => {
                },
                {
                  label: "Enter your contact number",
-                  type: "text",
-                  name: "contact",
+                  type: "number",
+                  name: "contactnumber",
                },
              ].map((field, index) => (
                <Box w="100%" key={index}>
@@ -183,7 +211,7 @@ const Form = () => {
                {
                  label: "Where did you hear about us? *",
                  options: ["Source 1", "Source 2", "Source 3"],
-                  name: "source",
+                  name: "aboutus",
                },
              ].map((selectField, index) => (
                <Box w="100%" key={index + 3}>
@@ -220,7 +248,7 @@ const Form = () => {
                Tell us about your project and business challenge.
              </FormLabel>
              <Textarea
-                {...register("projectDetails", {
+                {...register("project_challenges", {
                  required: "Project details are required",
                })}
                border="1px solid #E5195E"
@@ -230,9 +258,9 @@ const Form = () => {
                color="white"
                minH="65px"
              />
-              {errors.projectDetails && (
+              {errors.project_challenges && (
                <Text color="red.400" mt={2}>
-                  {errors.projectDetails.message}
+                  {errors.project_challenges.message}
                </Text>
              )}
            </Box>
@@ -250,7 +278,7 @@ const Form = () => {
                  When would you like to start
                </FormLabel>
                <Select
-                  {...register("startDate", {
+                  {...register("would_like_start", {
                    required: "Start date is required",
                  })}
                  border="1px solid #E5195E"
@@ -262,9 +290,9 @@ const Form = () => {
                  <option value="option2">Option 2</option>
                  <option value="option3">Option 3</option>
                </Select>
-                {errors.startDate && (
+                {errors.would_like_start && (
                  <Text color="red.400" mt={2}>
-                    {errors.startDate.message}
+                    {errors.would_like_start.message}
                  </Text>
                )}
              </Box>
@@ -401,10 +429,10 @@ const Form = () => {
                </Text>
              )} */}
              <Box>
-                <ReCAPTCHA
+                {/* <ReCAPTCHA
                  sitekey="6LcAjUYqAAAAALCkNuAJKR3tT1D1QqWzXo-MECPE"
                  onChange={onCaptchaChange}
-                />
+                /> */}
              </Box>
            </Box>

@@ -417,8 +445,21 @@ const Form = () => {
                borderRadius="0px"
                type="submit"
                onClick={handleSubmit(onSubmit)}
+                isLoading={loading}
+                _hover={{ bg: "#D41554" }}
+                disabled={loading} // Disable button when loading
              >
-                Submit
+                {loading ? (
+                  <Spinner
+                    thickness="4px"
+                    speed="0.65s"
+                    emptyColor="gray.200"
+                    color="blue.500"
+                    size="xl"
+                  />
+                ) : (
+                  "Submit"
+                )}
              </Button>
            </Box>
          </FormControl>
--- a/src/components/OS/AIML.jsx
+++ b/src/components/OS/AIML.jsx
@@ -15,9 +15,7 @@ const techStack = [
  // { name: "Tableau", image: tableau },
  // { name: "Machine Learning", image: machineLearning },
 ];
-const backend = [
-  { name: "java", image: java },
-];
+const backend = [{ name: "java", image: java }];

 const Hybrid = () => {
  return (
@@ -53,7 +51,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -81,7 +85,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -116,7 +126,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} w="45.31px" h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
--- a/src/components/OS/Android.jsx
+++ b/src/components/OS/Android.jsx
@@ -56,7 +56,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -84,7 +90,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -119,7 +131,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} w="45.31px" h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -147,7 +165,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} w="45.31px" h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
--- a/src/components/OS/Hybrid.jsx
+++ b/src/components/OS/Hybrid.jsx
@@ -6,8 +6,8 @@ import codeIgniter from "../../assets/codeigniter.png";
 import java from "../../assets/java.png";
 import angular from "../../assets/anugular.png";
 import vue from "../../assets/vue.png";
-import lavarel from "../../assets/lavarel.png"
-import nodejs from "../../assets/nodejs.png"
+import lavarel from "../../assets/lavarel.png";
+import nodejs from "../../assets/nodejs.png";
 import fluter from "../../assets/fluter.png";
 import reactNative from "../../assets/reactNative.png";
 const techStack = [
@@ -21,7 +21,6 @@ const techStack = [
  { name: "Fluter", image: fluter },
 ];

-
 const backEnd = [
  // { name: "lavarel", image: lavarel },
  // { name: "node", image: nodejs },
@@ -65,7 +64,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} w="45.31px" h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -93,7 +98,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} w="45.31px" h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -128,7 +139,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} w="45.31px" h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
--- a/src/components/OS/IOS.jsx
+++ b/src/components/OS/IOS.jsx
@@ -57,7 +57,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -85,7 +91,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -120,7 +132,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} w="45.31px" h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -148,7 +166,13 @@ const Hybrid = () => {
              justifyContent="space-between"
              alignItems="center"
              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+              _hover={{
+                filter: "grayscale(0%)",
+                bgColor: "#1F1F1F",
+                transform: "translateY(-5px)",
+                transitionDuration: "0.4s",
+                transitionTimingFunction: "ease-in-out",
+              }}
            >
              <Image src={tech.image} w="45.31px" h="50px" />
              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">