feat: display draft badge with warning if errorDetails

getlago · Aug 26, 2024 · 5df2138 · 5df2138
1 parent be33aa6
commit 5df2138
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 89 deletions.
diff --git a/src/components/customers/CustomerInvoicesList.tsx b/src/components/customers/CustomerInvoicesList.tsx
@@ -52,6 +52,11 @@ gql`
       name
       applicableTimezone
     }
+    errorDetails {
+      errorCode
+      errorDetails
+    }
+
     ...InvoiceForFinalizeInvoice
     ...InvoiceForUpdateInvoicePaymentStatus
   }
@@ -198,7 +203,24 @@ export const CustomerInvoicesList: FC<CustomerInvoicesListProps> = ({
               key: 'status',
               minWidth: 80,
               title: translate('text_63ac86d797f728a87b2f9fa7'),
-              content: ({ status }) => <Status {...invoiceStatusMapping({ status })} />,
+              content: ({ status, errorDetails }) => {
+                const hasTaxErrors =
+                  !!errorDetails?.length &&
+                  [InvoiceStatusTypeEnum.Draft, InvoiceStatusTypeEnum.Voided].includes(status)
+
+                return (
+                  <Tooltip
+                    placement="top-start"
+                    disableHoverListener={!hasTaxErrors}
+                    title={translate('text_1724674592260h33v56rycaw')}
+                  >
+                    <Status
+                      {...invoiceStatusMapping({ status })}
+                      endIcon={hasTaxErrors ? 'warning-unfilled' : undefined}
+                    />
+                  </Tooltip>
+                )
+              },
             },
             {
               key: 'number',

diff --git a/src/components/invoices/InvoiceCustomerInfos.tsx b/src/components/invoices/InvoiceCustomerInfos.tsx
@@ -25,6 +25,10 @@ gql`
     status
     paymentStatus
     paymentDisputeLostAt
+    errorDetails {
+      errorCode
+      errorDetails
+    }
     customer {
       id
       name
@@ -201,7 +205,19 @@ export const InvoiceCustomerInfos = memo(({ invoice }: InvoiceCustomerInfosProps
             {translate('text_65269b6afe1fda4ad9bf672b')}
           </Typography>
           <Typography variant="body" color="grey700">
-            {invoice?.status && <Status {...invoiceStatusMapping({ status: invoice.status })} />}
+            {invoice?.status && (
+              <Status
+                {...invoiceStatusMapping({ status: invoice.status })}
+                endIcon={
+                  !!invoice.errorDetails?.length &&
+                  [InvoiceStatusTypeEnum.Draft, InvoiceStatusTypeEnum.Voided].includes(
+                    invoice.status,
+                  )
+                    ? 'warning-unfilled'
+                    : undefined
+                }
+              />
+            )}
           </Typography>
         </InfoLine>
         <InfoLine>

diff --git a/src/components/invoices/InvoicesList.tsx b/src/components/invoices/InvoicesList.tsx
@@ -272,8 +272,23 @@ const InvoicesList = ({
                 key: 'status',
                 title: translate('text_63ac86d797f728a87b2f9fa7'),
                 minWidth: 80,
-                content: ({ status }) => {
-                  return <Status {...invoiceStatusMapping({ status })} />
+                content: ({ status, errorDetails }) => {
+                  const hasTaxErrors =
+                    !!errorDetails?.length &&
+                    [InvoiceStatusTypeEnum.Draft, InvoiceStatusTypeEnum.Voided].includes(status)
+
+                  return (
+                    <Tooltip
+                      placement="top-start"
+                      disableHoverListener={!hasTaxErrors}
+                      title={translate('text_1724674592260h33v56rycaw')}
+                    >
+                      <Status
+                        {...invoiceStatusMapping({ status })}
+                        endIcon={hasTaxErrors ? 'warning-unfilled' : undefined}
+                      />
+                    </Tooltip>
+                  )
                 },
               },
               {