Unconfirmed order view contents

This commit is contained in:
Tomasz Szymanski 2021-01-29 14:14:31 +01:00
parent b0de18797e
commit 4cf8c95347
3 changed files with 568 additions and 241 deletions

View file

@ -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

View file

@ -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:

View file

@ -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}