From 2060619e673e720167f7a5f57d97af1e9e1def77 Mon Sep 17 00:00:00 2001
From: Michael Rooplall <MichaelRooplall@gmail.com>
Date: Mon, 11 Dec 2023 20:02:02 -0500
Subject: [PATCH] Implement Contact Page functionality

---
 app/Contact/page.js | 352 +++++++++++++++++++++++++++++++++-----------
 package-lock.json   | 145 ++++++++++++++++++
 package.json        |   4 +
 3 files changed, 417 insertions(+), 84 deletions(-)

diff --git a/app/Contact/page.js b/app/Contact/page.js
index 666224e..901f3d6 100644
--- a/app/Contact/page.js
+++ b/app/Contact/page.js
@@ -7,11 +7,20 @@ import Header from '@components/Header/Header'
 import SubheaderShape from '@components/SubheaderShape/SubheaderShape'
 import Footer from '@components/Footer/Footer'
 
+import { Tooltip } from 'react-tooltip'
+import { useForm, Controller } from 'react-hook-form'
+
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 import SponsorBlock from '@components/SponsorBlock/SponsorBlock'
 
 import {useRef, useState} from 'react';
 import Link from 'next/link'
 
+import 'react-phone-number-input/style.css'
+import PhoneInput, {isValidPhoneNumber} from 'react-phone-number-input/input'
+
 import { Button } from '@components/Button/Button'
 
 const PhoneIconSVG = () => {
@@ -57,7 +66,7 @@ const PinIconSVG = () => {
 const contactInformation = [
 	{
 		icon : <PhoneIconSVG/>,
-		text : "(347) 858 5959"
+		text : "(347) 858-5959"
 	},
 	{
 		icon : <InstagramIconSVG/>,
@@ -73,10 +82,11 @@ const contactInformation = [
 	}
 ]
 
-const ContactInput = ({inputRef, onChange, value, label}) => {
+const ContactInput = ({label, inputType = "text", inputKey, register, required = false, pattern, error}) => {
 	return (
 		<div
 			style={{
+				position: 'relative',
 				display: 'flex',
 				flexDirection : 'column',
 				flex : 1
@@ -90,12 +100,23 @@ const ContactInput = ({inputRef, onChange, value, label}) => {
 			>
 				{label}
 			</span>
+			{
+				error && <span
+					style={{
+						fontSize : 12,
+						color : 'red',
+						position : 'absolute',
+						right : 0, top : 0
+					}}
+				>
+					{
+						(error.type == 'required') ? '*Required' : '*Invalid'
+					}
+				</span>
+			}
 			<input
-				ref={inputRef}
-				onChange={(e, value) => {
-					onChange(value);
-				}}
-				value={value}
+				label={inputKey}
+				type={inputType}
 				style={{
 					borderWidth : '0px 0px 2px 0px',
 					borderStyle : null,
@@ -105,16 +126,81 @@ const ContactInput = ({inputRef, onChange, value, label}) => {
 					margin : 0,
 					fontSize : 18
 				}}
+				
+				{...register(inputKey, {required : required, pattern : pattern})}
 			/>
 		</div>
 	)
 }
 
+const ContactPhoneNumberInput = ({label, inputKey, control, error}) => {
+	return (
+		<div
+			style={{
+				position : 'relative',
+				display: 'flex',
+				flexDirection : 'column',
+				flex : 1
+			}}
+		>
+			<span
+				style={{
+					fontSize: '0.8rem',
+					fontWeight : 600
+				}}
+			>
+				{label}
+			</span>
+			{
+				error && <span
+					style={{
+						fontSize : 12,
+						color : 'red',
+						position : 'absolute',
+						right : 0, top : 0
+					}}
+				>
+					{
+						(error.type == 'required') ? '*Required' : '*Invalid'
+					}
+				</span>
+			}
+			<Controller
+				name={inputKey}
+				control={control}
+				rules={{
+					validate: (value) => {
+						if (value == undefined) return true;
+						return isValidPhoneNumber(value)
+					}
+				}}
+				render={({ field: { onChange, value } }) => (
+					<PhoneInput
+						value={value}
+						onChange={onChange}
+						id={inputKey}
+						style={{
+							borderWidth : '0px 0px 2px 0px',
+							borderStyle : null,
+							borderColor : '#ddd',
+							height : 28,
+							padding : 0,
+							margin : 0,
+							fontSize : 18,
+						}}
+					/>
+				)}
+			/>
+		</div>
+	)
+}
 
-const ContactInputTextArea = ({inputRef, onChange, value, label}) => {
+
+const ContactInputTextArea = ({label, inputKey, register, required = false, error}) => {
 	return (
 		<div
 			style={{
+				position : 'relative',
 				display: 'flex',
 				flexDirection : 'column',
 				flex : 1
@@ -128,12 +214,22 @@ const ContactInputTextArea = ({inputRef, onChange, value, label}) => {
 			>
 				{label}
 			</span>
+			{
+				error && <span
+					style={{
+						fontSize : 12,
+						color : 'red',
+						position : 'absolute',
+						right : 0, top : 0
+					}}
+				>
+					{
+						(error.type == 'required') ? '*Required' : '*Invalid'
+					}
+				</span>
+			}
 			<textarea
-				ref={inputRef}
-				onChange={(e, value) => {
-					onChange(value);
-				}}
-				value={value}
+				label={inputKey}
 				style={{
 					borderWidth : '1px 1px 2px 1px',
 					borderStyle : null,
@@ -146,16 +242,16 @@ const ContactInputTextArea = ({inputRef, onChange, value, label}) => {
 					minHeight: 120,
 					maxHeight : 240
 				}}
+				{...register(inputKey, {required : required})}
 			/>
 		</div>
 	)
 }
 
-const SubmitButton = ({label, href = '/', target = ''}) => {
+
+const SubmitButton = ({label, onClick, disabled}) => {
     return (
-        <Button className={styles.submitButton} onPress={() => {
-			console.log("SUBMIT")
-		}}>
+        <Button className={styles.submitButton} onClick={onClick} disabled={true}>
             <span
 				style={{
 					paddingLeft : 50,
@@ -168,7 +264,40 @@ const SubmitButton = ({label, href = '/', target = ''}) => {
     )
 }
 
-const ContactSubjectContainer = () => {
+const ContactSubjectContainerRadio = ({radioKey, onChange, value, label}) => {
+
+	const onRadioPressed = () => {
+		onChange(radioKey);
+	}
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				gap : 5,
+			}}
+			onClick={() => {
+				onRadioPressed();
+			}}
+		>
+			<input type="radio" name={radioKey} value={radioKey} checked={radioKey == value} onChange={onRadioPressed} style={{transform: 'scale(1)'}} />
+			<span
+				style={{
+					fontSize : 14,
+					marginTop : 2,
+					display : 'flex',
+					justifyContent : 'center',
+					alignItems : 'center',
+					gap : 5
+				}}
+			>
+				{label}
+			</span>
+		</div>
+	)
+}
+
+const ContactSubjectContainer = ({inputKey, control}) => {
 	return (
 		<div
 			style={{
@@ -192,54 +321,32 @@ const ContactSubjectContainer = () => {
 				}}
 				className={styles.subjectRow}
 			>
-				<div
-					style={{
-						display: 'flex',
-						gap : 5,
-					}}
-				>
-					<input type="radio" name="choice" value="general" style={{transform: 'scale(1)'}}/>
-					<span
-						style={{
-							fontSize : 14,
-							marginTop : 2
-						}}
-					>
-						General Inquiry
-					</span>
-				</div>
-				<div
-					style={{
-						display: 'flex',
-						gap : 5,
+				<Controller
+					name={inputKey}
+					control={control}
+					defaultValue={'general'}
+					rules={{
+						validate: (value) => (value == 'general' || value == 'sponsorship' || value == 'technical' )
 					}}
-				>
-					<input type="radio" name="choice" value="sponsorship" style={{transform: 'scale(1)'}}/>
-					<span
-						style={{
-							fontSize : 14,
-							marginTop : 2
-						}}
-					>
-						Sponsorship
-					</span>
-				</div>
-				<div
-					style={{
-						display: 'flex',
-						gap : 5,
-					}}
-				>
-					<input type="radio" name="choice" value="technical" style={{transform: 'scale(1)'}}/>
-					<span
-						style={{
-							fontSize : 14,
-							marginTop : 2
-						}}
-					>
-						Technical Inquiry (?)
-					</span>
-				</div>
+					render={({ field: { onChange, value } }) => (
+						<>
+							<ContactSubjectContainerRadio radioKey={"general"} onChange={onChange} value={value} label={"General Inquiry"}/>
+							<ContactSubjectContainerRadio radioKey={"sponsorship"} onChange={onChange} value={value} label={"Sponsorship"}/>
+							<ContactSubjectContainerRadio radioKey={"technical"} onChange={onChange} value={value} label={
+								<>
+									Technical Inquiry
+									<svg data-tooltip-id="tooltip" data-tooltip-content="Technical inquiries are sent directly to our programming team" style={{width : 18, height : 18, marginTop : 4, color : '#000000aa'}} xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-info-circle" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
+										<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+										<circle cx="12" cy="12" r="9" />
+										<line x1="12" y1="8" x2="12.01" y2="8" />
+										<polyline points="11 12 12 12 12 16 13 16" />
+									</svg>
+								</>
+							}/>
+						</>
+					)}
+				/>
+				<Tooltip id="tooltip" />
 			</div>
 		</div>
 	)
@@ -247,19 +354,76 @@ const ContactSubjectContainer = () => {
 
 export default function Contact() {
 
-	const inputFirstNameRef = useRef(null);
-	const inputLastNameRef = useRef(null);
-	const inputEmailRef = useRef(null);
-	const inputPhoneRef = useRef(null);
-	const inputBodyRef = useRef(null);
+	const [submitEnabled, setSubmitEnabled] = useState(true);
+
+	const {
+		register,
+		handleSubmit,
+		control,
+		formState : {errors}
+	} = useForm({
+		firstName : "",
+		lastName : "",
+		email : "",
+		phoneNumber : "",
+		subject : "technical",
+		messageBody : ""
+	});
 
+	const toastID = useRef(null);
 
-	const [inputFirstName, setInputFirstName] = useState("");
-	const [inputLastName, setInputLastName] = useState("");
-	const [inputEmail, setInputEmail] = useState("");
-	const [inputPhone, setInputPhone] = useState("");
-	const [inputBody, setInputBody] = useState("");
+	const handleRegistration = async (data) => {
 
+		setSubmitEnabled(false);
+
+		toastID.current = toast.info("Sending Inquiry . . .", {autoClose : false});;
+
+		try {
+			const _response = await fetch(
+				`${process.env.NEXT_PUBLIC_API_BASE}/api/v2/Contact`,
+				{
+					method: 'POST',
+					body : JSON.stringify(data),
+					headers: {
+						"Content-Type": "application/json",
+					},
+				}
+			);
+
+			if (_response.status == 200) {
+				toast.update(toastID.current, {
+					render : "Inquiry Sent!",
+					type : toast.TYPE.SUCCESS,
+					autoClose : 5000
+				});
+				setSubmitEnabled(true);
+				return;
+			}
+	
+			const response = await _response.json();
+
+			toast.update(toastID.current, {
+				render : `There was an issue with your request. ${response.message}`,
+				type : toast.TYPE.ERROR,
+				autoClose : 5000
+			});
+
+			setSubmitEnabled(true);
+
+	
+		} catch (err) {
+			console.log(err);
+			toast.update(toastID.current, {
+				render : "We're sorry, an unexpected error has occurred. Please try again later",
+				type : toast.TYPE.ERROR,
+				autoClose : 5000
+			});
+			setSubmitEnabled(true);
+
+		}
+
+	}
+	
 	return (
 		<div>
 			<Navbar/>
@@ -334,7 +498,7 @@ export default function Contact() {
 						</div>
 						
 					</div>
-					<div
+					<form
 						style={{
 							backgroundColor: '#fff',
 							flex : 3,
@@ -351,8 +515,8 @@ export default function Contact() {
 							}}
 							className={styles.inputRow}
 						>
-							<ContactInput inputRef={inputFirstNameRef} onChange={setInputFirstName} value={inputFirstName} label={"First Name"}/>
-							<ContactInput inputRef={inputLastNameRef} onChange={setInputLastName} value={inputLastName} label={"Last Name"}/>
+							<ContactInput label={"First Name"} inputKey={'firstName'} register={register}/>
+							<ContactInput label={"Last Name"} inputKey={'lastName'} register={register}/>
 						</div>
 						<div
 							style={{
@@ -361,24 +525,44 @@ export default function Contact() {
 							}}
 							className={styles.inputRow}
 						>
-							<ContactInput inputRef={inputEmailRef} onChange={setInputEmail} value={inputEmail} label={"Email Address"}/>
-							<ContactInput inputRef={inputPhoneRef} onChange={setInputPhone} value={inputPhone} label={"Phone Number (Optional)"}/>
+							<ContactInput
+								label={"Email Address"}
+								type={'email'}
+								inputKey={'email'}
+								register={register}
+								required={true}
+								error={errors['email']}
+								pattern={
+									{
+										value :  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+										message : "Invalid Email Address"
+									}
+								}
+							/>
+							<ContactPhoneNumberInput label={"Phone Number (Optional)"} inputKey={'phoneNumber'} control={control} error={errors['phoneNumber']}/>
 						</div>
-						<ContactSubjectContainer/>
-						<ContactInputTextArea inputRef={inputBodyRef} onChange={setInputBody} value={inputBody} label={"Contents"}/>
+						<ContactSubjectContainer inputKey={'subject'} control={control} />
+						<ContactInputTextArea label={"Contents"} inputKey={'messageBody'} register={register} required={true} error={errors['messageBody']}/>
 						<div
 							style={{
 								display : 'flex',
 								justifyContent : 'flex-end'
 							}}
 						>
-							<SubmitButton label={'Submit'}/>
+							<SubmitButton
+								label={'Submit'}
+								disabled={!submitEnabled}
+								onClick={() => {
+									handleSubmit(handleRegistration)()
+								}}
+							/>
 						</div>
-					</div>
+					</form>
 				</div>
 			</div>
 			<SponsorBlock style={{marginBottom : -80, paddingBottom : 180, backgroundColor : '#000'}}/>
 			<Footer/>
+			<ToastContainer/>
 		</div>
 	)
 }
diff --git a/package-lock.json b/package-lock.json
index b88f663..5afdc94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,9 +17,13 @@
 				"react": "18.2.0",
 				"react-dom": "18.2.0",
 				"react-fast-marquee": "^1.6.2",
+				"react-hook-form": "^7.49.0",
+				"react-phone-number-input": "^3.3.7",
 				"react-responsive-carousel": "^3.2.23",
 				"react-select": "^5.8.0",
 				"react-text-transition": "^3.1.0",
+				"react-toastify": "^9.1.3",
+				"react-tooltip": "^5.25.0",
 				"react-type-animation": "^3.2.0",
 				"sass": "^1.67.0",
 				"sharp": "^0.32.6"
@@ -1332,6 +1336,14 @@
 			"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
 			"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
 		},
+		"node_modules/clsx": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+			"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/color": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -1394,6 +1406,11 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/country-flag-icons": {
+			"version": "1.5.9",
+			"resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.9.tgz",
+			"integrity": "sha512-9jrjv2w7kRbqNtdtMdK2j3gmDIZzd5l9L2pZiQjF9J0mUcB+NKIGDNADTDHBEp8EQtjOkCOcciJGGSOpERdXPQ=="
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2663,6 +2680,14 @@
 			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
 			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
 		},
+		"node_modules/input-format": {
+			"version": "0.3.8",
+			"resolved": "https://registry.npmjs.org/input-format/-/input-format-0.3.8.tgz",
+			"integrity": "sha512-tLR0XRig1xIcG1PtIpMd/uoltvkAI62CN9OIbtj4/tEJAkqTCQLNHUZ9N4M46w0dopny7Rlt/lRH5Xzp7e6F+g==",
+			"dependencies": {
+				"prop-types": "^15.8.1"
+			}
+		},
 		"node_modules/internal-slot": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -3097,6 +3122,11 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/libphonenumber-js": {
+			"version": "1.10.51",
+			"resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.51.tgz",
+			"integrity": "sha512-vY2I+rQwrDQzoPds0JeTEpeWzbUJgqoV0O4v31PauHBb/e+1KCXKylHcDnBMgJZ9fH9mErsEbROJY3Z3JtqEmg=="
+		},
 		"node_modules/lines-and-columns": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -3809,11 +3839,43 @@
 				"react-dom": ">= 16.8.0 || 18.0.0"
 			}
 		},
+		"node_modules/react-hook-form": {
+			"version": "7.49.0",
+			"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.0.tgz",
+			"integrity": "sha512-gf4qyY4WiqK2hP/E45UUT6wt3Khl49pleEVcIzxhLBrD6m+GMWtLRk0vMrRv45D1ZH8PnpXFwRPv0Pewske2jw==",
+			"engines": {
+				"node": ">=18",
+				"pnpm": "8"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/react-hook-form"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17 || ^18"
+			}
+		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
 		},
+		"node_modules/react-phone-number-input": {
+			"version": "3.3.7",
+			"resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.3.7.tgz",
+			"integrity": "sha512-/yusEJl2oJA5rTRtny59pf7T1gg/whmfhdZsgrZaL063KEx6FFnmwTskTJ9yR4lYgzj2GyUjXpnA3O9d+ZTHwA==",
+			"dependencies": {
+				"classnames": "^2.3.1",
+				"country-flag-icons": "^1.5.4",
+				"input-format": "^0.3.8",
+				"libphonenumber-js": "^1.10.48",
+				"prop-types": "^15.8.1"
+			},
+			"peerDependencies": {
+				"react": ">=16.8",
+				"react-dom": ">=16.8"
+			}
+		},
 		"node_modules/react-popper": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
@@ -3869,6 +3931,31 @@
 				"react": ">=18.0.0"
 			}
 		},
+		"node_modules/react-toastify": {
+			"version": "9.1.3",
+			"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+			"integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+			"dependencies": {
+				"clsx": "^1.1.1"
+			},
+			"peerDependencies": {
+				"react": ">=16",
+				"react-dom": ">=16"
+			}
+		},
+		"node_modules/react-tooltip": {
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.25.0.tgz",
+			"integrity": "sha512-/eGhmlwbHlJrVoUe75fb58rJfAy9aZnTvQAK9ZUPM0n9mmBGpEk13vDPiQVCeUuax+fBej+7JPsUXlhzaySc7w==",
+			"dependencies": {
+				"@floating-ui/dom": "^1.0.0",
+				"classnames": "^2.3.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.14.0",
+				"react-dom": ">=16.14.0"
+			}
+		},
 		"node_modules/react-transition-group": {
 			"version": "4.4.5",
 			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -5712,6 +5799,11 @@
 			"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
 			"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
 		},
+		"clsx": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+			"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+		},
 		"color": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -5765,6 +5857,11 @@
 				"yaml": "^1.10.0"
 			}
 		},
+		"country-flag-icons": {
+			"version": "1.5.9",
+			"resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.9.tgz",
+			"integrity": "sha512-9jrjv2w7kRbqNtdtMdK2j3gmDIZzd5l9L2pZiQjF9J0mUcB+NKIGDNADTDHBEp8EQtjOkCOcciJGGSOpERdXPQ=="
+		},
 		"cross-spawn": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6706,6 +6803,14 @@
 			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
 			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
 		},
+		"input-format": {
+			"version": "0.3.8",
+			"resolved": "https://registry.npmjs.org/input-format/-/input-format-0.3.8.tgz",
+			"integrity": "sha512-tLR0XRig1xIcG1PtIpMd/uoltvkAI62CN9OIbtj4/tEJAkqTCQLNHUZ9N4M46w0dopny7Rlt/lRH5Xzp7e6F+g==",
+			"requires": {
+				"prop-types": "^15.8.1"
+			}
+		},
 		"internal-slot": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -7014,6 +7119,11 @@
 				"type-check": "~0.4.0"
 			}
 		},
+		"libphonenumber-js": {
+			"version": "1.10.51",
+			"resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.51.tgz",
+			"integrity": "sha512-vY2I+rQwrDQzoPds0JeTEpeWzbUJgqoV0O4v31PauHBb/e+1KCXKylHcDnBMgJZ9fH9mErsEbROJY3Z3JtqEmg=="
+		},
 		"lines-and-columns": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -7507,11 +7617,29 @@
 			"integrity": "sha512-bXUuW1r+Yzd8ZjsPmMDy8WJMubHAZd/7n0W/IzUQHtd0iBfxWohP6hzCFnEHWMCOtC9wxSAq/BiEnig4kdI2Vw==",
 			"requires": {}
 		},
+		"react-hook-form": {
+			"version": "7.49.0",
+			"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.0.tgz",
+			"integrity": "sha512-gf4qyY4WiqK2hP/E45UUT6wt3Khl49pleEVcIzxhLBrD6m+GMWtLRk0vMrRv45D1ZH8PnpXFwRPv0Pewske2jw==",
+			"requires": {}
+		},
 		"react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
 		},
+		"react-phone-number-input": {
+			"version": "3.3.7",
+			"resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.3.7.tgz",
+			"integrity": "sha512-/yusEJl2oJA5rTRtny59pf7T1gg/whmfhdZsgrZaL063KEx6FFnmwTskTJ9yR4lYgzj2GyUjXpnA3O9d+ZTHwA==",
+			"requires": {
+				"classnames": "^2.3.1",
+				"country-flag-icons": "^1.5.4",
+				"input-format": "^0.3.8",
+				"libphonenumber-js": "^1.10.48",
+				"prop-types": "^15.8.1"
+			}
+		},
 		"react-popper": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
@@ -7555,6 +7683,23 @@
 				"@react-spring/web": "^9.7.2"
 			}
 		},
+		"react-toastify": {
+			"version": "9.1.3",
+			"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+			"integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+			"requires": {
+				"clsx": "^1.1.1"
+			}
+		},
+		"react-tooltip": {
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.25.0.tgz",
+			"integrity": "sha512-/eGhmlwbHlJrVoUe75fb58rJfAy9aZnTvQAK9ZUPM0n9mmBGpEk13vDPiQVCeUuax+fBej+7JPsUXlhzaySc7w==",
+			"requires": {
+				"@floating-ui/dom": "^1.0.0",
+				"classnames": "^2.3.0"
+			}
+		},
 		"react-transition-group": {
 			"version": "4.4.5",
 			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index ef14ca6..fa9d641 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,13 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-fast-marquee": "^1.6.2",
+		"react-hook-form": "^7.49.0",
+		"react-phone-number-input": "^3.3.7",
 		"react-responsive-carousel": "^3.2.23",
 		"react-select": "^5.8.0",
 		"react-text-transition": "^3.1.0",
+		"react-toastify": "^9.1.3",
+		"react-tooltip": "^5.25.0",
 		"react-type-animation": "^3.2.0",
 		"sass": "^1.67.0",
 		"sharp": "^0.32.6"