From 6dcaffe40c45ebba3e982f5e957dc26449c10b33 Mon Sep 17 00:00:00 2001 From: Tomasz Szymanski Date: Tue, 23 Mar 2021 18:13:39 +0100 Subject: [PATCH] Refactor order page to separated components --- .../OrderProductAddDialog.tsx | 5 +- .../OrderDetails/OrderDraftDetails/index.tsx | 194 +++++ .../OrderDetails/OrderNormalDetails/index.tsx | 277 ++++++ .../OrderUnconfirmedDetails/index.tsx | 353 ++++++++ src/orders/views/OrderDetails/index.tsx | 808 ++---------------- 5 files changed, 894 insertions(+), 743 deletions(-) create mode 100644 src/orders/views/OrderDetails/OrderDraftDetails/index.tsx create mode 100644 src/orders/views/OrderDetails/OrderNormalDetails/index.tsx create mode 100644 src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx index 66c91aa80..87e3f878c 100644 --- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx +++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx @@ -189,9 +189,8 @@ const OrderProductAddDialog: React.FC = props => { onClose: () => setVariants([]) }); - const productChoices = products.filter( - product => product.variants?.length > 0 - ); + const productChoices = + products?.filter(product => product.variants?.length > 0) || []; const selectedVariantsToProductsMap = productChoices ? productChoices.map(product => product.variants.map(variant => isVariantSelected(variant, variants)) diff --git a/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx b/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx new file mode 100644 index 000000000..f259cb9d0 --- /dev/null +++ b/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx @@ -0,0 +1,194 @@ +import { WindowTitle } from "@saleor/components/WindowTitle"; +import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config"; +import useNavigator from "@saleor/hooks/useNavigator"; +import useUser from "@saleor/hooks/useUser"; +import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider"; +import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider"; +import useCustomerSearch from "@saleor/searches/useCustomerSearch"; +import React from "react"; +import { useIntl } from "react-intl"; + +import { customerUrl } from "../../../../customers/urls"; +import { getStringOrPlaceholder, maybe } from "../../../../misc"; +import { productUrl } from "../../../../products/urls"; +import OrderDraftCancelDialog from "../../../components/OrderDraftCancelDialog/OrderDraftCancelDialog"; +import OrderDraftPage from "../../../components/OrderDraftPage"; +import OrderProductAddDialog from "../../../components/OrderProductAddDialog"; +import OrderShippingMethodEditDialog from "../../../components/OrderShippingMethodEditDialog"; +import { useOrderVariantSearch } from "../../../queries"; +import { OrderUrlQueryParams } from "../../../urls"; +import { orderDraftListUrl } from "../../../urls"; + +interface OrderDraftDetailsProps { + id: string; + params: OrderUrlQueryParams; + loading: any; + data: any; + orderAddNote: any; + orderLineUpdate: any; + orderLineDelete: any; + orderShippingMethodUpdate: any; + orderLinesAdd: any; + orderDraftUpdate: any; + orderDraftCancel: any; + orderDraftFinalize: any; + openModal: any; + closeModal: any; +} + +export const OrderDraftDetails: React.FC = ({ + id, + params, + loading, + data, + orderAddNote, + orderLineUpdate, + orderLineDelete, + orderShippingMethodUpdate, + orderLinesAdd, + orderDraftUpdate, + orderDraftCancel, + orderDraftFinalize, + openModal, + closeModal +}) => { + const order = data.order; + const navigate = useNavigator(); + const { user } = useUser(); + + const { + loadMore, + search: variantSearch, + result: variantSearchOpts + } = useOrderVariantSearch({ + variables: DEFAULT_INITIAL_SEARCH_DATA + }); + + const { + loadMore: loadMoreCustomers, + search: searchUsers, + result: users + } = useCustomerSearch({ + variables: DEFAULT_INITIAL_SEARCH_DATA + }); + + const intl = useIntl(); + + return ( + <> + + + + + + orderAddNote.mutate({ + input: variables, + order: id + }) + } + users={maybe( + () => users.data.search.edges.map(edge => edge.node), + [] + )} + hasMore={maybe(() => users.data.search.pageInfo.hasNextPage, false)} + onFetchMore={loadMoreCustomers} + fetchUsers={searchUsers} + loading={users.loading} + usersLoading={users.loading} + onCustomerEdit={data => + orderDraftUpdate.mutate({ + id, + input: data + }) + } + onDraftFinalize={() => orderDraftFinalize.mutate({ id })} + onDraftRemove={() => openModal("cancel")} + onOrderLineAdd={() => openModal("add-order-line")} + onBack={() => navigate(orderDraftListUrl())} + order={order} + countries={maybe(() => data.shop.countries, []).map(country => ({ + code: country.code, + label: country.country + }))} + onProductClick={id => () => + navigate(productUrl(encodeURIComponent(id)))} + onBillingAddressEdit={() => openModal("edit-billing-address")} + onShippingAddressEdit={() => openModal("edit-shipping-address")} + onShippingMethodEdit={() => openModal("edit-shipping")} + onOrderLineRemove={id => orderLineDelete.mutate({ id })} + onOrderLineChange={(id, data) => + orderLineUpdate.mutate({ + id, + input: data + }) + } + saveButtonBarState="default" + onProfileView={() => navigate(customerUrl(order.user.id))} + userPermissions={user?.userPermissions || []} + /> + + + orderDraftCancel.mutate({ id })} + open={params.action === "cancel"} + orderNumber={getStringOrPlaceholder(order?.number)} + /> + + orderShippingMethodUpdate.mutate({ + id, + input: { + shippingMethod: variables.shippingMethod + } + }) + } + /> + edge.node)} + selectedChannelId={order?.channel?.id} + onClose={closeModal} + onFetch={variantSearch} + onFetchMore={loadMore} + onSubmit={variants => + orderLinesAdd.mutate({ + id, + input: variants.map(variant => ({ + quantity: 1, + variantId: variant.id + })) + }) + } + /> + + ); +}; + +export default OrderDraftDetails; diff --git a/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx b/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx new file mode 100644 index 000000000..c70f1bcb7 --- /dev/null +++ b/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx @@ -0,0 +1,277 @@ +import { WindowTitle } from "@saleor/components/WindowTitle"; +import useNavigator from "@saleor/hooks/useNavigator"; +import useUser from "@saleor/hooks/useUser"; +import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotCancelOrderDialog"; +import OrderInvoiceEmailSendDialog from "@saleor/orders/components/OrderInvoiceEmailSendDialog"; +import { useWarehouseList } from "@saleor/warehouses/queries"; +import React from "react"; +import { useIntl } from "react-intl"; + +import { customerUrl } from "../../../../customers/urls"; +import { + getMutationState, + getStringOrPlaceholder, + maybe +} from "../../../../misc"; +import { productUrl } from "../../../../products/urls"; +import { FulfillmentStatus } from "../../../../types/globalTypes"; +import OrderCancelDialog from "../../../components/OrderCancelDialog"; +import OrderDetailsPage from "../../../components/OrderDetailsPage"; +import OrderFulfillmentCancelDialog from "../../../components/OrderFulfillmentCancelDialog"; +import OrderFulfillmentTrackingDialog from "../../../components/OrderFulfillmentTrackingDialog"; +import OrderMarkAsPaidDialog from "../../../components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog"; +import OrderPaymentDialog from "../../../components/OrderPaymentDialog"; +import OrderPaymentVoidDialog from "../../../components/OrderPaymentVoidDialog"; +import { + orderFulfillUrl, + orderListUrl, + orderRefundUrl, + orderReturnPath, + orderUrl, + OrderUrlQueryParams +} from "../../../urls"; + +interface OrderNormalDetailsProps { + id: string; + params: OrderUrlQueryParams; + data: any; + orderAddNote: any; + orderInvoiceRequest: any; + handleSubmit: any; + orderCancel: any; + orderPaymentMarkAsPaid: any; + orderVoid: any; + orderPaymentCapture: any; + orderFulfillmentCancel: any; + orderFulfillmentUpdateTracking: any; + orderInvoiceSend: any; + updateMetadataOpts: any; + updatePrivateMetadataOpts: any; + openModal: any; + closeModal: any; +} + +export const OrderNormalDetails: React.FC = ({ + id, + params, + data, + orderAddNote, + orderInvoiceRequest, + handleSubmit, + orderCancel, + orderPaymentMarkAsPaid, + orderVoid, + orderPaymentCapture, + orderFulfillmentCancel, + orderFulfillmentUpdateTracking, + orderInvoiceSend, + updateMetadataOpts, + updatePrivateMetadataOpts, + openModal, + closeModal +}) => { + const order = data?.order; + const navigate = useNavigator(); + const { user } = useUser(); + + const warehouses = useWarehouseList({ + displayLoader: true, + variables: { + first: 30 + } + }); + const intl = useIntl(); + const [transactionReference, setTransactionReference] = React.useState(""); + + const handleBack = () => navigate(orderListUrl()); + + return ( + <> + + navigate(orderReturnPath(id))} + disabled={ + updateMetadataOpts.loading || updatePrivateMetadataOpts.loading + } + onNoteAdd={variables => + orderAddNote.mutate({ + input: variables, + order: id + }) + } + 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, [])} + userPermissions={user?.userPermissions || []} + onOrderCancel={() => openModal("cancel")} + onOrderFulfill={() => navigate(orderFulfillUrl(id))} + onFulfillmentCancel={fulfillmentId => + navigate( + orderUrl(id, { + action: "cancel-fulfillment", + id: fulfillmentId + }) + ) + } + onFulfillmentTrackingNumberUpdate={fulfillmentId => + navigate( + orderUrl(id, { + action: "edit-fulfillment", + id: fulfillmentId + }) + ) + } + onPaymentCapture={() => openModal("capture")} + onPaymentVoid={() => openModal("void")} + onPaymentRefund={() => navigate(orderRefundUrl(id))} + onProductClick={id => () => navigate(productUrl(id))} + onBillingAddressEdit={() => openModal("edit-billing-address")} + onShippingAddressEdit={() => openModal("edit-shipping-address")} + onPaymentPaid={() => openModal("mark-paid")} + onProfileView={() => navigate(customerUrl(order.user.id))} + onInvoiceClick={id => + window.open( + order.invoices.find(invoice => invoice.id === id)?.url, + "_blank" + ) + } + onInvoiceGenerate={() => + orderInvoiceRequest.mutate({ + orderId: id + }) + } + onInvoiceSend={id => openModal("invoice-send", { id })} + onSubmit={handleSubmit} + /> + fulfillment.status === FulfillmentStatus.FULFILLED + ) + } + /> + + orderCancel.mutate({ + id + }) + } + /> + + orderPaymentMarkAsPaid.mutate({ + id, + transactionReference + }) + } + open={params.action === "mark-paid"} + transactionReference={transactionReference} + handleTransactionReference={({ target }) => + setTransactionReference(target.value) + } + /> + orderVoid.mutate({ id })} + /> + + orderPaymentCapture.mutate({ + ...variables, + id + }) + } + /> + edge.node) || [] + } + onConfirm={variables => + orderFulfillmentCancel.mutate({ + id: params.id, + input: variables + }) + } + onClose={closeModal} + /> + fulfillment.id === params.id + )?.trackingNumber + )} + onConfirm={variables => + orderFulfillmentUpdateTracking.mutate({ + id: params.id, + input: { + ...variables, + notifyCustomer: true + } + }) + } + onClose={closeModal} + /> + invoice.id === params.id)} + onClose={closeModal} + onSend={() => orderInvoiceSend.mutate({ id: params.id })} + /> + + ); +}; + +export default OrderNormalDetails; diff --git a/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx b/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx new file mode 100644 index 000000000..d5b7b5bd6 --- /dev/null +++ b/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx @@ -0,0 +1,353 @@ +import { WindowTitle } from "@saleor/components/WindowTitle"; +import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config"; +import useNavigator from "@saleor/hooks/useNavigator"; +import useUser from "@saleor/hooks/useUser"; +import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotCancelOrderDialog"; +import OrderInvoiceEmailSendDialog from "@saleor/orders/components/OrderInvoiceEmailSendDialog"; +import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider"; +import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider"; +import { useWarehouseList } from "@saleor/warehouses/queries"; +import React from "react"; +import { useIntl } from "react-intl"; + +import { customerUrl } from "../../../../customers/urls"; +import { + getMutationState, + getStringOrPlaceholder, + maybe +} from "../../../../misc"; +import { productUrl } from "../../../../products/urls"; +import { FulfillmentStatus } from "../../../../types/globalTypes"; +import OrderCancelDialog from "../../../components/OrderCancelDialog"; +import OrderDetailsPage from "../../../components/OrderDetailsPage"; +import OrderFulfillmentCancelDialog from "../../../components/OrderFulfillmentCancelDialog"; +import OrderFulfillmentTrackingDialog from "../../../components/OrderFulfillmentTrackingDialog"; +import OrderMarkAsPaidDialog from "../../../components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog"; +import OrderPaymentDialog from "../../../components/OrderPaymentDialog"; +import OrderPaymentVoidDialog from "../../../components/OrderPaymentVoidDialog"; +import OrderProductAddDialog from "../../../components/OrderProductAddDialog"; +import OrderShippingMethodEditDialog from "../../../components/OrderShippingMethodEditDialog"; +import { useOrderVariantSearch } from "../../../queries"; +import { + orderFulfillUrl, + orderListUrl, + orderRefundUrl, + orderReturnPath, + orderUrl, + OrderUrlQueryParams +} from "../../../urls"; + +interface OrderUnconfirmedDetailsProps { + id: string; + params: OrderUrlQueryParams; + data: any; + orderAddNote: any; + orderLineUpdate: any; + orderLineDelete: any; + orderInvoiceRequest: any; + handleSubmit: any; + orderCancel: any; + orderShippingMethodUpdate: any; + orderLinesAdd: any; + orderPaymentMarkAsPaid: any; + orderVoid: any; + orderPaymentCapture: any; + orderFulfillmentCancel: any; + orderFulfillmentUpdateTracking: any; + orderInvoiceSend: any; + updateMetadataOpts: any; + updatePrivateMetadataOpts: any; + openModal: any; + closeModal: any; +} + +export const OrderUnconfirmedDetails: React.FC = ({ + id, + params, + data, + orderAddNote, + orderLineUpdate, + orderLineDelete, + orderInvoiceRequest, + handleSubmit, + orderCancel, + orderShippingMethodUpdate, + orderLinesAdd, + orderPaymentMarkAsPaid, + orderVoid, + orderPaymentCapture, + orderFulfillmentCancel, + orderFulfillmentUpdateTracking, + orderInvoiceSend, + updateMetadataOpts, + updatePrivateMetadataOpts, + openModal, + closeModal +}) => { + const order = data.order; + const navigate = useNavigator(); + const { user } = useUser(); + + const { + loadMore, + search: variantSearch, + result: variantSearchOpts + } = useOrderVariantSearch({ + variables: DEFAULT_INITIAL_SEARCH_DATA + }); + const warehouses = useWarehouseList({ + displayLoader: true, + variables: { + first: 30 + } + }); + const intl = useIntl(); + const [transactionReference, setTransactionReference] = React.useState(""); + + const handleBack = () => navigate(orderListUrl()); + + return ( + <> + + + + navigate(orderReturnPath(id))} + disabled={ + updateMetadataOpts.loading || updatePrivateMetadataOpts.loading + } + onNoteAdd={variables => + orderAddNote.mutate({ + input: variables, + order: id + }) + } + onBack={handleBack} + order={order} + onOrderLineAdd={() => openModal("add-order-line")} + onOrderLineChange={(id, data) => + orderLineUpdate.mutate({ + id, + input: data + }) + } + onOrderLineRemove={id => orderLineDelete.mutate({ id })} + onShippingMethodEdit={() => openModal("edit-shipping")} + 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, + [] + )} + userPermissions={user?.userPermissions || []} + onOrderCancel={() => openModal("cancel")} + onOrderFulfill={() => navigate(orderFulfillUrl(id))} + onFulfillmentCancel={fulfillmentId => + navigate( + orderUrl(id, { + action: "cancel-fulfillment", + id: fulfillmentId + }) + ) + } + onFulfillmentTrackingNumberUpdate={fulfillmentId => + navigate( + orderUrl(id, { + action: "edit-fulfillment", + id: fulfillmentId + }) + ) + } + onPaymentCapture={() => openModal("capture")} + onPaymentVoid={() => openModal("void")} + onPaymentRefund={() => navigate(orderRefundUrl(id))} + onProductClick={id => () => navigate(productUrl(id))} + onBillingAddressEdit={() => openModal("edit-billing-address")} + onShippingAddressEdit={() => openModal("edit-shipping-address")} + onPaymentPaid={() => openModal("mark-paid")} + onProfileView={() => navigate(customerUrl(order.user.id))} + onInvoiceClick={id => + window.open( + order.invoices.find(invoice => invoice.id === id)?.url, + "_blank" + ) + } + onInvoiceGenerate={() => + orderInvoiceRequest.mutate({ + orderId: id + }) + } + onInvoiceSend={id => openModal("invoice-send", { id })} + onSubmit={handleSubmit} + /> + + + fulfillment.status === FulfillmentStatus.FULFILLED + ) + } + /> + + orderCancel.mutate({ + id + }) + } + /> + + orderShippingMethodUpdate.mutate({ + id, + input: { + shippingMethod: variables.shippingMethod + } + }) + } + /> + edge.node)} + selectedChannelId={order?.channel?.id} + onClose={closeModal} + onFetch={variantSearch} + onFetchMore={loadMore} + onSubmit={variants => + orderLinesAdd.mutate({ + id, + input: variants.map(variant => ({ + quantity: 1, + variantId: variant.id + })) + }) + } + /> + + orderPaymentMarkAsPaid.mutate({ + id, + transactionReference + }) + } + open={params.action === "mark-paid"} + transactionReference={transactionReference} + handleTransactionReference={({ target }) => + setTransactionReference(target.value) + } + /> + orderVoid.mutate({ id })} + /> + + orderPaymentCapture.mutate({ + ...variables, + id + }) + } + /> + edge.node) || [] + } + onConfirm={variables => + orderFulfillmentCancel.mutate({ + id: params.id, + input: variables + }) + } + onClose={closeModal} + /> + fulfillment.id === params.id + )?.trackingNumber + )} + onConfirm={variables => + orderFulfillmentUpdateTracking.mutate({ + id: params.id, + input: { + ...variables, + notifyCustomer: true + } + }) + } + onClose={closeModal} + /> + invoice.id === params.id)} + onClose={closeModal} + onSend={() => orderInvoiceSend.mutate({ id: params.id })} + /> + + ); +}; + +export default OrderUnconfirmedDetails; diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 91c819531..3537a3871 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -1,20 +1,12 @@ 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 { useOrderConfirmMutation } from "@saleor/orders/mutations"; import { InvoiceRequest } from "@saleor/orders/types/InvoiceRequest"; -import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider"; -import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider"; -import useCustomerSearch from "@saleor/searches/useCustomerSearch"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; @@ -22,43 +14,23 @@ 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 } from "../../../misc"; -import { productUrl } from "../../../products/urls"; -import { - FulfillmentStatus, - JobStatusEnum, - OrderStatus -} from "../../../types/globalTypes"; -import OrderCancelDialog from "../../components/OrderCancelDialog"; -import OrderDetailsPage from "../../components/OrderDetailsPage"; -import OrderDraftCancelDialog from "../../components/OrderDraftCancelDialog/OrderDraftCancelDialog"; -import OrderDraftPage from "../../components/OrderDraftPage"; -import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog"; -import OrderFulfillmentTrackingDialog from "../../components/OrderFulfillmentTrackingDialog"; -import OrderMarkAsPaidDialog from "../../components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog"; -import OrderPaymentDialog from "../../components/OrderPaymentDialog"; -import OrderPaymentVoidDialog from "../../components/OrderPaymentVoidDialog"; -import OrderProductAddDialog from "../../components/OrderProductAddDialog"; -import OrderShippingMethodEditDialog from "../../components/OrderShippingMethodEditDialog"; +import { JobStatusEnum, OrderStatus } from "../../../types/globalTypes"; import OrderOperations from "../../containers/OrderOperations"; -import { TypedOrderDetailsQuery, useOrderVariantSearch } from "../../queries"; +import { TypedOrderDetailsQuery } from "../../queries"; import { - orderDraftListUrl, - orderFulfillUrl, orderListUrl, - orderRefundUrl, - orderReturnPath, orderUrl, OrderUrlDialog, OrderUrlQueryParams } from "../../urls"; import OrderAddressFields from "./OrderAddressFields"; import { OrderDetailsMessages } from "./OrderDetailsMessages"; +import { OrderDraftDetails } from "./OrderDraftDetails"; +import { OrderNormalDetails } from "./OrderNormalDetails"; +import { OrderUnconfirmedDetails } from "./OrderUnconfirmedDetails"; interface OrderDetailsProps { id: string; @@ -67,29 +39,7 @@ interface OrderDetailsProps { export const OrderDetails: React.FC = ({ id, params }) => { const navigate = useNavigator(); - const { user } = useUser(); - const { - loadMore: loadMoreCustomers, - search: searchUsers, - result: users - } = useCustomerSearch({ - variables: DEFAULT_INITIAL_SEARCH_DATA - }); - - const { - loadMore, - search: variantSearch, - result: variantSearchOpts - } = useOrderVariantSearch({ - variables: DEFAULT_INITIAL_SEARCH_DATA - }); - const warehouses = useWarehouseList({ - displayLoader: true, - variables: { - first: 30 - } - }); const { queue } = useBackgroundTask(); const intl = useIntl(); const [updateMetadata, updateMetadataOpts] = useMetadataUpdate({}); @@ -98,7 +48,6 @@ export const OrderDetails: React.FC = ({ id, params }) => { updatePrivateMetadataOpts ] = usePrivateMetadataUpdate({}); const notify = useNotifier(); - const [transactionReference, setTransactionReference] = React.useState(""); const [openModal, closeModal] = createDialogActionHandlers< OrderUrlDialog, @@ -219,693 +168,72 @@ export const OrderDetails: React.FC = ({ id, params }) => { }) => ( <> {!isOrderDraft && !isOrderUnconfirmed && ( - <> - - navigate(orderReturnPath(id))} - disabled={ - updateMetadataOpts.loading || - updatePrivateMetadataOpts.loading - } - onNoteAdd={variables => - orderAddNote.mutate({ - input: variables, - order: id - }) - } - 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, - [] - )} - userPermissions={user?.userPermissions || []} - onOrderCancel={() => openModal("cancel")} - onOrderFulfill={() => navigate(orderFulfillUrl(id))} - onFulfillmentCancel={fulfillmentId => - navigate( - orderUrl(id, { - action: "cancel-fulfillment", - id: fulfillmentId - }) - ) - } - onFulfillmentTrackingNumberUpdate={fulfillmentId => - navigate( - orderUrl(id, { - action: "edit-fulfillment", - id: fulfillmentId - }) - ) - } - onPaymentCapture={() => openModal("capture")} - onPaymentVoid={() => openModal("void")} - onPaymentRefund={() => navigate(orderRefundUrl(id))} - onProductClick={id => () => navigate(productUrl(id))} - onBillingAddressEdit={() => - openModal("edit-billing-address") - } - onShippingAddressEdit={() => - openModal("edit-shipping-address") - } - onPaymentPaid={() => openModal("mark-paid")} - onProfileView={() => - navigate(customerUrl(order.user.id)) - } - onInvoiceClick={id => - window.open( - order.invoices.find(invoice => invoice.id === id) - ?.url, - "_blank" - ) - } - onInvoiceGenerate={() => - orderInvoiceRequest.mutate({ - orderId: id - }) - } - onInvoiceSend={id => - openModal("invoice-send", { id }) - } - onSubmit={handleSubmit} - /> - - fulfillment.status === - FulfillmentStatus.FULFILLED - ) - } - /> - - orderCancel.mutate({ - id - }) - } - /> - - orderPaymentMarkAsPaid.mutate({ - id, - transactionReference - }) - } - open={params.action === "mark-paid"} - transactionReference={transactionReference} - handleTransactionReference={({ target }) => - setTransactionReference(target.value) - } - /> - orderVoid.mutate({ id })} - /> - - orderPaymentCapture.mutate({ - ...variables, - id - }) - } - /> - edge.node - ) || [] - } - onConfirm={variables => - orderFulfillmentCancel.mutate({ - id: params.id, - input: variables - }) - } - onClose={closeModal} - /> - fulfillment.id === params.id - )?.trackingNumber - )} - onConfirm={variables => - orderFulfillmentUpdateTracking.mutate({ - id: params.id, - input: { - ...variables, - notifyCustomer: true - } - }) - } - onClose={closeModal} - /> - invoice.id === params.id - )} - onClose={closeModal} - onSend={() => - orderInvoiceSend.mutate({ id: params.id }) - } - /> - + )} {isOrderDraft && ( - <> - - - - - - orderAddNote.mutate({ - input: variables, - order: id - }) - } - users={maybe( - () => - users.data.search.edges.map( - edge => edge.node - ), - [] - )} - hasMore={maybe( - () => users.data.search.pageInfo.hasNextPage, - false - )} - onFetchMore={loadMoreCustomers} - fetchUsers={searchUsers} - loading={users.loading} - usersLoading={users.loading} - onCustomerEdit={data => - orderDraftUpdate.mutate({ - id, - input: data - }) - } - onDraftFinalize={() => - orderDraftFinalize.mutate({ id }) - } - onDraftRemove={() => openModal("cancel")} - onOrderLineAdd={() => openModal("add-order-line")} - onBack={() => navigate(orderDraftListUrl())} - order={order} - countries={maybe( - () => data.shop.countries, - [] - ).map(country => ({ - code: country.code, - label: country.country - }))} - onProductClick={id => () => - navigate(productUrl(encodeURIComponent(id)))} - onBillingAddressEdit={() => - openModal("edit-billing-address") - } - onShippingAddressEdit={() => - openModal("edit-shipping-address") - } - onShippingMethodEdit={() => - openModal("edit-shipping") - } - onOrderLineRemove={id => - orderLineDelete.mutate({ id }) - } - onOrderLineChange={(id, data) => - orderLineUpdate.mutate({ - id, - input: data - }) - } - saveButtonBarState="default" - onProfileView={() => - navigate(customerUrl(order.user.id)) - } - userPermissions={user?.userPermissions || []} - /> - - - orderDraftCancel.mutate({ id })} - open={params.action === "cancel"} - orderNumber={getStringOrPlaceholder(order?.number)} - /> - - orderShippingMethodUpdate.mutate({ - id, - input: { - shippingMethod: variables.shippingMethod - } - }) - } - /> - edge.node - )} - selectedChannelId={order?.channel?.id} - onClose={closeModal} - onFetch={variantSearch} - onFetchMore={loadMore} - onSubmit={variants => - orderLinesAdd.mutate({ - id, - input: variants.map(variant => ({ - quantity: 1, - variantId: variant.id - })) - }) - } - /> - + )} - {order && isOrderUnconfirmed && ( - <> - - - - - navigate(orderReturnPath(id)) - } - disabled={ - updateMetadataOpts.loading || - updatePrivateMetadataOpts.loading - } - onNoteAdd={variables => - orderAddNote.mutate({ - input: variables, - order: id - }) - } - onBack={handleBack} - order={order} - onOrderLineAdd={() => openModal("add-order-line")} - onOrderLineChange={(id, data) => - orderLineUpdate.mutate({ - id, - input: data - }) - } - onOrderLineRemove={id => - orderLineDelete.mutate({ id }) - } - onShippingMethodEdit={() => - openModal("edit-shipping") - } - 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, - [] - )} - userPermissions={user?.userPermissions || []} - onOrderCancel={() => openModal("cancel")} - onOrderFulfill={() => - navigate(orderFulfillUrl(id)) - } - onFulfillmentCancel={fulfillmentId => - navigate( - orderUrl(id, { - action: "cancel-fulfillment", - id: fulfillmentId - }) - ) - } - onFulfillmentTrackingNumberUpdate={fulfillmentId => - navigate( - orderUrl(id, { - action: "edit-fulfillment", - id: fulfillmentId - }) - ) - } - onPaymentCapture={() => openModal("capture")} - onPaymentVoid={() => openModal("void")} - onPaymentRefund={() => - navigate(orderRefundUrl(id)) - } - onProductClick={id => () => - navigate(productUrl(id))} - onBillingAddressEdit={() => - openModal("edit-billing-address") - } - onShippingAddressEdit={() => - openModal("edit-shipping-address") - } - onPaymentPaid={() => openModal("mark-paid")} - onProfileView={() => - navigate(customerUrl(order.user.id)) - } - onInvoiceClick={id => - window.open( - order.invoices.find( - invoice => invoice.id === id - )?.url, - "_blank" - ) - } - onInvoiceGenerate={() => - orderInvoiceRequest.mutate({ - orderId: id - }) - } - onInvoiceSend={id => - openModal("invoice-send", { id }) - } - onSubmit={handleSubmit} - /> - - - - fulfillment.status === - FulfillmentStatus.FULFILLED - ) - } - /> - - orderCancel.mutate({ - id - }) - } - /> - - orderShippingMethodUpdate.mutate({ - id, - input: { - shippingMethod: variables.shippingMethod - } - }) - } - /> - edge.node - )} - selectedChannelId={order?.channel?.id} - onClose={closeModal} - onFetch={variantSearch} - onFetchMore={loadMore} - onSubmit={variants => - orderLinesAdd.mutate({ - id, - input: variants.map(variant => ({ - quantity: 1, - variantId: variant.id - })) - }) - } - /> - - orderPaymentMarkAsPaid.mutate({ - id, - transactionReference - }) - } - open={params.action === "mark-paid"} - transactionReference={transactionReference} - handleTransactionReference={({ target }) => - setTransactionReference(target.value) - } - /> - orderVoid.mutate({ id })} - /> - - orderPaymentCapture.mutate({ - ...variables, - id - }) - } - /> - edge.node - ) || [] - } - onConfirm={variables => - orderFulfillmentCancel.mutate({ - id: params.id, - input: variables - }) - } - onClose={closeModal} - /> - fulfillment.id === params.id - )?.trackingNumber - )} - onConfirm={variables => - orderFulfillmentUpdateTracking.mutate({ - id: params.id, - input: { - ...variables, - notifyCustomer: true - } - }) - } - onClose={closeModal} - /> - invoice.id === params.id - )} - onClose={closeModal} - onSend={() => - orderInvoiceSend.mutate({ id: params.id }) - } - /> - + {isOrderUnconfirmed && ( + )}