make pronouns multi-select and require gender (or prefer no answer) at account creation

Author: tektaxi

src/config/genders.ts

@@ -2,6 +2,7 @@ export enum Genders {
   FEMALE = 'Female',
   MALE = 'Male',
   NON_BINARY = 'Non-binary',
+  OTHER = 'Other (not listed)',
   NO_ANSWER = 'Prefer not to answer',
 }
 export default Genders;

src/config/userTypes.ts

@@ -24,7 +24,7 @@ export interface IAccount {
   // The user's birthdate
   birthDate?: string;
   // The preferred pronoun
-  pronoun: string;
+  pronoun: String[];
   // The database id (if new, leave blank / make '')
   id: string;
   _id?: string;

src/features/Account/ManageAccountForm.tsx

@@ -78,7 +78,7 @@ const ManageAccountForm: React.FC<IManageAccountProps> = (props) => {
     lastName: '',
     password: getNestedAttr(props, ['location', 'state', 'password']) || '',
     phoneNumber: '',
-    pronoun: '',
+    pronoun: [],
     gender: '',
     dietaryRestrictions: [],
   });
@@ -319,17 +319,17 @@ const ManageAccountForm: React.FC<IManageAccountProps> = (props) => {
         options={getOptionsFromEnum(Genders)}
         required={true}
         value={fp.values.gender}
-        showOptionalLabel={true}
       />
       <ErrorMessage component={FormikElements.Error} name="gender" />
       <FastField
         component={FormikElements.Select}
         creatable={true}
         label={CONSTANTS.PRONOUN_LABEL}
         name={'pronoun'}
+        isMulti={true}
         placeholder={CONSTANTS.PRONOUN_PLACEHOLDER}
         options={getOptionsFromEnum(Pronouns)}
-        required={true}
+        required={false}
         value={fp.values.pronoun}
         showOptionalLabel={true}
       />

src/features/Account/validationSchema.ts

@@ -15,10 +15,10 @@ const getValidationSchema = (isCreate: boolean) => {
     email: string().required('Required').email('Must be a valid email'),
     password,
     newPassword: string().min(6, 'Must be at least 6 characters'),
-    pronoun: string(),
-    gender: string(),
+    pronoun: array().of(string()),
+    gender: string().required('Required'),
     dietaryRestrictions: array().of(string()),
-    phoneNumber: string().test(
+    phoneNumber: string().required('Required').test(
       'validPhone',
       'Must be a valid phone number',
       (value) => {

src/features/HackPass/Pass.tsx

@@ -16,7 +16,7 @@ export const Pass: React.FunctionComponent<IPassProps> = (
       <img src={props.qrData} className="qrCode" alt="" />
       <div className="info">
         <h2>{props.account.firstName}</h2>
-        <h3>{props.account.pronoun}</h3>
+        <h3>{props.account.pronoun.join(", ")}</h3>
         <h3>{props.hacker.application.general.school}</h3>
       </div>
     </div>

src/util/UserInfoHelperFunctions.tsx

@@ -298,7 +298,7 @@ export async function generateHackPass(
 
   if (account.pronoun) {
     doc.text('Hacker', 8, 15);
-    doc.text(account.pronoun, 8, 17);
+    doc.text(account.pronoun.join(", "), 8, 17);
   } else {
     doc.text('Hacker', 8, 16);
   }