Merge pull request #688 from mirumee/metadata/orders

Add metadata to orders
saleor · Sep 4, 2020 · f2a309e · f2a309e
2 parents 591f2ec + 9ff8f0f
commit f2a309e
Show file tree

Hide file tree

Showing 24 changed files with 17,308 additions and 13,207 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/src/fragments/orders.ts b/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
     }

diff --git a/src/fragments/types/OrderDetailsFragment.ts b/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;

diff --git a/src/misc.ts b/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";

diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/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>
-      <AppHeader onBack={onBack}>
-        {intl.formatMessage(sectionNames.orders)}
-      </AppHeader>
-      <PageHeader
-        className={classes.header}
-        inline
-        title={maybe(() => order.number) ? "#" + order.number : undefined}
-      >
-        {canCancel && (
-          <CardMenu
-            menuItems={[
-              {
-                label: intl.formatMessage({
-                  defaultMessage: "Cancel order",
-                  description: "button"
-                }),
-                onSelect: onOrderCancel
-              }
-            ]}
-          />
-        )}
-      </PageHeader>
-      <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 />
+    <Form initial={initial} onSubmit={handleSubmit}>
+      {({ change, data, hasChanged, submit }) => {
+        const changeMetadata = makeMetadataChangeHandler(change);
+
+        return (
+          <Container>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.orders)}
+            </AppHeader>
+            <PageHeader
+              className={classes.header}
+              inline
+              title={maybe(() => order.number) ? "#" + order.number : undefined}
+            >
+              {canCancel && (
+                <CardMenu
+                  menuItems={[
+                    {
+                      label: intl.formatMessage({
+                        defaultMessage: "Cancel order",
+                        description: "button"
+                      }),
+                      onSelect: onOrderCancel
+                    }
+                  ]}
+                />
+              )}
+            </PageHeader>
+            <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>
+                  )
                 )}
-                <OrderFulfillment
-                  fulfillment={fulfillment}
-                  orderNumber={maybe(() => order.number)}
-                  onOrderFulfillmentCancel={() =>
-                    onFulfillmentCancel(fulfillment.id)
-                  }
-                  onTrackingCodeAdd={() =>
-                    onFulfillmentTrackingNumberUpdate(fulfillment.id)
-                  }
+                <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}
                 />
-              </React.Fragment>
-            )
-          )}
-          <CardSpacer />
-          <OrderPayment
-            order={order}
-            onCapture={onPaymentCapture}
-            onMarkAsPaid={onPaymentPaid}
-            onRefund={onPaymentRefund}
-            onVoid={onPaymentVoid}
-          />
-          <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>
-    </Container>
+              </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";

diff --git a/src/orders/fixtures.ts b/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,