Fix refunded value calculation in order view (#1601)

* Fix refunded value calculation in order view

* Fix orders price alignment to right

* Update test snapshots

src/components/Money/Money.tsx

@@ -1,5 +1,6 @@
 import { makeStyles, Typography, TypographyProps } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
+import classNames from "classnames";
 import React from "react";
 
 export interface IMoney {
@@ -16,6 +17,9 @@ const useStyles = makeStyles(
     container: {
       display: "flex",
       alignItems: "baseline"
+    },
+    containerRight: {
+      justifyContent: "end"
     }
   }),
   { name: "Money" }
@@ -29,7 +33,11 @@ export const Money: React.FC<MoneyProps> = ({ money, ...rest }) => {
   }
 
   return (
-    <div className={classes.container}>
+    <div
+      className={classNames(classes.container, {
+        [classes.containerRight]: rest.align === "right"
+      })}
+    >
       <Typography variant="caption" {...rest}>
         {money.currency}
       </Typography>

src/customers/components/CustomerOrders/CustomerOrders.tsx

@@ -132,7 +132,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
                 </TableCell>
                 <TableCell className={classes.textRight}>
                   {maybe(() => order.total.gross) ? (
-                    <Money money={order.total.gross} />
+                    <Money money={order.total.gross} align="right" />
                   ) : (
                     <Skeleton />
                   )}

src/orders/components/OrderDraftList/OrderDraftList.tsx

@@ -211,7 +211,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
                 </TableCell>
                 <TableCell className={classes.colTotal}>
                   {maybe(() => order.total.gross) ? (
-                    <Money money={order.total.gross} />
+                    <Money money={order.total.gross} align="right" />
                   ) : (
                     <Skeleton />
                   )}

src/orders/components/OrderList/OrderList.tsx

@@ -248,7 +248,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
               </TableCell>
               <TableCell className={classes.colTotal}>
                 {maybe(() => order.total.gross) ? (
-                  <Money money={order.total.gross} />
+                  <Money money={order.total.gross} align="right" />
                 ) : (
                   <Skeleton />
                 )}

src/orders/components/OrderPayment/OrderPayment.tsx

@@ -1,7 +1,7 @@
 import { Button, Card, CardActions, CardContent } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
 import { Hr } from "@saleor/components/Hr";
-import Money, { subtractMoney } from "@saleor/components/Money";
+import Money from "@saleor/components/Money";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -16,7 +16,11 @@ import {
 } from "../../../types/globalTypes";
 import { OrderDetails_order } from "../../types/OrderDetails";
 import messages from "./messages";
-import { extractOrderGiftCardUsedAmount } from "./utils";
+import {
+  extractOrderGiftCardUsedAmount,
+  extractOutstandingBalance,
+  extractRefundedAmount
+} from "./utils";
 
 const useStyles = makeStyles(
   theme => ({
@@ -26,7 +30,8 @@ const useStyles = makeStyles(
       width: "100%"
     },
     textRight: {
-      textAlign: "right"
+      display: "flex",
+      justifyContent: "end"
     },
     totalRow: {
       fontWeight: 600
@@ -61,10 +66,9 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
     maybe(() => order.paymentStatus),
     intl
   );
-  const refundedAmount =
-    order?.totalCaptured &&
-    order?.total?.gross &&
-    subtractMoney(order.totalCaptured, order.total.gross);
+  const refundedAmount = extractRefundedAmount(order);
+  const outstandingBalance = extractOutstandingBalance(order);
+  const usedGiftCardAmount = extractOrderGiftCardUsedAmount(order);
 
   const getDeliveryMethodName = order => {
     if (
@@ -87,8 +91,6 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
     return order.shippingMethodName;
   };
 
-  const usedGiftCardAmount = extractOrderGiftCardUsedAmount(order);
-
   return (
     <Card>
       <CardTitle
@@ -297,17 +299,10 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
                 />
               </td>
               <td className={classes.textRight}>
-                {maybe(
-                  () => order.total.gross.amount && order.totalCaptured.amount
-                ) === undefined ? (
+                {outstandingBalance?.amount === undefined ? (
                   <Skeleton />
                 ) : (
-                  <Money
-                    money={subtractMoney(
-                      order.totalCaptured,
-                      order.total.gross
-                    )}
-                  />
+                  <Money money={outstandingBalance} />
                 )}
               </td>
             </tr>

src/orders/components/OrderPayment/utils.ts

@@ -1,5 +1,9 @@
+import { IMoney, subtractMoney } from "@saleor/components/Money";
 import { OrderDetails_order } from "@saleor/orders/types/OrderDetails";
-import { GiftCardEventsEnum } from "@saleor/types/globalTypes";
+import {
+  GiftCardEventsEnum,
+  PaymentChargeStatusEnum
+} from "@saleor/types/globalTypes";
 import compact from "lodash/compact";
 
 export const extractOrderGiftCardUsedAmount = (
@@ -32,3 +36,23 @@ export const extractOrderGiftCardUsedAmount = (
     return resultAmount + amountToAdd;
   }, 0);
 };
+
+export const extractOutstandingBalance = (order: OrderDetails_order): IMoney =>
+  order?.totalCaptured &&
+  order?.total?.gross &&
+  subtractMoney(order.total.gross, order.totalCaptured);
+
+export const extractRefundedAmount = (order: OrderDetails_order): IMoney => {
+  if (order?.paymentStatus === PaymentChargeStatusEnum.FULLY_REFUNDED) {
+    return order?.total?.gross;
+  }
+  if (order?.paymentStatus === PaymentChargeStatusEnum.PARTIALLY_REFUNDED) {
+    return extractOutstandingBalance(order);
+  }
+  return (
+    order?.total?.gross && {
+      amount: 0,
+      currency: order.total.gross.currency
+    }
+  );
+};

src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx

@@ -20,7 +20,6 @@ const useStyles = makeStyles(
       marginLeft: AVATAR_MARGIN
     },
     colPrice: {
-      textAlign: "right",
       width: 120
     },
     colQuantity: {
@@ -33,7 +32,6 @@ const useStyles = makeStyles(
       width: 120
     },
     colTotal: {
-      textAlign: "right",
       width: 120
     },
     infoLabel: {
@@ -100,7 +98,7 @@ const TableLine: React.FC<TableLineProps> = ({
       </TableCell>
       <TableCell className={classes.colPrice}>
         {maybe(() => line.orderLine.unitPrice.gross) ? (
-          <Money money={line.orderLine.unitPrice.gross} />
+          <Money money={line.orderLine.unitPrice.gross} align="right" />
         ) : (
           <Skeleton />
         )}
@@ -111,6 +109,7 @@ const TableLine: React.FC<TableLineProps> = ({
             amount: line.quantity * line.orderLine.unitPrice.gross.amount,
             currency: line.orderLine.unitPrice.gross.currency
           }}
+          align="right"
         />
       </TableCell>
     </TableRow>