feat: tie our systems with Anrok taxes

src/components/creditNote/CreditNoteFormCalculation.tsx

@@ -42,11 +42,8 @@ gql`
       id
       appliedTaxes {
         id
-        tax {
-          id
-          name
-          rate
-        }
+        taxName
+        taxRate
       }
     }
   }
@@ -58,9 +55,6 @@ gql`
         taxName
         taxRate
         amountCents
-        tax {
-          id
-        }
       }
       couponsAdjustmentAmountCents
       currency

src/components/creditNote/__tests__/fixtures.ts

@@ -20,11 +20,8 @@ export const feesMock = {
         appliedTaxes: [
           {
             id: 'tax1',
-            tax: {
-              id: 'tax1tax1',
-              name: 'Tax 1',
-              rate: 10,
-            },
+            taxName: 'Tax 1',
+            taxRate: 10,
           },
         ],
       },
@@ -39,11 +36,8 @@ export const feesMock = {
         appliedTaxes: [
           {
             id: 'tax2',
-            tax: {
-              id: 'tax2tax2',
-              name: 'Tax 2',
-              rate: 20,
-            },
+            taxName: 'Tax 2',
+            taxRate: 20,
           },
         ],
       },
@@ -85,19 +79,13 @@ export const feesMock = {
             appliedTaxes: [
               {
                 id: 'tax1',
-                tax: {
-                  id: 'tax1tax1',
-                  name: 'Tax 1',
-                  rate: 10,
-                },
+                taxName: 'Tax 1',
+                taxRate: 10,
               },
               {
                 id: 'tax2',
-                tax: {
-                  id: 'tax2tax2',
-                  name: 'Tax 2',
-                  rate: 20,
-                },
+                taxName: 'Tax 2',
+                taxRate: 20,
               },
             ],
           },
@@ -126,19 +114,13 @@ export const addOnFeeMock = [
     appliedTaxes: [
       {
         id: 'tax1',
-        tax: {
-          id: 'tax1tax1',
-          name: 'Tax 1',
-          rate: 10,
-        },
+        taxName: 'Tax 1',
+        taxRate: 10,
       },
       {
         id: 'tax2',
-        tax: {
-          id: 'tax2tax2',
-          name: 'Tax 2',
-          rate: 20,
-        },
+        taxName: 'Tax 2',
+        taxRate: 20,
       },
     ],
   },
@@ -153,25 +135,9 @@ export const addOnFeeMock = [
     appliedTaxes: [
       {
         id: 'tax1',
-        tax: {
-          id: 'tax1tax1',
-          name: 'Tax 1',
-          rate: 10,
-        },
+        taxName: 'Tax 1',
+        taxRate: 10,
       },
     ],
   },
 ]
-
-// export const invoiceMock = {
-//   id: '1234',
-//   couponsAmountCents: '1010',
-//   paymentStatus: InvoicePaymentStatusTypeEnum.Pending,
-//   creditableAmountCents: '0',
-//   refundableAmountCents: '0',
-//   feesAmountCents: '62833',
-//   currency: CurrencyEnum.Eur,
-//   versionNumber: 3,
-//   fees: addOnFeeMock,
-//   invoiceSubscriptions: feesMock,
-// }

src/components/creditNote/types.ts

@@ -10,11 +10,8 @@ export type FromFee = {
   succeededAt?: string
   appliedTaxes?: {
     id: string
-    tax: {
-      id: string
-      name: string
-      rate: number
-    }
+    taxName: string
+    taxRate: number
   }[]
 }
 

src/components/customers/CustomerInvoicesList.tsx

@@ -3,16 +3,9 @@ import { FC, useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
-import {
-  InfiniteScroll,
-  Status,
-  StatusProps,
-  StatusType,
-  Table,
-  Tooltip,
-  Typography,
-} from '~/components/designSystem'
+import { InfiniteScroll, Status, Table, Tooltip, Typography } from '~/components/designSystem'
 import { addToast, hasDefinedGQLError } from '~/core/apolloClient'
+import { invoiceStatusMapping, paymentStatusMapping } from '~/core/constants/statusInvoiceMapping'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { CUSTOMER_INVOICE_DETAILS_ROUTE } from '~/core/router'
 import { deserializeAmount } from '~/core/serializers/serializeAmount'
@@ -54,11 +47,17 @@ gql`
     currency
     voidable
     paymentDisputeLostAt
+    taxProviderVoidable
     customer {
       id
       name
       applicableTimezone
     }
+    errorDetails {
+      errorCode
+      errorDetails
+    }
+
     ...InvoiceForFinalizeInvoice
     ...InvoiceForUpdateInvoicePaymentStatus
   }
@@ -97,54 +96,6 @@ gql`
   ${InvoiceForUpdateInvoicePaymentStatusFragmentDoc}
 `
 
-const mapStatusConfig = ({
-  status,
-  paymentStatus,
-  paymentOverdue,
-  paymentDisputeLostAt,
-}: {
-  status: InvoiceStatusTypeEnum
-  paymentStatus: InvoicePaymentStatusTypeEnum
-  paymentOverdue: boolean
-  paymentDisputeLostAt?: string
-}): StatusProps => {
-  if (paymentDisputeLostAt) {
-    return { label: 'disputed', type: StatusType.danger }
-  }
-
-  if (status === InvoiceStatusTypeEnum.Draft) {
-    return { label: 'draft', type: StatusType.outline }
-  }
-
-  if (status === InvoiceStatusTypeEnum.Voided) {
-    return { label: 'voided', type: StatusType.disabled }
-  }
-
-  if (paymentStatus === InvoicePaymentStatusTypeEnum.Succeeded) {
-    return { label: 'succeeded', type: StatusType.success }
-  }
-
-  if (paymentOverdue) {
-    return { label: 'overdue', type: StatusType.danger }
-  }
-
-  if (
-    status === InvoiceStatusTypeEnum.Finalized &&
-    paymentStatus === InvoicePaymentStatusTypeEnum.Failed
-  ) {
-    return { label: 'failed', type: StatusType.warning }
-  }
-
-  if (
-    status === InvoiceStatusTypeEnum.Finalized &&
-    paymentStatus === InvoicePaymentStatusTypeEnum.Pending
-  ) {
-    return { label: 'pending', type: StatusType.default }
-  }
-
-  return { label: 'n/a', type: StatusType.default }
-}
-
 interface CustomerInvoicesListProps {
   isLoading: boolean
   hasError?: boolean
@@ -252,21 +203,23 @@ export const CustomerInvoicesList: FC<CustomerInvoicesListProps> = ({
             {
               key: 'status',
               minWidth: 80,
-              title: translate(
-                context === 'draft'
-                  ? 'text_63ac86d797f728a87b2f9fa7'
-                  : 'text_63b5d225b075850e0fe489f4',
-              ),
-              content: ({ status, paymentStatus, paymentOverdue, paymentDisputeLostAt }) => {
+              title: translate('text_63ac86d797f728a87b2f9fa7'),
+              content: ({ status, errorDetails, taxProviderVoidable }) => {
+                const showWarningIcon =
+                  (!!errorDetails?.length && status !== InvoiceStatusTypeEnum.Failed) ||
+                  taxProviderVoidable
+
                 return (
-                  <Status
-                    {...mapStatusConfig({
-                      status,
-                      paymentStatus,
-                      paymentOverdue,
-                      paymentDisputeLostAt,
-                    })}
-                  />
+                  <Tooltip
+                    placement="top-start"
+                    disableHoverListener={!showWarningIcon}
+                    title={translate('text_1724674592260h33v56rycaw')}
+                  >
+                    <Status
+                      {...invoiceStatusMapping({ status })}
+                      endIcon={showWarningIcon ? 'warning-unfilled' : undefined}
+                    />
+                  </Tooltip>
                 )
               },
             },
@@ -283,6 +236,8 @@ export const CustomerInvoicesList: FC<CustomerInvoicesListProps> = ({
               minWidth: 160,
               title: translate('text_63ac86d797f728a87b2f9fb9'),
               content: (invoice) => {
+                if (invoice.status === InvoiceStatusTypeEnum.Failed) return '-'
+
                 const currency = invoice.currency || CurrencyEnum.Usd
                 const amount = deserializeAmount(invoice.totalAmountCents, currency)
 
@@ -293,6 +248,38 @@ export const CustomerInvoicesList: FC<CustomerInvoicesListProps> = ({
                 )
               },
             },
+            context === 'finalized'
+              ? {
+                  key: 'paymentStatus',
+                  minWidth: 120,
+                  title: translate('text_63b5d225b075850e0fe489f4'),
+                  content: ({ status, paymentStatus, paymentOverdue, paymentDisputeLostAt }) => {
+                    if (status !== InvoiceStatusTypeEnum.Finalized) {
+                      return null
+                    }
+
+                    return (
+                      <Tooltip
+                        placement="top"
+                        title={
+                          !!paymentDisputeLostAt
+                            ? translate('text_172416478461328edo4vwz05')
+                            : undefined
+                        }
+                      >
+                        <Status
+                          {...paymentStatusMapping({
+                            status,
+                            paymentStatus,
+                            paymentOverdue,
+                          })}
+                          endIcon={!!paymentDisputeLostAt ? 'warning-unfilled' : undefined}
+                        />
+                      </Tooltip>
+                    )
+                  },
+                }
+              : null,
             {
               key: 'issuingDate',
               minWidth: 104,
@@ -316,18 +303,22 @@ export const CustomerInvoicesList: FC<CustomerInvoicesListProps> = ({
             const { status, paymentStatus, voidable } = invoice
 
             const canDownload =
-              status !== InvoiceStatusTypeEnum.Draft && hasPermissions(['invoicesView'])
-            const canFinalize = hasPermissions(['invoicesUpdate'])
+              ![InvoiceStatusTypeEnum.Draft, InvoiceStatusTypeEnum.Failed].includes(status) &&
+              hasPermissions(['invoicesView'])
+            const canFinalize =
+              ![InvoiceStatusTypeEnum.Failed].includes(status) && hasPermissions(['invoicesUpdate'])
             const canRetryCollect =
               status === InvoiceStatusTypeEnum.Finalized &&
               [InvoicePaymentStatusTypeEnum.Failed, InvoicePaymentStatusTypeEnum.Pending].includes(
                 paymentStatus,
               ) &&
               hasPermissions(['invoicesSend'])
             const canUpdatePaymentStatus =
-              status !== InvoiceStatusTypeEnum.Draft &&
-              status !== InvoiceStatusTypeEnum.Voided &&
-              hasPermissions(['invoicesUpdate'])
+              ![
+                InvoiceStatusTypeEnum.Draft,
+                InvoiceStatusTypeEnum.Voided,
+                InvoiceStatusTypeEnum.Failed,
+              ].includes(status) && hasPermissions(['invoicesUpdate'])
             const canVoid =
               status === InvoiceStatusTypeEnum.Finalized &&
               [InvoicePaymentStatusTypeEnum.Pending, InvoicePaymentStatusTypeEnum.Failed].includes(

src/components/customers/CustomerInvoicesTab.tsx

@@ -75,7 +75,11 @@ export const CustomerInvoicesTab = ({ customerId, customerTimezone }: CustomerIn
     variables: {
       customerId,
       limit: 20,
-      status: [InvoiceStatusTypeEnum.Finalized, InvoiceStatusTypeEnum.Voided],
+      status: [
+        InvoiceStatusTypeEnum.Finalized,
+        InvoiceStatusTypeEnum.Voided,
+        InvoiceStatusTypeEnum.Failed,
+      ],
     },
     notifyOnNetworkStatusChange: true,
   })
@@ -94,6 +98,7 @@ export const CustomerInvoicesTab = ({ customerId, customerTimezone }: CustomerIn
             isLoading
             customerTimezone={customerTimezone}
             customerId={customerId}
+            context="finalized"
           />
         </LoadingState>
       ) : !invoicesDraft?.length &&