-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #119 from she-code-africa/enquiry-p
feat(enquiry page): build the UI for contact us page.
- Loading branch information
Showing
9 changed files
with
287 additions
and
24 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,49 @@ | ||
| import React from "react"; | ||
|
|
||
| const PrimaryInput = ({ | ||
| label, | ||
| name, | ||
| type, | ||
| placeholder, | ||
| register, | ||
| errors, | ||
| isRequired = true, | ||
| }) => { | ||
| return ( | ||
| <div className="w-full md:max-w-[455px] mb-6"> | ||
| <label | ||
| htmlFor={name} | ||
| className="text-base capitalize font-medium text-[rgba(46,52,79,1)]" | ||
| > | ||
| {label} | ||
| </label> | ||
|
|
||
| <div | ||
| className={`w-full rounded-md border border-gains h-[50px] overflow-hidden mt-2 ${ | ||
| errors && "border-primary-main-pink" | ||
| }`} | ||
| > | ||
| {isRequired ? ( | ||
| <input | ||
| type={type} | ||
| placeholder={placeholder} | ||
| {...register(name)} | ||
| className="text-base w-full h-full border-0 outline-none px-3 bg-white placeholder:text-[rgba(130,130,130,1)]" | ||
| /> | ||
| ) : ( | ||
| <input | ||
| type={type} | ||
| placeholder={placeholder} | ||
| className="text-base w-full h-full border-0 outline-none px-3 bg-white placeholder:text-[rgba(130,130,130,1)]" | ||
| /> | ||
| )} | ||
| </div> | ||
|
|
||
| <p className="text-primary-main-pink text-sm"> | ||
| {errors && errors?.message} | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PrimaryInput; |
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 |
|---|---|---|
|
|
@@ -50,10 +50,10 @@ const CodeOfConduct = () => { | |
| <div className="code-of-conduct"> | ||
| <p> | ||
| <span className="font-weight-bolder">She Code Africa (SCA)</span>{" "} | ||
| is dedicated to providing a harassment-free experience for African women and girls, | ||
| regardless of gender, gender identity and expression, | ||
| sexual orientation, disability, physical appearance, body size, | ||
| age, or religion. We do not tolerate harassment of | ||
| is dedicated to providing a harassment-free experience for African | ||
| women and girls, regardless of gender, gender identity and | ||
| expression, sexual orientation, disability, physical appearance, | ||
| body size, age, or religion. We do not tolerate harassment of | ||
| participants in any form. This code of conduct applies to all She | ||
| Code Africa spaces, including Slack, both online and off. Anyone | ||
| who violates this code of conduct may be sanctioned or expelled | ||
|
|
@@ -69,10 +69,17 @@ const CodeOfConduct = () => { | |
| ban from the community. | ||
| </p> | ||
| <p> | ||
| If you believe someone is violating the code of conduct, we ask that | ||
| you report it by emailing | ||
| If you believe someone is violating the code of conduct, we ask | ||
| that you report it by emailing | ||
| <strong className="font-weight-bolder"> | ||
| <a href="mailto:[email protected]" target="_blank" rel="noreferrer" className="focus:outline-none focus:ring focus:ring-tutu">[email protected]</a> | ||
| <a | ||
| href="mailto:[email protected]" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="focus:outline-none focus:ring focus:ring-tutu" | ||
| > | ||
| [email protected] | ||
| </a> | ||
| </strong> | ||
| . For more details please see our Reporting Guidelines . | ||
| <br /> | ||
|
|
@@ -92,8 +99,8 @@ const CodeOfConduct = () => { | |
| <li> | ||
| Offensive comments related to gender, gender identity and | ||
| expression, sexual orientation, disability, mental illness, | ||
| neuro(a)typicality, physical appearance, body size, age, | ||
| or religion. | ||
| neuro(a)typicality, physical appearance, body size, age, or | ||
| religion. | ||
| </li> | ||
| <li> | ||
| Unwelcome comments regarding a person's lifestyle choices and | ||
|
|
@@ -151,8 +158,7 @@ const CodeOfConduct = () => { | |
| </strong> | ||
| <ul className="pl-10"> | ||
| <li> | ||
| “Reverse”-isms, including “reverse sexism,” | ||
| and “cisphobia.” | ||
| “Reverse”-isms, including “reverse sexism,” and “cisphobia.” | ||
| </li> | ||
| <li> | ||
| Reasonable communication of boundaries, such as “leave me | ||
|
|
@@ -163,8 +169,8 @@ const CodeOfConduct = () => { | |
| focusing on responding to the content or disengaging instead) | ||
| </li> | ||
| <li> | ||
| Criticizing sexist, cissexist, or otherwise oppressive | ||
| behavior or assumptions | ||
| Criticizing sexist, cissexist, or otherwise oppressive behavior | ||
| or assumptions | ||
| </li> | ||
| </ul> | ||
| <strong> | ||
|
|
||
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,159 @@ | ||
| import React from "react"; | ||
| import { Helmet } from "react-helmet-async"; | ||
| import Header from "../../components/Header"; | ||
| import Footer from "../../components/Footer"; | ||
| import PrimaryInput from "../../components/ContactUs/inputs/PrimaryInput"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { yupResolver } from "@hookform/resolvers/yup"; | ||
| import * as yup from "yup"; | ||
| import { toast } from "react-toastify"; | ||
| import { useMutation } from "@tanstack/react-query"; | ||
| import { mutateEnquires } from "../../services"; | ||
|
|
||
| const ContactUsPage = () => { | ||
| const schema = yup | ||
| .object({ | ||
| fullName: yup.string().required("Please enter your name"), | ||
| email: yup | ||
| .string() | ||
| .email("Please enter a valid email address.") | ||
| .required("Please enter your email address."), | ||
| description: yup.string().required("Please enter your message."), | ||
| }) | ||
| .required(); | ||
|
|
||
| const { | ||
| register, | ||
| handleSubmit, | ||
| formState: { errors }, | ||
| } = useForm({ | ||
| resolver: yupResolver(schema), | ||
| }); | ||
| const { mutate: handleContactUs } = useMutation(mutateEnquires, { | ||
| onSuccess: (data) => { | ||
| toast.success("Message sent Successfully!", { | ||
| position: toast.POSITION.TOP_RIGHT, | ||
| }); | ||
| }, | ||
| onError: (error, variables) => { | ||
| toast.error("An error occurred.", { | ||
| position: toast.POSITION.TOP_RIGHT, | ||
| }); | ||
| }, | ||
| }); | ||
| const onsubmit = (data) => handleContactUs(data); | ||
| return ( | ||
| <> | ||
| <Helmet> | ||
| <meta charSet="utf-8" /> | ||
| <title>Contact Page</title> | ||
| <meta | ||
| name="description" | ||
| content="Get free access to events focused on empowering and getting more young girls and women into technology across cities and tertiary institutions in Africa." | ||
| /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta property="og:title" content="Events" /> | ||
| <meta | ||
| property="og:description" | ||
| content="Get free access to events focused on empowering and getting more young girls and women into technology across cities and tertiary institutions in Africa." | ||
| /> | ||
| <meta name="twitter:title" content="Events" /> | ||
| <meta | ||
| name="twitter:description" | ||
| content="Get free access to events focused on empowering and getting more young girls and women into technology across cities and tertiary institutions in Africa." | ||
| /> | ||
| </Helmet> | ||
| <Header /> | ||
| <main className=" text-secondary-main-black"> | ||
| <section className=" bg-primary-main-pink pt-16 md:pt-24 lg:pt-28"> | ||
| <div className="w-90 mx-auto min-h-[541px] flex flex-col justify-center 2md:justify-between 2md:flex-row md:items-center event-hero gap-8 py-12 2md:py-0 px-3 sm:px-0 star-bg"> | ||
| <div className="w-full max-w-[832px] mx-auto"> | ||
| <h1 className="hero-heading capitalize font-bold text-[32px] md:text-[36px] 2md:text-[40px] text-center leading-[150%] mx-auto text-white"> | ||
| contact us | ||
| </h1> | ||
|
|
||
| <p className="text-base md:text-lg mt-4 text-center text-white font-medium w-[85%] lg:w-full lg:max-w-[676px] mx-auto"> | ||
| Thank you for your interest in She Code Africa. | ||
| </p> | ||
| <p className="text-base md:text-lg text-center text-white font-medium w-[85%] lg:w-full lg:max-w-[676px] mx-auto"> | ||
| Reach out to us. Send an email to{" "} | ||
| <a href="mailto:[email protected]" className="font-bold"> | ||
| [email protected] | ||
| </a>{" "} | ||
| or fill the form below and send. If you would like to support | ||
| our mission, please see our “partner with us” section. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section className="w-[90%] max-w-[900px] mx-auto mt-10 md:mt-12"> | ||
| <form className="w-full" onSubmit={handleSubmit(onsubmit)}> | ||
| <div className="flex flex-col md:flex-row gap-5 md:gap-20"> | ||
| <div className="w-full md:w-[50%]"> | ||
| <PrimaryInput | ||
| register={register} | ||
| label="name" | ||
| name="fullName" | ||
| placeholder="Enter your name" | ||
| type="text" | ||
| errors={errors.fullName} | ||
| /> | ||
| <PrimaryInput | ||
| register={register} | ||
| label="email address" | ||
| name="email" | ||
| placeholder="Enter your email address" | ||
| type="email" | ||
| errors={errors.email} | ||
| /> | ||
| <PrimaryInput | ||
| isRequired={false} | ||
| label="enter subject" | ||
| name="subject" | ||
| placeholder="What is the subject of this message" | ||
| type="text" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="w-full md:w-[50%]"> | ||
| <label | ||
| htmlFor="message" | ||
| className="text-base capitalize font-medium text-[rgba(46,52,79,1)]" | ||
| > | ||
| enter message | ||
| </label> | ||
| <div | ||
| className={`w-full md:max-w-[549px] h-[290px] mt-2 rounded-md border border-gains overflow-hidden ${ | ||
| errors.description?.message && "border-primary-main-pink" | ||
| }`} | ||
| > | ||
| <textarea | ||
| {...register("description")} | ||
| name="description" | ||
| placeholder="Write your message" | ||
| className="text-base w-full h-full border-0 outline-none p-3 bg-white placeholder:text-[rgba(130,130,130,1)] resize-none" | ||
| ></textarea> | ||
| </div> | ||
| <p className="text-primary-main-pink text-sm"> | ||
| {errors.description?.message} | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex md:justify-end w-full"> | ||
| <div className="mt-5 md:mt-8 w-full max-w-[177px] rounded-[30px] h-[56px] overflow-hidden bg-primary-main-pink"> | ||
| <button className="w-full h-full text-white capitalize"> | ||
| send message | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </section> | ||
| </main> | ||
| <Footer /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ContactUsPage; |
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
Oops, something went wrong.