diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index ddaaedb23..9fa2d71f1 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/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>
-                <OrderUnfulfilledProductsCard
-                  canFulfill={canFulfill}
-                  lines={unfulfilled}
-                  onFulfill={onOrderFulfill}
-                />
+                {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,13 +261,15 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                     />
                   </React.Fragment>
                 ))}
-                <OrderPayment
-                  order={order}
-                  onCapture={onPaymentCapture}
-                  onMarkAsPaid={onPaymentPaid}
-                  onRefund={onPaymentRefund}
-                  onVoid={onPaymentVoid}
-                />
+                {order?.status !== OrderStatus.UNCONFIRMED && (
+                  <OrderPayment
+                    order={order}
+                    onCapture={onPaymentCapture}
+                    onMarkAsPaid={onPaymentPaid}
+                    onRefund={onPaymentRefund}
+                    onVoid={onPaymentVoid}
+                  />
+                )}
                 <CardSpacer />
                 <Metadata data={data} onChange={changeMetadata} />
                 <OrderHistory
diff --git a/src/orders/components/OrderHistory/OrderHistory.tsx b/src/orders/components/OrderHistory/OrderHistory.tsx
index 6bc54407f..6b092823b 100644
--- a/src/orders/components/OrderHistory/OrderHistory.tsx
+++ b/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:
diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx
index 480bf7d89..594e3f483 100644
--- a/src/orders/views/OrderDetails/index.tsx
+++ b/src/orders/views/OrderDetails/index.tsx
@@ -212,238 +212,242 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                   orderInvoiceSend
                 }) => (
                   <>
-                    {order?.status !== OrderStatus.DRAFT ? (
-                      <>
-                        <WindowTitle
-                          title={intl.formatMessage(
-                            {
-                              defaultMessage: "Order #{orderNumber}",
-                              description: "window title"
-                            },
-                            {
-                              orderNumber: getStringOrPlaceholder(
-                                data?.order?.number
+                    {order?.status !== OrderStatus.DRAFT &&
+                      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}
+                            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
+                                })
                               )
                             }
-                          )}
-                        />
-                        <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
                               })
-                            )
-                          }
-                          onFulfillmentTrackingNumberUpdate={fulfillmentId =>
-                            navigate(
-                              orderUrl(id, {
-                                action: "edit-fulfillment",
-                                id: fulfillmentId
+                            }
+                            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
                               })
-                            )
-                          }
-                          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: {
+                            }
+                          />
+                          <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,
-                                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 })
-                          }
-                        />
-                      </>
-                    ) : (
+                                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 })
+                            }
+                          />
+                        </>
+                      )}
+                    {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}