Add helper to identify async captures and remove them from timeline

packages/app-elements/src/helpers/transactions.test.ts

@@ -0,0 +1,87 @@
+import type { Authorization, Capture } from '@commercelayer/sdk'
+import { orderTransactionIsAnAsyncCapture } from './transactions'
+
+const capture: Capture = {
+  id: 'capture-id',
+  type: 'captures',
+  created_at: '2023-01-01T00:00:00Z',
+  updated_at: '2023-01-01T00:00:00Z',
+  succeeded: false,
+  message: '',
+  error_code: '',
+  amount_cents: 1000,
+  currency_code: 'USD',
+  amount_float: 10,
+  formatted_amount: '$10.00',
+  number: '123456'
+}
+
+describe('orderTransactionIsAnAsyncCapture', () => {
+  it("returns false if transaction type is not 'captures'", () => {
+    const transaction: Authorization = {
+      type: 'authorizations',
+      succeeded: false,
+      message: '',
+      error_code: '',
+      amount_cents: 1000,
+      currency_code: 'USD',
+      created_at: '2023-01-01T00:00:00Z',
+      updated_at: '2023-01-01T00:00:00Z',
+      id: 'capture-id',
+      amount_float: 10,
+      formatted_amount: '$10.00',
+      number: '123456'
+    }
+    expect(orderTransactionIsAnAsyncCapture(transaction)).toBe(false)
+  })
+
+  it('returns false if transaction.succeeded is true', () => {
+    const transaction: Capture = {
+      ...capture,
+      succeeded: true,
+      message: '',
+      error_code: ''
+    }
+    expect(orderTransactionIsAnAsyncCapture(transaction)).toBe(false)
+  })
+
+  it('returns false if transaction.message is not empty', () => {
+    const transaction: Capture = {
+      ...capture,
+      succeeded: false,
+      message: 'Some message',
+      error_code: ''
+    }
+    expect(orderTransactionIsAnAsyncCapture(transaction)).toBe(false)
+  })
+
+  it('returns false if transaction.error_code is not empty', () => {
+    const transaction: Capture = {
+      ...capture,
+      succeeded: false,
+      message: '',
+      error_code: 'ERR123'
+    }
+    expect(orderTransactionIsAnAsyncCapture(transaction)).toBe(false)
+  })
+
+  it('returns true for async pending capture (not succeeded, empty message and error_code)', () => {
+    const transaction: Capture = {
+      ...capture,
+      succeeded: false,
+      message: '',
+      error_code: ''
+    }
+    expect(orderTransactionIsAnAsyncCapture(transaction)).toBe(true)
+  })
+
+  it('returns true for async pending capture (not succeeded, undefined message and error_code)', () => {
+    const transaction: Capture = {
+      ...capture,
+      succeeded: false,
+      message: undefined,
+      error_code: undefined
+    }
+    expect(orderTransactionIsAnAsyncCapture(transaction)).toBe(true)
+  })
+})

packages/app-elements/src/helpers/transactions.ts

@@ -0,0 +1,18 @@
+import type { Authorization, Capture, Refund, Void } from '@commercelayer/sdk'
+import isEmpty from 'lodash-es/isEmpty'
+
+/**
+ * Check if the transaction is an async capture
+ * We assume that async pending captures are those
+ * that are not succeeded and have no message or error code.
+ */
+export function orderTransactionIsAnAsyncCapture(
+  transaction: Authorization | Void | Capture | Refund
+): boolean {
+  return (
+    transaction.type === 'captures' &&
+    !transaction.succeeded &&
+    isEmpty(transaction.message) &&
+    isEmpty(transaction.error_code)
+  )
+}

packages/app-elements/src/locales/en.ts

@@ -508,7 +508,8 @@ const en = {
         payment_authorization: 'Payment authorization',
         payment_capture: 'Payment capture',
         payment_refund: 'Refund',
-        payment_void: 'Void'
+        payment_void: 'Void',
+        waiting_for_successful_capture: 'Waiting for successful capture'
       },
       form: {
         language: 'Language',

packages/app-elements/src/locales/it.ts

@@ -495,7 +495,8 @@ const it: typeof en = {
         payment_authorization: 'Autorizzazione pagamento',
         payment_capture: 'Cattura pagamento',
         payment_refund: 'Rimborso',
-        payment_void: 'Annulla'
+        payment_void: 'Annulla',
+        waiting_for_successful_capture: 'In attesa di catturare il pagamento'
       },
       form: {
         language: 'Lingua',

packages/app-elements/src/main.ts

@@ -39,6 +39,7 @@ export {
   type Rate,
   type TrackingDetail
 } from '#helpers/tracking'
+export { orderTransactionIsAnAsyncCapture } from '#helpers/transactions'
 export {
   getUnitOfWeightName,
   getUnitsOfWeightForSelect,

packages/app-elements/src/ui/resources/ResourceOrderTimeline.tsx

@@ -1,6 +1,7 @@
 import { getOrderTransactionName } from '#dictionaries/orders'
 import { navigateTo } from '#helpers/appsNavigation'
 import { isAttachmentValidNote, referenceOrigins } from '#helpers/attachments'
+import { orderTransactionIsAnAsyncCapture } from '#helpers/transactions'
 import { useCoreApi, useCoreSdkProvider } from '#providers/CoreSdkProvider'
 import { t } from '#providers/I18NProvider'
 import { useTokenProvider } from '#providers/TokenProvider'
@@ -351,6 +352,11 @@ const useTimelineReducer = (order: Order) => {
           const isFailedAuthorization =
             transaction.type === 'authorizations' && !transaction.succeeded
 
+          if (orderTransactionIsAnAsyncCapture(transaction)) {
+            // skipping timeline event when the capture is pending async
+            return
+          }
+
           dispatch({
             type: 'add',
             payload: {