Merge pull request #688 from mirumee/metadata/orders

Add metadata to orders

CHANGELOG.md

@@ -34,6 +34,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add metadata editor to creator views - #684 by @dominik-zeglen
 - Update product visibility card component - #679 by @AlicjaSzu
 - Update savebar design - #690 by @dominik-zeglen
+- Add metadata to orders - #688 by @dominik-zeglen
 
 ## 2.10.1
 

src/fragments/orders.ts

@@ -1,6 +1,7 @@
 import gql from "graphql-tag";
 
 import { fragmentAddress } from "./address";
+import { metadataFragment } from "./metadata";
 
 export const fragmentOrderEvent = gql`
   fragment OrderEventFragment on OrderEvent {
@@ -87,8 +88,10 @@ export const fragmentOrderDetails = gql`
   ${fragmentOrderLine}
   ${fulfillmentFragment}
   ${invoiceFragment}
+  ${metadataFragment}
   fragment OrderDetailsFragment on Order {
     id
+    ...MetadataFragment
     billingAddress {
       ...AddressFragment
     }

src/fragments/types/OrderDetailsFragment.ts

@@ -8,6 +8,18 @@ import { OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentCharg
 // GraphQL fragment: OrderDetailsFragment
 // ====================================================
 
+export interface OrderDetailsFragment_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderDetailsFragment_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderDetailsFragment_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -285,6 +297,8 @@ export interface OrderDetailsFragment_invoices {
 export interface OrderDetailsFragment {
   __typename: "Order";
   id: string;
+  metadata: (OrderDetailsFragment_metadata | null)[];
+  privateMetadata: (OrderDetailsFragment_privateMetadata | null)[];
   billingAddress: OrderDetailsFragment_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/misc.ts

@@ -235,7 +235,7 @@ export function hasErrors(errorList: UserError[] | null): boolean {
 export function getMutationState(
   called: boolean,
   loading: boolean,
-  ...errorList: UserError[][]
+  ...errorList: any[][]
 ): ConfirmButtonTransitionState {
   if (loading) {
     return "loading";

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -3,13 +3,19 @@ import Typography from "@material-ui/core/Typography";
 import AppHeader from "@saleor/components/AppHeader";
 import CardMenu from "@saleor/components/CardMenu";
 import { CardSpacer } from "@saleor/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import { Container } from "@saleor/components/Container";
 import { DateTime } from "@saleor/components/Date";
+import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
+import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
 import { UserPermissionProps } from "@saleor/types";
+import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -49,6 +55,8 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
     code: string;
     label: string;
   }>;
+  disabled: boolean;
+  saveButtonBarState: ConfirmButtonTransitionState;
   onBack();
   onBillingAddressEdit();
   onFulfillmentCancel(id: string);
@@ -66,11 +74,14 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
   onInvoiceClick(invoiceId: string);
   onInvoiceGenerate();
   onInvoiceSend(invoiceId: string);
+  onSubmit(data: MetadataFormData);
 }
 
 const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
   const {
+    disabled,
     order,
+    saveButtonBarState,
     userPermissions,
     onBack,
     onBillingAddressEdit,
@@ -87,11 +98,17 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
     onProfileView,
     onInvoiceClick,
     onInvoiceGenerate,
-    onInvoiceSend
+    onInvoiceSend,
+    onSubmit
   } = props;
   const classes = useStyles(props);
 
   const intl = useIntl();
+  const {
+    isMetadataModified,
+    isPrivateMetadataModified,
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   const canCancel = maybe(() => order.status) !== OrderStatus.CANCELED;
   const canEditAddresses = maybe(() => order.status) !== OrderStatus.CANCELED;
@@ -100,103 +117,138 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
     line => line.quantityFulfilled < line.quantity
   );
 
+  const handleSubmit = (data: MetadataFormData) => {
+    const metadata = isMetadataModified ? data.metadata : undefined;
+    const privateMetadata = isPrivateMetadataModified
+      ? data.privateMetadata
+      : undefined;
+
+    onSubmit({
+      metadata,
+      privateMetadata
+    });
+  };
+
+  const initial: MetadataFormData = {
+    metadata: order?.metadata.map(mapMetadataItemToInput),
+    privateMetadata: order?.privateMetadata.map(mapMetadataItemToInput)
+  };
+
   return (
-    <Container>
+    <Form initial={initial} onSubmit={handleSubmit}>
-      <AppHeader onBack={onBack}>
+      {({ change, data, hasChanged, submit }) => {
-        {intl.formatMessage(sectionNames.orders)}
+        const changeMetadata = makeMetadataChangeHandler(change);
-      </AppHeader>
+
-      <PageHeader
+        return (
-        className={classes.header}
+          <Container>
-        inline
+            <AppHeader onBack={onBack}>
-        title={maybe(() => order.number) ? "#" + order.number : undefined}
+              {intl.formatMessage(sectionNames.orders)}
-      >
+            </AppHeader>
-        {canCancel && (
+            <PageHeader
-          <CardMenu
+              className={classes.header}
-            menuItems={[
+              inline
-              {
+              title={maybe(() => order.number) ? "#" + order.number : undefined}
-                label: intl.formatMessage({
+            >
-                  defaultMessage: "Cancel order",
+              {canCancel && (
-                  description: "button"
+                <CardMenu
-                }),
+                  menuItems={[
-                onSelect: onOrderCancel
+                    {
-              }
+                      label: intl.formatMessage({
-            ]}
+                        defaultMessage: "Cancel order",
-          />
+                        description: "button"
-        )}
+                      }),
-      </PageHeader>
+                      onSelect: onOrderCancel
-      <div className={classes.date}>
+                    }
-        {order && order.created ? (
+                  ]}
-          <Typography variant="caption">
-            <DateTime date={order.created} />
-          </Typography>
-        ) : (
-          <Skeleton style={{ width: "10em" }} />
-        )}
-      </div>
-      <Grid>
-        <div>
-          {unfulfilled.length > 0 && (
-            <OrderUnfulfilledItems
-              canFulfill={canFulfill}
-              lines={unfulfilled}
-              onFulfill={onOrderFulfill}
-            />
-          )}
-          {renderCollection(
-            maybe(() => order.fulfillments),
-            (fulfillment, fulfillmentIndex) => (
-              <React.Fragment key={maybe(() => fulfillment.id, "loading")}>
-                {!(unfulfilled.length === 0 && fulfillmentIndex === 0) && (
-                  <CardSpacer />
-                )}
-                <OrderFulfillment
-                  fulfillment={fulfillment}
-                  orderNumber={maybe(() => order.number)}
-                  onOrderFulfillmentCancel={() =>
-                    onFulfillmentCancel(fulfillment.id)
-                  }
-                  onTrackingCodeAdd={() =>
-                    onFulfillmentTrackingNumberUpdate(fulfillment.id)
-                  }
                 />
-              </React.Fragment>
+              )}
-            )
+            </PageHeader>
-          )}
+            <div className={classes.date}>
-          <CardSpacer />
+              {order && order.created ? (
-          <OrderPayment
+                <Typography variant="caption">
-            order={order}
+                  <DateTime date={order.created} />
-            onCapture={onPaymentCapture}
+                </Typography>
-            onMarkAsPaid={onPaymentPaid}
+              ) : (
-            onRefund={onPaymentRefund}
+                <Skeleton style={{ width: "10em" }} />
-            onVoid={onPaymentVoid}
+              )}
-          />
+            </div>
-          <OrderHistory
+            <Grid>
-            history={maybe(() => order.events)}
+              <div>
-            onNoteAdd={onNoteAdd}
+                {unfulfilled.length > 0 && (
-          />
+                  <OrderUnfulfilledItems
-        </div>
+                    canFulfill={canFulfill}
-        <div>
+                    lines={unfulfilled}
-          <OrderCustomer
+                    onFulfill={onOrderFulfill}
-            canEditAddresses={canEditAddresses}
+                  />
-            canEditCustomer={false}
+                )}
-            order={order}
+                {renderCollection(
-            userPermissions={userPermissions}
+                  maybe(() => order.fulfillments),
-            onBillingAddressEdit={onBillingAddressEdit}
+                  (fulfillment, fulfillmentIndex) => (
-            onShippingAddressEdit={onShippingAddressEdit}
+                    <React.Fragment
-            onProfileView={onProfileView}
+                      key={maybe(() => fulfillment.id, "loading")}
-          />
+                    >
-          <CardSpacer />
+                      {!(
-          <OrderInvoiceList
+                        unfulfilled.length === 0 && fulfillmentIndex === 0
-            invoices={order?.invoices}
+                      ) && <CardSpacer />}
-            onInvoiceClick={onInvoiceClick}
+                      <OrderFulfillment
-            onInvoiceGenerate={onInvoiceGenerate}
+                        fulfillment={fulfillment}
-            onInvoiceSend={onInvoiceSend}
+                        orderNumber={maybe(() => order.number)}
-          />
+                        onOrderFulfillmentCancel={() =>
-          <CardSpacer />
+                          onFulfillmentCancel(fulfillment.id)
-          <OrderCustomerNote note={maybe(() => order.customerNote)} />
+                        }
-        </div>
+                        onTrackingCodeAdd={() =>
-      </Grid>
+                          onFulfillmentTrackingNumberUpdate(fulfillment.id)
-    </Container>
+                        }
+                      />
+                    </React.Fragment>
+                  )
+                )}
+                <CardSpacer />
+                <OrderPayment
+                  order={order}
+                  onCapture={onPaymentCapture}
+                  onMarkAsPaid={onPaymentPaid}
+                  onRefund={onPaymentRefund}
+                  onVoid={onPaymentVoid}
+                />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
+                <OrderHistory
+                  history={maybe(() => order.events)}
+                  onNoteAdd={onNoteAdd}
+                />
+              </div>
+              <div>
+                <OrderCustomer
+                  canEditAddresses={canEditAddresses}
+                  canEditCustomer={false}
+                  order={order}
+                  userPermissions={userPermissions}
+                  onBillingAddressEdit={onBillingAddressEdit}
+                  onShippingAddressEdit={onShippingAddressEdit}
+                  onProfileView={onProfileView}
+                />
+                <CardSpacer />
+                <OrderInvoiceList
+                  invoices={order?.invoices}
+                  onInvoiceClick={onInvoiceClick}
+                  onInvoiceGenerate={onInvoiceGenerate}
+                  onInvoiceSend={onInvoiceSend}
+                />
+                <CardSpacer />
+                <OrderCustomerNote note={maybe(() => order.customerNote)} />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              onCancel={onBack}
+              onSave={submit}
+              state={saveButtonBarState}
+              disabled={disabled || !hasChanged}
+            />
+          </Container>
+        );
+      }}
+    </Form>
   );
 };
 OrderDetailsPage.displayName = "OrderDetailsPage";

src/orders/fixtures.ts

@@ -1096,8 +1096,16 @@ export const order = (placeholder: string): OrderDetails_order => ({
       }
     }
   ],
+  metadata: [
+    {
+      __typename: "MetadataItem",
+      key: "integration.key",
+      value: "some-value"
+    }
+  ],
   number: "9",
   paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
+  privateMetadata: [],
   shippingAddress: {
     __typename: "Address",
     city: "West Patriciastad",
@@ -1256,8 +1264,10 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({
       }
     }
   ],
+  metadata: [],
   number: "24",
   paymentStatus: null,
+  privateMetadata: [],
   shippingAddress: null,
   shippingMethod: null,
   shippingMethodName: null,

src/orders/types/FulfillOrder.ts

@@ -16,6 +16,18 @@ export interface FulfillOrder_orderFulfill_errors {
   orderLine: string | null;
 }
 
+export interface FulfillOrder_orderFulfill_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface FulfillOrder_orderFulfill_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface FulfillOrder_orderFulfill_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -293,6 +305,8 @@ export interface FulfillOrder_orderFulfill_order_invoices {
 export interface FulfillOrder_orderFulfill_order {
   __typename: "Order";
   id: string;
+  metadata: (FulfillOrder_orderFulfill_order_metadata | null)[];
+  privateMetadata: (FulfillOrder_orderFulfill_order_privateMetadata | null)[];
   billingAddress: FulfillOrder_orderFulfill_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderCancel.ts

@@ -14,6 +14,18 @@ export interface OrderCancel_orderCancel_errors {
   field: string | null;
 }
 
+export interface OrderCancel_orderCancel_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderCancel_orderCancel_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderCancel_orderCancel_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderCancel_orderCancel_order_invoices {
 export interface OrderCancel_orderCancel_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderCancel_orderCancel_order_metadata | null)[];
+  privateMetadata: (OrderCancel_orderCancel_order_privateMetadata | null)[];
   billingAddress: OrderCancel_orderCancel_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderCapture.ts

@@ -14,6 +14,18 @@ export interface OrderCapture_orderCapture_errors {
   field: string | null;
 }
 
+export interface OrderCapture_orderCapture_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderCapture_orderCapture_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderCapture_orderCapture_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderCapture_orderCapture_order_invoices {
 export interface OrderCapture_orderCapture_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderCapture_orderCapture_order_metadata | null)[];
+  privateMetadata: (OrderCapture_orderCapture_order_privateMetadata | null)[];
   billingAddress: OrderCapture_orderCapture_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderDetails.ts

@@ -8,6 +8,18 @@ import { OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentCharg
 // GraphQL query operation: OrderDetails
 // ====================================================
 
+export interface OrderDetails_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderDetails_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderDetails_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -285,6 +297,8 @@ export interface OrderDetails_order_invoices {
 export interface OrderDetails_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderDetails_order_metadata | null)[];
+  privateMetadata: (OrderDetails_order_privateMetadata | null)[];
   billingAddress: OrderDetails_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderDraftCancel.ts

@@ -14,6 +14,18 @@ export interface OrderDraftCancel_draftOrderDelete_errors {
   field: string | null;
 }
 
+export interface OrderDraftCancel_draftOrderDelete_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderDraftCancel_draftOrderDelete_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderDraftCancel_draftOrderDelete_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderDraftCancel_draftOrderDelete_order_invoices {
 export interface OrderDraftCancel_draftOrderDelete_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderDraftCancel_draftOrderDelete_order_metadata | null)[];
+  privateMetadata: (OrderDraftCancel_draftOrderDelete_order_privateMetadata | null)[];
   billingAddress: OrderDraftCancel_draftOrderDelete_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderDraftFinalize.ts

@@ -14,6 +14,18 @@ export interface OrderDraftFinalize_draftOrderComplete_errors {
   field: string | null;
 }
 
+export interface OrderDraftFinalize_draftOrderComplete_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderDraftFinalize_draftOrderComplete_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderDraftFinalize_draftOrderComplete_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderDraftFinalize_draftOrderComplete_order_invoices {
 export interface OrderDraftFinalize_draftOrderComplete_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderDraftFinalize_draftOrderComplete_order_metadata | null)[];
+  privateMetadata: (OrderDraftFinalize_draftOrderComplete_order_privateMetadata | null)[];
   billingAddress: OrderDraftFinalize_draftOrderComplete_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderDraftUpdate.ts

@@ -14,6 +14,18 @@ export interface OrderDraftUpdate_draftOrderUpdate_errors {
   field: string | null;
 }
 
+export interface OrderDraftUpdate_draftOrderUpdate_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderDraftUpdate_draftOrderUpdate_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderDraftUpdate_draftOrderUpdate_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_invoices {
 export interface OrderDraftUpdate_draftOrderUpdate_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderDraftUpdate_draftOrderUpdate_order_metadata | null)[];
+  privateMetadata: (OrderDraftUpdate_draftOrderUpdate_order_privateMetadata | null)[];
   billingAddress: OrderDraftUpdate_draftOrderUpdate_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderFulfillmentCancel.ts

@@ -14,6 +14,18 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_errors {
   field: string | null;
 }
 
+export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_invoices {
 export interface OrderFulfillmentCancel_orderFulfillmentCancel_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderFulfillmentCancel_orderFulfillmentCancel_order_metadata | null)[];
+  privateMetadata: (OrderFulfillmentCancel_orderFulfillmentCancel_order_privateMetadata | null)[];
   billingAddress: OrderFulfillmentCancel_orderFulfillmentCancel_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderFulfillmentUpdateTracking.ts

@@ -14,6 +14,18 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_e
   field: string | null;
 }
 
+export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
 export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_metadata | null)[];
+  privateMetadata: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_privateMetadata | null)[];
   billingAddress: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderLineDelete.ts

@@ -14,6 +14,18 @@ export interface OrderLineDelete_draftOrderLineDelete_errors {
   field: string | null;
 }
 
+export interface OrderLineDelete_draftOrderLineDelete_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderLineDelete_draftOrderLineDelete_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderLineDelete_draftOrderLineDelete_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderLineDelete_draftOrderLineDelete_order_invoices {
 export interface OrderLineDelete_draftOrderLineDelete_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderLineDelete_draftOrderLineDelete_order_metadata | null)[];
+  privateMetadata: (OrderLineDelete_draftOrderLineDelete_order_privateMetadata | null)[];
   billingAddress: OrderLineDelete_draftOrderLineDelete_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderLineUpdate.ts

@@ -14,6 +14,18 @@ export interface OrderLineUpdate_draftOrderLineUpdate_errors {
   field: string | null;
 }
 
+export interface OrderLineUpdate_draftOrderLineUpdate_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderLineUpdate_draftOrderLineUpdate_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderLineUpdate_draftOrderLineUpdate_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_invoices {
 export interface OrderLineUpdate_draftOrderLineUpdate_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderLineUpdate_draftOrderLineUpdate_order_metadata | null)[];
+  privateMetadata: (OrderLineUpdate_draftOrderLineUpdate_order_privateMetadata | null)[];
   billingAddress: OrderLineUpdate_draftOrderLineUpdate_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderLinesAdd.ts

@@ -14,6 +14,18 @@ export interface OrderLinesAdd_draftOrderLinesCreate_errors {
   field: string | null;
 }
 
+export interface OrderLinesAdd_draftOrderLinesCreate_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderLinesAdd_draftOrderLinesCreate_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderLinesAdd_draftOrderLinesCreate_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_invoices {
 export interface OrderLinesAdd_draftOrderLinesCreate_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderLinesAdd_draftOrderLinesCreate_order_metadata | null)[];
+  privateMetadata: (OrderLinesAdd_draftOrderLinesCreate_order_privateMetadata | null)[];
   billingAddress: OrderLinesAdd_draftOrderLinesCreate_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderMarkAsPaid.ts

@@ -14,6 +14,18 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_errors {
   field: string | null;
 }
 
+export interface OrderMarkAsPaid_orderMarkAsPaid_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderMarkAsPaid_orderMarkAsPaid_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderMarkAsPaid_orderMarkAsPaid_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_invoices {
 export interface OrderMarkAsPaid_orderMarkAsPaid_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderMarkAsPaid_orderMarkAsPaid_order_metadata | null)[];
+  privateMetadata: (OrderMarkAsPaid_orderMarkAsPaid_order_privateMetadata | null)[];
   billingAddress: OrderMarkAsPaid_orderMarkAsPaid_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderRefund.ts

@@ -14,6 +14,18 @@ export interface OrderRefund_orderRefund_errors {
   field: string | null;
 }
 
+export interface OrderRefund_orderRefund_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderRefund_orderRefund_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderRefund_orderRefund_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderRefund_orderRefund_order_invoices {
 export interface OrderRefund_orderRefund_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderRefund_orderRefund_order_metadata | null)[];
+  privateMetadata: (OrderRefund_orderRefund_order_privateMetadata | null)[];
   billingAddress: OrderRefund_orderRefund_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/types/OrderVoid.ts

@@ -14,6 +14,18 @@ export interface OrderVoid_orderVoid_errors {
   field: string | null;
 }
 
+export interface OrderVoid_orderVoid_order_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface OrderVoid_orderVoid_order_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface OrderVoid_orderVoid_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
@@ -291,6 +303,8 @@ export interface OrderVoid_orderVoid_order_invoices {
 export interface OrderVoid_orderVoid_order {
   __typename: "Order";
   id: string;
+  metadata: (OrderVoid_orderVoid_order_metadata | null)[];
+  privateMetadata: (OrderVoid_orderVoid_order_privateMetadata | null)[];
   billingAddress: OrderVoid_orderVoid_order_billingAddress | null;
   canFinalize: boolean;
   created: any;

src/orders/views/OrderDetails/index.tsx

@@ -1,21 +1,30 @@
+import { MetadataFormData } from "@saleor/components/Metadata";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import { Task } from "@saleor/containers/BackgroundTasks/types";
 import useBackgroundTask from "@saleor/hooks/useBackgroundTask";
 import useNavigator from "@saleor/hooks/useNavigator";
+import useNotifier from "@saleor/hooks/useNotifier";
 import useUser from "@saleor/hooks/useUser";
+import { commonMessages } from "@saleor/intl";
 import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotCancelOrderDialog";
 import OrderInvoiceEmailSendDialog from "@saleor/orders/components/OrderInvoiceEmailSendDialog";
 import { InvoiceRequest } from "@saleor/orders/types/InvoiceRequest";
 import useCustomerSearch from "@saleor/searches/useCustomerSearch";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { customerUrl } from "../../../customers/urls";
 import {
+  getMutationState,
   getStringOrPlaceholder,
   maybe,
   transformAddressToForm
@@ -113,6 +122,12 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
   });
   const { queue } = useBackgroundTask();
   const intl = useIntl();
+  const [updateMetadata, updateMetadataOpts] = useMetadataUpdate({});
+  const [
+    updatePrivateMetadata,
+    updatePrivateMetadataOpts
+  ] = usePrivateMetadataUpdate({});
+  const notify = useNotifier();
 
   const [openModal, closeModal] = createDialogActionHandlers<
     OrderUrlDialog,
@@ -130,6 +145,23 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
           return <NotFoundPage onBack={handleBack} />;
         }
 
+        const handleSubmit = async (data: MetadataFormData) => {
+          const update = createMetadataUpdateHandler(
+            order,
+            () => Promise.resolve([]),
+            variables => updateMetadata({ variables }),
+            variables => updatePrivateMetadata({ variables })
+          );
+          const result = await update(data);
+
+          if (result.length === 0) {
+            notify({
+              status: "success",
+              text: intl.formatMessage(commonMessages.savedChanges)
+            });
+          }
+        };
+
         return (
           <OrderDetailsMessages id={id} params={params}>
             {orderMessages => (
@@ -211,6 +243,10 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                           )}
                         />
                         <OrderDetailsPage
+                          disabled={
+                            updateMetadataOpts.loading ||
+                            updatePrivateMetadataOpts.loading
+                          }
                           onNoteAdd={variables =>
                             orderAddNote.mutate({
                               input: variables,
@@ -219,6 +255,22 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                           }
                           onBack={handleBack}
                           order={order}
+                          saveButtonBarState={getMutationState(
+                            updateMetadataOpts.called ||
+                              updatePrivateMetadataOpts.called,
+                            updateMetadataOpts.loading ||
+                              updatePrivateMetadataOpts.loading,
+                            [
+                              ...(updateMetadataOpts.data?.deleteMetadata
+                                .errors || []),
+                              ...(updateMetadataOpts.data?.updateMetadata
+                                .errors || []),
+                              ...(updatePrivateMetadataOpts.data
+                                ?.deletePrivateMetadata.errors || []),
+                              ...(updatePrivateMetadataOpts.data
+                                ?.updatePrivateMetadata.errors || [])
+                            ]
+                          )}
                           shippingMethods={maybe(
                             () => data.order.availableShippingMethods,
                             []
@@ -271,6 +323,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                           onInvoiceSend={id =>
                             openModal("invoice-send", { id })
                           }
+                          onSubmit={handleSubmit}
                         />
                         <OrderCannotCancelOrderDialog
                           onClose={closeModal}

src/storybook/stories/orders/OrderDetailsPage.tsx

@@ -19,6 +19,7 @@ const order = orderFixture(placeholderImage);
 
 const props: Omit<OrderDetailsPageProps, "classes"> = {
   countries,
+  disabled: false,
   onBack: () => undefined,
   onBillingAddressEdit: undefined,
   onFulfillmentCancel: () => undefined,
@@ -36,7 +37,9 @@ const props: Omit<OrderDetailsPageProps, "classes"> = {
   onProductClick: undefined,
   onProfileView: () => undefined,
   onShippingAddressEdit: undefined,
+  onSubmit: () => undefined,
   order,
+  saveButtonBarState: "default",
   userPermissions: adminUserPermissions
 };