Unconfirmed order view contents

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -26,6 +26,8 @@ import { OrderStatus } from "../../../types/globalTypes";
 import { OrderDetails_order } from "../../types/OrderDetails";
 import OrderCustomer from "../OrderCustomer";
 import OrderCustomerNote from "../OrderCustomerNote";
+import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails";
+import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
 import OrderFulfilledProductsCard from "../OrderFulfilledProductsCard";
 import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 import OrderInvoiceList from "../OrderInvoiceList";
@@ -77,6 +79,13 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
   onNoteAdd(data: HistoryFormData);
   onProfileView();
   onOrderReturn();
+  onOrderLineAdd: () => void;
+  onOrderLineChange: (
+    id: string,
+    data: OrderDraftDetailsProductsFormData
+  ) => void;
+  onOrderLineRemove: (id: string) => void;
+  onShippingMethodEdit();
   onInvoiceClick(invoiceId: string);
   onInvoiceGenerate();
   onInvoiceSend(invoiceId: string);
@@ -121,6 +130,10 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
     onInvoiceGenerate,
     onInvoiceSend,
     onOrderReturn,
+    onOrderLineAdd,
+    onOrderLineChange,
+    onOrderLineRemove,
+    onShippingMethodEdit,
     onSubmit
   } = props;
   const classes = useStyles(props);
@@ -214,11 +227,25 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
             </div>
             <Grid>
               <div>
+                {order?.status !== OrderStatus.UNCONFIRMED ? (
                   <OrderUnfulfilledProductsCard
                     canFulfill={canFulfill}
                     lines={unfulfilled}
                     onFulfill={onOrderFulfill}
                   />
+                ) : (
+                  <>
+                    <OrderDraftDetails
+                      disabled={!order?.channel}
+                      order={order}
+                      onOrderLineAdd={onOrderLineAdd}
+                      onOrderLineChange={onOrderLineChange}
+                      onOrderLineRemove={onOrderLineRemove}
+                      onShippingMethodEdit={onShippingMethodEdit}
+                    />
+                    <CardSpacer />
+                  </>
+                )}
                 {order?.fulfillments?.map(fulfillment => (
                   <React.Fragment key={fulfillment.id}>
                     <OrderFulfilledProductsCard
@@ -234,6 +261,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                     />
                   </React.Fragment>
                 ))}
+                {order?.status !== OrderStatus.UNCONFIRMED && (
                   <OrderPayment
                     order={order}
                     onCapture={onPaymentCapture}
@@ -241,6 +269,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                     onRefund={onPaymentRefund}
                     onVoid={onPaymentVoid}
                   />
+                )}
                 <CardSpacer />
                 <Metadata data={data} onChange={changeMetadata} />
                 <OrderHistory

src/orders/components/OrderHistory/OrderHistory.tsx

@@ -36,7 +36,7 @@ export const getEventMessage = (
       });
     case OrderEventsEnum.ADDED_PRODUCTS:
       return intl.formatMessage({
-        defaultMessage: "Products were added to draft order",
+        defaultMessage: "Products were added to an order",
         description: "order history message"
       });
     case OrderEventsEnum.DRAFT_CREATED:
@@ -46,7 +46,7 @@ export const getEventMessage = (
       });
     case OrderEventsEnum.REMOVED_PRODUCTS:
       return intl.formatMessage({
-        defaultMessage: "Products were deleted from draft order",
+        defaultMessage: "Products were deleted from an order",
         description: "order history message"
       });
     case OrderEventsEnum.EMAIL_SENT:

src/orders/views/OrderDetails/index.tsx

@@ -212,7 +212,8 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                   orderInvoiceSend
                 }) => (
                   <>
-                    {order?.status !== OrderStatus.DRAFT ? (
+                    {order?.status !== OrderStatus.DRAFT &&
+                      order?.status !== OrderStatus.UNCONFIRMED && (
                         <>
                           <WindowTitle
                             title={intl.formatMessage(
@@ -283,7 +284,8 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             onPaymentCapture={() => openModal("capture")}
                             onPaymentVoid={() => openModal("void")}
                             onPaymentRefund={() => navigate(orderRefundUrl(id))}
-                          onProductClick={id => () => navigate(productUrl(id))}
+                            onProductClick={id => () =>
+                              navigate(productUrl(id))}
                             onBillingAddressEdit={() =>
                               openModal("edit-billing-address")
                             }
@@ -296,8 +298,9 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             }
                             onInvoiceClick={id =>
                               window.open(
-                              order.invoices.find(invoice => invoice.id === id)
+                                order.invoices.find(
-                                ?.url,
+                                  invoice => invoice.id === id
+                                )?.url,
                                 "_blank"
                               )
                             }
@@ -443,7 +446,8 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             }
                           />
                         </>
-                    ) : (
+                      )}
+                    {order?.status === OrderStatus.DRAFT && (
                       <>
                         <WindowTitle
                           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
                       isDraft={order?.status === OrderStatus.DRAFT}
                       orderUpdate={orderUpdate}