diff --git a/src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx b/src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx index d8e04da7494..dea9ef9184f 100644 --- a/src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx +++ b/src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx @@ -51,6 +51,7 @@ import withRouter from 'utils/routing'; import { ORDERS_TYPE } from 'constants/orders'; import { isBooleanFlagEnabled } from 'utils/featureFlags'; import { dateSelectionWeekendHolidayCheck } from 'utils/calendar'; +import { isPreceedingAddressComplete } from 'shared/utils'; const blankAddress = { address: { @@ -105,7 +106,7 @@ class MtoShipmentForm extends Component { const { moveId } = params; const isNTSR = shipmentType === SHIPMENT_OPTIONS.NTSR; - const saveDeliveryAddress = hasDeliveryAddress === 'yes' || isNTSR; + const saveDeliveryAddress = hasDeliveryAddress === 'true' || isNTSR; const preformattedMtoShipment = { shipmentType, @@ -116,14 +117,14 @@ class MtoShipmentForm extends Component { ...delivery, address: saveDeliveryAddress ? delivery.address : undefined, }, - hasSecondaryPickup: hasSecondaryPickup === 'yes', - secondaryPickup: hasSecondaryPickup === 'yes' ? secondaryPickup : {}, - hasSecondaryDelivery: hasSecondaryDelivery === 'yes', - secondaryDelivery: hasSecondaryDelivery === 'yes' ? secondaryDelivery : {}, - hasTertiaryPickup: hasTertiaryPickup === 'yes', - tertiaryPickup: hasTertiaryPickup === 'yes' ? tertiaryPickup : {}, - hasTertiaryDelivery: hasTertiaryDelivery === 'yes', - tertiaryDelivery: hasTertiaryDelivery === 'yes' ? tertiaryDelivery : {}, + hasSecondaryPickup: hasSecondaryPickup === 'true', + secondaryPickup: hasSecondaryPickup === 'true' ? secondaryPickup : {}, + hasSecondaryDelivery: hasSecondaryDelivery === 'true', + secondaryDelivery: hasSecondaryDelivery === 'true' ? secondaryDelivery : {}, + hasTertiaryPickup: hasTertiaryPickup === 'true', + tertiaryPickup: hasTertiaryPickup === 'true' ? tertiaryPickup : {}, + hasTertiaryDelivery: hasTertiaryDelivery === 'true', + tertiaryDelivery: hasTertiaryDelivery === 'true' ? tertiaryDelivery : {}, }; const pendingMtoShipment = formatMtoShipmentForAPI(preformattedMtoShipment); @@ -379,9 +380,10 @@ class MtoShipmentForm extends Component { data-testid="has-secondary-pickup" label="Yes" name="hasSecondaryPickup" - value="yes" + value="true" title="Yes, I have a second pickup address" - checked={hasSecondaryPickup === 'yes'} + checked={hasSecondaryPickup === 'true'} + disabled={!isPreceedingAddressComplete('true', values.pickup.address)} /> - {hasSecondaryPickup === 'yes' && ( + {hasSecondaryPickup === 'true' && ( )} - {isTertiaryAddressEnabled && hasSecondaryPickup === 'yes' && ( + {isTertiaryAddressEnabled && hasSecondaryPickup === 'true' && (

Do you want movers to pick up any belongings from a third address?

@@ -414,9 +417,15 @@ class MtoShipmentForm extends Component { data-testid="has-tertiary-pickup" label="Yes" name="hasTertiaryPickup" - value="yes" + value="true" title="Yes, I have a third pickup address" - checked={hasTertiaryPickup === 'yes'} + checked={hasTertiaryPickup === 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryPickup, + values.secondaryPickup.address, + ) + } />
)} {isTertiaryAddressEnabled && - hasTertiaryPickup === 'yes' && - hasSecondaryPickup === 'yes' && ( + hasTertiaryPickup === 'true' && + hasSecondaryPickup === 'true' && ( <>

Third Pickup Address

)} - {(hasDeliveryAddress === 'yes' || isNTSR) && ( + {(hasDeliveryAddress === 'true' || isNTSR) && ( - {hasSecondaryDelivery === 'yes' && ( + {hasSecondaryDelivery === 'true' && ( )} - {isTertiaryAddressEnabled && hasSecondaryDelivery === 'yes' && ( + {isTertiaryAddressEnabled && hasSecondaryDelivery === 'true' && (

Do you want movers to deliver any belongings to a third address?

@@ -569,9 +586,15 @@ class MtoShipmentForm extends Component { data-testid="has-tertiary-delivery" label="Yes" name="hasTertiaryDelivery" - value="yes" + value="true" title="Yes, I have a third delivery address" - checked={hasTertiaryDelivery === 'yes'} + checked={hasTertiaryDelivery === 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryDelivery, + values.secondaryDelivery.address, + ) + } />
)} {isTertiaryAddressEnabled && - hasTertiaryDelivery === 'yes' && - hasSecondaryDelivery === 'yes' && ( + hasTertiaryDelivery === 'true' && + hasSecondaryDelivery === 'true' && ( <>

Third Delivery Address

)} - {hasDeliveryAddress === 'no' && !isRetireeSeparatee && !isNTSR && ( + {hasDeliveryAddress === 'false' && !isRetireeSeparatee && !isNTSR && (

We can use the zip of your new duty location.
@@ -616,7 +645,7 @@ class MtoShipmentForm extends Component { You can add the specific delivery address later, once you know it.

)} - {hasDeliveryAddress === 'no' && isRetireeSeparatee && !isNTSR && ( + {hasDeliveryAddress === 'false' && isRetireeSeparatee && !isNTSR && (

We can use the zip of the HOR, PLEAD or HOS you entered with your orders.
diff --git a/src/components/Customer/MtoShipmentForm/MtoShipmentForm.test.jsx b/src/components/Customer/MtoShipmentForm/MtoShipmentForm.test.jsx index 424bbe04d55..2f28ca91088 100644 --- a/src/components/Customer/MtoShipmentForm/MtoShipmentForm.test.jsx +++ b/src/components/Customer/MtoShipmentForm/MtoShipmentForm.test.jsx @@ -326,19 +326,46 @@ describe('MtoShipmentForm component', () => { await userEvent.click(screen.getByTitle('Yes, I have a second pickup address')); const streetAddress1 = await screen.findAllByLabelText(/Address 1/); - expect(streetAddress1[1]).toHaveAttribute('name', 'secondaryPickup.address.streetAddress1'); + expect(streetAddress1.length).toBe(1); + expect(streetAddress1[0]).toHaveAttribute('name', 'pickup.address.streetAddress1'); const streetAddress2 = await screen.findAllByLabelText(/Address 2/); - expect(streetAddress2[1]).toHaveAttribute('name', 'secondaryPickup.address.streetAddress2'); + expect(streetAddress2[0]).toHaveAttribute('name', 'pickup.address.streetAddress2'); const city = screen.getAllByTestId('City'); - expect(city[1]).toHaveAttribute('aria-label', 'secondaryPickup.address.city'); + expect(city[0]).toHaveAttribute('aria-label', 'pickup.address.city'); const state = screen.getAllByTestId(/State/); - expect(state[1]).toHaveAttribute('aria-label', 'secondaryPickup.address.state'); + expect(state[0]).toHaveAttribute('aria-label', 'pickup.address.state'); const zip = screen.getAllByTestId(/ZIP/); - expect(zip[1]).toHaveAttribute('aria-label', 'secondaryPickup.address.postalCode'); + expect(zip[0]).toHaveAttribute('aria-label', 'pickup.address.postalCode'); + }); + + it('renders a second address fieldset when the user has a pickup address', async () => { + renderMtoShipmentForm(); + + await userEvent.click(screen.getByTitle('Yes, I know my delivery address')); + + const streetAddress1 = await screen.findAllByLabelText(/Address 1/); + expect(streetAddress1[0]).toHaveAttribute('name', 'pickup.address.streetAddress1'); + expect(streetAddress1[1]).toHaveAttribute('name', 'delivery.address.streetAddress1'); + + const streetAddress2 = await screen.findAllByLabelText(/Address 2/); + expect(streetAddress2[0]).toHaveAttribute('name', 'pickup.address.streetAddress2'); + expect(streetAddress2[1]).toHaveAttribute('name', 'delivery.address.streetAddress2'); + + const city = screen.getAllByTestId('City'); + expect(city[0]).toHaveAttribute('aria-label', 'pickup.address.city'); + expect(city[1]).toHaveAttribute('aria-label', 'delivery.address.city'); + + const state = screen.getAllByTestId('State'); + expect(state[0]).toHaveAttribute('aria-label', 'pickup.address.state'); + expect(state[1]).toHaveAttribute('aria-label', 'delivery.address.state'); + + const zip = screen.getAllByTestId('ZIP'); + expect(zip[0]).toHaveAttribute('aria-label', 'pickup.address.postalCode'); + expect(zip[1]).toHaveAttribute('aria-label', 'delivery.address.postalCode'); }); it('renders a second address fieldset when the user has a delivery address', async () => { @@ -388,24 +415,24 @@ describe('MtoShipmentForm component', () => { await userEvent.click(screen.getByTitle('Yes, I have a second delivery address')); const streetAddress1 = await screen.findAllByLabelText(/Address 1/); - expect(streetAddress1.length).toBe(3); - expect(streetAddress1[2]).toHaveAttribute('name', 'secondaryDelivery.address.streetAddress1'); + expect(streetAddress1[0]).toHaveAttribute('name', 'pickup.address.streetAddress1'); + expect(streetAddress1[1]).toHaveAttribute('name', 'delivery.address.streetAddress1'); const streetAddress2 = await screen.findAllByLabelText(/Address 2/); - expect(streetAddress2.length).toBe(3); - expect(streetAddress2[2]).toHaveAttribute('name', 'secondaryDelivery.address.streetAddress2'); + expect(streetAddress2[0]).toHaveAttribute('name', 'pickup.address.streetAddress2'); + expect(streetAddress2[1]).toHaveAttribute('name', 'delivery.address.streetAddress2'); const city = screen.getAllByTestId('City'); - expect(city.length).toBe(3); - expect(city[2]).toHaveAttribute('aria-label', 'secondaryDelivery.address.city'); + expect(city[0]).toHaveAttribute('aria-label', 'pickup.address.city'); + expect(city[1]).toHaveAttribute('aria-label', 'delivery.address.city'); const state = await screen.getAllByTestId(/State/); - expect(state.length).toBe(3); - expect(state[2]).toHaveAttribute('aria-label', 'secondaryDelivery.address.state'); + expect(state[0]).toHaveAttribute('aria-label', 'pickup.address.state'); + expect(state[1]).toHaveAttribute('aria-label', 'delivery.address.state'); const zip = await screen.getAllByTestId(/ZIP/); - expect(zip.length).toBe(3); - expect(zip[2]).toHaveAttribute('aria-label', 'secondaryDelivery.address.postalCode'); + expect(zip[0]).toHaveAttribute('aria-label', 'pickup.address.postalCode'); + expect(zip[1]).toHaveAttribute('aria-label', 'delivery.address.postalCode'); }); it('goes back when the back button is clicked', async () => { @@ -1134,25 +1161,25 @@ describe('MtoShipmentForm component', () => { }); }); - it('renders a second address fieldset when the user has a second pickup address', async () => { + it('renders a second address fieldset when the user has a pickup address', async () => { renderUBShipmentForm(); await userEvent.click(screen.getByTitle('Yes, I have a second pickup address')); const streetAddress1 = await screen.findAllByLabelText(/Address 1/); - expect(streetAddress1[1]).toHaveAttribute('name', 'secondaryPickup.address.streetAddress1'); + expect(streetAddress1[0]).toHaveAttribute('name', 'pickup.address.streetAddress1'); const streetAddress2 = await screen.findAllByLabelText(/Address 2/); - expect(streetAddress2[1]).toHaveAttribute('name', 'secondaryPickup.address.streetAddress2'); + expect(streetAddress2[0]).toHaveAttribute('name', 'pickup.address.streetAddress2'); const city = screen.getAllByTestId('City'); - expect(city[1]).toHaveAttribute('aria-label', 'secondaryPickup.address.city'); + expect(city[0]).toHaveAttribute('aria-label', 'pickup.address.city'); const state = screen.getAllByTestId('State'); - expect(state[1]).toHaveAttribute('aria-label', 'secondaryPickup.address.state'); + expect(state[0]).toHaveAttribute('aria-label', 'pickup.address.state'); const zip = screen.getAllByTestId('ZIP'); - expect(zip[1]).toHaveAttribute('aria-label', 'secondaryPickup.address.postalCode'); + expect(zip[0]).toHaveAttribute('aria-label', 'pickup.address.postalCode'); }); it('renders a second address fieldset when the user has a delivery address', async () => { diff --git a/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.jsx b/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.jsx index ca158d027cd..f9f86fed5b2 100644 --- a/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.jsx +++ b/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.jsx @@ -21,6 +21,7 @@ import { OptionalAddressSchema } from 'components/Customer/MtoShipmentForm/valid import { requiredAddressSchema, partialRequiredAddressSchema } from 'utils/validation'; import { isBooleanFlagEnabled } from 'utils/featureFlags'; import RequiredTag from 'components/form/RequiredTag'; +import { isPreceedingAddressComplete } from 'shared/utils'; let meta = ''; @@ -45,6 +46,12 @@ let validationShape = { secondaryDestinationAddress: Yup.object().shape({ address: OptionalAddressSchema, }), + tertiaryPickupAddress: Yup.object().shape({ + address: OptionalAddressSchema, + }), + tertiaryDestinationAddress: Yup.object().shape({ + address: OptionalAddressSchema, + }), }; const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMember, move, onBack, onSubmit }) => { @@ -52,6 +59,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb useCurrentResidence: false, pickupAddress: {}, secondaryPickupAddress: {}, + tertiaryPickupAddress: {}, hasSecondaryPickupAddress: mtoShipment?.ppmShipment?.secondaryPickupAddress ? 'true' : 'false', hasTertiaryPickupAddress: mtoShipment?.ppmShipment?.tertiaryPickupAddress ? 'true' : 'false', useCurrentDestinationAddress: false, @@ -62,7 +70,6 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb sitExpected: mtoShipment?.ppmShipment?.sitExpected ? 'true' : 'false', expectedDepartureDate: mtoShipment?.ppmShipment?.expectedDepartureDate || '', closeoutOffice: move?.closeoutOffice || {}, - tertiaryPickupAddress: {}, tertiaryDestinationAddress: {}, }; @@ -228,6 +235,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb name="hasSecondaryPickupAddress" value="true" checked={values.hasSecondaryPickupAddress === 'true'} + disabled={!isPreceedingAddressComplete('true', values.pickupAddress.address)} /> @@ -276,6 +285,12 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb value="true" title="Yes, I have a third delivery address" checked={values.hasTertiaryPickupAddress === 'true'} + disabled={ + !isPreceedingAddressComplete( + values.hasSecondaryPickupAddress, + values.secondaryPickupAddress.address, + ) + } /> @@ -341,6 +362,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb name="hasSecondaryDestinationAddress" value="true" checked={values.hasSecondaryDestinationAddress === 'true'} + disabled={!isPreceedingAddressComplete('true', values.destinationAddress.address)} /> @@ -390,6 +413,12 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb value="true" title="Yes, I have a third delivery address" checked={values.hasTertiaryDestinationAddress === 'true'} + disabled={ + !isPreceedingAddressComplete( + values.hasSecondaryDestinationAddress, + values.secondaryDestinationAddress.address, + ) + } /> diff --git a/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.test.jsx b/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.test.jsx index fa35741a231..5f7fd941cbf 100644 --- a/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.test.jsx +++ b/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.test.jsx @@ -184,23 +184,37 @@ describe('DateAndLocationForm component', () => { , ); - const hasSecondaryDestinationAddress = await screen.getAllByLabelText('Yes')[1]; - await userEvent.click(hasSecondaryDestinationAddress); + await userEvent.click(screen.getByLabelText('Use my current delivery address')); + const postalCodes = screen.getAllByTestId(/ZIP/); const address1 = screen.getAllByLabelText(/Address 1/, { exact: false }); const address2 = screen.getAllByLabelText('Address 2', { exact: false }); - const address3 = screen.getAllByLabelText('Address 3', { exact: false }); const state = screen.getAllByTestId(/State/); const city = screen.getAllByTestId(/City/); + expect(address1[1]).toHaveValue(defaultProps.destinationDutyLocation.address.streetAddress1); + expect(address2[1]).toHaveValue(''); + expect(city[1]).toHaveTextContent(defaultProps.destinationDutyLocation.address.city); + expect(state[1]).toHaveTextContent(defaultProps.destinationDutyLocation.address.state); + expect(postalCodes[1]).toHaveTextContent(defaultProps.destinationDutyLocation.address.postalCode); + + const hasSecondaryDestinationAddress = await screen.getAllByLabelText('Yes')[1]; + + await userEvent.click(hasSecondaryDestinationAddress); + const secondaryPostalCodes = screen.getAllByTestId(/ZIP/); + const secondaryAddress1 = screen.getAllByLabelText(/Address 1/, { exact: false }); + const secondaryAddress2 = screen.getAllByLabelText('Address 2', { exact: false }); + const secondaryAddress3 = screen.getAllByLabelText('Address 3', { exact: false }); + const secondaryState = screen.getAllByTestId(/State/); + const secondaryCity = screen.getAllByTestId(/City/); await waitFor(() => { - expect(address1[2]).toBeInstanceOf(HTMLInputElement); - expect(address2[2]).toBeInstanceOf(HTMLInputElement); - expect(address3[2]).toBeInstanceOf(HTMLInputElement); - expect(state[2]).toBeInstanceOf(HTMLLabelElement); - expect(city[2]).toBeInstanceOf(HTMLLabelElement); - expect(postalCodes[2]).toBeInstanceOf(HTMLLabelElement); + expect(secondaryAddress1[2]).toBeInstanceOf(HTMLInputElement); + expect(secondaryAddress2[2]).toBeInstanceOf(HTMLInputElement); + expect(secondaryAddress3[2]).toBeInstanceOf(HTMLInputElement); + expect(secondaryState[2]).toBeInstanceOf(HTMLLabelElement); + expect(secondaryCity[2]).toBeInstanceOf(HTMLLabelElement); + expect(secondaryPostalCodes[2]).toBeInstanceOf(HTMLLabelElement); }); }); }); diff --git a/src/components/Office/ShipmentForm/ShipmentForm.jsx b/src/components/Office/ShipmentForm/ShipmentForm.jsx index 076212d6953..03e7d006b65 100644 --- a/src/components/Office/ShipmentForm/ShipmentForm.jsx +++ b/src/components/Office/ShipmentForm/ShipmentForm.jsx @@ -70,6 +70,7 @@ import { validateDate } from 'utils/validation'; import { isBooleanFlagEnabled } from 'utils/featureFlags'; import { dateSelectionWeekendHolidayCheck } from 'utils/calendar'; import { datePickerFormat, formatDate } from 'shared/dates'; +import { isPreceedingAddressComplete } from 'shared/utils'; const ShipmentForm = (props) => { const { @@ -560,14 +561,14 @@ const ShipmentForm = (props) => { storageFacility, usesExternalVendor, destinationType, - hasSecondaryPickup: hasSecondaryPickup === 'yes', - secondaryPickup: hasSecondaryPickup === 'yes' ? secondaryPickup : {}, - hasSecondaryDelivery: hasSecondaryDelivery === 'yes', - secondaryDelivery: hasSecondaryDelivery === 'yes' ? secondaryDelivery : {}, - hasTertiaryPickup: hasTertiaryPickup === 'yes', - tertiaryPickup: hasTertiaryPickup === 'yes' ? tertiaryPickup : {}, - hasTertiaryDelivery: hasTertiaryDelivery === 'yes', - tertiaryDelivery: hasTertiaryDelivery === 'yes' ? tertiaryDelivery : {}, + hasSecondaryPickup: hasSecondaryPickup === 'true', + secondaryPickup: hasSecondaryPickup === 'true' ? secondaryPickup : {}, + hasSecondaryDelivery: hasSecondaryDelivery === 'true', + secondaryDelivery: hasSecondaryDelivery === 'true' ? secondaryDelivery : {}, + hasTertiaryPickup: hasTertiaryPickup === 'true', + tertiaryPickup: hasTertiaryPickup === 'true' ? tertiaryPickup : {}, + hasTertiaryDelivery: hasTertiaryDelivery === 'true', + tertiaryDelivery: hasTertiaryDelivery === 'true' ? tertiaryDelivery : {}, }); // Mobile Home Shipment @@ -657,7 +658,6 @@ const ShipmentForm = (props) => { hasTertiaryDelivery, isActualExpenseReimbursement, } = values; - const lengthHasError = !!( (formikProps.touched.lengthFeet && formikProps.errors.lengthFeet === 'Required') || (formikProps.touched.lengthInches && formikProps.errors.lengthFeet === 'Required') @@ -788,7 +788,7 @@ const ShipmentForm = (props) => { if (status === ADDRESS_UPDATE_STATUS.APPROVED) { setValues({ ...values, - hasDeliveryAddress: 'yes', + hasDeliveryAddress: 'true', delivery: { ...values.delivery, address: mtoShipment.deliveryAddressUpdate.newAddress, @@ -962,9 +962,10 @@ const ShipmentForm = (props) => { data-testid="has-secondary-pickup" label="Yes" name="hasSecondaryPickup" - value="yes" + value="true" title="Yes, I have a second pickup address" - checked={hasSecondaryPickup === 'yes'} + checked={hasSecondaryPickup === 'true'} + disabled={!isPreceedingAddressComplete('true', values.pickup.address)} /> { data-testid="no-secondary-pickup" label="No" name="hasSecondaryPickup" - value="no" + value="false" title="No, I do not have a second pickup address" - checked={hasSecondaryPickup !== 'yes'} + checked={hasSecondaryPickup !== 'true'} + disabled={!isPreceedingAddressComplete('true', values.pickup.address)} /> - {hasSecondaryPickup === 'yes' && ( + {hasSecondaryPickup === 'true' && ( <> { data-testid="has-tertiary-pickup" label="Yes" name="hasTertiaryPickup" - value="yes" + value="true" title="Yes, I have a third pickup address" - checked={hasTertiaryPickup === 'yes'} + checked={hasTertiaryPickup === 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryPickup, + values.secondaryPickup.address, + ) + } /> { data-testid="no-tertiary-pickup" label="No" name="hasTertiaryPickup" - value="no" + value="false" title="No, I do not have a third pickup address" - checked={hasTertiaryPickup !== 'yes'} + checked={hasTertiaryPickup !== 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryPickup, + values.secondaryPickup.address, + ) + } /> - {hasTertiaryPickup === 'yes' && ( + {hasTertiaryPickup === 'true' && ( { id="has-secondary-delivery" label="Yes" name="hasSecondaryDelivery" - value="yes" + value="true" title="Yes, I have a second destination location" - checked={hasSecondaryDelivery === 'yes'} + checked={hasSecondaryDelivery === 'true'} + disabled={!isPreceedingAddressComplete('true', values.delivery.address)} /> { id="no-secondary-delivery" label="No" name="hasSecondaryDelivery" - value="no" + value="false" title="No, I do not have a second destination location" - checked={hasSecondaryDelivery !== 'yes'} + checked={hasSecondaryDelivery !== 'true'} + disabled={!isPreceedingAddressComplete('true', values.delivery.address)} /> - {hasSecondaryDelivery === 'yes' && ( + {hasSecondaryDelivery === 'true' && ( <> { data-testid="has-tertiary-delivery" label="Yes" name="hasTertiaryDelivery" - value="yes" + value="true" title="Yes, I have a third delivery address" - checked={hasTertiaryDelivery === 'yes'} + checked={hasTertiaryDelivery === 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryDelivery, + values.secondaryDelivery.address, + ) + } /> { data-testid="no-tertiary-delivery" label="No" name="hasTertiaryDelivery" - value="no" + value="false" title="No, I do not have a third delivery address" - checked={hasTertiaryDelivery !== 'yes'} + checked={hasTertiaryDelivery !== 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryDelivery, + values.secondaryDelivery.address, + ) + } /> - {hasTertiaryDelivery === 'yes' && ( + {hasTertiaryDelivery === 'true' && ( { id="has-delivery-address" label="Yes" name="hasDeliveryAddress" - value="yes" + value="true" title="Yes, I know my delivery address" - checked={hasDeliveryAddress === 'yes'} + checked={hasDeliveryAddress === 'true'} /> - {hasDeliveryAddress === 'yes' ? ( + {hasDeliveryAddress === 'true' ? ( { id="has-secondary-delivery" label="Yes" name="hasSecondaryDelivery" - value="yes" + value="true" title="Yes, I have a second destination location" - checked={hasSecondaryDelivery === 'yes'} + checked={hasSecondaryDelivery === 'true'} + disabled={ + !isPreceedingAddressComplete(hasDeliveryAddress, values.delivery.address) + } /> { id="no-secondary-delivery" label="No" name="hasSecondaryDelivery" - value="no" + value="false" title="No, I do not have a second destination location" - checked={hasSecondaryDelivery !== 'yes'} + checked={hasSecondaryDelivery !== 'true'} + disabled={ + !isPreceedingAddressComplete(hasDeliveryAddress, values.delivery.address) + } /> - {hasSecondaryDelivery === 'yes' && ( + {hasSecondaryDelivery === 'true' && ( <> { data-testid="has-tertiary-delivery" label="Yes" name="hasTertiaryDelivery" - value="yes" + value="true" title="Yes, I have a third delivery address" - checked={hasTertiaryDelivery === 'yes'} + checked={hasTertiaryDelivery === 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryDelivery, + values.secondaryDelivery.address, + ) + } /> { data-testid="no-tertiary-delivery" label="No" name="hasTertiaryDelivery" - value="no" + value="false" title="No, I do not have a third delivery address" - checked={hasTertiaryDelivery !== 'yes'} + checked={hasTertiaryDelivery !== 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryDelivery, + values.secondaryDelivery.address, + ) + } /> - {hasTertiaryDelivery === 'yes' && ( + {hasTertiaryDelivery === 'true' && ( { value="true" title="Yes, there is a second pickup address" checked={hasSecondaryPickup === 'true'} + disabled={!isPreceedingAddressComplete('true', values.pickup.address)} /> { value="false" title="No, there is not a second pickup address" checked={hasSecondaryPickup !== 'true'} + disabled={!isPreceedingAddressComplete('true', values.pickup.address)} /> @@ -1487,6 +1535,12 @@ const ShipmentForm = (props) => { value="true" title="Yes, there is a third pickup address" checked={hasTertiaryPickup === 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryPickup, + values.secondaryPickup.address, + ) + } /> { value="false" title="No, there is not a third pickup address" checked={hasTertiaryPickup !== 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryPickup, + values.secondaryPickup.address, + ) + } /> @@ -1539,6 +1599,7 @@ const ShipmentForm = (props) => { value="true" title="Yes, there is a second destination location" checked={hasSecondaryDestination === 'true'} + disabled={!isPreceedingAddressComplete('true', values.destination.address)} /> { value="false" title="No, there is not a second destination location" checked={hasSecondaryDestination !== 'true'} + disabled={!isPreceedingAddressComplete('true', values.destination.address)} /> @@ -1577,6 +1639,12 @@ const ShipmentForm = (props) => { value="true" title="Yes, I have a third delivery address" checked={hasTertiaryDestination === 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryDestination, + values.secondaryDestination.address, + ) + } /> { value="false" title="No, I do not have a third delivery address" checked={hasTertiaryDestination !== 'true'} + disabled={ + !isPreceedingAddressComplete( + hasSecondaryDestination, + values.secondaryDestination.address, + ) + } /> diff --git a/src/shared/utils.js b/src/shared/utils.js index 12ccf91c7a8..bae96deadaf 100644 --- a/src/shared/utils.js +++ b/src/shared/utils.js @@ -209,3 +209,20 @@ export function checkAddressTogglesToClearAddresses(body) { return values; } + +export function isPreceedingAddressComplete(hasAddress, addressValues) { + if (addressValues === undefined || addressValues.postalCode === undefined) { + return false; + } + + if ( + hasAddress === 'true' && + addressValues.streetAddress1 !== '' && + addressValues.state !== '' && + addressValues.city !== '' && + addressValues.postalCode !== '' + ) { + return true; + } + return false; +} diff --git a/src/utils/formatMtoShipment.js b/src/utils/formatMtoShipment.js index 6a0c6a7e7dc..9543a4f4bab 100644 --- a/src/utils/formatMtoShipment.js +++ b/src/utils/formatMtoShipment.js @@ -205,11 +205,11 @@ export function formatMtoShipmentForDisplay({ tertiaryDelivery: { address: { ...emptyAddressShape }, }, - hasDeliveryAddress: 'no', - hasSecondaryPickup: 'no', - hasSecondaryDelivery: 'no', - hasTertiaryPickup: 'no', - hasTertiaryDelivery: 'no', + hasDeliveryAddress: 'false', + hasSecondaryPickup: 'false', + hasSecondaryDelivery: 'false', + hasTertiaryPickup: 'false', + hasTertiaryDelivery: 'false', ntsRecordedWeight, tacType, sacType, @@ -245,16 +245,16 @@ export function formatMtoShipmentForDisplay({ if (secondaryPickupAddress) { displayValues.secondaryPickup.address = { ...emptyAddressShape, ...secondaryPickupAddress }; - displayValues.hasSecondaryPickup = 'yes'; + displayValues.hasSecondaryPickup = 'true'; } if (tertiaryPickupAddress) { displayValues.tertiaryPickup.address = { ...emptyAddressShape, ...tertiaryPickupAddress }; - displayValues.hasTertiaryPickup = 'yes'; + displayValues.hasTertiaryPickup = 'true'; } if (destinationAddress) { displayValues.delivery.address = { ...emptyAddressShape, ...destinationAddress }; - if (destinationAddress.streetAddress1 !== 'N/A') displayValues.hasDeliveryAddress = 'yes'; + if (destinationAddress.streetAddress1 !== 'N/A') displayValues.hasDeliveryAddress = 'true'; } if (destinationType) { @@ -263,11 +263,11 @@ export function formatMtoShipmentForDisplay({ if (secondaryDeliveryAddress) { displayValues.secondaryDelivery.address = { ...emptyAddressShape, ...secondaryDeliveryAddress }; - displayValues.hasSecondaryDelivery = 'yes'; + displayValues.hasSecondaryDelivery = 'true'; } if (tertiaryDeliveryAddress) { displayValues.tertiaryDelivery.address = { ...emptyAddressShape, ...tertiaryDeliveryAddress }; - displayValues.hasTertiaryDelivery = 'yes'; + displayValues.hasTertiaryDelivery = 'true'; } if (requestedDeliveryDate) { diff --git a/src/utils/formatMtoShipment.test.js b/src/utils/formatMtoShipment.test.js index 172204a3d8e..67291b5f196 100644 --- a/src/utils/formatMtoShipment.test.js +++ b/src/utils/formatMtoShipment.test.js @@ -131,19 +131,19 @@ describe('formatMtoShipmentForDisplay', () => { expect(displayValues.delivery.requestedDate.toDateString()).toBe('Tue Jan 27 2026'); checkAddressesAreEqual(displayValues.delivery.address, emptyAddressShape); checkAgentsAreEqual(displayValues.delivery.agent, emptyAgentShape); - expect(displayValues.hasDeliveryAddress).toBe('no'); + expect(displayValues.hasDeliveryAddress).toBe('false'); checkAddressesAreEqual(displayValues.secondaryPickup.address, emptyAddressShape); - expect(displayValues.hasSecondaryPickup).toBe('no'); + expect(displayValues.hasSecondaryPickup).toBe('false'); checkAddressesAreEqual(displayValues.secondaryDelivery.address, emptyAddressShape); - expect(displayValues.hasSecondaryDelivery).toBe('no'); + expect(displayValues.hasSecondaryDelivery).toBe('false'); checkAddressesAreEqual(displayValues.tertiaryPickup.address, emptyAddressShape); - expect(displayValues.hasTertiaryPickup).toBe('no'); + expect(displayValues.hasTertiaryPickup).toBe('false'); checkAddressesAreEqual(displayValues.tertiaryDelivery.address, emptyAddressShape); - expect(displayValues.hasTertiaryDelivery).toBe('no'); + expect(displayValues.hasTertiaryDelivery).toBe('false'); expect(displayValues.agents).toBeUndefined(); }, @@ -192,15 +192,15 @@ describe('formatMtoShipmentForDisplay', () => { const expectedDeliveryAddress = { ...emptyAddressShape, ...destinationAddress }; checkAddressesAreEqual(displayValues.delivery.address, expectedDeliveryAddress); - expect(displayValues.hasDeliveryAddress).toBe('yes'); + expect(displayValues.hasDeliveryAddress).toBe('true'); const expectedSecondaryPickupAddress = { ...emptyAddressShape, ...secondaryPickupAddress }; checkAddressesAreEqual(displayValues.secondaryPickup.address, expectedSecondaryPickupAddress); - expect(displayValues.hasSecondaryPickup).toBe('yes'); + expect(displayValues.hasSecondaryPickup).toBe('true'); const expectedSecondaryDeliveryAddress = { ...emptyAddressShape, ...secondaryDeliveryAddress }; checkAddressesAreEqual(displayValues.secondaryDelivery.address, expectedSecondaryDeliveryAddress); - expect(displayValues.hasSecondaryDelivery).toBe('yes'); + expect(displayValues.hasSecondaryDelivery).toBe('true'); }); it('can format a shipment with a primary, secondary, and tertiary pickup and destination', () => { @@ -218,23 +218,23 @@ describe('formatMtoShipmentForDisplay', () => { const expectedDeliveryAddress = { ...emptyAddressShape, ...destinationAddress }; checkAddressesAreEqual(displayValues.delivery.address, expectedDeliveryAddress); - expect(displayValues.hasDeliveryAddress).toBe('yes'); + expect(displayValues.hasDeliveryAddress).toBe('true'); const expectedSecondaryPickupAddress = { ...emptyAddressShape, ...secondaryPickupAddress }; checkAddressesAreEqual(displayValues.secondaryPickup.address, expectedSecondaryPickupAddress); - expect(displayValues.hasSecondaryPickup).toBe('yes'); + expect(displayValues.hasSecondaryPickup).toBe('true'); const expectedSecondaryDeliveryAddress = { ...emptyAddressShape, ...secondaryDeliveryAddress }; checkAddressesAreEqual(displayValues.secondaryDelivery.address, expectedSecondaryDeliveryAddress); - expect(displayValues.hasSecondaryDelivery).toBe('yes'); + expect(displayValues.hasSecondaryDelivery).toBe('true'); const expectedTertiaryPickupAddress = { ...emptyAddressShape, ...tertiaryPickupAddress }; checkAddressesAreEqual(displayValues.tertiaryPickup.address, expectedTertiaryPickupAddress); - expect(displayValues.hasTertiaryPickup).toBe('yes'); + expect(displayValues.hasTertiaryPickup).toBe('true'); const expectedTertiaryDeliveryAddress = { ...emptyAddressShape, ...tertiaryDeliveryAddress }; checkAddressesAreEqual(displayValues.tertiaryDelivery.address, expectedTertiaryDeliveryAddress); - expect(displayValues.hasTertiaryDelivery).toBe('yes'); + expect(displayValues.hasTertiaryDelivery).toBe('true'); }); it('can format a shipment with lines of accounting', () => {