Skip to content
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

Jump to bottom

contexts for step1 and step4 #60

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

contexts for step1 and step4 #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7912676
contexts for step1 and step4
kathyychenn May 21, 2024
08d3691
save if rules read to context step4
kathyychenn May 21, 2024
deffc0e
Merge branch 'main' of https://github.com/TritonSE/CCIDC-Application-…
kathyychenn Jun 4, 2024
f0f414d
remove console.log and change to dateCertifiedExpires
kathyychenn Jun 4, 2024
dbabf03
add payment information section & new input fields
kathyychenn Jun 7, 2024
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
7 changes: 6 additions & 1 deletion frontend/src/components/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import { useState } from "react";
import { useEffect, useState } from "react";

import styles from "./Dropdown.module.css";

export function Dropdown(props: {
options: string[];
onSelect: (value: string) => void;
required?: boolean;
defaultValue?: string;
}) {
const [selected, setSelected] = useState("Select One");
const [isActive, setIsActive] = useState(false);

useEffect(() => {
setSelected(props.defaultValue ?? "Select One");
}, [props.defaultValue]);

const handleOptionClick = (option: string) => {
setSelected(option);
setIsActive(false);
Expand Down
91 changes: 68 additions & 23 deletions frontend/src/components/Step1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from "react";
import { useContext } from "react";

import devices from "../constants/devices.json";
import genders from "../constants/genders.json";
import { FormContext } from "../contexts/FormContext.tsx";

import styles from "./Steps.module.css";
import { Dropdown } from "./index.ts";
Expand All @@ -11,22 +12,36 @@ type Step1Props = {
};

export function Step1({ onSubmit }: Step1Props) {
const [email, setEmail] = useState<string>("");
const [confirmEmail, setConfirmEmail] = useState<string>("");
const [gender, setGender] = useState("");
const [phoneType, setPhoneType] = useState("");
const { formData, setFormData } = useContext(FormContext);

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData((prevFormData) => ({
...prevFormData,
[name]: value,
}));
};

const handleGenderSelect = (option: string) => {
setGender(option);
setFormData((prevFormData) => ({
...prevFormData,
gender: option,
}));
};

const handlePhoneSelect = (option: string) => {
setPhoneType(option);
setFormData((prevFormData) => ({
...prevFormData,
deviceType: option,
}));
};

const handleConfirmEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setConfirmEmail(e.target.value);
e.target.setCustomValidity(""); // Reset custom validity on input change
setFormData((prevFormData) => ({
...prevFormData,
confirmEmail: e.target.value,
}));
e.target.setCustomValidity("");
};

const handleInvalid = (event: React.InvalidEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -103,6 +118,8 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter First Name Here"
name="firstName"
value={formData.firstName}
onChange={handleInputChange}
required
/>
</label>
Expand All @@ -115,6 +132,8 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter Middle Name Here"
name="middleName"
onChange={handleInputChange}
value={formData.middleName}
/>
</label>
</div>
Expand All @@ -126,6 +145,8 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter Last Name Here"
name="lastName"
onChange={handleInputChange}
value={formData.lastName}
required
/>
</label>
Expand All @@ -138,19 +159,26 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter 2nd Last Name Here"
name="maidenName"
onChange={handleInputChange}
value={formData.maidenName}
/>
</label>
</div>
<div className={styles.inputBox}>
<label htmlFor="gender" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
Gender<span className={styles.boldRed}>*</span>
<Dropdown options={genders} onSelect={handleGenderSelect}></Dropdown>
<Dropdown
options={genders}
onSelect={handleGenderSelect}
defaultValue={formData.gender || undefined}
></Dropdown>
<input
className={styles.customDropDown}
type="text"
id="gender"
name="gender"
defaultValue={gender}
value={formData.gender}
onChange={handleInputChange}
required
></input>
</label>
Expand All @@ -172,26 +200,29 @@ export function Step1({ onSubmit }: Step1Props) {
className={styles.inputText}
type="email"
name="email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
}}
value={formData.email}
onChange={handleInputChange}
placeholder="Enter Email Address"
autoComplete="email"
required
/>
</label>
</div>
<div className={styles.inputBox}>
<label htmlFor="phoneType" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
<label htmlFor="deviceType" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
Phone Type<span className={styles.boldRed}>*</span>
<Dropdown options={devices} onSelect={handlePhoneSelect}></Dropdown>
<Dropdown
options={devices}
onSelect={handlePhoneSelect}
defaultValue={formData.deviceType || undefined}
></Dropdown>
<input
className={styles.customDropDown}
type="text"
id="phoneType"
name="phoneType"
defaultValue={phoneType}
id="deviceType"
name="deviceType"
value={formData.deviceType}
onChange={handleInputChange}
required
></input>
</label>
Expand All @@ -204,10 +235,10 @@ export function Step1({ onSubmit }: Step1Props) {
type="email"
name="confirmEmail"
placeholder="Enter Email Address"
value={confirmEmail}
value={formData.confirmEmail}
onInvalid={handleInvalid}
onChange={handleConfirmEmailChange}
pattern={email}
pattern={formData.email}
required
/>
</label>
Expand All @@ -221,8 +252,10 @@ export function Step1({ onSubmit }: Step1Props) {
placeholder="Enter Phone Number"
pattern="^\d+$"
autoComplete="tel"
value={formData.phoneNumber}
required
name="phone"
onChange={handleInputChange}
name="phoneNumber"
/>
</label>
</div>
Expand All @@ -246,6 +279,8 @@ export function Step1({ onSubmit }: Step1Props) {
required
name="address"
autoComplete="street-address"
onChange={handleInputChange}
value={formData.address}
/>
</label>
</div>
Expand All @@ -258,6 +293,8 @@ export function Step1({ onSubmit }: Step1Props) {
placeholder="Enter City"
name="city"
required
onChange={handleInputChange}
value={formData.city}
/>
</label>
</div>
Expand All @@ -269,6 +306,8 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter State"
name="state"
value={formData.state}
onChange={handleInputChange}
required
/>
</label>
Expand All @@ -281,7 +320,9 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter Country"
name="country"
value={formData.country}
required
onChange={handleInputChange}
autoComplete="country"
/>
</label>
Expand All @@ -294,6 +335,8 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter County"
name="county"
onChange={handleInputChange}
value={formData.county}
/>
</label>
</div>
Expand All @@ -305,6 +348,8 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter Zip Code"
name="zip"
onChange={handleInputChange}
value={formData.zip}
/>
</label>
</div>
Expand Down
Loading
Loading