From 453410b43d696f2df2dbb975ac5f38c40d260ab4 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 1 Sep 2020 18:22:54 +0200 Subject: [PATCH 1/4] Add metadata editor to order view --- src/fragments/orders.ts | 3 + src/fragments/types/OrderDetailsFragment.ts | 14 + src/misc.ts | 2 +- .../OrderDetailsPage/OrderDetailsPage.tsx | 244 +++++++++++------- src/orders/types/FulfillOrder.ts | 14 + src/orders/types/OrderCancel.ts | 14 + src/orders/types/OrderCapture.ts | 14 + src/orders/types/OrderDetails.ts | 14 + src/orders/types/OrderDraftCancel.ts | 14 + src/orders/types/OrderDraftFinalize.ts | 14 + src/orders/types/OrderDraftUpdate.ts | 14 + src/orders/types/OrderFulfillmentCancel.ts | 14 + .../types/OrderFulfillmentUpdateTracking.ts | 14 + src/orders/types/OrderLineDelete.ts | 14 + src/orders/types/OrderLineUpdate.ts | 14 + src/orders/types/OrderLinesAdd.ts | 14 + src/orders/types/OrderMarkAsPaid.ts | 14 + src/orders/types/OrderRefund.ts | 14 + src/orders/types/OrderVoid.ts | 14 + src/orders/views/OrderDetails/index.tsx | 53 ++++ 20 files changed, 429 insertions(+), 97 deletions(-) diff --git a/src/fragments/orders.ts b/src/fragments/orders.ts index 97cbac05e..9f2d2c1f9 100644 --- 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 index 39d902d7c..638225326 100644 --- 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 index 6ab1a53d5..2e661000a 100644 --- 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 index bd0062055..eb5ad5d68 100644 --- 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 = props => { const { + disabled, order, + saveButtonBarState, userPermissions, onBack, onBillingAddressEdit, @@ -87,11 +98,17 @@ const OrderDetailsPage: React.FC = 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 = 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 ( - - - {intl.formatMessage(sectionNames.orders)} - - order.number) ? "#" + order.number : undefined} - > - {canCancel && ( - - )} - -
- {order && order.created ? ( - - - - ) : ( - - )} -
- -
- {unfulfilled.length > 0 && ( - - )} - {renderCollection( - maybe(() => order.fulfillments), - (fulfillment, fulfillmentIndex) => ( - fulfillment.id, "loading")}> - {!(unfulfilled.length === 0 && fulfillmentIndex === 0) && ( - - )} - order.number)} - onOrderFulfillmentCancel={() => - onFulfillmentCancel(fulfillment.id) - } - onTrackingCodeAdd={() => - onFulfillmentTrackingNumberUpdate(fulfillment.id) - } +
+ {({ change, data, hasChanged, submit }) => { + const changeMetadata = makeMetadataChangeHandler(change); + + return ( + + + {intl.formatMessage(sectionNames.orders)} + + order.number) ? "#" + order.number : undefined} + > + {canCancel && ( + - - ) - )} - - - order.events)} - onNoteAdd={onNoteAdd} - /> -
-
- - - - - order.customerNote)} /> -
- - + )} + +
+ {order && order.created ? ( + + + + ) : ( + + )} +
+ +
+ {unfulfilled.length > 0 && ( + + )} + {renderCollection( + maybe(() => order.fulfillments), + (fulfillment, fulfillmentIndex) => ( + fulfillment.id, "loading")} + > + {!( + unfulfilled.length === 0 && fulfillmentIndex === 0 + ) && } + order.number)} + onOrderFulfillmentCancel={() => + onFulfillmentCancel(fulfillment.id) + } + onTrackingCodeAdd={() => + onFulfillmentTrackingNumberUpdate(fulfillment.id) + } + /> + + ) + )} + + + + + order.events)} + onNoteAdd={onNoteAdd} + /> +
+
+ + + + + order.customerNote)} /> +
+ + + + ); + }} + ); }; OrderDetailsPage.displayName = "OrderDetailsPage"; diff --git a/src/orders/types/FulfillOrder.ts b/src/orders/types/FulfillOrder.ts index fe2c67c5b..fd6f27ebf 100644 --- a/src/orders/types/FulfillOrder.ts +++ b/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; diff --git a/src/orders/types/OrderCancel.ts b/src/orders/types/OrderCancel.ts index ba3b8785a..db42d0608 100644 --- a/src/orders/types/OrderCancel.ts +++ b/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; diff --git a/src/orders/types/OrderCapture.ts b/src/orders/types/OrderCapture.ts index 943cff410..da37b506e 100644 --- a/src/orders/types/OrderCapture.ts +++ b/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; diff --git a/src/orders/types/OrderDetails.ts b/src/orders/types/OrderDetails.ts index ee4afa322..cf6adac75 100644 --- a/src/orders/types/OrderDetails.ts +++ b/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; diff --git a/src/orders/types/OrderDraftCancel.ts b/src/orders/types/OrderDraftCancel.ts index 4df54f073..8199977a5 100644 --- a/src/orders/types/OrderDraftCancel.ts +++ b/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; diff --git a/src/orders/types/OrderDraftFinalize.ts b/src/orders/types/OrderDraftFinalize.ts index bfdb51063..3251c64fb 100644 --- a/src/orders/types/OrderDraftFinalize.ts +++ b/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; diff --git a/src/orders/types/OrderDraftUpdate.ts b/src/orders/types/OrderDraftUpdate.ts index 303603050..95d5b5e60 100644 --- a/src/orders/types/OrderDraftUpdate.ts +++ b/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; diff --git a/src/orders/types/OrderFulfillmentCancel.ts b/src/orders/types/OrderFulfillmentCancel.ts index d9dbfcf90..4ae7b4eac 100644 --- a/src/orders/types/OrderFulfillmentCancel.ts +++ b/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; diff --git a/src/orders/types/OrderFulfillmentUpdateTracking.ts b/src/orders/types/OrderFulfillmentUpdateTracking.ts index 1ba499a7f..13962b3e4 100644 --- a/src/orders/types/OrderFulfillmentUpdateTracking.ts +++ b/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; diff --git a/src/orders/types/OrderLineDelete.ts b/src/orders/types/OrderLineDelete.ts index 5ea6b8d4a..8ff4b5ea6 100644 --- a/src/orders/types/OrderLineDelete.ts +++ b/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; diff --git a/src/orders/types/OrderLineUpdate.ts b/src/orders/types/OrderLineUpdate.ts index 6fbcdcdae..b214b9e17 100644 --- a/src/orders/types/OrderLineUpdate.ts +++ b/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; diff --git a/src/orders/types/OrderLinesAdd.ts b/src/orders/types/OrderLinesAdd.ts index afae6d412..d4edddb09 100644 --- a/src/orders/types/OrderLinesAdd.ts +++ b/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; diff --git a/src/orders/types/OrderMarkAsPaid.ts b/src/orders/types/OrderMarkAsPaid.ts index 05037261b..c7c5cc9b2 100644 --- a/src/orders/types/OrderMarkAsPaid.ts +++ b/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; diff --git a/src/orders/types/OrderRefund.ts b/src/orders/types/OrderRefund.ts index d1306c53e..8ba6a4c84 100644 --- a/src/orders/types/OrderRefund.ts +++ b/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; diff --git a/src/orders/types/OrderVoid.ts b/src/orders/types/OrderVoid.ts index 169690eb6..ce3feb82f 100644 --- a/src/orders/types/OrderVoid.ts +++ b/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; diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 282fa7d9d..bdc0e1363 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/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 = ({ 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 = ({ id, params }) => { return ; } + 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 ( {orderMessages => ( @@ -211,6 +243,10 @@ export const OrderDetails: React.FC = ({ id, params }) => { )} /> orderAddNote.mutate({ input: variables, @@ -219,6 +255,22 @@ export const OrderDetails: React.FC = ({ 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 = ({ id, params }) => { onInvoiceSend={id => openModal("invoice-send", { id }) } + onSubmit={handleSubmit} /> Date: Tue, 1 Sep 2020 18:29:36 +0200 Subject: [PATCH 2/4] Update snapshots --- src/orders/fixtures.ts | 8 + .../__snapshots__/Stories.test.ts.snap | 33831 +++++++++------- 2 files changed, 18801 insertions(+), 15038 deletions(-) diff --git a/src/orders/fixtures.ts b/src/orders/fixtures.ts index 0ecb23257..71e0e3742 100644 --- 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", diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index cf3c71a1d..1929499ea 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -86785,207 +86785,687 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
-
+
- #9 -
-
-
-
-
-
- -
-
-
-
-
-
- -
- Unfulfilled (3) -
- -
-
-
-
-
- - - - - - - - - - - - - - - - - - - -
- - Product - - - SKU - - Quantity - - Price - - Total -
-
-
- -
-
- Watkins-Gonzalez (Soft) -
-
- 		- 59-1337 - - 3 - - $18.51 - - $55.53 -
-
+ #9
-
+
+
+
+
+ +
+
+
+
+
- -
- Cancelled (1) -
- #9-2 -
-
-
+ +
+ Unfulfilled (3) +
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + +
+ + Product + + + SKU + + Quantity + + Price + + Total +
+
+
+ +
+
+ Watkins-Gonzalez (Soft) +
+
+ 		+ 59-1337 + + 3 + + $18.51 + + $55.53 +
+
-
+
+ +
+ Cancelled (1) +
+ #9-2 +
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+ + Product + + + SKU + + Quantity + + Price + + Total +
+
+
+ +
+
+ Williams, Garcia and Walker (XS) +
+
+ 		+ 5-1337 + + 1 + + $79.71 + + $79.71 +
+
+ Fulfilled from: +
+ Be stocked +
+
+
+
+
+
+
+
+
+ +
+ Cancelled (1) +
+ #9-1 +
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+ + Product + + + SKU + + Quantity + + Price + + Total +
+
+
+ +
+
+ Williams, Garcia and Walker (XS) +
+
+ 		+ 5-1337 + + 1 + + $79.71 + + $79.71 +
+
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+
+
+
+
+
+
+ +
+ Unpaid +
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+ Subtotal + + 5 items + + $214.95 +
+ Taxes + + does not apply + + $0.00 +
+ Shipping + + Registred priority + + $19.98 +
+ Total + + + $234.93 +
+
+
+
+ + + + + + + + + + + + + + + +
+ Preauthorized amount + + $234.93 +
+ Captured amount + + $0.00 +
+ Outstanding Balance + + -$234.93 +
+
+
+
+
+
+ + Metadata + +
+
+
+
+
+
+
+ 1 Field +
+ +
+
- - - - - - - - - - - -
- - Product - + Field - SKU + Value - Quantity - - Price - - Total + Actions
-
-
- -
-
- Williams, Garcia and Walker (XS) -
-
- 		- 5-1337 - - 1 - - $79.71 - - $79.71 -
- Fulfilled from: -
- Be stocked -
-
-
-
-
-
-
-
-
- -
- Cancelled (1) -
- #9-1 -
-
- -
-
-
-
-
- - - - - - - - - - - - - - - - - - -
- - Product - - - SKU - - Quantity - - Price - - Total -
-
- -
-
- Williams, Garcia and Walker (XS) +
- 5-1337 - - 1 - - $79.71 - - $79.71 -
- Fulfilled from:
- C our wares + + + + + + + + + + + + + +