Skip to content

Commit

Permalink
Merge pull request #81 from SpaceyaTech/integrate-join-chapter
Browse files Browse the repository at this point in the history 
Kasyoki: Integrate join chapter
  • Loading branch information
@sonylomo
sonylomo authored Nov 16, 2023
2 parents 80fb3c6 + e6e86a2 commit 0c5bcda
Showing 1 changed file with 88 additions and 58 deletions.
146 changes: 88 additions & 58 deletions src/APP/pages/chapter/sections/WelcomeSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import usePostJoinChapter from "../../../../hooks/Queries/chapter/usePostJoinCha
function WelcomeSection({ chapter }) {
const [isOpen, setIsOpen] = useState(false);
const [Email, setEmail] = useState("");
const {
const {
setPostEmail: postJoinChapter,
error: joinChapterError,
clearError: clearJoinChapterError,
Expand All @@ -23,13 +23,21 @@ function WelcomeSection({ chapter }) {
}, []);

const validationSchema = Yup.object().shape({
email: Yup.string().email("Please enter a valid email address.").required("Email address is required."),
email: Yup.string()
.email("Please enter a valid email address.")
.required("Email address is required."),
});

const { register, control, setValue, handleSubmit, formState: { errors }} = useForm({
const {
register,
control,
setValue,
handleSubmit,
formState: { errors },
} = useForm({
mode: "onChange",
resolver: yupResolver(validationSchema),
})
});

function closeModal() {
setEmail("");
Expand Down Expand Up @@ -271,66 +279,88 @@ function WelcomeSection({ chapter }) {
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">

{statusJoinChapter === "success" ? (
<>
<div className="p-4 mb-4 text-base text-[#009975] rounded-lg dark:text-green-400" role="alert">
<span className="font-bold">Successfully joined {chapter.name} {chapter.city} Chapter!</span> Keep an eye on your email for updates on events, offers, and more.
</div>
<div className="flex flex-col items-center">
<button
type="button"
className="inline-flex justify-center rounded-md border border-[#009975] hover:text-white hover:bg-[#009975] px-4 py-2 text-sm font-medium text-[#009975] focus:outline-none focus-visible:ring-2"
onClick={closeModal}
>
Dismiss
</button>
</div>
<div
className="p-2 mb-4 rounded-lg text-base text-center"
role="alert"
>
<p className="text-[#009975] font-bold">
Successfully joined {chapter.name} {chapter.city}{" "}
Chapter!
</p>
<p className="text-xs text-gray-500 mt-2">
Keep an eye out for email updates on events, offers,
and more.
</p>
</div>
<div className="flex flex-col items-center">
<button
type="button"
className="inline-flex justify-center rounded-md border border-[#009975] hover:text-white hover:bg-[#009975] px-4 py-2 text-sm font-medium text-[#009975] focus:outline-none focus-visible:ring-2"
onClick={closeModal}
>
Dismiss
</button>
</div>
</>
) : (
<>
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Join {chapter.name} {chapter.city} Chapter
</Dialog.Title>
<form onSubmit={handleSubmit(handleEmailSubmit)} className="mt-8">
<input
type="email"
name="email"
className="mt-1 px-3 py-3 bg-white border shadow-sm border-[#79747E] placeholder-[#49454F] focus:outline-none focus:border-[#CCFFF3] focus:ring-[#009975] block w-full rounded sm:text-sm focus:ring-1"
placeholder="Your Email Address"
value={Email}
{...register('email', {onChange: (e) => {
setEmail(e.target.value);
joinChapterError && clearJoinChapterError();
joinChapterError && postJoinChapter(null);
}})}
/>
{errors.email && <span className="text-xs text-red-500">{errors.email.message}</span>}
{joinChapterError && joinChapterError.non_field_errors ? (
<span className="text-xs text-red-500">{joinChapterError.non_field_errors[0]}</span>
) : ('')}
<div className="mt-4 space-x-4 float-right">
<button
type="button"
className="inline-flex justify-center rounded-md border border-red-500 hover:text-white hover:bg-red-500 px-4 py-2 text-sm font-medium text-red-500 focus:outline-none focus-visible:ring-2"
onClick={closeModal}
>
Cancel
</button>
<button
type="submit"
className="inline-flex justify-center rounded-md border border-transparent text-white hover:text-[#009975] hover:border-[#009975] bg-[#009975] px-4 py-2 text-sm font-medium hover:bg-white focus:outline-none focus-visible:ring-2"
>
Join
</button>
</div>
</form>
</>
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Join {chapter.name} {chapter.city} Chapter
</Dialog.Title>
<form
onSubmit={handleSubmit(handleEmailSubmit)}
className="mt-8"
>
<input
type="email"
name="email"
className="mt-1 px-3 py-3 bg-white border shadow-sm border-[#79747E] placeholder-[#49454F] focus:outline-none focus:border-[#CCFFF3] focus:ring-[#009975] block w-full rounded sm:text-sm focus:ring-1"
placeholder="Your Email Address"
value={Email}
{...register("email", {
onChange: (e) => {
setEmail(e.target.value);
joinChapterError && clearJoinChapterError();
joinChapterError && postJoinChapter(null);
},
})}
/>
{errors.email && (
<span className="text-xs text-red-500">
{errors.email.message}
</span>
)}
{joinChapterError &&
joinChapterError.non_field_errors ? (
<span className="text-xs text-red-500">
{joinChapterError.non_field_errors[0]}
</span>
) : (
""
)}
<div className="mt-4 space-x-4 float-right">
<button
type="button"
className="inline-flex justify-center rounded-md border border-red-500 hover:text-white hover:bg-red-500 px-4 py-2 text-sm font-medium text-red-500 focus:outline-none focus-visible:ring-2"
onClick={closeModal}
>
Cancel
</button>
<button
type="submit"
className="inline-flex justify-center rounded-md border border-transparent text-white hover:text-[#009975] hover:border-[#009975] bg-[#009975] px-4 py-2 text-sm font-medium hover:bg-white focus:outline-none focus-visible:ring-2"
>
Join
</button>
</div>
</form>
</>
)}

</Dialog.Panel>
</Transition.Child>
</div>
Expand Down

1 comment on commit 0c5bcda

@vercel
Copy link

@vercel vercel bot commented on 0c5bcda Nov 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

syt-web-redesign – ./

syt-web-redesign.vercel.app
syt-web-redesign-sytweb.vercel.app
syt-web-redesign-git-main-sytweb.vercel.app

Please sign in to comment.