INT-B-21984 Add Move Management Fee to Payment Review

[brianmanley-caci]

Agility ticket

Summary

This story is to display the Move management Fee on the Final Payment Review Details Panel. Currently if the MM fee is approved for payment, there will be a discrepancy between the Accepted amount total, and what user can see on the screen as being billed. Displaying the MM fee will ensure the user that the amounts are correct.

This also includes a slight color change to the vertical bar in the user info area as I was getting a nasty 508 compliance error when I went to create the 508 report.

Verification Steps for the Author

These are to be checked by the author.

• Have the Agility acceptance criteria been met for this change?

Verification Steps for Reviewers

These are to be checked by a reviewer.

• Has the branch been pulled in and checked out?
• Have the BL acceptance criteria been met for this change?
• Was the CircleCI build successful?
• Has the code been reviewed from a standards and best practices point of view?

Setup to Run the Code

• Instructions for starting storybook
• Instructions for starting the MilMove application
• Instructions for running tests

How to test

1. Login as a Customer.
2. Create a new shipment and copy down the move code.
3. Login as a Service Counselor.
4. Fill out missing order information for the new shipment.
5. Submit the shipment.
6. Login as a TOO.
7. Approve the new Shipment.
8. Login as a Prime Simulator.
9. Select the move of the shipment you created.
10. Click Create Payment Request.
11. Add the Move management Move Service Item as well as some other service items. Be sure that service items are in Approved status or this will error.
12. Click Submit Payment Request.
13. Verify you receive a "Successfully create payment request" message.
14. Log in as a TIO.
15. Select the new move from the Payment Request Queue.
16. On the payment request you just created, click Review service items.
17. Approve all the service items.
18. On the Review details panel (before you click Authorize payment) verify that you can see the Move management fee.
19. Also verify that the Accepted total is equals to the sum of the amounts shown (including the Move management fee).

Frontend

• There are no aXe warnings for UI.
• This works in Supported Browsers and their phone views (Chrome, Firefox, Edge).
• There are no new console errors in the browser devtools.
• There are no new console errors in the test output.
• If this PR adds a new component to Storybook, it ensures the component is fully responsive, OR if it is intentionally not, a wrapping div using the officeApp class or custom min-width styling is used to hide any states the would not be visible to the user.
• This change meets the standards for Section 508 compliance.

Backend

• Code follows the guidelines for Logging.
• The requirements listed in Querying the Database Safely have been satisfied.
• [ ]

Screenshots

[danieljordan-caci]

Could you instead adjust the mm-periwinkle? That way we have 508 compliance across the board when that color is used.

[brianmanley-caci]

Yep good call. Since this was a contrast issue I was initially worried that other elements that used this color may have a different background color, so I didn't know how it would affect them. The only other location it is used is on the same background color though, so this should be good.

[robot-mymove]

	Warnings
⚠️	Files located in legacy directories (src/shared or src/scenes) have been edited. Are you sure you don’t want to also relocate them to the new file structure? View the frontend file org ADR for more information

Generated by 🚫 dangerJS against 15fb49a