MAIN B-19226 Onboarding required fields

pkg/handlers/internalapi/moves.go

@@ -368,6 +368,18 @@ func (h GetAllMovesHandler) Handle(params moveop.GetAllMovesParams) middleware.R
 			}
 			/** End of Feature Flag Block **/
 
+			/** Feature Flag - Mobile Home Shipment **/
+			featureFlagNameMH := "mobileHome"
+			isMobileHomeFeatureOn := false
+			flagMH, err := h.FeatureFlagFetcher().GetBooleanFlagForUser(params.HTTPRequest.Context(), appCtx, featureFlagNameMH, map[string]string{})
+			if err != nil {
+				appCtx.Logger().Error("Error fetching feature flag", zap.String("featureFlagKey", featureFlagName), zap.Error(err))
+				isMobileHomeFeatureOn = false
+			} else {
+				isMobileHomeFeatureOn = flagMH.Match
+			}
+			/** End of Feature Flag Block **/
+
 			for _, move := range movesList {
 
 				/** Feature Flag - Boat Shipment **/
@@ -448,6 +460,23 @@ func (h GetAllMovesHandler) Handle(params moveop.GetAllMovesParams) middleware.R
 					}
 					/** End of Feature Flag Block **/
 
+					/** Feature Flag - Mobile Home Shipment **/
+					if !isMobileHomeFeatureOn {
+						var filteredShipments models.MTOShipments
+						if move.MTOShipments != nil {
+							filteredShipments = models.MTOShipments{}
+						}
+						for i, shipment := range move.MTOShipments {
+							if shipment.ShipmentType == models.MTOShipmentTypeMobileHome {
+								continue
+							}
+
+							filteredShipments = append(filteredShipments, move.MTOShipments[i])
+						}
+						move.MTOShipments = filteredShipments
+					}
+					/** End of Feature Flag Block **/
+
 					previousMovesList = append(previousMovesList, move)
 				}
 			}

pkg/services/orchestrators/shipment/shipment_updater.go

@@ -80,7 +80,7 @@ func (s *shipmentUpdater) UpdateShipment(appCtx appcontext.AppContext, shipment
 			mtoShipment.BoatShipment = boatShipment
 
 			return nil
-		} else if shipment.ShipmentType == models.MTOShipmentTypeMobileHome {
+		} else if shipment.ShipmentType == models.MTOShipmentTypeMobileHome && shipment.MobileHome != nil {
 			shipment.MobileHome.ShipmentID = mtoShipment.ID
 			shipment.MobileHome.Shipment = *mtoShipment
 

src/components/Customer/BackupAddressForm/BackupAddressForm.jsx

@@ -36,6 +36,7 @@ const BackupAddressForm = ({ formFieldsName, initialValues, onSubmit, onBack })
 
             <SectionWrapper className={formStyles.formSection}>
               <AddressFields
+                labelHint="Required"
                 name={formFieldsName}
                 formikFunctionsToValidatePostalCodeOnChange={{ setFieldTouched, handleChange }}
               />

src/components/Customer/BackupAddressForm/BackupAddressForm.test.jsx

@@ -34,25 +34,25 @@ describe('BackupAddressForm component', () => {
     const { getByLabelText } = render(<BackupAddressForm {...testProps} />);
 
     await waitFor(() => {
-      expect(getByLabelText('Address 1')).toBeInstanceOf(HTMLInputElement);
+      expect(getByLabelText(/Address 1/)).toBeInstanceOf(HTMLInputElement);
 
       expect(getByLabelText(/Address 2/)).toBeInstanceOf(HTMLInputElement);
 
-      expect(getByLabelText('City')).toBeInstanceOf(HTMLInputElement);
+      expect(getByLabelText(/City/)).toBeInstanceOf(HTMLInputElement);
 
-      expect(getByLabelText('State')).toBeInstanceOf(HTMLSelectElement);
+      expect(getByLabelText(/State/)).toBeInstanceOf(HTMLSelectElement);
 
-      expect(getByLabelText('ZIP')).toBeInstanceOf(HTMLInputElement);
+      expect(getByLabelText(/ZIP/)).toBeInstanceOf(HTMLInputElement);
     });
   });
 
   it('shows an error message if trying to submit an invalid form', async () => {
     const { getByRole, findAllByRole, getByLabelText } = render(<BackupAddressForm {...testProps} />);
-    await userEvent.click(getByLabelText('Address 1'));
+    await userEvent.click(getByLabelText(/Address 1/));
     await userEvent.click(getByLabelText(/Address 2/));
-    await userEvent.click(getByLabelText('City'));
-    await userEvent.click(getByLabelText('ZIP'));
-    await userEvent.click(getByLabelText('State'));
+    await userEvent.click(getByLabelText(/City/));
+    await userEvent.click(getByLabelText(/ZIP/));
+    await userEvent.click(getByLabelText(/State/));
 
     const submitBtn = getByRole('button', { name: 'Next' });
     await userEvent.click(submitBtn);
@@ -71,11 +71,11 @@ describe('BackupAddressForm component', () => {
     const { getByRole, getByLabelText } = render(<BackupAddressForm {...testProps} />);
     const submitBtn = getByRole('button', { name: 'Next' });
 
-    await userEvent.type(getByLabelText('Address 1'), fakeAddress.streetAddress1);
+    await userEvent.type(getByLabelText(/Address 1/), fakeAddress.streetAddress1);
     await userEvent.type(getByLabelText(/Address 2/), fakeAddress.streetAddress2);
-    await userEvent.type(getByLabelText('City'), fakeAddress.city);
-    await userEvent.selectOptions(getByLabelText('State'), [fakeAddress.state]);
-    await userEvent.type(getByLabelText('ZIP'), fakeAddress.postalCode);
+    await userEvent.type(getByLabelText(/City/), fakeAddress.city);
+    await userEvent.selectOptions(getByLabelText(/State/), [fakeAddress.state]);
+    await userEvent.type(getByLabelText(/ZIP/), fakeAddress.postalCode);
     await userEvent.tab();
 
     await waitFor(() => {

src/components/Customer/BackupContactForm/BackupContactForm.stories.jsx

@@ -18,7 +18,12 @@ const emptyInitialValues = {
 };
 
 export const DefaultState = (argTypes) => (
-  <BackupContactForm initialValues={emptyInitialValues} onSubmit={argTypes.onSubmit} onBack={argTypes.onBack} />
+  <BackupContactForm
+    initialValues={emptyInitialValues}
+    onSubmit={argTypes.onSubmit}
+    onBack={argTypes.onBack}
+    labelHint="Required"
+  />
 );
 
 export const WithInitialValues = (argTypes) => (
@@ -30,5 +35,6 @@ export const WithInitialValues = (argTypes) => (
     }}
     onSubmit={argTypes.onSubmit}
     onBack={argTypes.onBack}
+    labelHint="Required"
   />
 );

src/components/Customer/BackupContactForm/BackupContactForm.test.jsx

@@ -20,18 +20,18 @@ describe('BackupContactForm Component', () => {
     const { getByLabelText } = render(<BackupContactForm {...testProps} />);
 
     await waitFor(() => {
-      expect(getByLabelText('Name')).toBeInstanceOf(HTMLInputElement);
-      expect(getByLabelText('Name')).toBeRequired();
-      expect(getByLabelText('Phone')).toBeInstanceOf(HTMLInputElement);
-      expect(getByLabelText('Phone')).toBeRequired();
-      expect(getByLabelText('Email')).toBeInstanceOf(HTMLInputElement);
-      expect(getByLabelText('Email')).toBeRequired();
+      expect(getByLabelText(/Name/)).toBeInstanceOf(HTMLInputElement);
+      expect(getByLabelText(/Name/)).toBeRequired();
+      expect(getByLabelText(/Phone/)).toBeInstanceOf(HTMLInputElement);
+      expect(getByLabelText(/Phone/)).toBeRequired();
+      expect(getByLabelText(/Email/)).toBeInstanceOf(HTMLInputElement);
+      expect(getByLabelText(/Email/)).toBeRequired();
     });
   });
 
   it('validates the contact phone field', async () => {
     const { getByText, getByLabelText } = render(<BackupContactForm {...testProps} />);
-    await userEvent.type(getByLabelText('Phone'), '12345');
+    await userEvent.type(getByLabelText(/Phone/), '12345');
     await userEvent.tab();
 
     await waitFor(() => {
@@ -43,7 +43,7 @@ describe('BackupContactForm Component', () => {
 
   it('validates the email field', async () => {
     const { getByText, getByLabelText } = render(<BackupContactForm {...testProps} />);
-    await userEvent.type(getByLabelText('Email'), 'sample@');
+    await userEvent.type(getByLabelText(/Email/), 'sample@');
     await userEvent.tab();
 
     await waitFor(() => {
@@ -52,17 +52,17 @@ describe('BackupContactForm Component', () => {
   });
 
   it('shows an error message when trying to submit an invalid form', async () => {
-    const { getAllByText, getByRole, getByLabelText } = render(<BackupContactForm {...testProps} />);
+    const { getAllByTestId, getByRole, getByLabelText } = render(<BackupContactForm {...testProps} />);
     const submitBtn = getByRole('button', { name: 'Next' });
 
     // Touch all of the required fields so that they show error messages
-    await userEvent.click(getByLabelText('Name'));
-    await userEvent.click(getByLabelText('Phone'));
-    await userEvent.click(getByLabelText('Email'));
+    await userEvent.click(getByLabelText(/Name/));
+    await userEvent.click(getByLabelText(/Phone/));
+    await userEvent.click(getByLabelText(/Email/));
     await userEvent.click(submitBtn);
 
     await waitFor(() => {
-      expect(getAllByText('Required').length).toBe(3);
+      expect(getAllByTestId('errorMessage').length).toBe(3);
     });
 
     expect(testProps.onSubmit).not.toHaveBeenCalled();
@@ -72,9 +72,9 @@ describe('BackupContactForm Component', () => {
     const { getByRole, getByLabelText } = render(<BackupContactForm {...testProps} />);
     const submitBtn = getByRole('button', { name: 'Next' });
 
-    await userEvent.type(getByLabelText('Name'), 'Joe Schmoe');
-    await userEvent.type(getByLabelText('Phone'), '555-555-5555');
-    await userEvent.type(getByLabelText('Email'), 'test@sample.com');
+    await userEvent.type(getByLabelText(/Name/), 'Joe Schmoe');
+    await userEvent.type(getByLabelText(/Phone/), '555-555-5555');
+    await userEvent.type(getByLabelText(/Email/), 'test@sample.com');
     await userEvent.click(submitBtn);
 
     await waitFor(() => {
@@ -86,9 +86,9 @@ describe('BackupContactForm Component', () => {
     const { getByRole, getByLabelText } = render(<BackupContactForm {...testProps} />);
     const backBtn = getByRole('button', { name: 'Back' });
 
-    await userEvent.type(getByLabelText('Name'), 'Janey Profaney');
-    await userEvent.type(getByLabelText('Phone'), '555-555-1111');
-    await userEvent.click(getByLabelText('Email'));
+    await userEvent.type(getByLabelText(/Name/), 'Janey Profaney');
+    await userEvent.type(getByLabelText(/Phone/), '555-555-1111');
+    await userEvent.click(getByLabelText(/Email/));
     await userEvent.click(backBtn);
 
     await waitFor(() => {

src/components/Customer/BackupContactForm/index.jsx

@@ -27,7 +27,7 @@ const BackupContactForm = ({ initialValues, onSubmit, onBack }) => {
             </p>
             <SectionWrapper className={formStyles.formSection}>
               <div className="tablet:margin-top-neg-3">
-                <BackupContactInfoFields />
+                <BackupContactInfoFields labelHint="Required" />
               </div>
             </SectionWrapper>
             <div className={formStyles.formActions}>

src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx

@@ -7,6 +7,7 @@ import classnames from 'classnames';
 
 import styles from './BoatShipmentForm.module.scss';
 
+import RequiredTag from 'components/form/RequiredTag';
 import SectionWrapper from 'components/Customer/SectionWrapper';
 import Hint from 'components/Hint';
 import Fieldset from 'shared/Fieldset';
@@ -125,6 +126,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
                       name="year"
                       label="Year"
                       id="year"
+                      labelHint="Required"
                       maxLength={4}
                       mask={Number}
                       scale={0}
@@ -143,8 +145,8 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
                   </div>
                 </div>
                 <div className={classnames(styles.formFieldContainer, 'mobile-lg:grid-col-7')}>
-                  <TextField data-testid="make" name="make" label="Make" id="make" required />
-                  <TextField data-testid="model" name="model" label="Model" id="model" required />
+                  <TextField data-testid="make" name="make" label="Make" id="make" required labelHint="Required" />
+                  <TextField data-testid="model" name="model" label="Model" id="model" required labelHint="Required" />
                 </div>
               </SectionWrapper>
               <SectionWrapper className={classnames(styles.sectionWrapper, formStyles.formSection, 'origin')}>
@@ -158,6 +160,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
                   <Fieldset className={styles.formFieldContainer}>
                     <div className="labelWrapper">
                       <legend className="usa-label">Length</legend>
+                      <RequiredTag />
                       <ErrorMessage display={lengthHasError}>Required</ErrorMessage>
                     </div>
                     <div className={classnames(styles.formTextFieldWrapper, 'grid-row grid-gap')}>
@@ -195,6 +198,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
                   <Fieldset className={styles.formFieldContainer}>
                     <div className="labelWrapper">
                       <legend className="usa-label">Width</legend>
+                      <RequiredTag />
                       <ErrorMessage display={widthHasError}>Required</ErrorMessage>
                     </div>
                     <div className={classnames(styles.formTextFieldWrapper, 'grid-row grid-gap')}>
@@ -232,6 +236,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
                   <Fieldset className={styles.formFieldContainer}>
                     <div className="labelWrapper">
                       <legend className="usa-label">Height</legend>
+                      <RequiredTag />
                       <ErrorMessage display={heightHasError}>Required</ErrorMessage>
                     </div>
                     <div className={classnames(styles.formTextFieldWrapper, 'grid-row grid-gap')}>
@@ -272,6 +277,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
                 <h2>Trailer Status</h2>
                 <Fieldset>
                   <legend className="usa-label">Does the boat have a trailer?</legend>
+                  <RequiredTag />
                   <Field
                     as={Radio}
                     id="hasTrailerYes"
@@ -293,6 +299,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
                   {values.hasTrailer === 'true' && (
                     <Fieldset className={styles.formFieldContainer}>
                       <legend className="usa-label">Is the trailer roadworthy?</legend>
+                      <RequiredTag />
                       <Field
                         as={Radio}
                         id="isRoadworthyYes"
@@ -316,13 +323,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
                 </Fieldset>
               </SectionWrapper>
               <SectionWrapper className={formStyles.formSection}>
-                <Fieldset
-                  legend={
-                    <div className={formStyles.legendContent}>
-                      Remarks <span className={formStyles.optional}>Optional</span>
-                    </div>
-                  }
-                >
+                <Fieldset legend={<div className={formStyles.legendContent}>Remarks</div>}>
                   <Label htmlFor="customerRemarks">
                     Are there things about this boat shipment that your counselor or movers should know or discuss with
                     you?

src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.module.scss

@@ -3,7 +3,7 @@
 @import 'shared/styles/colors';
 
 .formContainer {
-  :global(.usa-legend) {
+  :global(.usa-) {
     max-width: none;
   }
   .formTextFieldWrapper {

src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.test.jsx

@@ -108,7 +108,7 @@ describe('BoatShipmentForm component', () => {
         });
       });
 
-      expect(screen.getAllByText('Required').length).toBe(requiredFields.length);
+      expect(screen.getAllByTestId('errorMessage').length).toBe(requiredFields.length);
     });
   });