Always show charge and authorised amount in payment section of order …

…details (#4821) * Temp solution * Show charge and autorized amount * Add changeset * Restore messages * Improve showing amount * Improve copy --------- Co-authored-by: Michał Droń <droniu@droniu.dev>
saleor · May 16, 2024 · 0589970 · 0589970
1 parent 70b2c40
commit 0589970
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 74 deletions.
diff --git a/.changeset/friendly-bats-wonder.md b/.changeset/friendly-bats-wonder.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Always show charge and authorized amount in payment section of order details
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -565,6 +565,10 @@
     "context": "section header",
     "string": "Recent Orders"
   },
+  "1N8lSy": {
+    "context": "Order summary payment header",
+    "string": "Payments summary"
+  },
   "1T1fP8": {
     "context": "range input label",
     "string": "Postal codes (start)"
@@ -2894,10 +2898,6 @@
     "context": "create new menu item, header",
     "string": "Add Item"
   },
-  "H52OCA": {
-    "context": "Order summary payment header",
-    "string": "Payment"
-  },
   "H5NKfr": {
     "context": "button",
     "string": "Create"
@@ -6952,6 +6952,9 @@
   "iMJka8": {
     "string": "No pages found"
   },
+  "iOOPMd": {
+    "string": "A summary of all payments from registered transactions"
+  },
   "iPk640": {
     "context": "dialog header",
     "string": "Media Selection"

diff --git a/src/orders/components/OrderPaymentSummaryCard/OrderPaymentSummaryCard.tsx b/src/orders/components/OrderPaymentSummaryCard/OrderPaymentSummaryCard.tsx
@@ -39,6 +39,9 @@ const OrderPaymentSummaryCard: React.FC<OrderPaymementProps> = ({ order, onMarkA
   const canMarkAsPaid = order?.actions?.includes(OrderAction.MARK_AS_PAID);
   const shouldDisplay = getShouldDisplayAmounts(order);
 
+  const showHasNoPayment =
+    !canAnyRefund && !shouldDisplay.charged && !shouldDisplay.authorized && !hasGiftCards;
+
   if (!order) {
     return (
       <Card>
@@ -66,8 +69,9 @@ const OrderPaymentSummaryCard: React.FC<OrderPaymementProps> = ({ order, onMarkA
           />
         }
         title={<FormattedMessage {...orderPaymentMessages.paymentTitle} />}
+        subtitle={<FormattedMessage {...orderPaymentMessages.paymentSubtitle} />}
       />
-      {!canAnyRefund && !shouldDisplay.charged && !shouldDisplay.authorized && !hasGiftCards && (
+      {showHasNoPayment ? (
         <CardContent className={classes.noPaymentContent} data-test-id="payment-section">
           <Typography variant="h5" className={classes.noPaymentTitle}>
             <FormattedMessage {...orderPaymentMessages.noPayments} />
@@ -82,8 +86,9 @@ const OrderPaymentSummaryCard: React.FC<OrderPaymementProps> = ({ order, onMarkA
             </Button>
           )}
         </CardContent>
+      ) : (
+        <PaymentsSummary order={order} />
       )}
-      <PaymentsSummary order={order} />
       {canAnyRefund && !enabled && (
         <>
           <Divider />

diff --git a/src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/PaymentsSummary.tsx b/src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/PaymentsSummary.tsx
@@ -1,14 +1,13 @@
 import { OrderDetailsFragment } from "@dashboard/graphql";
 import { CardContent } from "@material-ui/core";
-import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import SummaryLine from "../../../OrderSummaryCard/SummaryLine";
 import { SummaryList } from "../../../OrderSummaryCard/SummaryList";
 import { orderPaymentMessages } from "../../messages";
 import { useStyles } from "../../styles";
-import { getShouldDisplayAmounts, shouldHideSummary } from "./utils";
+import { getShouldDisplayAmounts } from "./utils";
 
 interface PaymentsSummaryProps {
   order: OrderDetailsFragment;
@@ -18,59 +17,48 @@ export const PaymentsSummary: React.FC<PaymentsSummaryProps> = ({ order }) => {
   const classes = useStyles();
   const shouldDisplay = getShouldDisplayAmounts(order);
 
-  if (shouldHideSummary(shouldDisplay)) {
-    return null;
-  }
-
   return (
     <CardContent>
       <SummaryList className={classes.amountGrid}>
-        {shouldDisplay.authorized && (
+        <SummaryLine
+          text={<FormattedMessage {...orderPaymentMessages.authorized} />}
+          money={order.totalAuthorized}
+        />
+
+        {shouldDisplay.authorizedPending && (
           <SummaryLine
-            vertical
             text={<FormattedMessage {...orderPaymentMessages.authorized} />}
-            money={order.totalAuthorized}
+            subText={<FormattedMessage {...orderPaymentMessages.pending} />}
+            money={order.totalAuthorizePending}
           />
         )}
 
-        {shouldDisplay.charged && (
+        <SummaryLine
+          text={<FormattedMessage {...orderPaymentMessages.captured} />}
+          money={order.totalCharged}
+        />
+
+        {shouldDisplay.chargedPending && (
           <SummaryLine
-            vertical
             text={<FormattedMessage {...orderPaymentMessages.captured} />}
-            money={order.totalCharged}
+            subText={<FormattedMessage {...orderPaymentMessages.pending} />}
+            money={order.totalChargePending}
           />
         )}
 
-        {shouldDisplay.cancelled && (
+        <SummaryLine
+          text={<FormattedMessage {...orderPaymentMessages.cancelled} />}
+          money={order.totalCanceled}
+        />
+
+        {shouldDisplay.cancelledPending && (
           <SummaryLine
-            vertical
             text={<FormattedMessage {...orderPaymentMessages.cancelled} />}
-            money={order.totalCanceled}
+            subText={<FormattedMessage {...orderPaymentMessages.pending} />}
+            money={order.totalCancelPending}
           />
         )}
       </SummaryList>
-      {shouldDisplay.pending && (
-        <SummaryList className={clsx(classes.amountGrid, classes.pendingGrid)}>
-          <SummaryLine
-            vertical
-            hideEmpty
-            text={<FormattedMessage {...orderPaymentMessages.pending} />}
-            money={order.totalAuthorizePending}
-          />
-          <SummaryLine
-            vertical
-            hideEmpty
-            text={<FormattedMessage {...orderPaymentMessages.pending} />}
-            money={order.totalChargePending}
-          />
-          <SummaryLine
-            vertical
-            hideEmpty
-            text={<FormattedMessage {...orderPaymentMessages.pending} />}
-            money={order.totalCancelPending}
-          />
-        </SummaryList>
-      )}
     </CardContent>
   );
 };
diff --git a/src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/utils.test.ts b/src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/utils.test.ts
@@ -12,7 +12,9 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
         authorized: false,
         charged: false,
         cancelled: false,
-        pending: false,
+        authorizedPending: false,
+        chargedPending: false,
+        cancelledPending: false,
       }),
     );
   });
@@ -30,7 +32,9 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
         authorized: false,
         charged: true,
         cancelled: true,
-        pending: true,
+        authorizedPending: false,
+        chargedPending: true,
+        cancelledPending: false,
       }),
     );
   });
@@ -46,15 +50,28 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
       totalAuthorized: prepareMoney(12),
       totalAuthorizePending: prepareMoney(12),
     });
-    const expectedResult = {
-      authorized: true,
-      charged: true,
-      cancelled: true,
-      pending: true,
-    };
 
-    expect(result1).toStrictEqual(expect.objectContaining(expectedResult));
-    expect(result2).toStrictEqual(expect.objectContaining(expectedResult));
+    expect(result1).toStrictEqual(
+      expect.objectContaining({
+        authorized: true,
+        charged: true,
+        cancelled: true,
+        authorizedPending: false,
+        chargedPending: true,
+        cancelledPending: false,
+      }),
+    );
+
+    expect(result2).toStrictEqual(
+      expect.objectContaining({
+        authorized: true,
+        charged: true,
+        cancelled: true,
+        authorizedPending: true,
+        chargedPending: false,
+        cancelledPending: false,
+      }),
+    );
   });
   it("displays capture and authorize amount when they are different", () => {
     expect(
@@ -68,7 +85,9 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
         authorized: true,
         charged: true,
         cancelled: false,
-        pending: false,
+        authorizedPending: false,
+        chargedPending: false,
+        cancelledPending: false,
       }),
     );
   });
@@ -90,7 +109,9 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
         authorized: false,
         charged: true,
         cancelled: false,
-        pending: false,
+        authorizedPending: false,
+        chargedPending: false,
+        cancelledPending: false,
       }),
     );
   });
@@ -106,7 +127,9 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
         authorized: true,
         charged: false,
         cancelled: false,
-        pending: false,
+        authorizedPending: false,
+        chargedPending: false,
+        cancelledPending: false,
       }),
     );
   });
@@ -132,7 +155,9 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
         authorized: false,
         charged: false,
         cancelled: false,
-        pending: false,
+        authorizedPending: false,
+        chargedPending: false,
+        cancelledPending: false,
       }),
     );
   });

diff --git a/src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/utils.ts b/src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/utils.ts
@@ -7,7 +7,9 @@ interface ShouldDisplayResult {
   authorized: boolean;
   charged: boolean;
   cancelled: boolean;
-  pending: boolean;
+  authorizedPending: boolean;
+  chargedPending: boolean;
+  cancelledPending: boolean;
 }
 
 export const getShouldDisplayAmounts = (
@@ -19,7 +21,9 @@ export const getShouldDisplayAmounts = (
       authorized: false,
       charged: false,
       cancelled: false,
-      pending: false,
+      authorizedPending: false,
+      chargedPending: false,
+      cancelledPending: false,
     };
   }
 
@@ -38,7 +42,9 @@ export const getShouldDisplayAmounts = (
       authorized: !!authorized || !!authorizePending,
       charged: true,
       cancelled: true,
-      pending: true,
+      authorizedPending: authorizePending > 0,
+      chargedPending: chargePending > 0,
+      cancelledPending: cancelPending > 0,
     };
   }
 
@@ -48,7 +54,9 @@ export const getShouldDisplayAmounts = (
       authorized: true,
       charged: true,
       cancelled: !!cancelled,
-      pending: false,
+      authorizedPending: false,
+      chargedPending: false,
+      cancelledPending: false,
     };
   }
 
@@ -58,7 +66,9 @@ export const getShouldDisplayAmounts = (
       authorized: false,
       charged: true,
       cancelled: !!cancelled,
-      pending: false,
+      authorizedPending: false,
+      chargedPending: false,
+      cancelledPending: false,
     };
   }
 
@@ -68,7 +78,9 @@ export const getShouldDisplayAmounts = (
       authorized: true,
       charged: false,
       cancelled: !!cancelled,
-      pending: false,
+      authorizedPending: false,
+      chargedPending: false,
+      cancelledPending: false,
     };
   }
 
@@ -78,7 +90,9 @@ export const getShouldDisplayAmounts = (
       authorized: false,
       charged: false,
       cancelled: true,
-      pending: false,
+      authorizedPending: false,
+      chargedPending: false,
+      cancelledPending: false,
     };
   }
 
@@ -87,7 +101,9 @@ export const getShouldDisplayAmounts = (
     charged: false,
     authorized: false,
     cancelled: false,
-    pending: false,
+    authorizedPending: false,
+    chargedPending: false,
+    cancelledPending: false,
   };
 };
 

diff --git a/src/orders/components/OrderPaymentSummaryCard/messages.ts b/src/orders/components/OrderPaymentSummaryCard/messages.ts
@@ -2,10 +2,14 @@ import { defineMessages } from "react-intl";
 
 export const orderPaymentMessages = defineMessages({
   paymentTitle: {
-    id: "H52OCA",
-    defaultMessage: "Payment",
+    id: "1N8lSy",
+    defaultMessage: "Payments summary",
     description: "Order summary payment header",
   },
+  paymentSubtitle: {
+    id: "iOOPMd",
+    defaultMessage: "A summary of all payments from registered transactions",
+  },
   refundsTitle: {
     id: "E9Dz18",
     defaultMessage: "Refunds",

diff --git a/src/orders/components/OrderPaymentSummaryCard/styles.ts b/src/orders/components/OrderPaymentSummaryCard/styles.ts
@@ -16,12 +16,7 @@ export const useStyles = makeStyles(
       marginTop: theme.spacing(2),
     },
     amountGrid: {
-      display: "grid",
-      gridTemplateColumns: "repeat(3, 1fr)",
-    },
-    pendingGrid: {
-      marginTop: theme.spacing(1),
-      color: theme.palette.saleor.main[2],
+      paddingRight: theme.spacing(1),
     },
     explainText: {
       color: theme.palette.saleor.main[3],