Fix missing metadata and payment balance on unconfirmed orders (#2314)

* Fix missing metadata and payment balance on unconfirmed orders

* Update changelog with fix missing fields on order page

Co-authored-by: Patryk Andrzejewski <vox3r69@gmail.com>

CHANGELOG.md

@@ -6,6 +6,7 @@ All notable, unreleased changes to this project will be documented in this file.
 
 - Pass query params in `ORDER_DETAILS_MORE_ACTIONS` and `PRODUCT_DETAILS_MORE_ACTIONS` mounting points - #2100 by @witoszekdev
 - Add product variant reference attribute - #2268 by @droniu
+- Fix missing metadata and payment balance on unconfirmed orders - #2314 by @orzechdev
 - Fix exit form dialog false positive - #2311 by @orzechdev
 - Fix no product error on unconfirmed order lines - #2324 by @orzechdev
 

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -24,13 +24,13 @@ import {
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import OrderChannelSectionCard from "@saleor/orders/components/OrderChannelSectionCard";
 import { orderListUrl } from "@saleor/orders/urls";
 import { mapMetadataItemToInput } from "@saleor/utils/maps";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
-import { defineMessages, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { getMutationErrors, maybe } from "../../../misc";
 import OrderCustomer from "../OrderCustomer";
@@ -42,25 +42,11 @@ import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 import OrderInvoiceList from "../OrderInvoiceList";
 import OrderPayment from "../OrderPayment/OrderPayment";
 import OrderUnfulfilledProductsCard from "../OrderUnfulfilledProductsCard";
+import { messages } from "./messages";
+import { useStyles } from "./styles";
 import Title from "./Title";
 import { filteredConditionalItems, hasAnyItemsReplaceable } from "./utils";
 
-const useStyles = makeStyles(
-  theme => ({
-    date: {
-      marginBottom: theme.spacing(3),
-    },
-    header: {
-      display: "flex",
-      justifyContent: "space-between",
-      marginBottom: 0,
-    },
-  }),
-  {
-    name: "OrderDetailsPage",
-  },
-);
-
 export interface OrderDetailsPageProps {
   order: OrderDetailsFragment;
   shop: OrderDetailsQuery["shop"];
@@ -99,24 +85,6 @@ export interface OrderDetailsPageProps {
   onSubmit(data: MetadataFormData): SubmitPromise;
 }
 
-const messages = defineMessages({
-  cancelOrder: {
-    id: "9ZtJhn",
-    defaultMessage: "Cancel order",
-    description: "cancel button",
-  },
-  confirmOrder: {
-    id: "maxT+q",
-    defaultMessage: "Confirm order",
-    description: "save button",
-  },
-  returnOrder: {
-    id: "+RjQjs",
-    defaultMessage: "Return / Replace order",
-    description: "return button",
-  },
-});
-
 const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
   const {
     disabled,
@@ -299,19 +267,15 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                     />
                   </React.Fragment>
                 ))}
-                {!isOrderUnconfirmed && (
-                  <>
-                    <OrderPayment
-                      order={order}
-                      onCapture={onPaymentCapture}
-                      onMarkAsPaid={onPaymentPaid}
-                      onRefund={onPaymentRefund}
-                      onVoid={onPaymentVoid}
-                    />
-                    <CardSpacer />
-                    <Metadata data={data} onChange={changeMetadata} />
-                  </>
-                )}
+                <OrderPayment
+                  order={order}
+                  onCapture={onPaymentCapture}
+                  onMarkAsPaid={onPaymentPaid}
+                  onRefund={onPaymentRefund}
+                  onVoid={onPaymentVoid}
+                />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
                 <OrderHistory
                   history={order?.events}
                   orderCurrency={order?.total?.gross.currency}

src/orders/components/OrderDetailsPage/messages.ts

@@ -0,0 +1,19 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  cancelOrder: {
+    id: "9ZtJhn",
+    defaultMessage: "Cancel order",
+    description: "cancel button",
+  },
+  confirmOrder: {
+    id: "maxT+q",
+    defaultMessage: "Confirm order",
+    description: "save button",
+  },
+  returnOrder: {
+    id: "+RjQjs",
+    defaultMessage: "Return / Replace order",
+    description: "return button",
+  },
+});

src/orders/components/OrderDetailsPage/styles.ts

@@ -0,0 +1,17 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    date: {
+      marginBottom: theme.spacing(3),
+    },
+    header: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: 0,
+    },
+  }),
+  {
+    name: "OrderDetailsPage",
+  },
+);