[MB-9736] PrimeUI Update Shipment Page #7595

jacquelineIO · 2021-10-15T18:03:39Z

Description

This add an Update Shipment page to the Prime UI

Some fields will not be editable if they are already present, because once they are set the Prime API doesn't let the user update again. These fields are: Requested Pickup Date, Estimated Weight, Pickup and Destination Address (as seen in photo below)

Fields that are allowed to updated multiple times are left in edit mode. And then those values are sent even if there is no change. If the user does update these values they are sent in an update.

If the shipment is a "new to the Prime shipment" a lot of the fields are editable and the user will be able to edit them and send the update.

Requested Pickup Date and Pickup Address should usually be read-only because those are set when the customer goes through the onboarding app.

Update UI to show detail errors when the update fails:

Reviewer Notes

~~Current issue is that the destination address is not being set when using the update shipment call and I'm not sure why that is. I can see the body in the console and it is what I expect it to be.~~
Fixed this issue. When using the Prime API and re-using Office React components/pages, you will have to convert the data to and from camelCase to snake_case. This was causing the shipment address update to not work.

Setup

Add any steps or code to run in this section to help others prepare to run your code:

Login as Prime UI user and click on shipment.
Then click the Update Shipment button for the shipment that you wish to update.

Code Review Verification Steps

References

Jira story for this change
this article explains more about the approach used.

Screenshots

If this PR makes visible UI changes, an image of the finished UI can help reviewers and casual
observers understand the context of the changes. A before image is optional and
can be included at the submitter's discretion.

Consider using an animated image to show an entire workflow instead of using multiple images. You may want to use GIPHY CAPTURE for this! 📸

Please frame screenshots to show enough useful context but also highlight the affected regions.

robot-mymove · 2021-10-15T18:14:08Z

	Messages
📖	🔗 MB-9736

Generated by 🚫 dangerJS against 840b529

…lled

jacquelineIO · 2021-10-15T22:54:28Z

Opening this PR for review. I will be adding tests next week.

rogeruiz

great work on this so far @jacquelineIO. I'm requesting changes on this because I think there are some show-stoppers in this PR as-is. But not all my comments need to be addressed in this PR.

The main bug I found is that I can't submit a fix if the server error 422 response comes from the Prime API.

src/pages/Office/index.jsx

src/pages/PrimeUI/Shipment/PrimeUIShipmentForm.jsx

YanZ777

Just a few comments on my end about the code. I think other people have better feedback about the implementation.

YanZ777 · 2021-10-19T01:29:58Z

src/pages/PrimeUI/Shipment/PrimeUIShipmentForm.jsx

+  if (isLoading) return <LoadingPlaceholder />;
+  if (isError) return <SomethingWentWrong />;
+
+  const fromPrimeApiAddressFormat = (address) => {


I think if other pages are going to need this later, it would be good to extract out, but you can leave this and other related functions in here for now.

YanZ777 · 2021-10-19T01:36:05Z

src/pages/PrimeUI/Shipment/PrimeUIShipmentForm.jsx

+
+  // Not the Prime API address format
+  const isEmptyAddress = (address) => {
+    if (address.street_address_1 !== 'undefined' && address.street_address_1) {


I think you could theoretically do and Object.keys here and check each value that way, but I can also see the benefit of being explicit about what values are being checked.

Possible, I did attempt to use Object.keys but do not remember why but that wasn't working. It could be something I was doing though.

src/pages/PrimeUI/Shipment/PrimeUIShipmentForm.jsx

duncan-truss · 2021-10-19T19:17:12Z

src/pages/PrimeUI/Shipment/Shipment.jsx

+    createdAt: PropTypes.string,
+    approvedDate: PropTypes.string,
+  }).isRequired,
+  moveId: PropTypes.string.isRequired,


There should be a moveTaskOrderID on the shipment, I think when these component props were added the field was just omitted. I think we have an existing shipment prop types shape somewhere too, but it may be for ghc address types.

Also I made similarly named component on my PR but didn't store it under src/pages/PrimeUI so it shouldn't conflict but we'll probably want to consolidate eventually.

@duncan-truss I was wondering if you had done. I have have some cleanup things. Since I'm bumping up to time to close the sprint, I will ask @donaldthai if we I can get a cleanup stories for some of the things mentioned in this PR.

^ We're ahead of schedule so I don't mind if you want to split off some of the work here into a different story

It's definitely not blocking anything we can look at it in a future cleanup story.

…wn file

Dismissing this so I can review it again.

src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdate.jsx

duncan-truss · 2021-10-20T16:56:41Z

src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdate.jsx

+          <Grid row>
+            <Grid col desktop={{ col: 8, offset: 2 }}>
+              {errorMessage?.detail && (
+                <div className={styles.errorContainer}>


This is minor but I think I added these styles in my component's module.scss so I don't think the classname is getting found in CustomerContactInfoForm.module.scss.

duncan-truss

This was a tricky one, it worked well in my testing!

jacquelineIO · 2021-10-20T23:24:50Z

New Jira issue to address clean-up mentioned in this PR https://dp3.atlassian.net/browse/MB-9844

Jacqueline McKinney added 3 commits October 14, 2021 16:38

moved shipment to PrimeUI component, added formik updateshipment form

1e49fc0

working update shipment page, haven't tested with new shipment yet

bbcb431

update to checking if an address is empty

04f6359

jacquelineIO requested review from rogeruiz, YanZ777 and duncan-truss October 15, 2021 18:04

jacquelineIO added the Pamplemoose label Oct 15, 2021

jacquelineIO marked this pull request as draft October 15, 2021 18:05

Jacqueline McKinney added 3 commits October 15, 2021 20:22

update to address format when updating shipment with Prime API

bc1a121

add error logging to update shipment page

2ca0b90

fixed error with null address field going from uncontrolled to contro…

f20f152

…lled

jacquelineIO marked this pull request as ready for review October 15, 2021 22:54

fix link to update shipment page from shipment component

289386a

rogeruiz previously requested changes Oct 18, 2021

View reviewed changes

donaldthai reviewed Oct 18, 2021

View reviewed changes

src/pages/PrimeUI/Shipment/PrimeUIShipmentForm.jsx Outdated Show resolved Hide resolved

YanZ777 reviewed Oct 19, 2021

View reviewed changes

duncan-truss reviewed Oct 19, 2021

View reviewed changes

Jacqueline McKinney added 3 commits October 19, 2021 21:03

start of testing and refactor to move PrimeUIShipmentForm into it's o…

2eac274

…wn file

adding tests for PrimeUI Update Shipment

fc608f1

allow submit after error has occurred on page

04da3ba

jacquelineIO requested review from rogeruiz, YanZ777, donaldthai and duncan-truss October 20, 2021 16:19

duncan-truss reviewed Oct 20, 2021

View reviewed changes

src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdate.jsx Outdated Show resolved Hide resolved

donaldthai reviewed Oct 20, 2021

View reviewed changes

src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdate.jsx Outdated Show resolved Hide resolved

duncan-truss reviewed Oct 20, 2021

View reviewed changes

duncan-truss approved these changes Oct 20, 2021

View reviewed changes

Jacqueline McKinney added 4 commits October 20, 2021 18:49

remove unnecessary date check

90053de

Merge remote-tracking branch 'origin/master' into jm-MB-9736

ea8b2ee

remove test file with no tests

cd986cb

remove incorrect cache invalidation

840b529

jacquelineIO merged commit 52ea6d7 into master Oct 20, 2021

jacquelineIO deleted the jm-MB-9736 branch October 20, 2021 23:14

jacquelineIO mentioned this pull request Oct 22, 2021

MB-9854 cleanup lint errors #7618

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MB-9736] PrimeUI Update Shipment Page #7595

[MB-9736] PrimeUI Update Shipment Page #7595

jacquelineIO commented Oct 15, 2021 •

edited

Loading

robot-mymove commented Oct 15, 2021 •

edited

Loading

jacquelineIO commented Oct 15, 2021

rogeruiz left a comment

YanZ777 left a comment •

edited

Loading

YanZ777 Oct 19, 2021

YanZ777 Oct 19, 2021

jacquelineIO Oct 20, 2021

duncan-truss Oct 19, 2021 •

edited

Loading

jacquelineIO Oct 20, 2021

donaldthai Oct 20, 2021

duncan-truss Oct 20, 2021

duncan-truss Oct 20, 2021

duncan-truss left a comment

jacquelineIO commented Oct 20, 2021

[MB-9736] PrimeUI Update Shipment Page #7595

[MB-9736] PrimeUI Update Shipment Page #7595

Conversation

jacquelineIO commented Oct 15, 2021 • edited Loading

Description

Reviewer Notes

Setup

Code Review Verification Steps

References

Screenshots

robot-mymove commented Oct 15, 2021 • edited Loading

jacquelineIO commented Oct 15, 2021

rogeruiz left a comment

Choose a reason for hiding this comment

YanZ777 left a comment • edited Loading

Choose a reason for hiding this comment

YanZ777 Oct 19, 2021

Choose a reason for hiding this comment

YanZ777 Oct 19, 2021

Choose a reason for hiding this comment

jacquelineIO Oct 20, 2021

Choose a reason for hiding this comment

duncan-truss Oct 19, 2021 • edited Loading

Choose a reason for hiding this comment

jacquelineIO Oct 20, 2021

Choose a reason for hiding this comment

donaldthai Oct 20, 2021

Choose a reason for hiding this comment

duncan-truss Oct 20, 2021

Choose a reason for hiding this comment

duncan-truss Oct 20, 2021

Choose a reason for hiding this comment

duncan-truss left a comment

Choose a reason for hiding this comment

jacquelineIO commented Oct 20, 2021

jacquelineIO commented Oct 15, 2021 •

edited

Loading

robot-mymove commented Oct 15, 2021 •

edited

Loading

YanZ777 left a comment •

edited

Loading

duncan-truss Oct 19, 2021 •

edited

Loading