Create "Tax Detail" view in Orders Dashboard

[joykare]

Resolve #1857
Related to #1849

Description

Require a view where it can display the taxes charged per line item. Redesign UI on Invoice section on the Orders Dashboard.

Testing

1. Create an order
2. Process the order
3. On the Invoice section click on a line item

4. Expect a drop down list with inventory details for individual items

5. Approve the order and Capture Payment

6. Expect a captured payment popup

7. Refund an amount. Expect details on refunded amount and adjusted payment detail.

[brent-hoover]

When I click on the "print" or "print invoice" link I get a 404

[brent-hoover]

If we can just fix the print link it's all looks good to me

Joy says the print is working for her so if someone else could test that. Otherwise it looks good

[brent-hoover]

tested and everything looks good to me

[mikemurray]

Do these need to be bind-ed to the component instance? You should only need to do that in the case of event handlers for onClick and etc. Normal function calls in a class generally don't need to be explicitly bound.

And in those cases you can do the following as we have class properties enabled through babel.

myFunctionName = () => {

}

[mikemurray]

This could be moved into the class as:

class Invoice extends Component {
    static propTypes = {}

    ...

Though the way you did it is fine too, I've just been moving the to new style when I can.

[mikemurray]

should this be reversed as the false will always execute the second part of that statement.

this.props.validatedInput || false

[mikemurray]

Just some syntax things for my review, otherwise everything looks really good 👍

[mikemurray]

When you call this.renderConditionalDisplay(); in a React component/ ES6 class, the function you define on the class should be renderConditionalDisplay() {}.

When you attach an event handler to a button, like so <button onClick={this.handleClick} />, then your class function should look like onClick = () => {}. That way you bind a reference to this class to it.

For example

class MyComponent extends Component {
  handleClick = () => {
    // Handle button click
  }
  
  renderSomething() {
    return (
      <button onClick={this.handleClick}>{"Something Else"}</button>
    )
  }

  render() {
    return (
      <div>
        {this.renderSomething()}
      </div>
    )
  }
}

From the React documentation

Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

Our Switch component is a good example of style I hope to go for as we work towards going all React. https://github.com/reactioncommerce/reaction/blob/master/imports/plugins/core/ui/client/components/switch/switch.js

[joykare]

@mikemurray Changed it. Hope I got it right this time.

[mikemurray]

looks good