Skip to content

Commit abfeed8

Browse files
jzongkerjzongker
committed
Re-added opt-out
1 parent be8dbe0 commit abfeed8

1 file changed

Lines changed: 33 additions & 217 deletions

File tree

‎src/people/components/PersonEdit.tsx‎

Lines changed: 33 additions & 217 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { Navigate } from "react-router-dom";
99
import UserContext from "../../UserContext";
1010
import {
11-
Button, FormControl, Grid, InputLabel, MenuItem, Select, TextField, Box, type SelectChangeEvent
11+
Button, FormControl, Grid, InputLabel, MenuItem, Select, TextField, Box, type SelectChangeEvent, FormControlLabel, Checkbox
1212
} from "@mui/material";
1313

1414
interface Props {
@@ -61,6 +61,7 @@ export const PersonEdit = memo((props: Props) => {
6161
birthDate: null,
6262
maritalStatus: "",
6363
nametagNotes: "",
64+
optedOut: false,
6465
});
6566

6667
//const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSave(); } }
@@ -121,6 +122,9 @@ export const PersonEdit = memo((props: Props) => {
121122
case "photo":
122123
p.photo = value;
123124
break;
125+
case "optedOut":
126+
p.optedOut = (e.target as HTMLInputElement).checked;
127+
break;
124128
}
125129
setPerson(p);
126130
},
@@ -293,86 +297,33 @@ export const PersonEdit = memo((props: Props) => {
293297
<Grid size={{ sm: 8 }}>
294298
<Grid container spacing={3}>
295299
<Grid size={{ xs: 12, md: 4 }}>
296-
<TextField
297-
fullWidth
298-
name="name.first"
299-
label={Locale.label("person.firstName")}
300-
id="first"
301-
value={person.name.first || ""}
302-
onChange={handleChange}
303-
data-testid="first-name-input"
304-
aria-label="First name"
305-
/>
300+
<TextField fullWidth name="name.first" label={Locale.label("person.firstName")} id="first" value={person.name.first || ""} onChange={handleChange} data-testid="first-name-input" aria-label="First name" />
306301
</Grid>
307302
<Grid size={{ xs: 12, md: 4 }}>
308303
<TextField fullWidth name="name.middle" label={Locale.label("person.middleName")} id="middle" value={person.name.middle || ""} onChange={handleChange} />
309304
</Grid>
310305
<Grid size={{ xs: 12, md: 4 }}>
311-
<TextField
312-
fullWidth
313-
name="name.last"
314-
label={Locale.label("person.lastName")}
315-
id="last"
316-
value={person.name.last || ""}
317-
onChange={handleChange}
318-
data-testid="last-name-input"
319-
aria-label="Last name"
320-
/>
306+
<TextField fullWidth name="name.last" label={Locale.label("person.lastName")} id="last" value={person.name.last || ""} onChange={handleChange} data-testid="last-name-input" aria-label="Last name" />
321307
</Grid>
322308
</Grid>
323309
<Grid container spacing={3}>
324310
<Grid size={{ xs: 12, md: 6 }}>
325-
<TextField
326-
fullWidth
327-
name="contactInfo.email"
328-
label={Locale.label("person.email")}
329-
type="email"
330-
id="email"
331-
value={person.contactInfo.email || ""}
332-
onChange={handleChange}
333-
data-testid="email-input"
334-
aria-label="Email address"
335-
/>
311+
<TextField fullWidth name="contactInfo.email" label={Locale.label("person.email")} type="email" id="email" value={person.contactInfo.email || ""} onChange={handleChange} data-testid="email-input" aria-label="Email address" />
336312
</Grid>
337313
<Grid size={{ xs: 12, md: 6 }}>
338-
<TextField
339-
inputProps={{ maxLength: 20 }}
340-
fullWidth
341-
name="nametagNotes"
342-
label={Locale.label("people.personEdit.nameNote")}
343-
id="nametagnotes"
344-
value={person.nametagNotes || ""}
345-
onChange={handleChange}
346-
/>
314+
<TextField inputProps={{ maxLength: 20 }} fullWidth name="nametagNotes" label={Locale.label("people.personEdit.nameNote")} id="nametagnotes" value={person.nametagNotes || ""} onChange={handleChange} />
347315
</Grid>
348316
</Grid>
349317
</Grid>
350318
</Grid>
351319
<Grid container spacing={3}>
352320
<Grid size={{ xs: 12, md: 4 }}>
353-
<TextField
354-
fullWidth
355-
name="name.nick"
356-
id="nick"
357-
label={Locale.label("person.nickName")}
358-
value={person.name.nick || ""}
359-
onChange={handleChange}
360-
data-testid="nickname-input"
361-
aria-label="Nickname"
362-
/>
321+
<TextField fullWidth name="name.nick" id="nick" label={Locale.label("person.nickName")} value={person.name.nick || ""} onChange={handleChange} data-testid="nickname-input" aria-label="Nickname" />
363322
</Grid>
364323
<Grid size={{ xs: 12, md: 4 }}>
365324
<FormControl fullWidth>
366325
<InputLabel id="membershipStatus-label">{Locale.label("person.membershipStatus")}</InputLabel>
367-
<Select
368-
name="membershipStatus"
369-
id="membershipStatus"
370-
labelId="membershipStatus-label"
371-
label={Locale.label("person.membershipStatus")}
372-
value={person.membershipStatus || ""}
373-
onChange={handleChange}
374-
data-testid="membership-status-select"
375-
aria-label="Membership status">
326+
<Select name="membershipStatus" id="membershipStatus" labelId="membershipStatus-label" label={Locale.label("person.membershipStatus")} value={person.membershipStatus || ""} onChange={handleChange} data-testid="membership-status-select" aria-label="Membership status">
376327
<MenuItem value="Visitor">{Locale.label("person.visitor")}</MenuItem>
377328
<MenuItem value="Regular Attendee">{Locale.label("person.regularAttendee")}</MenuItem>
378329
<MenuItem value="Member">{Locale.label("person.member")}</MenuItem>
@@ -382,34 +333,15 @@ export const PersonEdit = memo((props: Props) => {
382333
</FormControl>
383334
</Grid>
384335
<Grid size={{ xs: 12, md: 4 }}>
385-
<TextField
386-
fullWidth
387-
type="date"
388-
name="birthDate"
389-
id="birthDate"
390-
InputLabelProps={{ shrink: true }}
391-
label={Locale.label("person.birthDate")}
392-
value={DateHelper.formatHtml5Date(person.birthDate)}
393-
onChange={handleChange}
394-
data-testid="birth-date-input"
395-
aria-label="Birth date"
396-
/>
336+
<TextField fullWidth type="date" name="birthDate" id="birthDate" InputLabelProps={{ shrink: true }} label={Locale.label("person.birthDate")} value={DateHelper.formatHtml5Date(person.birthDate)} onChange={handleChange} data-testid="birth-date-input" aria-label="Birth date" />
397337
</Grid>
398338
</Grid>
399339

400340
<Grid container spacing={3}>
401341
<Grid size={{ xs: 12, md: 4 }}>
402342
<FormControl fullWidth>
403343
<InputLabel id="gender-label">{Locale.label("person.gender")}</InputLabel>
404-
<Select
405-
name="gender"
406-
id="gender"
407-
labelId="gender-label"
408-
label={Locale.label("person.gender")}
409-
value={person.gender || ""}
410-
onChange={handleChange}
411-
data-testid="gender-select"
412-
aria-label="Gender">
344+
<Select name="gender" id="gender" labelId="gender-label" label={Locale.label("person.gender")} value={person.gender || ""} onChange={handleChange} data-testid="gender-select" aria-label="Gender">
413345
<MenuItem value="Unspecified">{Locale.label("person.unspecified")}</MenuItem>
414346
<MenuItem value="Male">{Locale.label("person.male")}</MenuItem>
415347
<MenuItem value="Female">{Locale.label("person.female")}</MenuItem>
@@ -419,15 +351,7 @@ export const PersonEdit = memo((props: Props) => {
419351
<Grid size={{ xs: 12, md: 4 }}>
420352
<FormControl fullWidth>
421353
<InputLabel id="maritalStatus-label">{Locale.label("person.maritalStatus")}</InputLabel>
422-
<Select
423-
name="maritalStatus"
424-
id="maritalStatus"
425-
label={Locale.label("people.personEdit.maritalStatus")}
426-
labelId="maritalStatus-label"
427-
value={person.maritalStatus || ""}
428-
onChange={handleChange}
429-
data-testid="marital-status-select"
430-
aria-label="Marital status">
354+
<Select name="maritalStatus" id="maritalStatus" label={Locale.label("people.personEdit.maritalStatus")} labelId="maritalStatus-label" value={person.maritalStatus || ""} onChange={handleChange} data-testid="marital-status-select" aria-label="Marital status">
431355
<MenuItem value="Unknown">{Locale.label("person.unknown")}</MenuItem>
432356
<MenuItem value="Single">{Locale.label("person.single")}</MenuItem>
433357
<MenuItem value="Married">{Locale.label("person.married")}</MenuItem>
@@ -437,153 +361,45 @@ export const PersonEdit = memo((props: Props) => {
437361
</FormControl>
438362
</Grid>
439363
<Grid size={{ xs: 12, md: 4 }}>
440-
<TextField
441-
fullWidth
442-
type="date"
443-
name="anniversary"
444-
id="anniversary"
445-
InputLabelProps={{ shrink: true }}
446-
label={Locale.label("person.anniversary")}
447-
value={DateHelper.formatHtml5Date(person.anniversary)}
448-
onChange={handleChange}
449-
data-testid="anniversary-input"
450-
aria-label="Anniversary"
451-
/>
364+
<TextField fullWidth type="date" name="anniversary" id="anniversary" InputLabelProps={{ shrink: true }} label={Locale.label("person.anniversary")} value={DateHelper.formatHtml5Date(person.anniversary)} onChange={handleChange} data-testid="anniversary-input" aria-label="Anniversary" />
452365
</Grid>
453366
</Grid>
454367

455368
<Grid container spacing={3}>
456369
<Grid size={{ md: 8 }}>
457370
<div className="section">{Locale.label("person.address")}</div>
458-
<TextField
459-
name="contactInfo.address1"
460-
id="address1"
461-
fullWidth
462-
label={Locale.label("person.line1")}
463-
value={person.contactInfo?.address1 || ""}
464-
onChange={handleChange}
465-
data-testid="address1-input"
466-
aria-label="Address line 1"
467-
/>
468-
<TextField
469-
name="contactInfo.address2"
470-
id="address2"
471-
fullWidth
472-
label={Locale.label("person.line2")}
473-
value={person.contactInfo?.address2 || ""}
474-
onChange={handleChange}
475-
data-testid="address2-input"
476-
aria-label="Address line 2"
477-
/>
371+
<TextField name="contactInfo.address1" id="address1" fullWidth label={Locale.label("person.line1")} value={person.contactInfo?.address1 || ""} onChange={handleChange} data-testid="address1-input" aria-label="Address line 1" />
372+
<TextField name="contactInfo.address2" id="address2" fullWidth label={Locale.label("person.line2")} value={person.contactInfo?.address2 || ""} onChange={handleChange} data-testid="address2-input" aria-label="Address line 2" />
478373
<Grid container spacing={3}>
479374
<Grid size={{ xs: 6 }}>
480-
<TextField
481-
name="contactInfo.city"
482-
id="city"
483-
fullWidth
484-
label={Locale.label("person.city")}
485-
value={person.contactInfo?.city || ""}
486-
onChange={handleChange}
487-
data-testid="city-input"
488-
aria-label="City"
489-
/>
375+
<TextField name="contactInfo.city" id="city" fullWidth label={Locale.label("person.city")} value={person.contactInfo?.city || ""} onChange={handleChange} data-testid="city-input" aria-label="City" />
490376
</Grid>
491377
<Grid size={{ xs: 3 }}>
492-
<TextField
493-
name="contactInfo.state"
494-
id="state"
495-
fullWidth
496-
label={Locale.label("person.state")}
497-
value={person.contactInfo?.state || ""}
498-
onChange={handleChange}
499-
data-testid="state-input"
500-
aria-label="State"
501-
/>
378+
<TextField name="contactInfo.state" id="state" fullWidth label={Locale.label("person.state")} value={person.contactInfo?.state || ""} onChange={handleChange} data-testid="state-input" aria-label="State" />
502379
</Grid>
503380
<Grid size={{ xs: 3 }}>
504-
<TextField
505-
name="contactInfo.zip"
506-
id="zip"
507-
fullWidth
508-
label={Locale.label("person.zip")}
509-
value={person.contactInfo?.zip || ""}
510-
onChange={handleChange}
511-
data-testid="zip-input"
512-
aria-label="ZIP code"
513-
/>
381+
<TextField name="contactInfo.zip" id="zip" fullWidth label={Locale.label("person.zip")} value={person.contactInfo?.zip || ""} onChange={handleChange} data-testid="zip-input" aria-label="ZIP code" />
514382
</Grid>
515383
</Grid>
516384
</Grid>
517385
<Grid size={{ md: 3 }}>
518386
<div className="section">{Locale.label("person.phone")}</div>
519-
<MuiTelInput
520-
fullWidth
521-
name="contactInfo.homePhone"
522-
id="homePhone"
523-
label={Locale.label("people.personEdit.home")}
524-
value={person.contactInfo?.homePhone}
525-
onChange={(value) => handlePhoneChange(value, "homePhone")}
526-
defaultCountry="US"
527-
focusOnSelectCountry
528-
inputProps={ariaDesc}
529-
error={phoneHasError.homePhone}
530-
MenuProps={ariaLabel}
531-
helperText={<div id="errorMsg">{phoneHasError.homePhone && <p style={{ margin: 0, color: "#d32f2f" }}>{Locale.label("people.personEdit.invalForm")}</p>}</div>}
532-
/>
533-
<MuiTelInput
534-
fullWidth
535-
name="contactInfo.workPhone"
536-
id="workPhone"
537-
label={Locale.label("people.personEdit.work")}
538-
value={person.contactInfo?.workPhone}
539-
onChange={(value) => handlePhoneChange(value, "workPhone")}
540-
defaultCountry="US"
541-
focusOnSelectCountry
542-
inputProps={ariaDesc}
543-
error={phoneHasError.workPhone}
544-
MenuProps={ariaLabel}
545-
helperText={<div id="errorMsg">{phoneHasError.workPhone && <p style={{ margin: 0, color: "#d32f2f" }}>{Locale.label("people.personEdit.invalForm")}</p>}</div>}
546-
/>
547-
<MuiTelInput
548-
fullWidth
549-
name="contactInfo.mobilePhone"
550-
id="mobilePhone"
551-
label={Locale.label("people.personEdit.mobile")}
552-
value={person.contactInfo?.mobilePhone}
553-
onChange={(value) => handlePhoneChange(value, "mobilePhone")}
554-
defaultCountry="US"
555-
focusOnSelectCountry
556-
inputProps={ariaDesc}
557-
error={phoneHasError.mobilePhone}
558-
MenuProps={ariaLabel}
559-
helperText={<div id="errorMsg">{phoneHasError.mobilePhone && <p style={{ margin: 0, color: "#d32f2f" }}>{Locale.label("people.personEdit.invalForm")}</p>}</div>}
560-
/>
387+
<MuiTelInput fullWidth name="contactInfo.homePhone" id="homePhone" label={Locale.label("people.personEdit.home")} value={person.contactInfo?.homePhone} onChange={(value) => handlePhoneChange(value, "homePhone")} defaultCountry="US" focusOnSelectCountry inputProps={ariaDesc} error={phoneHasError.homePhone} MenuProps={ariaLabel} helperText={<div id="errorMsg">{phoneHasError.homePhone && <p style={{ margin: 0, color: "#d32f2f" }}>{Locale.label("people.personEdit.invalForm")}</p>}</div>} />
388+
<MuiTelInput fullWidth name="contactInfo.workPhone" id="workPhone" label={Locale.label("people.personEdit.work")} value={person.contactInfo?.workPhone} onChange={(value) => handlePhoneChange(value, "workPhone")} defaultCountry="US" focusOnSelectCountry inputProps={ariaDesc} error={phoneHasError.workPhone} MenuProps={ariaLabel} helperText={<div id="errorMsg">{phoneHasError.workPhone && <p style={{ margin: 0, color: "#d32f2f" }}>{Locale.label("people.personEdit.invalForm")}</p>}</div>} />
389+
<MuiTelInput fullWidth name="contactInfo.mobilePhone" id="mobilePhone" label={Locale.label("people.personEdit.mobile")} value={person.contactInfo?.mobilePhone} onChange={(value) => handlePhoneChange(value, "mobilePhone")} defaultCountry="US" focusOnSelectCountry inputProps={ariaDesc} error={phoneHasError.mobilePhone} MenuProps={ariaLabel} helperText={<div id="errorMsg">{phoneHasError.mobilePhone && <p style={{ margin: 0, color: "#d32f2f" }}>{Locale.label("people.personEdit.invalForm")}</p>}</div>} />
561390
</Grid>
562391
<Grid size={{ md: 1 }}>
563392
<div className="section">{Locale.label("people.personEdit.exten")}</div>
564-
<TextField
565-
fullWidth
566-
name="contactInfo.homePhone"
567-
label={Locale.label("people.personEdit.home")}
568-
value={person.contactInfo?.homePhone?.split("x")[1] || ""}
569-
onChange={handleChangeExtention}
570-
InputProps={{ inputProps: { maxLength: 4 } }}
571-
/>
572-
<TextField
573-
fullWidth
574-
name="contactInfo.workPhone"
575-
label={Locale.label("people.personEdit.work")}
576-
value={person.contactInfo?.workPhone?.split("x")[1] || ""}
577-
onChange={handleChangeExtention}
578-
InputProps={{ inputProps: { maxLength: 4 } }}
579-
/>
580-
<TextField
581-
fullWidth
582-
name="contactInfo.mobilePhone"
583-
label={Locale.label("people.personEdit.mobile")}
584-
value={person.contactInfo?.mobilePhone?.split("x")[1] || ""}
585-
onChange={handleChangeExtention}
586-
InputProps={{ inputProps: { maxLength: 4 } }}
393+
<TextField fullWidth name="contactInfo.homePhone" label={Locale.label("people.personEdit.home")} value={person.contactInfo?.homePhone?.split("x")[1] || ""} onChange={handleChangeExtention} InputProps={{ inputProps: { maxLength: 4 } }} />
394+
<TextField fullWidth name="contactInfo.workPhone" label={Locale.label("people.personEdit.work")} value={person.contactInfo?.workPhone?.split("x")[1] || ""} onChange={handleChangeExtention} InputProps={{ inputProps: { maxLength: 4 } }} />
395+
<TextField fullWidth name="contactInfo.mobilePhone" label={Locale.label("people.personEdit.mobile")} value={person.contactInfo?.mobilePhone?.split("x")[1] || ""} onChange={handleChangeExtention} InputProps={{ inputProps: { maxLength: 4 } }} />
396+
</Grid>
397+
</Grid>
398+
<Grid container spacing={3} sx={{ mt: 2 }}>
399+
<Grid size={12}>
400+
<FormControlLabel
401+
control={<Checkbox name="optedOut" checked={person.optedOut || false} onChange={handleChange} data-testid="opt-out-checkbox" />}
402+
label={Locale.label("profile.profilePage.noDirect")}
587403
/>
588404
</Grid>
589405
</Grid>

0 commit comments

Comments
 (0)