Merge pull request #145 from commercelayer/order-pending-authorized

Manage pending orders with transactions in the order app

apps/orders/src/components/OrderAddresses.tsx

@@ -6,6 +6,7 @@ import {
   withSkeletonTemplate
 } from '@commercelayer/app-elements'
 import type { Order } from '@commercelayer/sdk'
+import { useOrderStatus } from './OrderSummary/hooks/useOrderStatus'
 
 interface Props {
   order: Order
@@ -15,13 +16,18 @@ export const OrderAddresses = withSkeletonTemplate<Props>(
   ({ order }): JSX.Element | null => {
     const { sdkClient } = useCoreSdkProvider()
 
+    const { isEditing } = useOrderStatus(order)
+
+    const isEditable =
+      isEditing || (order.status !== 'draft' && order.status !== 'pending')
+
     return (
       <Section border='none' title='Addresses'>
         <Stack>
           <ResourceAddress
             title='Billing address'
             address={order.billing_address}
-            editable
+            editable={isEditable}
             onCreate={(address) => {
               void sdkClient.orders.update({
                 id: order.id,
@@ -37,7 +43,7 @@ export const OrderAddresses = withSkeletonTemplate<Props>(
           <ResourceAddress
             title='Shipping address'
             address={order.shipping_address}
-            editable
+            editable={isEditable}
             onCreate={(address) => {
               void sdkClient.orders.update({
                 id: order.id,

apps/orders/src/components/OrderCustomer.tsx

@@ -13,6 +13,7 @@ import {
 import type { Order } from '@commercelayer/sdk'
 import { useEditCustomerOverlay } from './NewOrder/hooks/useEditCustomerOverlay'
 import { languageList } from './NewOrder/languages'
+import { useOrderStatus } from './OrderSummary/hooks/useOrderStatus'
 
 interface Props {
   order: Order
@@ -26,6 +27,7 @@ export const OrderCustomer = withSkeletonTemplate<Props>(
     } = useTokenProvider()
 
     const { mutateOrder } = useOrderDetails(order.id)
+    const { isEditing } = useOrderStatus(order)
     const { Overlay: EditCustomerOverlay, open: openEditCustomerOverlay } =
       useEditCustomerOverlay(order, () => {
         void mutateOrder()
@@ -51,7 +53,8 @@ export const OrderCustomer = withSkeletonTemplate<Props>(
         <Section
           title='Customer'
           actionButton={
-            order.status === 'draft' || order.status === 'pending' ? (
+            (order.status === 'draft' || order.status === 'pending') &&
+            isEditing ? (
               <Button
                 alignItems='center'
                 variant='secondary'

apps/orders/src/components/OrderSummary/hooks/useActionButtons.tsx

@@ -46,7 +46,11 @@ export const useActionButtons = ({ order }: { order: Order }) => {
       .map((triggerAttribute) => {
         return {
           label: getTriggerAttributeName(triggerAttribute),
-          variant: triggerAttribute === '_cancel' ? 'secondary' : 'primary',
+          variant:
+            triggerAttribute === '_cancel' ||
+            triggerAttribute === '__cancel_transactions'
+              ? 'secondary'
+              : 'primary',
           disabled: isLoading,
           onClick: () => {
             if (triggerAttribute === '_capture') {

apps/orders/src/components/OrderSummary/hooks/useOrderStatus.tsx

@@ -15,11 +15,15 @@ export function useOrderStatus(order: Order) {
     | null
     | undefined
 
+  const isPendingWithTransactions =
+    order.payment_status !== 'unpaid' && order.status === 'pending'
+
   const isEditing =
     (order.status === 'editing' ||
       order.status === 'draft' ||
       order.status === 'pending') &&
-    canUser('update', 'orders')
+    canUser('update', 'orders') &&
+    !isPendingWithTransactions
 
   const diffTotalAndPlacedTotal =
     (order.total_amount_with_taxes_cents ?? 0) -
@@ -71,6 +75,8 @@ export function useOrderStatus(order: Order) {
     hasInvalidShipments,
     /** `true` when there's at least one shippable (do_not_ship = `false`) item. */
     hasShippableLineItems,
+    /** `true` when the order has transactions, but the status is still `pending`. This is a kind of error status. */
+    isPendingWithTransactions,
     /** Difference between the current `total_amount` and the `place_total_amount`. */
     diffTotalAndPlacedTotal:
       isOriginalOrderAmountExceeded && currencyCode != null

apps/orders/src/components/OrderSummary/orderDictionary.ts

@@ -1,10 +1,18 @@
 import type { TriggerAttribute } from '@commercelayer/app-elements'
 import type { Order, OrderUpdate } from '@commercelayer/sdk'
 
-type UITriggerAttributes = Extract<
-  TriggerAttribute<OrderUpdate>,
-  '_approve' | '_cancel' | '_capture' | '_refund' | '_archive' | '_unarchive'
->
+export type UITriggerAttributes =
+  | Extract<
+      TriggerAttribute<OrderUpdate>,
+      | '_approve'
+      | '_cancel'
+      | '_capture'
+      | '_refund'
+      | '_archive'
+      | '_unarchive'
+      | '_place'
+    >
+  | '__cancel_transactions'
 
 export function getTriggerAttributes(order: Order): UITriggerAttributes[] {
   const archiveTriggerAttribute: Extract<
@@ -19,6 +27,10 @@ export function getTriggerAttributes(order: Order): UITriggerAttributes[] {
     return []
   }
 
+  if (order.status === 'pending' && order.payment_status !== 'unpaid') {
+    return ['_place', '__cancel_transactions']
+  }
+
   switch (combinedStatus) {
     case 'placed:authorized:unfulfilled':
     case 'placed:authorized:not_required':
@@ -76,7 +88,9 @@ export function getTriggerAttributeName(
     _cancel: 'Cancel order',
     _capture: 'Capture payment',
     _refund: 'Refund',
-    _unarchive: 'Unarchive'
+    _unarchive: 'Unarchive',
+    _place: 'Place order',
+    __cancel_transactions: 'Cancel payment'
   }
 
   return dictionary[triggerAttribute]

apps/orders/src/hooks/useOrderDetails.tsx

@@ -13,6 +13,7 @@ export const orderIncludeAttribute = [
   'shipments.stock_transfers',
   'payment_method',
   'payment_source',
+  'transactions',
 
   // order editing
   'line_items.sku',

apps/orders/src/hooks/useTriggerAttribute.ts

@@ -1,3 +1,4 @@
+import type { UITriggerAttributes } from '#components/OrderSummary/orderDictionary'
 import { useOrderDetails } from '#hooks/useOrderDetails'
 import {
   useCoreSdkProvider,
@@ -10,21 +11,43 @@ import { orderIncludeAttribute } from './useOrderDetails'
 interface TriggerAttributeHook {
   isLoading: boolean
   errors?: string[]
-  dispatch: (triggerAttribute: TriggerAttribute<OrderUpdate>) => Promise<void>
+  dispatch: (
+    triggerAttribute:
+      | TriggerAttribute<OrderUpdate>
+      | Exclude<UITriggerAttributes, TriggerAttribute<OrderUpdate>>
+  ) => Promise<void>
 }
 
 export function useTriggerAttribute(orderId: string): TriggerAttributeHook {
-  const { mutateOrder } = useOrderDetails(orderId)
+  const { order, mutateOrder } = useOrderDetails(orderId)
   const { sdkClient } = useCoreSdkProvider()
 
   const [isLoading, setIsLoading] = useState(false)
   const [errors, setErrors] = useState<string[] | undefined>()
 
-  const dispatch = useCallback(
-    async (triggerAttribute: string): Promise<void> => {
+  const dispatch = useCallback<TriggerAttributeHook['dispatch']>(
+    async (triggerAttribute) => {
       setIsLoading(true)
       setErrors(undefined)
       try {
+        if (triggerAttribute === '__cancel_transactions') {
+          for (const transaction of order.transactions ?? []) {
+            if (
+              transaction.type === 'authorizations' ||
+              transaction.type === 'captures'
+            ) {
+              await sdkClient[transaction.type].update({
+                id: transaction.id,
+                _cancel: true
+              })
+
+              void mutateOrder()
+            }
+          }
+
+          return
+        }
+
         const updatedOrder = await sdkClient.orders.update(
           {
             id: orderId,

apps/orders/src/pages/OrderDetails.tsx

@@ -5,6 +5,7 @@ import { OrderReturns } from '#components/OrderReturns'
 import { OrderShipments } from '#components/OrderShipments'
 import { OrderSteps } from '#components/OrderSteps'
 import { OrderSummary } from '#components/OrderSummary'
+import { useOrderStatus } from '#components/OrderSummary/hooks/useOrderStatus'
 import { Timeline } from '#components/Timeline'
 import { appRoutes } from '#data/routes'
 import { useOrderDetails } from '#hooks/useOrderDetails'
@@ -40,12 +41,14 @@ function OrderDetails(): JSX.Element {
   const orderId = params?.orderId ?? ''
 
   const { order, isLoading, error, mutateOrder } = useOrderDetails(orderId)
+  const { isPendingWithTransactions } = useOrderStatus(order)
   const { returns, isLoadingReturns } = useOrderReturns(orderId)
   const toolbar = useOrderToolbar({ order })
 
   if (canUser('update', 'orders')) {
     if (
       order.status === 'pending' &&
+      !isPendingWithTransactions &&
       extras?.salesChannels != null &&
       extras?.salesChannels.length > 0
     ) {
@@ -206,7 +209,7 @@ function OrderDetails(): JSX.Element {
               </Spacer>
             </>
           )}
-          {!['pending', 'draft'].includes(order.status) && (
+          {!['draft'].includes(order.status) && (
             <Spacer top='14'>
               <Timeline order={order} />
             </Spacer>