[Marketplace] Orders line items refund

imports/plugins/core/orders/client/components/invoice.js

@@ -1,36 +1,41 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import moment from "moment";
 import { formatPriceString } from "/client/api";
-import { Translation } from "/imports/plugins/core/ui/client/components";
-import DiscountList from "/imports/plugins/core/discounts/client/components/list";
+import { Translation, CardGroup, Card, CardBody, CardHeader, DiscountList } from "@reactioncommerce/reaction-ui";
+import LineItems from "./lineItems";
+import InvoiceActions from "./invoiceActions";
 
 class Invoice extends Component {
   static propTypes = {
     canMakeAdjustments: PropTypes.bool,
-    collection: PropTypes.string,
-    dateFormat: PropTypes.func,
     discounts: PropTypes.bool,
     handleClick: PropTypes.func,
     hasRefundingEnabled: PropTypes.bool,
     invoice: PropTypes.object,
     isFetching: PropTypes.bool,
     isOpen: PropTypes.bool,
-    orderId: PropTypes.string,
+    order: PropTypes.object,
     paymentCaptured: PropTypes.bool,
     refunds: PropTypes.array
   }
 
+  dateFormat(context, block) {
+    const f = block || "MMM DD, YYYY hh:mm:ss A";
+    return moment(context).format(f);
+  }
+
   renderDiscountForm() {
-    const { isOpen, orderId, collection } = this.props;
+    const { isOpen, order } = this.props;
 
     return (
       <div>
         {isOpen &&
           <div>
             <hr/>
             <DiscountList
-              id={orderId}
-              collection={collection}
+              id={order._id}
+              collection="Orders"
               validatedInput={true}
             />
             <hr/>
@@ -41,7 +46,7 @@ class Invoice extends Component {
   }
 
   renderRefundsInfo() {
-    const { hasRefundingEnabled, isFetching, refunds, dateFormat } = this.props;
+    const { hasRefundingEnabled, isFetching, refunds } = this.props;
 
     return (
       <div>
@@ -56,7 +61,7 @@ class Invoice extends Component {
 
         {refunds && refunds.map((refund) => (
           <div className="order-summary-form-group text-danger" key={refund.created} style={{ marginBottom: 15 }}>
-            <strong>Refunded on: {dateFormat(refund.created, "MM/D/YYYY")}</strong>
+            <strong>Refunded on: {this.dateFormat(refund.created, "MM/D/YYYY")}</strong>
             <div className="invoice-details"><strong>{formatPriceString(refund.amount)}</strong></div>
           </div>
         ))}
@@ -80,7 +85,6 @@ class Invoice extends Component {
 
   renderConditionalDisplay() {
     const { canMakeAdjustments, paymentCaptured } = this.props;
-
     return (
       <div>
         {canMakeAdjustments ?
@@ -99,7 +103,7 @@ class Invoice extends Component {
     );
   }
 
-  render() {
+  renderInvoice() {
     const { invoice, discounts, handleClick } = this.props;
 
     return (
@@ -148,6 +152,31 @@ class Invoice extends Component {
       </div>
     );
   }
+
+  render() {
+    return (
+      <CardGroup>
+        <Card
+          expanded={true}
+        >
+          <CardHeader
+            actAsExpander={false}
+            i18nKeyTitle="admin.orderWorkflow.invoice.cardTitle"
+            title="Invoice"
+          />
+          <CardBody expandable={false}>
+            <LineItems {...this.props} />
+
+            <div className="invoice-container">
+              {this.renderInvoice()}
+            </div>
+
+            <InvoiceActions {...this.props}/>
+          </CardBody>
+        </Card>
+      </CardGroup>
+    );
+  }
 }
 
 export default Invoice;

imports/plugins/core/orders/client/components/invoiceActions.js

@@ -1,14 +1,28 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { formatPriceString } from "/client/api";
-import { IconButton, NumericInput, Translation } from "/imports/plugins/core/ui/client/components";
+import { Button, NumericInput, Translation, ButtonSelect } from "@reactioncommerce/reaction-ui";
 
 class InvoiceActions extends Component {
   static propTypes = {
     adjustedTotal: PropTypes.number,
-    handleActionViewBack: PropTypes.func,
+    currency: PropTypes.object,
+    handleApprove: PropTypes.func,
+    handleCapturePayment: PropTypes.func,
+    handleRefund: PropTypes.func,
+    hasRefundingEnabled: PropTypes.bool,
     invoice: PropTypes.object,
-    isAdjusted: PropTypes.func
+    isCapturing: PropTypes.bool,
+    isRefunding: PropTypes.bool,
+    paymentApproved: PropTypes.bool,
+    paymentCaptured: PropTypes.bool,
+    paymentPendingApproval: PropTypes.bool,
+    printOrder: PropTypes.string,
+    showAfterPaymentCaptured: PropTypes.bool
+  }
+
+  state = {
+    value: 0
   }
 
   renderCapturedTotal() {
@@ -42,46 +56,161 @@ class InvoiceActions extends Component {
       </div>
     );
   }
+
   renderRefundForm() {
     const { adjustedTotal } = this.props;
 
     return (
-      <div className="invoice-summary">
-        <span  className="invoice-label refund">
-          <strong><Translation defaultValue="Refund" i18nKey="admin.invoice.refund"/></strong>
-        </span>
+      <div>
+        {this.props.hasRefundingEnabled &&
+          <div className="flex refund-container">
+            <div className="form-group order-summary-form-group">
+              <div className="invoice-details">
+                <NumericInput
+                  numericType="currency"
+                  value={this.state.value}
+                  maxValue={adjustedTotal}
+                  format={this.props.currency}
+                  classNames={{
+                    input: {
+                      amount: true
+                    }
+                  }}
+                  onChange={(event, data)=>{
+                    this.setState({
+                      value: data.numberValue
+                    });
+                  }}
+                />
+              </div>
 
-        <div className="invoice-details">
-          <span className="refundAmount">
-            <NumericInput
-              numericType="currency"
-              value="0"
-              maxValue={adjustedTotal}
-              classNames="amount"
-            />
-          </span>
-          <span className="refundSubmit">
-            <IconButton
-              bezelStyle={"flat"}
-              icon="fa fa-arrow-circle-o-right"
-              onClick={this.props.handleActionViewBack}
-            />
-            <span id="btn-refund-payment">-></span>
-          </span>
-        </div>
+            </div>
+
+            <Button
+              className="flex-item-fill refund-button"
+              type="button"
+              status="primary"
+              bezelStyle="solid"
+              disabled={this.props.isRefunding || this.state.value === 0}
+              onClick={(event) => {
+                this.props.handleRefund(event, this.state.value);
+                this.setState({
+                  value: 0
+                });
+              }}
+            >
+              {this.props.isRefunding ?
+                <span id="btn-refund-payment" data-i18n="order.applyRefund">Refunding <i className="fa fa-spinner fa-spin" /></span> :
+                <span id="btn-refund-payment" data-i18n="order.applyRefund">Apply Refund</span>
+              }
+            </Button>
+          </div>
+        }
+
+        {this.props.showAfterPaymentCaptured &&
+          <Button
+            className="btn btn-danger"
+            bezelStyle="solid"
+            type="button"
+            data-event-action="cancelOrder"
+            style={{ marginBottom: 10 }}
+            data-i18n="order.cancelOrderLabel"
+          >
+            Cancel Order
+          </Button>
+        }
+
+        <a
+          className="btn btn-default btn-block"
+          href={this.props.printOrder}
+          target="_blank"
+          data-i18n="app.printInvoice"
+        >
+          Print Invoice
+        </a>
       </div>
     );
   }
 
-  render() {
-    const { isAdjusted } = this.props;
+  renderApproval() {
+    if (this.props.paymentPendingApproval) {
+      return (
+        <div className="btn-block">
+          <div>
+            <ButtonSelect
+              buttons= {[
+                {
+                  name: "Approve",
+                  i18nKeyLabel: "order.approveInvoice",
+                  active: true,
+                  status: "success",
+                  eventAction: "approveInvoice",
+                  bgColor: "bg-success",
+                  buttonType: "submit"
+                }, {
+                  name: "Cancel",
+                  i18nKeyLabel: "order.cancelInvoice",
+                  active: false,
+                  status: "danger",
+                  eventAction: "cancelOrder",
+                  bgColor: "bg-danger",
+                  buttonType: "button"
+                }
+              ]}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    if (this.props.paymentApproved) {
+      return (
+        <div className="flex">
+          <a
+            className="btn btn-link"
+            href={this.props.printOrder}
+            target="_blank"
+            data-i18n="app.print"
+          >
+            Print
+          </a>
+
+          <button
+            className="btn btn-success flex-item-fill"
+            type="button"
+            data-event-action="capturePayment"
+            disabled={this.props.isCapturing}
+            onClick = {this.props.handleCapturePayment}
+          >
+
+            {this.props.isCapturing ?
+              <span id="btn-capture-payment">
+                Capturing <i className="fa fa-spinner fa-spin" id="btn-processing" />
+              </span> :
+              <span id="btn-capture-payment" data-i18n="order.capturePayment">Capture Payment</span>
+            }
+          </button>
+        </div>
+      );
+    }
+  }
 
+  render() {
     return (
-      <div>
-        {this.renderCapturedTotal()}
-        {isAdjusted() && this.renderAdjustedTotal()}
-        {/* {this.renderRefundForm()} */}
-      </div>
+      <form onSubmit={this.props.handleApprove}>
+
+        <div style={{ marginBottom: 15, marginTop: 15 }}>
+          {this.renderApproval()}
+          {this.props.paymentCaptured &&
+            <div className="total-container">
+              {this.renderCapturedTotal()}
+              {this.props.invoice.total !== this.props.adjustedTotal && this.renderAdjustedTotal()}
+              {this.renderRefundForm()}
+            </div>
+          }
+        </div>
+      </form>
+
     );
   }
 }