Skip to content

Fec 141 make accept invite page responsive #247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Amzat19 wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Fec 141 make accept invite page responsive #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31f8af0
Modified the features page
Amzat19 Jan 15, 2023
29ff8b6
Made accept invite page responsive
Amzat19 Jan 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/pages/Features-page/F4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 51 additions & 40 deletions src/pages/Features-page/features.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,84 +5,95 @@ import Footer from "../../components/footer/index";
import F1 from "../../pages/Features-page/F1.png";
import F2 from "../../pages/Features-page/F2.png";
import F3 from "../../pages/Features-page/F3.png";
import F4 from "../../pages/Features-page/F4.png";
import Arrow from "../../pages/Features-page/arrow.png";

function Features() {
return (
<div>
<Navbar />
<article className=" flex flex-col items-center justify-center ">
<section className=" flex flex-col px-10 py-32 space-y-20 md:flex-row md:items-center md:justify-center md:space-x-20 md:p-20">
<main className="flex flex-col items-center justify-center ">
<div className="w-3/5 pt-32 md:hidden">
<img src={F1} alt="mobile home" />
</div>
<section className="flex flex-col space-y-20 px-10 md:flex-row md:items-center md:justify-center md:space-x-12 md:pt-28">
<div>
<img className="w-80" src={F1} alt="" />
<img className="hidden md:block w-80" src={F3} alt="Event Scheduling" />
</div>
<div className="flex flex-col items-center justify-center mb-20 md:items-start md:pb-20 md:w-96 w-60">
<h1 className="font-bold md:text-2xl text-1xl text-center md:text-start mb-5">
Event Scheduling
</h1>
<p className="text-gray-700 text-center md:text-start text-sm md:w-full">
CatchUp makes hanging out with friends as easy as possible—no more waiting for someone to call you back or trying to remember exactly when they're free. It's also great for groups who want to plan ahead and coordinate their schedules so they can spend more time together.
</p>
<Link
to="/sign_up"
className="hidden md:flex bg-[#0056D6] mt-5 text-white px-5 py-2 rounded flex flex-row items-center justify-between space-x-5">
<p>Get Started</p>
<img className="w-3" src={Arrow} alt="arrow" />{" "}
</Link>
</div>
<div className="flex flex-col items-center justify-center md:items-start md:w-96 ">
</section>
<section className=" flex flex-col-reverse px-10 space-y-20 md:py-16 md:flex-row md:items-center md:justify-center md:space-x-20 md:pb-0">
<div className="flex flex-col items-center justify-center md:items-start md:w-96">
<h1 className="font-bold mb-5 text-1xl md:text-2xl text-center md:text-start">
Availability Preferences
</h1>
<p className=" text-sm text-gray-700 text-center md:text-start">
One of our most important feautures at catch up, is the
availability prefrences where your friends can notify you the host
of there availabilty for the event you scheduled. You would get a
notification in real time on our platform and in your mail.
<p className=" text-sm text-gray-700 text-center md:text-start">
With this feature, you can specify a range of days on which you'll be available for a hangout and let those who have been invited choose the one that works best for them.
</p>
<Link
to="/sign_up"
className="bg-[#0056D6] mt-5 text-white px-5 py-2 rounded
flex flex-row items-center justify-between space-x-5 "
className="hidden md:flex bg-[#0056D6] mt-5 text-white px-5 py-2 rounded flex flex-row items-center justify-between space-x-5 "
>
<p>Get Started</p>
<img className="w-3" src={Arrow} alt="arrow" />{" "}
</Link>
</div>
<div className="md:pb-20">
<img className="hidden md:block w-80" src={F1} alt="Availability Preferences"/>
</div>
</section>
<section className="flex flex-col-reverse px-10 pb-32 space-y-40 md:flex-row md:items-center md:space-x-32 md:px-52 md:justify-center md:py-0 bg-gray-200 ">
<div className="flex flex-col items-center justify-center md:items-start md:w-96 ">
<section className="flex px-10 pb-24 space-y-20 md:flex-row md:items-center md:space-x-32 md:justify-center">
<div>
<img className="hidden md:block w-80" src={F2} alt="Sync Calendar" />
</div>
<div className="flex flex-col items-center justify-center md:items-start md:w-96 md:pb-40">
<h1 className="font-bold md:text-2xl text-1xl text-center md:text-start mb-5">
Sync Calendar
</h1>
<p className="text-gray-800 text-sm text-center md:text-start">
We have made it easier for our users to sync there google calendar
to our platform through the channel we have created , users can
set reminders on there google calendar and not miss out on events
from there friends.
<p className="text-sm text-center md:text-start text-gray-700">
This is essential for staying organized. You can keep track of all events you create using our calendar sync feature.
</p>
<Link
to="/sign_up"
className="bg-[#0056D6] mt-5 text-white px-5 py-2 rounded
flex flex-row items-center justify-between space-x-5 "
>
className="hidden md:flex bg-[#0056D6] mt-5 text-white px-5 py-2 rounded flex flex-row items-center justify-between space-x-5">
<p>Get Started</p>
<img className=" md:w-3 " src={Arrow} alt="" />{" "}
<img className="w-3" src={Arrow} alt="" />{" "}
</Link>
</div>
<div>
<img className="w-80 mb-20 wd:mb-0" src={F2} alt="" />
</div>
</section>
<section className="flex flex-col space-y-20 px-10 py-32 md:flex-row md:items-center md:justify-center md:space-x-12 md:pt-10 md:pb-40 ">
<div className="">
<img className="w-80" src={F3} alt="" />
</div>
<div className="flex flex-col items-center justify-center md:items-start md:w-96 w-60">
<section className="flex px-10 pb-16 space-y-20 md:flex-row md:items-center md:space-x-32 md:justify-center md:pb-0">
<div className="flex flex-col items-center justify-center md:items-start md:w-96 ">
<h1 className="font-bold md:text-2xl text-1xl text-center md:text-start mb-5">
Event Scheduling
Get Notifications
</h1>
<p className="text-gray-700 text-center md:text-start text-sm md:w-56">
Catch up enables you to schedule event for your friends, you set
the preferred date and time, and send out invites to your friends,
which they are later notified of the event seamlessly.
<p className="text-sm text-center md:text-start text-gray-700">
You'll never have to worry about forgetting an occasion or skipping a social gathering again. CatchUp will keep you informed.
</p>
<Link
to="/sign_up"
className="bg-[#0056D6] mt-5 text-white px-5 py-2 rounded
flex flex-row items-center justify-between space-x-5 "
>
className="hidden md:flex bg-[#0056D6] mt-5 text-white px-5 py-2 rounded flex flex-row items-center justify-between space-x-5">
<p>Get Started</p>
<img className="w-3" src={Arrow} alt="arrow" />{" "}
<img className="w-3" src={Arrow} alt="" />{" "}
</Link>
</div>
<div className="md:pb-40">
<img className="hidden md:block w-80" src={F4} alt="Sync Calendar" />
</div>
</section>
</article>
</main>
<Footer />
</div>
);
Expand Down
115 changes: 52 additions & 63 deletions src/pages/invitee/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ import userServices from "../../services/userServices";

const EventInvite = () => {
const [eventData, setEventData] = useState(null);
const preferredDate = eventData
? eventData.host_prefered_time.replace("-", "")
: "";
const preferredTime = eventData
? moment(preferredDate, "DD-MM-YYYY HH:mm").format("YYYY-MM-DDTHH:mm")
: "";
// const preferredDate = eventData
// ? eventData.host_prefered_time.replace("-", "")
// : "";
// const preferredTime = eventData
// ? moment(preferredDate, "DD-MM-YYYY HH:mm").format("YYYY-MM-DDTHH:mm")
// : "";
const [inviteDetails, setInviteDetails] = useState({
fullname: "",
email: "",
preferred_date_time: "",
});
const [minDate, setMinDate] = useState("");
const [maxDate, setMaxDate] = useState("");
// const [minDate, setMinDate] = useState("");
// const [maxDate, setMaxDate] = useState("");
const [agreedDate, setAgreedDate] = useState("");
const navigate = useNavigate();
const [declinedInvite, setDeclinedInvite] = useState(false);
Expand All @@ -30,26 +30,26 @@ const EventInvite = () => {

const emailRegex =
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
const decidedEvent = eventData
? moment(eventData.final_event_date).format("MMMM DD YYYY HH:mm")
: "";
const currentDate = moment(Date.now()).format("YYYY-MM-DDTHH:mm");
const hasPassed = eventData && moment(currentDate).isAfter(maxDate);
// const decidedEvent = eventData
// ? moment(eventData.final_event_date).format("MMMM DD YYYY HH:mm")
// : "";
// const currentDate = moment(Date.now()).format("YYYY-MM-DDTHH:mm");
// const hasPassed = eventData && moment(currentDate).isAfter(maxDate);

useEffect(() => {
const startDate = eventData
? moment(eventData?.start_date, "MM-DD-YYYY").format("YYYY-MM-DDTHH:mm")
: "";
const endDate = eventData
? moment(eventData?.end_date, "MM-DD-YYYY").format("YYYY-MM-DDTHH:mm")
: "";
// const startDate = eventData
// ? moment(eventData?.start_date, "MM-DD-YYYY").format("YYYY-MM-DDTHH:mm")
// : "";
// const endDate = eventData
// ? moment(eventData?.end_date, "MM-DD-YYYY").format("YYYY-MM-DDTHH:mm")
// : "";
setAgreedDate(
moment(eventData?.final_event_date, "YYYY-MM-DDTHH:mm").format(
"MM/DD/YYYY"
)
);
setMinDate(startDate);
setMaxDate(endDate);
// setMinDate(startDate);
// setMaxDate(endDate);
}, [eventData]);

const changeInviteDetails = (e) => {
Expand Down Expand Up @@ -120,9 +120,9 @@ const EventInvite = () => {
useEffect(() => {
getEventDetails();

if (hasPassed) {
navigate("/closed_event");
}
// if (hasPassed) {
// navigate("/closed_event");
// }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Expand All @@ -132,8 +132,8 @@ const EventInvite = () => {
<div>
<div className="mt-28 mb-10 mx-auto lg:mx-12 px-6">
<div className="mx-2 md:mx-0 text-center w-full">
<h1 className="text-2xl font-bold md:text-3xl">Hello, there.</h1>
<p className="leading-6 text-gray-600 font-sm">
<h1 className="text-2xl font-medium md:text-3xl">Hello, there.</h1>
<p className="leading-6 text-gray-600 text-sm">
You have been invited to {eventData ? eventData.event_type : ""}{" "}
by
<span className="text-blue-700 font-bold">
Expand Down Expand Up @@ -162,61 +162,50 @@ const EventInvite = () => {
""
)}
</div>
<div className="my-8 w-fit mx-auto border px-6 lg:px-12 py-5 rounded-lg">
<div className="my-4 flex flex-col justify-start lg:justify-center items-start lg:items-center gap-[25px] lg:gap-[15px] lg:flex-row ">
<div className="md:mx-auto flex-1 self-start">
<h1 className="text-xl mb-2 font-bold md:text-2xl md:mb-4">
<div className="my-8 w-fit mx-auto px-6 lg:px-12 py-5">
<div className="my-4 flex flex-col justify-center lg:justify-center items-start lg:items-center gap-[25px] lg:gap-[15px] lg:flex-row">
<div className="md:mx-auto flex-2 self-center">
<h1 className="text-xl mb-2 font-medium md:text-2xl md:mb-4">
Event Summary
</h1>
<p className="leading-6 text-gray-600 font-bold font-sm">
<p className="leading-6 text-gray-600 font-medium font-sm">
Dinner
</p>
<div>
<span className="flex mt-3">
{" "}
<div className="font-thin">
<span className="flex mt-3 md:gap-2 text-sm md:text-base">
<CiLocationOn className="mr-4 text-[25px]" />
Location:{" "}
<span className="font-bold">
{" "}
&#160;
Location:
<span className="text-sm md:text-base pl-2">
{eventData?.location}
</span>
</span>

<span className="flex mt-3">
{" "}
<span className="flex mt-3 md:gap-2 text-sm md:text-base">
<CiCalendar className="mr-4 text-[25px] font-bold" />
Agreed Date: &#160;
Agreed Date:
{eventData?.final_event_date === null ? (
<span className="font-bold"> &#160; Not Available</span>
<span className="text-sm md:text-base pl-2">Not Available</span>
) : (
agreedDate
)}
</span>

<span className="flex mt-3">
{" "}
<span className="flex mt-3 md:gap-2 text-sm md:text-base">
<CiStopwatch className="mr-4 text-[25px]" />
Host Selected Time:
<span className="font-bold">
&#160; {eventData?.host_prefered_time}
</span>{" "}
<span className="text-sm md:text-base pl-2">
{eventData?.host_prefered_time}
</span>
</span>

<span className="flex mt-3">
{" "}
<span className="flex mt-3 gap-2 md:text-sm md:text-base">
<HiOutlineMenuAlt1 className="mr-4 text-[25px]" />
<span className="font-bold">
{" "}
&#160;
<span className="text-sm md:text-base pl-2">
{eventData?.event_description}
</span>{" "}
</span>
</span>
</div>
</div>
<form className="flex-1 w-full" onSubmit={addParticipant}>
<form className="flex-1 w-full md:border-l-2 md:pl-8" onSubmit={addParticipant}>
<div className="my-4 flex flex-col">
<label className="text-base font-semibold mb-1">
<label className="text-base font-semibold mb-1 text-[#424245]">
Full Name
</label>
<input
Expand All @@ -230,7 +219,7 @@ const EventInvite = () => {
/>
</div>
<div className="my-4 flex flex-col">
<label className="text-base font-semibold mb-1">Email</label>
<label className="text-base font-semibold mb-1 text-[#424245]">Email(optional)</label>
<p className="text-sm text-red-500">
{emailRegex.test(inviteDetails.email) ||
inviteDetails.email === ""
Expand All @@ -253,7 +242,7 @@ const EventInvite = () => {
autoComplete="true"
/>
</div>
{eventData?.final_event_date ? (
{/* {eventData?.final_event_date ? (
<p className="text-blue-500 font-semibold text-center md:w-4/5 mx-auto">
An event date has been chosen. Event to be hosted by{" "}
{decidedEvent}
Expand All @@ -278,18 +267,18 @@ const EventInvite = () => {
required
/>
</div>
)}
)} */}
<div className="my-7 flex w-full justify-center gap-8 md:justify-between">
<button
type="submit"
className="rounded bg-[#0056D6] hover:bg-[#2563eb] text-white py-2.5 md:px-3 px-1.5 md:text-lg text-base"
className="rounded font-semibold bg-[#0056D6] hover:bg-[#2563eb] text-white py-2.5 md:px-3 px-1.5 md:text-lg text-base"
onClick={addParticipant}
>
Accept Invite
</button>
<button
type="button"
className="rounded border border-[#0056D6] text-[#0056D6] py-2.5 md:px-3 px-1.5 md:text-lg text-base"
className="rounded font-semibold border border-[#0056D6] text-[#0056D6] py-2.5 md:px-3 px-1.5 md:text-lg text-base"
onClick={() => declineInvite()}
>
Decline Invite
Expand Down