djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor order page to separated components

Browse source
This commit is contained in:
Tomasz Szymanski 2021-03-23 18:13:39 +01:00
parent c8cfb2b2b2
commit 6dcaffe40c
5 changed files with 894 additions and 743 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
View file

@ -189,9 +189,8 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
onClose: () => setVariants([]) onClose: () => setVariants([])
}); });
const productChoices = products.filter( const productChoices =
product => product.variants?.length > 0 products?.filter(product => product.variants?.length > 0) || [];
);
const selectedVariantsToProductsMap = productChoices const selectedVariantsToProductsMap = productChoices
? productChoices.map(product => ? productChoices.map(product =>
product.variants.map(variant => isVariantSelected(variant, variants)) product.variants.map(variant => isVariantSelected(variant, variants))

194
src/orders/views/OrderDetails/OrderDraftDetails/index.tsx Normal file
View file

@ -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<OrderDraftDetailsProps> = ({
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 (
<>
<WindowTitle
title={intl.formatMessage(
{
defaultMessage: "Draft Order #{orderNumber}",
description: "window title"
},
{
orderNumber: getStringOrPlaceholder(data?.order?.number)
}
)}
/>
<OrderDiscountProvider order={order}>
<OrderLineDiscountProvider order={order}>
<OrderDraftPage
disabled={loading}
onNoteAdd={variables =>
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 || []}
/>
</OrderLineDiscountProvider>
</OrderDiscountProvider>
<OrderDraftCancelDialog
confirmButtonState={orderDraftCancel.opts.status}
errors={orderDraftCancel.opts.data?.draftOrderDelete.errors || []}
onClose={closeModal}
onConfirm={() => orderDraftCancel.mutate({ id })}
open={params.action === "cancel"}
orderNumber={getStringOrPlaceholder(order?.number)}
/>
<OrderShippingMethodEditDialog
confirmButtonState={orderShippingMethodUpdate.opts.status}
errors={
orderShippingMethodUpdate.opts.data?.orderUpdateShipping.errors || []
}
open={params.action === "edit-shipping"}
shippingMethod={order?.shippingMethod?.id}
shippingMethods={order?.availableShippingMethods}
onClose={closeModal}
onSubmit={variables =>
orderShippingMethodUpdate.mutate({
id,
input: {
shippingMethod: variables.shippingMethod
}
})
}
/>
<OrderProductAddDialog
confirmButtonState={orderLinesAdd.opts.status}
errors={orderLinesAdd.opts.data?.orderLinesCreate.errors || []}
loading={variantSearchOpts.loading}
open={params.action === "add-order-line"}
hasMore={variantSearchOpts.data?.search.pageInfo.hasNextPage}
products={variantSearchOpts.data?.search.edges.map(edge => 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;

277
src/orders/views/OrderDetails/OrderNormalDetails/index.tsx Normal file
View file

@ -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<OrderNormalDetailsProps> = ({
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 (
<>
<WindowTitle
title={intl.formatMessage(
{
defaultMessage: "Order #{orderNumber}",
description: "window title"
},
{
orderNumber: getStringOrPlaceholder(data?.order?.number)
}
)}
/>
<OrderDetailsPage
onOrderReturn={() => 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}
/>
<OrderCannotCancelOrderDialog
onClose={closeModal}
open={
params.action === "cancel" &&
order?.fulfillments.some(
fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED
)
}
/>
<OrderCancelDialog
confirmButtonState={orderCancel.opts.status}
errors={orderCancel.opts.data?.orderCancel.errors || []}
number={order?.number}
open={params.action === "cancel"}
onClose={closeModal}
onSubmit={() =>
orderCancel.mutate({
id
})
}
/>
<OrderMarkAsPaidDialog
confirmButtonState={orderPaymentMarkAsPaid.opts.status}
errors={orderPaymentMarkAsPaid.opts.data?.orderMarkAsPaid.errors || []}
onClose={closeModal}
onConfirm={() =>
orderPaymentMarkAsPaid.mutate({
id,
transactionReference
})
}
open={params.action === "mark-paid"}
transactionReference={transactionReference}
handleTransactionReference={({ target }) =>
setTransactionReference(target.value)
}
/>
<OrderPaymentVoidDialog
confirmButtonState={orderVoid.opts.status}
errors={orderVoid.opts.data?.orderVoid.errors || []}
open={params.action === "void"}
onClose={closeModal}
onConfirm={() => orderVoid.mutate({ id })}
/>
<OrderPaymentDialog
confirmButtonState={orderPaymentCapture.opts.status}
errors={orderPaymentCapture.opts.data?.orderCapture.errors || []}
initial={order?.total.gross.amount}
open={params.action === "capture"}
onClose={closeModal}
onSubmit={variables =>
orderPaymentCapture.mutate({
...variables,
id
})
}
/>
<OrderFulfillmentCancelDialog
confirmButtonState={orderFulfillmentCancel.opts.status}
errors={
orderFulfillmentCancel.opts.data?.orderFulfillmentCancel.errors || []
}
open={params.action === "cancel-fulfillment"}
warehouses={
warehouses.data?.warehouses.edges.map(edge => edge.node) || []
}
onConfirm={variables =>
orderFulfillmentCancel.mutate({
id: params.id,
input: variables
})
}
onClose={closeModal}
/>
<OrderFulfillmentTrackingDialog
confirmButtonState={orderFulfillmentUpdateTracking.opts.status}
errors={
orderFulfillmentUpdateTracking.opts.data
?.orderFulfillmentUpdateTracking.errors || []
}
open={params.action === "edit-fulfillment"}
trackingNumber={getStringOrPlaceholder(
data?.order?.fulfillments.find(
fulfillment => fulfillment.id === params.id
)?.trackingNumber
)}
onConfirm={variables =>
orderFulfillmentUpdateTracking.mutate({
id: params.id,
input: {
...variables,
notifyCustomer: true
}
})
}
onClose={closeModal}
/>
<OrderInvoiceEmailSendDialog
confirmButtonState={orderInvoiceSend.opts.status}
errors={orderInvoiceSend.opts.data?.invoiceSendEmail.errors || []}
open={params.action === "invoice-send"}
invoice={order?.invoices?.find(invoice => invoice.id === params.id)}
onClose={closeModal}
onSend={() => orderInvoiceSend.mutate({ id: params.id })}
/>
</>
);
};
export default OrderNormalDetails;

353
src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx Normal file
View file

@ -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<OrderUnconfirmedDetailsProps> = ({
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 (
<>
<WindowTitle
title={intl.formatMessage(
{
defaultMessage: "Order #{orderNumber}",
description: "window title"
},
{
orderNumber: getStringOrPlaceholder(order.number)
}
)}
/>
<OrderDiscountProvider order={order}>
<OrderLineDiscountProvider order={order}>
<OrderDetailsPage
onOrderReturn={() => 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}
/>
</OrderLineDiscountProvider>
</OrderDiscountProvider>
<OrderCannotCancelOrderDialog
onClose={closeModal}
open={
params.action === "cancel" &&
order?.fulfillments.some(
fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED
)
}
/>
<OrderCancelDialog
confirmButtonState={orderCancel.opts.status}
errors={orderCancel.opts.data?.orderCancel.errors || []}
number={order?.number}
open={params.action === "cancel"}
onClose={closeModal}
onSubmit={() =>
orderCancel.mutate({
id
})
}
/>
<OrderShippingMethodEditDialog
confirmButtonState={orderShippingMethodUpdate.opts.status}
errors={
orderShippingMethodUpdate.opts.data?.orderUpdateShipping.errors || []
}
open={params.action === "edit-shipping"}
shippingMethod={order?.shippingMethod?.id}
shippingMethods={order?.availableShippingMethods}
onClose={closeModal}
onSubmit={variables =>
orderShippingMethodUpdate.mutate({
id,
input: {
shippingMethod: variables.shippingMethod
}
})
}
/>
<OrderProductAddDialog
confirmButtonState={orderLinesAdd.opts.status}
errors={orderLinesAdd.opts.data?.orderLinesCreate.errors || []}
loading={variantSearchOpts.loading}
open={params.action === "add-order-line"}
hasMore={variantSearchOpts.data?.search.pageInfo.hasNextPage}
products={variantSearchOpts.data?.search.edges.map(edge => 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
}))
})
}
/>
<OrderMarkAsPaidDialog
confirmButtonState={orderPaymentMarkAsPaid.opts.status}
errors={orderPaymentMarkAsPaid.opts.data?.orderMarkAsPaid.errors || []}
onClose={closeModal}
onConfirm={() =>
orderPaymentMarkAsPaid.mutate({
id,
transactionReference
})
}
open={params.action === "mark-paid"}
transactionReference={transactionReference}
handleTransactionReference={({ target }) =>
setTransactionReference(target.value)
}
/>
<OrderPaymentVoidDialog
confirmButtonState={orderVoid.opts.status}
errors={orderVoid.opts.data?.orderVoid.errors || []}
open={params.action === "void"}
onClose={closeModal}
onConfirm={() => orderVoid.mutate({ id })}
/>
<OrderPaymentDialog
confirmButtonState={orderPaymentCapture.opts.status}
errors={orderPaymentCapture.opts.data?.orderCapture.errors || []}
initial={order?.total.gross.amount}
open={params.action === "capture"}
onClose={closeModal}
onSubmit={variables =>
orderPaymentCapture.mutate({
...variables,
id
})
}
/>
<OrderFulfillmentCancelDialog
confirmButtonState={orderFulfillmentCancel.opts.status}
errors={
orderFulfillmentCancel.opts.data?.orderFulfillmentCancel.errors || []
}
open={params.action === "cancel-fulfillment"}
warehouses={
warehouses.data?.warehouses.edges.map(edge => edge.node) || []
}
onConfirm={variables =>
orderFulfillmentCancel.mutate({
id: params.id,
input: variables
})
}
onClose={closeModal}
/>
<OrderFulfillmentTrackingDialog
confirmButtonState={orderFulfillmentUpdateTracking.opts.status}
errors={
orderFulfillmentUpdateTracking.opts.data
?.orderFulfillmentUpdateTracking.errors || []
}
open={params.action === "edit-fulfillment"}
trackingNumber={getStringOrPlaceholder(
data?.order?.fulfillments.find(
fulfillment => fulfillment.id === params.id
)?.trackingNumber
)}
onConfirm={variables =>
orderFulfillmentUpdateTracking.mutate({
id: params.id,
input: {
...variables,
notifyCustomer: true
}
})
}
onClose={closeModal}
/>
<OrderInvoiceEmailSendDialog
confirmButtonState={orderInvoiceSend.opts.status}
errors={orderInvoiceSend.opts.data?.invoiceSendEmail.errors || []}
open={params.action === "invoice-send"}
invoice={order?.invoices?.find(invoice => invoice.id === params.id)}
onClose={closeModal}
onSend={() => orderInvoiceSend.mutate({ id: params.id })}
/>
</>
);
};
export default OrderUnconfirmedDetails;

808
src/orders/views/OrderDetails/index.tsx
View file

@ -1,20 +1,12 @@
import { MetadataFormData } from "@saleor/components/Metadata"; import { MetadataFormData } from "@saleor/components/Metadata";
import NotFoundPage from "@saleor/components/NotFoundPage"; 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 { Task } from "@saleor/containers/BackgroundTasks/types";
import useBackgroundTask from "@saleor/hooks/useBackgroundTask"; import useBackgroundTask from "@saleor/hooks/useBackgroundTask";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useUser from "@saleor/hooks/useUser";
import { commonMessages } from "@saleor/intl"; 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 { useOrderConfirmMutation } from "@saleor/orders/mutations";
import { InvoiceRequest } from "@saleor/orders/types/InvoiceRequest"; 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 getOrderErrorMessage from "@saleor/utils/errors/order";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
@ -22,43 +14,23 @@ import {
useMetadataUpdate, useMetadataUpdate,
usePrivateMetadataUpdate usePrivateMetadataUpdate
} from "@saleor/utils/metadata/updateMetadata"; } from "@saleor/utils/metadata/updateMetadata";
import { useWarehouseList } from "@saleor/warehouses/queries";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { customerUrl } from "../../../customers/urls"; import { JobStatusEnum, OrderStatus } from "../../../types/globalTypes";
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 OrderOperations from "../../containers/OrderOperations"; import OrderOperations from "../../containers/OrderOperations";
import { TypedOrderDetailsQuery, useOrderVariantSearch } from "../../queries"; import { TypedOrderDetailsQuery } from "../../queries";
import { import {
orderDraftListUrl,
orderFulfillUrl,
orderListUrl, orderListUrl,
orderRefundUrl,
orderReturnPath,
orderUrl, orderUrl,
OrderUrlDialog, OrderUrlDialog,
OrderUrlQueryParams OrderUrlQueryParams
} from "../../urls"; } from "../../urls";
import OrderAddressFields from "./OrderAddressFields"; import OrderAddressFields from "./OrderAddressFields";
import { OrderDetailsMessages } from "./OrderDetailsMessages"; import { OrderDetailsMessages } from "./OrderDetailsMessages";
import { OrderDraftDetails } from "./OrderDraftDetails";
import { OrderNormalDetails } from "./OrderNormalDetails";
import { OrderUnconfirmedDetails } from "./OrderUnconfirmedDetails";
interface OrderDetailsProps { interface OrderDetailsProps {
id: string; id: string;
@ -67,29 +39,7 @@ interface OrderDetailsProps {
export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => { export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
const navigate = useNavigator(); 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 { queue } = useBackgroundTask();
const intl = useIntl(); const intl = useIntl();
const [updateMetadata, updateMetadataOpts] = useMetadataUpdate({}); const [updateMetadata, updateMetadataOpts] = useMetadataUpdate({});
@ -98,7 +48,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
updatePrivateMetadataOpts updatePrivateMetadataOpts
] = usePrivateMetadataUpdate({}); ] = usePrivateMetadataUpdate({});
const notify = useNotifier(); const notify = useNotifier();
const [transactionReference, setTransactionReference] = React.useState("");
const [openModal, closeModal] = createDialogActionHandlers< const [openModal, closeModal] = createDialogActionHandlers<
OrderUrlDialog, OrderUrlDialog,
@ -219,693 +168,72 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}) => ( }) => (
<> <>
{!isOrderDraft && !isOrderUnconfirmed && ( {!isOrderDraft && !isOrderUnconfirmed && (
<> <OrderNormalDetails
<WindowTitle id={id}
title={intl.formatMessage( params={params}
{ data={data}
defaultMessage: "Order #{orderNumber}", orderAddNote={orderAddNote}
description: "window title" orderInvoiceRequest={orderInvoiceRequest}
}, handleSubmit={handleSubmit}
{ orderCancel={orderCancel}
orderNumber: getStringOrPlaceholder( orderPaymentMarkAsPaid={orderPaymentMarkAsPaid}
data?.order?.number orderVoid={orderVoid}
) orderPaymentCapture={orderPaymentCapture}
} orderFulfillmentCancel={orderFulfillmentCancel}
)} orderFulfillmentUpdateTracking={
/> orderFulfillmentUpdateTracking
<OrderDetailsPage }
onOrderReturn={() => navigate(orderReturnPath(id))} orderInvoiceSend={orderInvoiceSend}
disabled={ updateMetadataOpts={updateMetadataOpts}
updateMetadataOpts.loading || updatePrivateMetadataOpts={updatePrivateMetadataOpts}
updatePrivateMetadataOpts.loading openModal={openModal}
} closeModal={closeModal}
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}
/>
<OrderCannotCancelOrderDialog
onClose={closeModal}
open={
params.action === "cancel" &&
order?.fulfillments.some(
fulfillment =>
fulfillment.status ===
FulfillmentStatus.FULFILLED
)
}
/>
<OrderCancelDialog
confirmButtonState={orderCancel.opts.status}
errors={
orderCancel.opts.data?.orderCancel.errors || []
}
number={order?.number}
open={params.action === "cancel"}
onClose={closeModal}
onSubmit={() =>
orderCancel.mutate({
id
})
}
/>
<OrderMarkAsPaidDialog
confirmButtonState={
orderPaymentMarkAsPaid.opts.status
}
errors={
orderPaymentMarkAsPaid.opts.data?.orderMarkAsPaid
.errors || []
}
onClose={closeModal}
onConfirm={() =>
orderPaymentMarkAsPaid.mutate({
id,
transactionReference
})
}
open={params.action === "mark-paid"}
transactionReference={transactionReference}
handleTransactionReference={({ target }) =>
setTransactionReference(target.value)
}
/>
<OrderPaymentVoidDialog
confirmButtonState={orderVoid.opts.status}
errors={orderVoid.opts.data?.orderVoid.errors || []}
open={params.action === "void"}
onClose={closeModal}
onConfirm={() => orderVoid.mutate({ id })}
/>
<OrderPaymentDialog
confirmButtonState={orderPaymentCapture.opts.status}
errors={
orderPaymentCapture.opts.data?.orderCapture
.errors || []
}
initial={order?.total.gross.amount}
open={params.action === "capture"}
onClose={closeModal}
onSubmit={variables =>
orderPaymentCapture.mutate({
...variables,
id
})
}
/>
<OrderFulfillmentCancelDialog
confirmButtonState={
orderFulfillmentCancel.opts.status
}
errors={
orderFulfillmentCancel.opts.data
?.orderFulfillmentCancel.errors || []
}
open={params.action === "cancel-fulfillment"}
warehouses={
warehouses.data?.warehouses.edges.map(
edge => edge.node
) || []
}
onConfirm={variables =>
orderFulfillmentCancel.mutate({
id: params.id,
input: variables
})
}
onClose={closeModal}
/>
<OrderFulfillmentTrackingDialog
confirmButtonState={
orderFulfillmentUpdateTracking.opts.status
}
errors={
orderFulfillmentUpdateTracking.opts.data
?.orderFulfillmentUpdateTracking.errors || []
}
open={params.action === "edit-fulfillment"}
trackingNumber={getStringOrPlaceholder(
data?.order?.fulfillments.find(
fulfillment => fulfillment.id === params.id
)?.trackingNumber
)}
onConfirm={variables =>
orderFulfillmentUpdateTracking.mutate({
id: params.id,
input: {
...variables,
notifyCustomer: true
}
})
}
onClose={closeModal}
/>
<OrderInvoiceEmailSendDialog
confirmButtonState={orderInvoiceSend.opts.status}
errors={
orderInvoiceSend.opts.data?.invoiceSendEmail
.errors || []
}
open={params.action === "invoice-send"}
invoice={order?.invoices?.find(
invoice => invoice.id === params.id
)}
onClose={closeModal}
onSend={() =>
orderInvoiceSend.mutate({ id: params.id })
}
/>
</>
)} )}
{isOrderDraft && ( {isOrderDraft && (
<> <OrderDraftDetails
<WindowTitle id={id}
title={intl.formatMessage( params={params}
{ loading={loading}
defaultMessage: "Draft Order #{orderNumber}", data={data}
description: "window title" orderAddNote={orderAddNote}
}, orderLineUpdate={orderLineUpdate}
{ orderLineDelete={orderLineDelete}
orderNumber: getStringOrPlaceholder( orderShippingMethodUpdate={orderShippingMethodUpdate}
data?.order?.number orderLinesAdd={orderLinesAdd}
) orderDraftUpdate={orderDraftUpdate}
} orderDraftCancel={orderDraftCancel}
)} orderDraftFinalize={orderDraftFinalize}
/> openModal={openModal}
closeModal={closeModal}
<OrderDiscountProvider order={order}> />
<OrderLineDiscountProvider order={order}>
<OrderDraftPage
disabled={loading}
onNoteAdd={variables =>
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 || []}
/>
</OrderLineDiscountProvider>
</OrderDiscountProvider>
<OrderDraftCancelDialog
confirmButtonState={orderDraftCancel.opts.status}
errors={
orderDraftCancel.opts.data?.draftOrderDelete
.errors || []
}
onClose={closeModal}
onConfirm={() => orderDraftCancel.mutate({ id })}
open={params.action === "cancel"}
orderNumber={getStringOrPlaceholder(order?.number)}
/>
<OrderShippingMethodEditDialog
confirmButtonState={
orderShippingMethodUpdate.opts.status
}
errors={
orderShippingMethodUpdate.opts.data
?.orderUpdateShipping.errors || []
}
open={params.action === "edit-shipping"}
shippingMethod={order?.shippingMethod?.id}
shippingMethods={order?.availableShippingMethods}
onClose={closeModal}
onSubmit={variables =>
orderShippingMethodUpdate.mutate({
id,
input: {
shippingMethod: variables.shippingMethod
}
})
}
/>
<OrderProductAddDialog
confirmButtonState={orderLinesAdd.opts.status}
errors={
orderLinesAdd.opts.data?.orderLinesCreate.errors ||
[]
}
loading={variantSearchOpts.loading}
open={params.action === "add-order-line"}
hasMore={
variantSearchOpts.data?.search.pageInfo.hasNextPage
}
products={variantSearchOpts.data?.search.edges.map(
edge => 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 && ( {isOrderUnconfirmed && (
<> <OrderUnconfirmedDetails
<WindowTitle id={id}
title={intl.formatMessage( params={params}
{ data={data}
defaultMessage: "Order #{orderNumber}", orderAddNote={orderAddNote}
description: "window title" orderLineUpdate={orderLineUpdate}
}, orderLineDelete={orderLineDelete}
{ orderInvoiceRequest={orderInvoiceRequest}
orderNumber: getStringOrPlaceholder( handleSubmit={handleSubmit}
data?.order?.number orderCancel={orderCancel}
) orderShippingMethodUpdate={orderShippingMethodUpdate}
} orderLinesAdd={orderLinesAdd}
)} orderPaymentMarkAsPaid={orderPaymentMarkAsPaid}
/> orderVoid={orderVoid}
<OrderDiscountProvider order={order}> orderPaymentCapture={orderPaymentCapture}
<OrderLineDiscountProvider order={order}> orderFulfillmentCancel={orderFulfillmentCancel}
<OrderDetailsPage orderFulfillmentUpdateTracking={
onOrderReturn={() => orderFulfillmentUpdateTracking
navigate(orderReturnPath(id)) }
} orderInvoiceSend={orderInvoiceSend}
disabled={ updateMetadataOpts={updateMetadataOpts}
updateMetadataOpts.loading || updatePrivateMetadataOpts={updatePrivateMetadataOpts}
updatePrivateMetadataOpts.loading openModal={openModal}
} closeModal={closeModal}
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}
/>
</OrderLineDiscountProvider>
</OrderDiscountProvider>
<OrderCannotCancelOrderDialog
onClose={closeModal}
open={
params.action === "cancel" &&
order?.fulfillments.some(
fulfillment =>
fulfillment.status ===
FulfillmentStatus.FULFILLED
)
}
/>
<OrderCancelDialog
confirmButtonState={orderCancel.opts.status}
errors={
orderCancel.opts.data?.orderCancel.errors || []
}
number={order?.number}
open={params.action === "cancel"}
onClose={closeModal}
onSubmit={() =>
orderCancel.mutate({
id
})
}
/>
<OrderShippingMethodEditDialog
confirmButtonState={
orderShippingMethodUpdate.opts.status
}
errors={
orderShippingMethodUpdate.opts.data
?.orderUpdateShipping.errors || []
}
open={params.action === "edit-shipping"}
shippingMethod={order?.shippingMethod?.id}
shippingMethods={order?.availableShippingMethods}
onClose={closeModal}
onSubmit={variables =>
orderShippingMethodUpdate.mutate({
id,
input: {
shippingMethod: variables.shippingMethod
}
})
}
/>
<OrderProductAddDialog
confirmButtonState={orderLinesAdd.opts.status}
errors={
orderLinesAdd.opts.data?.orderLinesCreate.errors ||
[]
}
loading={variantSearchOpts.loading}
open={params.action === "add-order-line"}
hasMore={
variantSearchOpts.data?.search.pageInfo.hasNextPage
}
products={variantSearchOpts.data?.search.edges.map(
edge => 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
}))
})
}
/>
<OrderMarkAsPaidDialog
confirmButtonState={
orderPaymentMarkAsPaid.opts.status
}
errors={
orderPaymentMarkAsPaid.opts.data?.orderMarkAsPaid
.errors || []
}
onClose={closeModal}
onConfirm={() =>
orderPaymentMarkAsPaid.mutate({
id,
transactionReference
})
}
open={params.action === "mark-paid"}
transactionReference={transactionReference}
handleTransactionReference={({ target }) =>
setTransactionReference(target.value)
}
/>
<OrderPaymentVoidDialog
confirmButtonState={orderVoid.opts.status}
errors={orderVoid.opts.data?.orderVoid.errors || []}
open={params.action === "void"}
onClose={closeModal}
onConfirm={() => orderVoid.mutate({ id })}
/>
<OrderPaymentDialog
confirmButtonState={orderPaymentCapture.opts.status}
errors={
orderPaymentCapture.opts.data?.orderCapture
.errors || []
}
initial={order?.total.gross.amount}
open={params.action === "capture"}
onClose={closeModal}
onSubmit={variables =>
orderPaymentCapture.mutate({
...variables,
id
})
}
/>
<OrderFulfillmentCancelDialog
confirmButtonState={
orderFulfillmentCancel.opts.status
}
errors={
orderFulfillmentCancel.opts.data
?.orderFulfillmentCancel.errors || []
}
open={params.action === "cancel-fulfillment"}
warehouses={
warehouses.data?.warehouses.edges.map(
edge => edge.node
) || []
}
onConfirm={variables =>
orderFulfillmentCancel.mutate({
id: params.id,
input: variables
})
}
onClose={closeModal}
/>
<OrderFulfillmentTrackingDialog
confirmButtonState={
orderFulfillmentUpdateTracking.opts.status
}
errors={
orderFulfillmentUpdateTracking.opts.data
?.orderFulfillmentUpdateTracking.errors || []
}
open={params.action === "edit-fulfillment"}
trackingNumber={getStringOrPlaceholder(
data?.order?.fulfillments.find(
fulfillment => fulfillment.id === params.id
)?.trackingNumber
)}
onConfirm={variables =>
orderFulfillmentUpdateTracking.mutate({
id: params.id,
input: {
...variables,
notifyCustomer: true
}
})
}
onClose={closeModal}
/>
<OrderInvoiceEmailSendDialog
confirmButtonState={orderInvoiceSend.opts.status}
errors={
orderInvoiceSend.opts.data?.invoiceSendEmail
.errors || []
}
open={params.action === "invoice-send"}
invoice={order?.invoices?.find(
invoice => invoice.id === params.id
)}
onClose={closeModal}
onSend={() =>
orderInvoiceSend.mutate({ id: params.id })
}
/>
</>
)} )}
<OrderAddressFields <OrderAddressFields
isDraft={order?.status === OrderStatus.DRAFT} isDraft={order?.status === OrderStatus.DRAFT}