Skip to content

Commit

Permalink
add message information modal; add icon lib
Browse files Browse the repository at this point in the history
  • Loading branch information
@rshewitt
rshewitt committed Jun 30, 2024
1 parent 90fe03c commit f87fd6f
Show file tree
Hide file tree
Showing 4 changed files with 205 additions and 145 deletions.
15 changes: 15 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@
"@react-oauth/google": "^0.12.1",
"@tailwindcss/forms": "^0.5.7",
"axios": "^1.6.8",
"help": "^3.0.2",
"next": "14.1.4",
"react": "^18",
"react-burger-menu": "^3.0.9",
"react-dom": "^18",
"react-icons": "^5.2.1",
"react-loading-overlay-ts": "^2.0.2",
"react-responsive-carousel": "^3.2.23",
"react-responsive-modal": "^6.4.2"
Expand Down
288 changes: 143 additions & 145 deletions src/app/components/Message.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,155 +1,153 @@
import { memo, useRef, useState } from "react";
import LoadingOverlay from "react-loading-overlay-ts";
import MessageInformationIcon from "./MessageInfo";

const Message = () => {
const formRef = useRef<HTMLFormElement>(null);
const [commentSubmitted, setCommentSubmitted] = useState(false);
const [loading, setLoading] = useState(false);
const formRef = useRef<HTMLFormElement>(null);
const [commentSubmitted, setCommentSubmitted] = useState(false);
const [loading, setLoading] = useState(false);

const scriptUrl =
"https://script.google.com/macros/s/AKfycbyrSwUKoDYzFOHqPmMulr_Ij6AD53-N2QAZDdik2S9gQwq4sB6d_BnFyKJJl3CLMj7g/exec";
const scriptUrl =
"https://script.google.com/macros/s/AKfycbyrSwUKoDYzFOHqPmMulr_Ij6AD53-N2QAZDdik2S9gQwq4sB6d_BnFyKJJl3CLMj7g/exec";

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);
fetch(scriptUrl, {
method: "POST",
body: new FormData(formRef.current!),
})
.then((res) => {
console.log("SUCCESSFULLY SUBMITTED");
setCommentSubmitted(true);
setLoading(false);
})
.catch((err) => console.log(err));
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);
fetch(scriptUrl, {
method: "POST",
body: new FormData(formRef.current!),
})
.then((res) => {
console.log("SUCCESSFULLY SUBMITTED");
setCommentSubmitted(true);
setLoading(false);
})
.catch((err) => console.log(err));
};

// TODO: update the events to a loop create
return (
<div id="rsvp_div" className="py-14">
<h4 className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 md:mb-16 text-gray-700 px-4">
RSVP
</h4>
<div className="flex justify-center px-4">
<LoadingOverlay
active={loading}
spinner
text="Submitting form..."
>
<div className="rounded-lg shadow-2xl p-6 md:p-8 bg-white top-8 mb-6 md:mb-0">
{!commentSubmitted ? (
<form
ref={formRef}
onSubmit={(e) => {
handleSubmit(e);
}}
>
<fieldset disabled={loading}>
<p className="text-xl-wel font-normalBold text-black text-center mb-6">
What events are you planning to attend?
</p>
<div className="mb-3">
<input
type="checkbox"
className="h-8 w-8 rounded-full border-black text-green-950"
name="mardi_gras_event"
value="Y"
/>
<label
htmlFor="event3"
className="text-md-twl font-normalBold text-black px-5"
>
{" "}
Mardi Gras: Fri 2/28 - Tues 3/4
</label>
<br />
</div>
<div className="mb-3">
<input
type="checkbox"
className="h-8 w-8 rounded-full border-black text-green-950"
name="ceremony_event"
value="Y"
/>
<label
htmlFor="event4"
className="text-md-twl font-normalBold text-black px-5"
>
{" "}
Ceremony & Reception: Sat 3/8
</label>
<br />
</div>
<input
type="checkbox"
className="h-8 w-8 rounded-full border-black text-green-950"
name="farewell_event"
value="Y"
/>
<label
htmlFor="event2"
className="text-md-twl font-normalBold text-black px-5"
>
{" "}
Farewell Brunch: Sun 3/9
</label>
<br />
<br />
<input
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="First Name"
name="first_name"
required
maxLength={70}
/>
<input
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="Last Name"
name="last_name"
required
maxLength={70}
/>
<input
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="Email Address"
name="email"
required
maxLength={70}
/>
<input
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="Phone Number"
name="phone"
required
maxLength={70}
/>
<textarea
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="Message"
name="message"
maxLength={750}
/>
<div className="flex justify-end">
<button
type="submit"
id="submit-message-btn"
className="px-5 py-2 transition-all text-lg font-semibold rounded-md bg-[#354834] outline-[#6867AC] text-white outline-4 disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
>
Submit
</button>
</div>
</fieldset>
</form>
) : (
<h4 className="text-xl font-head font-bold text-center md:mb-16 text-gray-700 px-4">
Form submitted. See you there!
</h4>
)}
</div>
</LoadingOverlay>
</div>
</div>
);
// TODO: update the events to a loop create
return (
<div id="rsvp_div" className="py-14">
<h4 className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 md:mb-16 text-gray-700 px-4">
RSVP
</h4>
<div className="flex justify-center px-4">
<LoadingOverlay active={loading} spinner text="Submitting form...">
<div className="rounded-lg shadow-2xl p-6 md:p-8 bg-white top-8 mb-6 md:mb-0">
<MessageInformationIcon />
{!commentSubmitted ? (
<form
ref={formRef}
onSubmit={(e) => {
handleSubmit(e);
}}
>
<fieldset disabled={loading}>
<p className="text-xl-wel font-normalBold text-black text-center mb-6">
What events are you planning to attend?
</p>
<div className="mb-3">
<input
type="checkbox"
className="h-8 w-8 rounded-full border-black text-[#354834]"
name="mardi_gras_event"
value="Y"
/>
<label
htmlFor="event3"
className="text-md-twl font-normalBold text-black px-5"
>
{" "}
Mardi Gras: Fri 2/28 - Tues 3/4
</label>
<br />
</div>
<div className="mb-3">
<input
type="checkbox"
className="h-8 w-8 rounded-full border-black text-[#354834]"
name="ceremony_event"
value="Y"
/>
<label
htmlFor="event4"
className="text-md-twl font-normalBold text-black px-5"
>
{" "}
Ceremony & Reception: Sat 3/8
</label>
<br />
</div>
<input
type="checkbox"
className="h-8 w-8 rounded-full border-black text-[#354834]"
name="farewell_event"
value="Y"
/>
<label
htmlFor="event2"
className="text-md-twl font-normalBold text-black px-5"
>
{" "}
Farewell Brunch: Sun 3/9
</label>
<br />
<br />
<input
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="First Name"
name="first_name"
required
maxLength={70}
/>
<input
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="Last Name"
name="last_name"
required
maxLength={70}
/>
<input
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="Email Address"
name="email"
required
maxLength={70}
/>
<input
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="Phone Number"
name="phone"
required
maxLength={70}
/>
<textarea
className="w-full bg-[#f8fafc] text-md-twl font-normalBold text-black rounded border px-3 py-1.5 mb-6"
placeholder="Message"
name="message"
maxLength={750}
/>
<div className="flex justify-end">
<button
type="submit"
id="submit-message-btn"
className="px-5 py-2 transition-all text-lg font-semibold rounded-md bg-[#354834] outline-[#6867AC] text-white outline-4 disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
>
Submit
</button>
</div>
</fieldset>
</form>
) : (
<h4 className="text-xl font-head font-bold text-center md:mb-16 text-gray-700 px-4">
Form submitted. See you there!
</h4>
)}
</div>
</LoadingOverlay>
</div>
</div>
);
};

export default memo(Message);
45 changes: 45 additions & 0 deletions src/app/components/MessageInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { useState } from "react";
import { Modal } from "react-responsive-modal";
import { AiFillInfoCircle } from "react-icons/ai";
import "react-responsive-modal/styles.css";

const MessageInformationIcon = () => {
const [open, setOpen] = useState(false);

const handleClick = () => {
setOpen(!open);
};
return (
<>
<AiFillInfoCircle
style={{
position: "absolute",
top: "20px",
right: "20px",
}}
size="40px"
color="#354834"
onClick={handleClick}
/>
<Modal
open={open}
classNames={{
modal: "rounded-lg",
}}
onClose={handleClick}
blockScroll={false}
center
>
<h4 className="text-3xl-wel lg:text-3xl-wel font-squiggly text-center font-head mb-6 text-black">
Message Information
</h4>
<div className="font-normal text-center text-black mb-6">
The information you provide in this form goes directly to us in a
google sheet document for our own record keeping and nowhere else.
</div>
</Modal>
</>
);
};

export default MessageInformationIcon;

0 comments on commit f87fd6f

Please sign in to comment.