refactor: order invoice print layout

[kieckhafer]

Impact: minor
Type: refactor

Issue

The old print layout for an Order invoice was very outdated, from the styles to the data, nothing was current.

Solution

Update to go along with new design. This was done with the blessing of @reactioncommerce/design , but without any actual input from them, so we can / should revisit if needed. The outline is there for visualizing what the printed page will look like, it doesn't actually print the border.

Breaking changes

None

Testing

1.Create an order

1. Click the "print invoice" button
2. See the updated look
3. Print
4. See page prints.

Old:

New:

[rymorgan]

@kieckhafer Looks good dude! One of the ugly corners of the Reaction Admin going away. One change, can you lose the icon in the button? We haven't established icons in buttons in our design system and I don't want to break any future rules we might set.

[mikemurray]

The < back and print button no longer work after you close the print dialog either by printing or canceling.

The page needs some padding at the bottom.

[mikemurray]

Import make styles (and the other material UI things with the named import "{}" style
"import { Button , Divider, ..etc, makeStyles } from "@material-ui/core"

[kieckhafer]

Why are we doing it like this again? Didn't we switch it up from this style to doing each one independent at some point?

[mikemurray]

Tree shaking in MUI works better when you don't import the file directly. This is because tre shaking can also remove dead code within files, like if you export a function, but never import it, then it will be omitted in the final build. Using named imports import { someThing } from "something" can lead to better tree shaking.

Also, it reduces the risk of a breaking change because if files move around, they'd still be available at the root import level by name.

[kieckhafer]

@rymorgan do you want to lose the print icon, and the left chevron on the back button? Or just the print icon?

[rymorgan]

@rymorgan do you want to lose the print icon, and the left chevron on the back button? Or just the print icon?

Just the print icon. Now that I'm looking at this again the pattern for "detail" pages is to have the backlink happen in the app bar.

See image -

[kieckhafer]

@rymorgan is that just a design with the back arrow in the nav? I don't see it in action anywhere.

@mikemurray do we have that back button built into the AppBar at the moment?

[mikemurray]

@kieckhafer We don't have a back button build into the app bar at the moment. How it's implemented is up for discussion (whether it's automatic, or you have a prop you set)

[kieckhafer]

@rymorgan once the back pattern is settled, will revisit: https://github.com/reactioncommerce/reaction/issues/5480

[kieckhafer]

@mikemurray issues addressed, ready for another check

[mikemurray]

👍