Unconfirmed order view contents
This commit is contained in:
parent
b0de18797e
commit
4cf8c95347
3 changed files with 568 additions and 241 deletions
|
@ -26,6 +26,8 @@ import { OrderStatus } from "../../../types/globalTypes";
|
||||||
import { OrderDetails_order } from "../../types/OrderDetails";
|
import { OrderDetails_order } from "../../types/OrderDetails";
|
||||||
import OrderCustomer from "../OrderCustomer";
|
import OrderCustomer from "../OrderCustomer";
|
||||||
import OrderCustomerNote from "../OrderCustomerNote";
|
import OrderCustomerNote from "../OrderCustomerNote";
|
||||||
|
import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails";
|
||||||
|
import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
|
||||||
import OrderFulfilledProductsCard from "../OrderFulfilledProductsCard";
|
import OrderFulfilledProductsCard from "../OrderFulfilledProductsCard";
|
||||||
import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
|
import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
|
||||||
import OrderInvoiceList from "../OrderInvoiceList";
|
import OrderInvoiceList from "../OrderInvoiceList";
|
||||||
|
@ -77,6 +79,13 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
|
||||||
onNoteAdd(data: HistoryFormData);
|
onNoteAdd(data: HistoryFormData);
|
||||||
onProfileView();
|
onProfileView();
|
||||||
onOrderReturn();
|
onOrderReturn();
|
||||||
|
onOrderLineAdd: () => void;
|
||||||
|
onOrderLineChange: (
|
||||||
|
id: string,
|
||||||
|
data: OrderDraftDetailsProductsFormData
|
||||||
|
) => void;
|
||||||
|
onOrderLineRemove: (id: string) => void;
|
||||||
|
onShippingMethodEdit();
|
||||||
onInvoiceClick(invoiceId: string);
|
onInvoiceClick(invoiceId: string);
|
||||||
onInvoiceGenerate();
|
onInvoiceGenerate();
|
||||||
onInvoiceSend(invoiceId: string);
|
onInvoiceSend(invoiceId: string);
|
||||||
|
@ -121,6 +130,10 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
|
||||||
onInvoiceGenerate,
|
onInvoiceGenerate,
|
||||||
onInvoiceSend,
|
onInvoiceSend,
|
||||||
onOrderReturn,
|
onOrderReturn,
|
||||||
|
onOrderLineAdd,
|
||||||
|
onOrderLineChange,
|
||||||
|
onOrderLineRemove,
|
||||||
|
onShippingMethodEdit,
|
||||||
onSubmit
|
onSubmit
|
||||||
} = props;
|
} = props;
|
||||||
const classes = useStyles(props);
|
const classes = useStyles(props);
|
||||||
|
@ -214,11 +227,25 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
|
||||||
</div>
|
</div>
|
||||||
<Grid>
|
<Grid>
|
||||||
<div>
|
<div>
|
||||||
<OrderUnfulfilledProductsCard
|
{order?.status !== OrderStatus.UNCONFIRMED ? (
|
||||||
canFulfill={canFulfill}
|
<OrderUnfulfilledProductsCard
|
||||||
lines={unfulfilled}
|
canFulfill={canFulfill}
|
||||||
onFulfill={onOrderFulfill}
|
lines={unfulfilled}
|
||||||
/>
|
onFulfill={onOrderFulfill}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<OrderDraftDetails
|
||||||
|
disabled={!order?.channel}
|
||||||
|
order={order}
|
||||||
|
onOrderLineAdd={onOrderLineAdd}
|
||||||
|
onOrderLineChange={onOrderLineChange}
|
||||||
|
onOrderLineRemove={onOrderLineRemove}
|
||||||
|
onShippingMethodEdit={onShippingMethodEdit}
|
||||||
|
/>
|
||||||
|
<CardSpacer />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
{order?.fulfillments?.map(fulfillment => (
|
{order?.fulfillments?.map(fulfillment => (
|
||||||
<React.Fragment key={fulfillment.id}>
|
<React.Fragment key={fulfillment.id}>
|
||||||
<OrderFulfilledProductsCard
|
<OrderFulfilledProductsCard
|
||||||
|
@ -234,13 +261,15 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
|
||||||
/>
|
/>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
<OrderPayment
|
{order?.status !== OrderStatus.UNCONFIRMED && (
|
||||||
order={order}
|
<OrderPayment
|
||||||
onCapture={onPaymentCapture}
|
order={order}
|
||||||
onMarkAsPaid={onPaymentPaid}
|
onCapture={onPaymentCapture}
|
||||||
onRefund={onPaymentRefund}
|
onMarkAsPaid={onPaymentPaid}
|
||||||
onVoid={onPaymentVoid}
|
onRefund={onPaymentRefund}
|
||||||
/>
|
onVoid={onPaymentVoid}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<CardSpacer />
|
<CardSpacer />
|
||||||
<Metadata data={data} onChange={changeMetadata} />
|
<Metadata data={data} onChange={changeMetadata} />
|
||||||
<OrderHistory
|
<OrderHistory
|
||||||
|
|
|
@ -36,7 +36,7 @@ export const getEventMessage = (
|
||||||
});
|
});
|
||||||
case OrderEventsEnum.ADDED_PRODUCTS:
|
case OrderEventsEnum.ADDED_PRODUCTS:
|
||||||
return intl.formatMessage({
|
return intl.formatMessage({
|
||||||
defaultMessage: "Products were added to draft order",
|
defaultMessage: "Products were added to an order",
|
||||||
description: "order history message"
|
description: "order history message"
|
||||||
});
|
});
|
||||||
case OrderEventsEnum.DRAFT_CREATED:
|
case OrderEventsEnum.DRAFT_CREATED:
|
||||||
|
@ -46,7 +46,7 @@ export const getEventMessage = (
|
||||||
});
|
});
|
||||||
case OrderEventsEnum.REMOVED_PRODUCTS:
|
case OrderEventsEnum.REMOVED_PRODUCTS:
|
||||||
return intl.formatMessage({
|
return intl.formatMessage({
|
||||||
defaultMessage: "Products were deleted from draft order",
|
defaultMessage: "Products were deleted from an order",
|
||||||
description: "order history message"
|
description: "order history message"
|
||||||
});
|
});
|
||||||
case OrderEventsEnum.EMAIL_SENT:
|
case OrderEventsEnum.EMAIL_SENT:
|
||||||
|
|
|
@ -212,238 +212,242 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
||||||
orderInvoiceSend
|
orderInvoiceSend
|
||||||
}) => (
|
}) => (
|
||||||
<>
|
<>
|
||||||
{order?.status !== OrderStatus.DRAFT ? (
|
{order?.status !== OrderStatus.DRAFT &&
|
||||||
<>
|
order?.status !== OrderStatus.UNCONFIRMED && (
|
||||||
<WindowTitle
|
<>
|
||||||
title={intl.formatMessage(
|
<WindowTitle
|
||||||
{
|
title={intl.formatMessage(
|
||||||
defaultMessage: "Order #{orderNumber}",
|
{
|
||||||
description: "window title"
|
defaultMessage: "Order #{orderNumber}",
|
||||||
},
|
description: "window title"
|
||||||
{
|
},
|
||||||
orderNumber: getStringOrPlaceholder(
|
{
|
||||||
data?.order?.number
|
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(
|
||||||
<OrderDetailsPage
|
orderUrl(id, {
|
||||||
onOrderReturn={() => navigate(orderReturnPath(id))}
|
action: "edit-fulfillment",
|
||||||
disabled={
|
id: fulfillmentId
|
||||||
updateMetadataOpts.loading ||
|
})
|
||||||
updatePrivateMetadataOpts.loading
|
)
|
||||||
}
|
}
|
||||||
onNoteAdd={variables =>
|
onPaymentCapture={() => openModal("capture")}
|
||||||
orderAddNote.mutate({
|
onPaymentVoid={() => openModal("void")}
|
||||||
input: variables,
|
onPaymentRefund={() => navigate(orderRefundUrl(id))}
|
||||||
order: id
|
onProductClick={id => () =>
|
||||||
})
|
navigate(productUrl(id))}
|
||||||
}
|
onBillingAddressEdit={() =>
|
||||||
onBack={handleBack}
|
openModal("edit-billing-address")
|
||||||
order={order}
|
}
|
||||||
saveButtonBarState={getMutationState(
|
onShippingAddressEdit={() =>
|
||||||
updateMetadataOpts.called ||
|
openModal("edit-shipping-address")
|
||||||
updatePrivateMetadataOpts.called,
|
}
|
||||||
updateMetadataOpts.loading ||
|
onPaymentPaid={() => openModal("mark-paid")}
|
||||||
updatePrivateMetadataOpts.loading,
|
onProfileView={() =>
|
||||||
[
|
navigate(customerUrl(order.user.id))
|
||||||
...(updateMetadataOpts.data?.deleteMetadata
|
}
|
||||||
.errors || []),
|
onInvoiceClick={id =>
|
||||||
...(updateMetadataOpts.data?.updateMetadata
|
window.open(
|
||||||
.errors || []),
|
order.invoices.find(
|
||||||
...(updatePrivateMetadataOpts.data
|
invoice => invoice.id === id
|
||||||
?.deletePrivateMetadata.errors || []),
|
)?.url,
|
||||||
...(updatePrivateMetadataOpts.data
|
"_blank"
|
||||||
?.updatePrivateMetadata.errors || [])
|
)
|
||||||
]
|
}
|
||||||
)}
|
onInvoiceGenerate={() =>
|
||||||
shippingMethods={maybe(
|
orderInvoiceRequest.mutate({
|
||||||
() => data.order.availableShippingMethods,
|
orderId: id
|
||||||
[]
|
|
||||||
)}
|
|
||||||
userPermissions={user?.userPermissions || []}
|
|
||||||
onOrderCancel={() => openModal("cancel")}
|
|
||||||
onOrderFulfill={() => navigate(orderFulfillUrl(id))}
|
|
||||||
onFulfillmentCancel={fulfillmentId =>
|
|
||||||
navigate(
|
|
||||||
orderUrl(id, {
|
|
||||||
action: "cancel-fulfillment",
|
|
||||||
id: fulfillmentId
|
|
||||||
})
|
})
|
||||||
)
|
}
|
||||||
}
|
onInvoiceSend={id =>
|
||||||
onFulfillmentTrackingNumberUpdate={fulfillmentId =>
|
openModal("invoice-send", { id })
|
||||||
navigate(
|
}
|
||||||
orderUrl(id, {
|
onSubmit={handleSubmit}
|
||||||
action: "edit-fulfillment",
|
/>
|
||||||
id: fulfillmentId
|
<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
|
||||||
})
|
})
|
||||||
)
|
}
|
||||||
}
|
/>
|
||||||
onPaymentCapture={() => openModal("capture")}
|
<OrderMarkAsPaidDialog
|
||||||
onPaymentVoid={() => openModal("void")}
|
confirmButtonState={
|
||||||
onPaymentRefund={() => navigate(orderRefundUrl(id))}
|
orderPaymentMarkAsPaid.opts.status
|
||||||
onProductClick={id => () => navigate(productUrl(id))}
|
}
|
||||||
onBillingAddressEdit={() =>
|
errors={
|
||||||
openModal("edit-billing-address")
|
orderPaymentMarkAsPaid.opts.data?.orderMarkAsPaid
|
||||||
}
|
.errors || []
|
||||||
onShippingAddressEdit={() =>
|
}
|
||||||
openModal("edit-shipping-address")
|
onClose={closeModal}
|
||||||
}
|
onConfirm={() =>
|
||||||
onPaymentPaid={() => openModal("mark-paid")}
|
orderPaymentMarkAsPaid.mutate({
|
||||||
onProfileView={() =>
|
id,
|
||||||
navigate(customerUrl(order.user.id))
|
transactionReference
|
||||||
}
|
})
|
||||||
onInvoiceClick={id =>
|
}
|
||||||
window.open(
|
open={params.action === "mark-paid"}
|
||||||
order.invoices.find(invoice => invoice.id === id)
|
transactionReference={transactionReference}
|
||||||
?.url,
|
handleTransactionReference={({ target }) =>
|
||||||
"_blank"
|
setTransactionReference(target.value)
|
||||||
)
|
}
|
||||||
}
|
/>
|
||||||
onInvoiceGenerate={() =>
|
<OrderPaymentVoidDialog
|
||||||
orderInvoiceRequest.mutate({
|
confirmButtonState={orderVoid.opts.status}
|
||||||
orderId: id
|
errors={orderVoid.opts.data?.orderVoid.errors || []}
|
||||||
})
|
open={params.action === "void"}
|
||||||
}
|
onClose={closeModal}
|
||||||
onInvoiceSend={id =>
|
onConfirm={() => orderVoid.mutate({ id })}
|
||||||
openModal("invoice-send", { id })
|
/>
|
||||||
}
|
<OrderPaymentDialog
|
||||||
onSubmit={handleSubmit}
|
confirmButtonState={orderPaymentCapture.opts.status}
|
||||||
/>
|
errors={
|
||||||
<OrderCannotCancelOrderDialog
|
orderPaymentCapture.opts.data?.orderCapture
|
||||||
onClose={closeModal}
|
.errors || []
|
||||||
open={
|
}
|
||||||
params.action === "cancel" &&
|
initial={order?.total.gross.amount}
|
||||||
order?.fulfillments.some(
|
open={params.action === "capture"}
|
||||||
fulfillment =>
|
onClose={closeModal}
|
||||||
fulfillment.status ===
|
onSubmit={variables =>
|
||||||
FulfillmentStatus.FULFILLED
|
orderPaymentCapture.mutate({
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<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,
|
...variables,
|
||||||
notifyCustomer: true
|
id
|
||||||
}
|
})
|
||||||
})
|
}
|
||||||
}
|
/>
|
||||||
onClose={closeModal}
|
<OrderFulfillmentCancelDialog
|
||||||
/>
|
confirmButtonState={
|
||||||
<OrderInvoiceEmailSendDialog
|
orderFulfillmentCancel.opts.status
|
||||||
confirmButtonState={orderInvoiceSend.opts.status}
|
}
|
||||||
errors={
|
errors={
|
||||||
orderInvoiceSend.opts.data?.invoiceSendEmail
|
orderFulfillmentCancel.opts.data
|
||||||
.errors || []
|
?.orderFulfillmentCancel.errors || []
|
||||||
}
|
}
|
||||||
open={params.action === "invoice-send"}
|
open={params.action === "cancel-fulfillment"}
|
||||||
invoice={order?.invoices?.find(
|
warehouses={
|
||||||
invoice => invoice.id === params.id
|
warehouses.data?.warehouses.edges.map(
|
||||||
)}
|
edge => edge.node
|
||||||
onClose={closeModal}
|
) || []
|
||||||
onSend={() =>
|
}
|
||||||
orderInvoiceSend.mutate({ id: params.id })
|
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 })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{order?.status === OrderStatus.DRAFT && (
|
||||||
<>
|
<>
|
||||||
<WindowTitle
|
<WindowTitle
|
||||||
title={intl.formatMessage(
|
title={intl.formatMessage(
|
||||||
|
@ -586,6 +590,300 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
{order?.status === OrderStatus.UNCONFIRMED && (
|
||||||
|
<>
|
||||||
|
<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}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
<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}
|
||||||
orderUpdate={orderUpdate}
|
orderUpdate={orderUpdate}
|
||||||
|
|
Loading…
Reference in a new issue