generated from ReCoded-Org/capstone-react-redux-template
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* finish first div * Finish getin touch form componet * change colors * Add componet * I am done with this task * I had a mistake but iam fixed know it's ok * last update * change branch * Finish contact form email functionality * Working on validation not working * Form validation not work when I send an email if the feld is empty i can send a message * Adding snapshot jest test * solve deployment faile * just commited * Finally I finish this task now evrything is ok * fixed test problems Co-authored-by: Allan <[email protected]> Co-authored-by: allan <[email protected]>
- Loading branch information
3 people
authored
Nov 6, 2022
1 parent
ea48a3b
commit e6398e7
Showing
6 changed files
with
533 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,236 @@ | ||
| import { useForm } from 'react-hook-form'; | ||
|
|
||
| import { yupResolver } from '@hookform/resolvers/yup'; | ||
|
|
||
| import React, { useRef } from 'react'; | ||
|
|
||
| import emailjs from '@emailjs/browser'; | ||
|
|
||
| import * as yup from 'yup'; | ||
|
|
||
| export default function GetInTouchForm() { | ||
| const schema = yup.object().shape({ | ||
| firstName: yup.string().required('Your Full Name is Required!'), | ||
| lastName: yup.string().required('Your Last Name is Required!'), | ||
| email: yup.string().email().required('Your Email is Required!'), | ||
| message: yup.string().required('Your Message is Required!'), | ||
| }); | ||
|
|
||
| const { | ||
| register, | ||
| handleSubmit, | ||
| formState: { errors }, | ||
| } = useForm({ | ||
| resolver: yupResolver(schema), | ||
| }); | ||
|
|
||
| const form = useRef(); | ||
|
|
||
| const sendEmail = () => { | ||
| console.log('hey'); | ||
| // e.preventDefault(); | ||
|
|
||
| emailjs | ||
| .sendForm( | ||
| 'service_21dgncx', | ||
| 'template_o6d93pf', | ||
| form.current, | ||
| 'THcaIEhH6x_Hp_92h' | ||
| ) | ||
| .then( | ||
| (result) => { | ||
| console.log(result.text); | ||
| }, | ||
| (error) => { | ||
| console.log(error.text); | ||
| } | ||
| ); | ||
| form.current.reset(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex justify-center my-[100px] gap-3 small:flex-col "> | ||
| <div className="flex-1 justify-center m-5 small:m-5"> | ||
| <h1 className="text-4xl subpixel-antialiased text-slate-600 font-semibold"> | ||
| {' '} | ||
| Get in touch | ||
| </h1> | ||
| <form | ||
| className="flex flex-col gap-3 mt-10" | ||
| ref={form} | ||
| onSubmit={handleSubmit(sendEmail)} | ||
| > | ||
| <div className="flex flex-col gap-3"> | ||
| <div className="flex flex-auto justify-center gap-2 small:flex-col medium:flex-col"> | ||
| <label className="flex flex-col" htmlFor="name"> | ||
| {' '} | ||
| <p className="text-left text-lg subpixel-antialiased text-slate-600 font-semibold"> | ||
| Name{' '} | ||
| </p> | ||
| <input | ||
| className="px-6 py-2 border-2 border-gray-900" | ||
| type="text" | ||
| placeholder="Name" | ||
| name="firstName" | ||
| {...register('firstName')} | ||
| id="n44ame" | ||
| /> | ||
| <p className="text-sm text-red-500 text-left"> | ||
| {errors?.firstName?.message} | ||
| </p> | ||
| </label> | ||
| <label className="flex flex-col" htmlFor="name"> | ||
| {' '} | ||
| <p className="text-left text-lg subpixel-antialiased text-slate-600 font-semibold"> | ||
| {' '} | ||
| Last name{' '} | ||
| </p> | ||
| <input | ||
| className="px-6 py-2 border-2 border-gray-900" | ||
| type="text" | ||
| name="lastName" | ||
| placeholder="Last Name" | ||
| {...register('lastName')} | ||
| id="nam3e" | ||
| /> | ||
| <p className="text-sm text-red-500 text-left"> | ||
| {errors?.lastName?.message} | ||
| </p> | ||
| </label>{' '} | ||
| </div> | ||
| </div> | ||
| <div className="mx-[125px] small:mx-0 medium:mx-0"> | ||
| {' '} | ||
| <label htmlFor="email" className="flex justify-center flex-col "> | ||
| <p className="text-left text-lg subpixel-antialiased text-slate-600 font-semibold"> | ||
| Email : | ||
| </p> | ||
| <input | ||
| className="px-3 py-2 border-2 border-gray-900" | ||
| name="email" | ||
| placeholder="[email protected]" | ||
| type="text" | ||
| {...register('email')} | ||
| id="name1" | ||
| /> | ||
| <p className="text-sm text-red-500 text-left"> | ||
| {errors?.email?.message} | ||
| </p> | ||
| </label> | ||
| </div> | ||
| <div className="mx-[125px] small:mx-0 medium:mx-0"> | ||
| {' '} | ||
| <label htmlFor="email" className="flex justify-center flex-col "> | ||
| <p className="text-left text-lg subpixel-antialiased text-slate-600 font-semibold"> | ||
| Message : | ||
| </p> | ||
| <textarea | ||
| className="border-2 border-gray-900" | ||
| {...register('message')} | ||
| name="message" | ||
| cols="30" | ||
| rows="3" | ||
| /> | ||
|
|
||
| <p className="text-sm text-red-500 text-left"> | ||
| {errors?.message?.message} | ||
| </p> | ||
| </label> | ||
| </div> | ||
|
|
||
| <div className="flex justify-start"> | ||
| <button | ||
| type="submit" | ||
| className="bg-accent ml-[150px] mt-5 text-white font-bold hover:bg-red-500 py-3 px-8 rounded-full small:ml-0 medium:ml-0" | ||
| > | ||
| Send | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
|
|
||
| <div className="flex-1 m-5 "> | ||
| <h1 className="text-4xl subpixel-antialiased text-slate-600 font-semibold mb-10"> | ||
| Contact Us | ||
| </h1> | ||
|
|
||
| <div className=" flex-col text-2xl text-center gap-10"> | ||
| <div className="flex flex-row justify-center gap-3 mb-7"> | ||
| {' '} | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" | ||
| /> | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" | ||
| /> | ||
| </svg> | ||
| <p>As Sulaimaniyah ,Iraq </p>{' '} | ||
| </div> | ||
| <div className="flex flex-row justify-center gap-3 mb-7"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" | ||
| /> | ||
| </svg> | ||
| <p> +964 750 113 0495 </p>{' '} | ||
| </div> | ||
| <div className="flex flex-row justify-center gap-3 mb-7"> | ||
| {' '} | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" | ||
| /> | ||
| </svg> | ||
| <p> [email protected] </p>{' '} | ||
| </div> | ||
| <div className="flex flex-row justify-center gap-3 mb-7 "> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" | ||
| /> | ||
| </svg> | ||
| <p>9:00 - 17:00</p>{' '} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React from 'react'; | ||
| import renderer from 'react-test-renderer'; | ||
|
|
||
| import GetInTouchForm from './GetInTouchForm'; | ||
|
|
||
| it('renders Get in touch form corectlly correctly', () => { | ||
| const tree = renderer.create(<GetInTouchForm />).toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); |
Oops, something went wrong.