[chore] address feedback for onboarding

src/app/onboarding/availability/page.tsx

@@ -11,7 +11,7 @@ import { FormControl, FormField, FormItem, FormLabel } from '@/components/Form';
 import Icon from '@/components/Icon';
 import TextAreaInput from '@/components/TextAreaInput';
 import TextInput from '@/components/TextInput';
-import { availabilitySchema } from '@/data/formSchemas';
+import { availabilitySchema, CHAR_LIMIT_MSG } from '@/data/formSchemas';
 import { CardForm, Flex } from '@/styles/containers';
 import { H1Centered } from '@/styles/text';
 import {
@@ -32,6 +32,7 @@ export default function Page() {
   const { backlinkHref, ebbTo, pageProgress } = useOnboardingNavigation();
   const { push } = useRouter();
   const [availabilityError, setAvailabilityError] = useState('');
+  const [hoursError, setHoursError] = useState('');
 
   // scroll to top
   useScrollToTop();
@@ -107,7 +108,7 @@ export default function Page() {
                 </FormLabel>
                 <FormControl>
                   <TextInput
-                    errorText={fieldState.error?.message}
+                    errorText={fieldState.error?.message ?? hoursError}
                     placeholder="x hours per month"
                     inputMode="numeric"
                     defaultValue={
@@ -119,12 +120,21 @@ export default function Page() {
                         onboarding.updateProfile({
                           hours_per_month: undefined,
                         });
+                        setHoursError('');
                         return;
                       }
 
                       const toNum = z.coerce.number().safeParse(newValue);
                       const num = toNum.success ? toNum.data : undefined;
 
+                      if (num === undefined) {
+                        setHoursError('Hours per month must be a number.');
+                      } else if (num < 0) {
+                        setHoursError('Hours per month cannot be negative.');
+                      } else {
+                        setHoursError('');
+                      }
+
                       field.onChange(num);
                       onboarding.updateProfile({
                         hours_per_month: num,
@@ -188,9 +198,7 @@ export default function Page() {
                     error={fieldState.error?.message ?? availabilityError}
                     onChange={newValue => {
                       setAvailabilityError(
-                        newValue.length > 400
-                          ? 'Please keep it within 400 characters'
-                          : '',
+                        newValue.length > 400 ? CHAR_LIMIT_MSG : '',
                       );
                       onboarding.updateProfile({
                         availability_description: newValue,

src/app/onboarding/legal-credentials/page.tsx

@@ -20,7 +20,7 @@ import RadioGroup from '@/components/RadioGroup';
 import TextAreaInput from '@/components/TextAreaInput';
 import TextInput from '@/components/TextInput';
 import { usStates } from '@/data/citiesAndStates';
-import { attorneyCredentialSchema } from '@/data/formSchemas';
+import { attorneyCredentialSchema, CHAR_LIMIT_MSG } from '@/data/formSchemas';
 import { CardForm, Flex } from '@/styles/containers';
 import { H1Centered } from '@/styles/text';
 import { formatTruthy, identity } from '@/utils/helpers';
@@ -49,10 +49,7 @@ export default function Page() {
       eoirRegistered: onboarding.profile.eoir_registered ?? undefined,
       legalCredentialComment:
         onboarding.profile.legal_credential_comment ?? undefined,
-      barred:
-        onboarding.profile.bar_number === undefined
-          ? undefined
-          : onboarding.profile.bar_number !== 'Not Barred',
+      barred: onboarding.profile.has_bar_number ?? undefined,
     },
   });
 
@@ -144,8 +141,9 @@ export default function Page() {
                     error={fieldState.error?.message}
                     onChange={newValue => {
                       const bool = newValue === 'Yes';
-                      const barNum = bool ? '' : 'Not Barred';
+                      const barNum = bool ? '' : 'N/A';
                       onboarding.updateProfile({
+                        has_bar_number: bool,
                         bar_number: barNum,
                       });
                       form.setValue('barNumber', barNum);
@@ -232,9 +230,7 @@ export default function Page() {
                     error={fieldState.error?.message ?? commentError}
                     onChange={newValue => {
                       setCommentError(
-                        newValue.length > 400
-                          ? 'Please keep it within 400 characters'
-                          : '',
+                        newValue.length > 400 ? CHAR_LIMIT_MSG : '',
                       );
                       onboarding.updateProfile({
                         legal_credential_comment: newValue,
@@ -244,7 +240,8 @@ export default function Page() {
                   />
                 </FormControl>
                 <FormDescription>
-                  For example, if you were formerly barred but is not currently.
+                  For example, if you were formerly barred but are not
+                  currently; or, if your state does not have a bar number.
                 </FormDescription>
               </FormItem>
             )}

src/app/onboarding/review/page.tsx

@@ -153,10 +153,18 @@ export default function Page() {
             </Flex>
             <Flex>
               <Styles.SectionField>
-                <H4>What is your attorney bar number?</H4>
-                <P>{onboarding.profile.bar_number || 'N/A'}</P>
+                <H4>Do you have a bar number in this state?</H4>
+                <P>{onboarding.profile.has_bar_number ? 'Yes' : 'No'}</P>
               </Styles.SectionField>
             </Flex>
+            {onboarding.profile.has_bar_number && (
+              <Flex>
+                <Styles.SectionField>
+                  <H4>What is your attorney bar number?</H4>
+                  <P>{onboarding.profile.bar_number || 'N/A'}</P>
+                </Styles.SectionField>
+              </Flex>
+            )}
             <Flex>
               <Styles.SectionField>
                 <H4>
@@ -173,6 +181,12 @@ export default function Page() {
                 </P>
               </Styles.SectionField>
             </Flex>
+            <Flex>
+              <Styles.SectionField>
+                <H4>Is there anything about your bar status we should know?</H4>
+                <P>{onboarding.profile.legal_credential_comment ?? 'N/A'}</P>
+              </Styles.SectionField>
+            </Flex>
           </Styles.SectionBox>
         )}
 

src/app/onboarding/styles.ts

@@ -52,6 +52,7 @@ export const SectionField = styled.div<{ $optional?: boolean }>`
   flex-direction: column;
   gap: 16px;
   width: 100%;
+  overflow-wrap: break-word;
 
   & > h4 {
     ${({ $optional }) =>

src/components/Buttons.tsx

@@ -86,9 +86,9 @@ const ButtonStyles = css<ButtonProps>`
     }
 
     &:active {
-      color: ${COLORS.greyMid};
-      border-color: ${COLORS.greyLight};
-      background: ${COLORS.greyLight};
+      color: ${COLORS.greyMid} !important;
+      border-color: ${COLORS.greyLight} !important;
+      background: ${COLORS.greyLight} !important;
     }
   `
       : null};

src/components/SettingsSection/AvailabilitySection.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { availabilitySchema } from '@/data/formSchemas';
+import { availabilitySchema, CHAR_LIMIT_MSG } from '@/data/formSchemas';
 import { Box } from '@/styles/containers';
 import { Profile } from '@/types/schema';
 import {
@@ -37,6 +37,7 @@ export default function AvailabilitySection() {
   const [startDate, setStartDate] = useState<string>(
     getDateDefault(profile.profileData ?? {}),
   );
+  const [availabilityError, setAvailabilityError] = useState('');
 
   const form = useForm<z.infer<typeof availabilitySchema>>({
     resolver: zodResolver(availabilitySchema),
@@ -65,6 +66,7 @@ export default function AvailabilitySection() {
               setIsEditing(false);
               form.reset(getFormDefaults(profile.profileData ?? {}));
               setStartDate(getDateDefault(profile.profileData ?? {}));
+              setAvailabilityError('');
             }}
             isSubmitting={form.formState.isSubmitting}
           >
@@ -123,8 +125,13 @@ export default function AvailabilitySection() {
                 <TextAreaInput
                   placeholder="I won't be available from..."
                   defaultValue={field.value ?? ''}
-                  error={fieldState.error?.message}
-                  onChange={field.onChange}
+                  error={fieldState.error?.message ?? availabilityError}
+                  onChange={newValue => {
+                    setAvailabilityError(
+                      newValue.length > 400 ? CHAR_LIMIT_MSG : '',
+                    );
+                    field.onChange(newValue);
+                  }}
                 />
               )}
             />

src/components/SettingsSection/RolesSection.tsx

@@ -3,7 +3,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { usStates } from '@/data/citiesAndStates';
-import { FormRoleEnum, roleAndLegalSchema } from '@/data/formSchemas';
+import {
+  CHAR_LIMIT_MSG,
+  FormRoleEnum,
+  roleAndLegalSchema,
+} from '@/data/formSchemas';
 import { roleOptions } from '@/data/roles';
 import { Box } from '@/styles/containers';
 import { H3 } from '@/styles/text';
@@ -51,10 +55,7 @@ const getFormDefaults = (
       : undefined,
     stateBarred: profile.state_barred,
     roles: defaultRole,
-    barred:
-      profile.bar_number === undefined
-        ? undefined
-        : profile.bar_number !== 'Not Barred',
+    barred: profile.has_bar_number,
     legalCredentialComment: profile.legal_credential_comment,
   };
 
@@ -69,6 +70,7 @@ const getDateDefault = (profile: Partial<Profile>): string =>
 export default function RolesSection() {
   const { profile, auth } = useProfileAuth();
   const [isEditing, setIsEditing] = useState(false);
+  const [commentError, setCommentError] = useState('');
 
   const [expectedBarDate, setExpectedBarDate] = useState<string>(
     getDateDefault(profile.profileData ?? {}),
@@ -110,7 +112,10 @@ export default function RolesSection() {
         eoir_registered:
           isAttorney || isLegalFellow ? values.eoirRegistered : null,
         expected_bar_date: isLegalFellow ? values.expectedBarDate : null,
-        legal_credential_comment: values.legalCredentialComment || null,
+        legal_credential_comment: isAttorney
+          ? values.legalCredentialComment
+          : null,
+        has_bar_number: isAttorney ? values.barred : null,
       }),
       profile.setRoles(rolesToUpdate),
     ]);
@@ -176,6 +181,7 @@ export default function RolesSection() {
                 getFormDefaults(profile.roles, profile.profileData ?? {}),
               );
               setExpectedBarDate(getDateDefault(profile.profileData ?? {}));
+              setCommentError('');
             }}
           >
             <SettingField
@@ -250,7 +256,7 @@ export default function RolesSection() {
                       error={fieldState.error?.message}
                       onChange={newValue => {
                         const bool = newValue === 'Yes';
-                        const barNum = bool ? '' : 'Not Barred';
+                        const barNum = bool ? '' : 'N/A';
                         form.setValue('barNumber', barNum);
                         field.onChange(bool);
                       }}
@@ -351,8 +357,11 @@ export default function RolesSection() {
                   <TextAreaInput
                     placeholder="There are some extenuating circumstances with..."
                     defaultValue={field.value ?? ''}
-                    error={fieldState.error?.message}
+                    error={fieldState.error?.message ?? commentError}
                     onChange={newValue => {
+                      setCommentError(
+                        newValue.length > 400 ? CHAR_LIMIT_MSG : '',
+                      );
                       field.onChange(newValue);
                     }}
                   />

src/components/SettingsSection/index.tsx

@@ -57,8 +57,8 @@ export function SettingSection({
           <Flex $gap="1.25rem" $justify="end">
             <Button
               type="button"
-              $secondaryColor={COLORS.redDark}
-              $tertiaryColor={COLORS.redDarker}
+              $secondaryColor={COLORS.redMid}
+              $tertiaryColor={COLORS.redDark}
               onClick={() => cancelEdit?.()}
             >
               Discard Changes

src/data/formSchemas.ts

@@ -1,6 +1,8 @@
 import z from 'zod';
 import { getCurrentDate } from '@/utils/helpers';
 
+export const CHAR_LIMIT_MSG = 'Your text exceeds the 400-character limit.';
+
 const zodDropdownOption = {
   label: z.string(),
   value: z.string(),
@@ -80,11 +82,7 @@ export const availabilitySchema = z.object({
         'Please include your estimated starting date of availability',
     })
     .min(getCurrentDate(), { message: 'Must select a current or future date' }),
-  availability: z
-    .string()
-    .max(400, 'Please keep it within 400 characters')
-    .optional()
-    .nullable(),
+  availability: z.string().max(400, CHAR_LIMIT_MSG).optional().nullable(),
 });
 
 export const attorneyCredentialSchema = z
@@ -102,7 +100,7 @@ export const attorneyCredentialSchema = z
     eoirRegistered: z.boolean({ required_error: 'Must select one option' }),
     legalCredentialComment: z
       .string()
-      .max(400, 'Please keep it within 400 characters')
+      .max(400, CHAR_LIMIT_MSG)
       .optional()
       .nullable(),
   })
@@ -157,7 +155,7 @@ export const roleAndLegalSchema = z
     barred: z.boolean().optional().nullable(),
     legalCredentialComment: z
       .string()
-      .max(400, 'Please keep it under 400 characters')
+      .max(400, CHAR_LIMIT_MSG)
       .optional()
       .nullable(),
   })

src/styles/containers.ts

@@ -95,6 +95,7 @@ export const Flex = styled.div<FlexProps>`
 
 export const Fill = styled.div`
   width: 100%;
+  overflow-wrap: break-word;
 `;
 
 const CardStyles = css`

src/types/schema.d.ts

@@ -16,6 +16,7 @@ export interface Profile {
   phone_number: string;
   state_barred?: string;
   legal_credential_comment?: string;
+  has_bar_number?: boolean;
 }
 
 export interface ProfileToUpload
@@ -28,6 +29,7 @@ export interface ProfileToUpload
     | 'eoir_registered'
     | 'bar_number'
     | 'legal_credential_comment'
+    | 'has_bar_number'
   > {
   start_date: Date;
   expected_bar_date?: Date | null;
@@ -36,6 +38,7 @@ export interface ProfileToUpload
   eoir_registered?: boolean | null;
   bar_number?: string | null;
   legal_credential_comment?: string | null;
+  has_bar_number?: boolean | null;
 }
 
 // only used for ProfileRoles

src/utils/OnboardingProvider.tsx

@@ -113,7 +113,11 @@ export default function OnboardingProvider({
     if (roles.length === 0) throw new Error('Error: could not determine role!');
 
     if (roles.includes('ATTORNEY')) {
-      if (!userProfile.bar_number) throw new Error('Bar number is required!');
+      if (userProfile.has_bar_number && !userProfile.bar_number)
+        throw new Error('Bar number is required!');
+
+      if (!userProfile.has_bar_number && !userProfile.legal_credential_comment)
+        throw new Error('Comment is required in the absence of bar number!');
 
       if (!userProfile.state_barred)
         throw new Error('State barred is required!');
@@ -149,6 +153,7 @@ export default function OnboardingProvider({
       user_id: uid,
       phone_number: userProfile.phone_number,
       legal_credential_comment: userProfile.legal_credential_comment,
+      has_bar_number: userProfile.has_bar_number,
     };
 
     const userLangs = new Set(canReads.concat(canSpeaks));