From dae46b6c52d1a2bd3278e367588183d5eb15c566 Mon Sep 17 00:00:00 2001 From: Saksham-Chauhan Date: Sat, 3 Dec 2022 14:02:54 +0530 Subject: [PATCH] feat:added response modal --- assets/index.ts | 2 + components/ThankModal.tsx | 103 +++++ .../pages-components/jobs/ApplyModal.tsx | 373 +++++++++++++++++ .../pages-components/jobs/DetailsModal.tsx | 178 +++++++++ components/pages-components/jobs/Job.tsx | 376 ++---------------- .../pages-components/jobs/LandingSection.tsx | 1 + components/pages-components/jobs/Modal.tsx | 3 - components/pages-components/jobs/Timeline.tsx | 2 +- .../project-page-components/ButtonsGroup.tsx | 12 +- helper/constant.ts | 3 +- package-lock.json | 68 +++- package.json | 1 + pages/Jobs.tsx | 2 +- public/images/okay.svg | 4 + .../uploads/449aecc67028d3372f6bcc818d97085b | Bin 0 -> 21642 bytes .../uploads/51bcdf1523817221245e9d78730946ea | Bin 0 -> 21642 bytes .../uploads/5e55381540c179201419adbcdeff828a | Bin 0 -> 21642 bytes .../uploads/84028238c2db838c4183f03c7b1a5c34 | Bin 0 -> 21642 bytes .../uploads/9c68518244413fc7777fbfd88ee4ae1b | Bin 0 -> 21642 bytes .../uploads/cff5fae051791b1cd468351b9b9d9690 | Bin 0 -> 21642 bytes sections/Testmonials.tsx | 13 +- styles/globals.css | 35 +- 22 files changed, 808 insertions(+), 368 deletions(-) create mode 100644 components/ThankModal.tsx create mode 100644 components/pages-components/jobs/ApplyModal.tsx create mode 100644 components/pages-components/jobs/DetailsModal.tsx create mode 100644 public/images/okay.svg create mode 100644 public/uploads/449aecc67028d3372f6bcc818d97085b create mode 100644 public/uploads/51bcdf1523817221245e9d78730946ea create mode 100644 public/uploads/5e55381540c179201419adbcdeff828a create mode 100644 public/uploads/84028238c2db838c4183f03c7b1a5c34 create mode 100644 public/uploads/9c68518244413fc7777fbfd88ee4ae1b create mode 100644 public/uploads/cff5fae051791b1cd468351b9b9d9690 diff --git a/assets/index.ts b/assets/index.ts index 26bcec7..827f11e 100644 --- a/assets/index.ts +++ b/assets/index.ts @@ -65,6 +65,7 @@ import tealBenefits from "../public/images/teal-benefits.svg"; import tealWorkers from "../public/images/teal-workers.svg"; import tealAwards from "../public/images/teal-awards.svg"; import tealWorkspace from "../public/images/teal-workspace.svg"; +import okay from "../public/images/okay.svg"; // Assets for technologies components @@ -235,4 +236,5 @@ export { tealWorkers, tealAwards, tealWorkspace, + okay, }; diff --git a/components/ThankModal.tsx b/components/ThankModal.tsx new file mode 100644 index 0000000..d45fc3f --- /dev/null +++ b/components/ThankModal.tsx @@ -0,0 +1,103 @@ +import React, { useEffect } from "react"; +import Button from "./Button"; +import GradientText from "./GradientText"; +import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"; +import Modal from "react-modal"; +import Image from "next/image"; +import { okay } from "../assets"; +import { useRouter } from "next/router"; + +const customStyles = { + content: { + top: "10%", + background: "#20222A", + width: "fit-content", + marginRight: "auto", + marginLeft: "auto", + zIndex: "10", + border: "2px solid #00A99D", + borderRadius: "2rem", + padding: "4% 10%", + }, +}; + +interface Props { + isShow: boolean; + toogleThankModal: () => void; +} +const ThankModal = ({ isShow, toogleThankModal }: Props) => { + const router = useRouter(); + const onAfterOpen = () => { + disableBodyScroll(document); + }; + useEffect(() => { + Modal.setAppElement("body"); + }); + const closeModal = () => { + enableBodyScroll(document); + toogleThankModal(); + }; + return ( + +
+ {/* {okay} */} + + + + + + +
+

+ Your submission has been recieved. +

+

+ We will be in touch and contact you soon. +

+
+
+
+
+ + ); +}; + +export default ThankModal; diff --git a/components/pages-components/jobs/ApplyModal.tsx b/components/pages-components/jobs/ApplyModal.tsx new file mode 100644 index 0000000..f428b83 --- /dev/null +++ b/components/pages-components/jobs/ApplyModal.tsx @@ -0,0 +1,373 @@ +import { Formik, FormikHelpers } from "formik"; +import Image from "next/image"; +import React, { useEffect, useState } from "react"; +import Modal from "react-modal"; +import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"; + +import { add, locationTeal, work } from "../../../assets"; +import { useSetDataOnServer } from "../../../helper/careerHooks"; +import { jobValidationSchema } from "../../../helper/validate"; +import { sendCandidateDetails } from "../../../helper/webhook"; +import Button from "../../Button"; +import Divider from "../../Divider"; +import GradientText from "../../GradientText"; +import InputBox from "../../InputBox"; +import SelectBox from "../../SelectBox"; +import TextArea from "./TextArea"; +import { PropagateLoader } from "react-spinners"; + +interface initialState { + email: string; + mobile: string; + fName: string; + lName: string; + joiningIn: string; + linkedIn?: string; + portfolioURL?: string; + hiringReason?: string; + joiningReason?: string; +} + +const initialValue: initialState = { + email: "", + fName: "", + lName: "", + mobile: "", + joiningIn: "", + linkedIn: "", + portfolioURL: "", + hiringReason: "", + joiningReason: "", +}; + +const customStyles = { + content: { + top: "10%", + background: "#20222A", + width: "70%", + marginRight: "auto", + marginLeft: "auto", + zIndex: "10", + border: "2px solid #00A99D", + }, +}; + +interface Props { + showModal: { + viewDetails: boolean; + apply: boolean; + }; + setShowModal: (prop: any) => void; + toogleDetailModal: () => void; + toogleApplyModal: () => void; + toogleThankModal: () => void; +} + +const ApplyModal = ({ + showModal, + setShowModal, + toogleDetailModal, + toogleApplyModal, + toogleThankModal, +}: Props) => { + const [resume, setResume] = useState(null); + const [isShowLoader, setIsShowLoader] = useState(false); + const sendData = useSetDataOnServer(); + + const handleSubmit = async ( + value: initialState, + helper: FormikHelpers + ) => { + if (resume == null) { + window.alert("Please upload resume"); + return; + } + setIsShowLoader(true); + + const formdata = new FormData(); + formdata.append("file", resume); + + const requestOptions: any = { + method: "POST", + body: formdata, + redirect: "follow", + }; + try { + const response = await fetch( + "http://localhost:3000/api/", + requestOptions + ); + const data = await response.text(); + const { result } = JSON.parse(data); + // TODO=> Remove in Production + if (result) { + console.log(result); + closeModal(); + toogleThankModal(); + } + await sendCandidateDetails({ + ...value, + downloadLink: result, + }); + const res = await sendData("apply", { + first_name: value?.fName, + last_name: value?.lName, + email: value?.email, + phone_number: value?.mobile, + resume: result, + job_applied: 1, + hiring_reason: value?.hiringReason, + // joining_preference: value?.joiningReason, + joining_reason: value?.joiningReason, + linkedin_url: value?.linkedIn, + portfolio_url: value?.portfolioURL, + }); + if (res.status === 200) { + // window.alert("Successfully applied!"); + closeModal(); + toogleThankModal(); + } + setResume(null); + setIsShowLoader(false); + // toogleApplyModal(); + } catch (error: any) { + setIsShowLoader(false); + console.warn(error.message); + } + }; + + const handleResumeChange = (e: React.ChangeEvent) => { + const { + target: { files }, + } = e; + setResume(files[0]); + }; + + const closeModal = () => { + enableBodyScroll(document); + setShowModal((p: any) => { + return { + ...p, + apply: !p.apply, + }; + }); + }; + + const onAfterOpen = () => { + disableBodyScroll(document); + }; + + const handleViewDetails = () => { + toogleDetailModal(); + toogleApplyModal(); + }; + + useEffect(() => { + Modal.setAppElement("body"); + }); + + return ( + + + {({ handleChange, handleSubmit, handleBlur, errors, values }) => ( + +
+
+ +
+
+ + Dehradun, Uttrakhand +
+
+ + Full Time +
+
+

+ Posted 2 weeks ago +

+
+
+
+ + +
+
+
+ +

+ {resume?.name ? resume?.name : "Upload Resume"} +

+

+ Drop resume here or click to upload +

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ { + const { name, value } = obj; + handleChange("joiningIn")(value); + }} + errorText={errors.joiningIn} + /> +
+
+ +
+
+ +
+ +
+ +