feat: add succeededAt date

src/components/creditNote/CreditNoteFormItem.tsx

@@ -20,6 +20,7 @@ interface CreditNoteFormItemProps {
   feeName: string
   formikKey: string
   maxValue: number
+  feeSucceededAt?: string
 }
 
 export const CreditNoteFormItem = ({
@@ -28,6 +29,7 @@ export const CreditNoteFormItem = ({
   formikKey,
   maxValue,
   feeName,
+  feeSucceededAt,
 }: CreditNoteFormItemProps) => {
   const { translate } = useInternationalization()
   const error = _get(formikProps.errors, `${formikKey}.value`)
@@ -41,6 +43,7 @@ export const CreditNoteFormItem = ({
           <Typography color="grey700">
             {feeName}
             <Typography variant="caption">
+              {feeSucceededAt && `${feeSucceededAt} • `}
               {translate('text_636bedf292786b19d3398efc', {
                 max: intlFormatNumber(deserializeAmount(maxValue || 0, currency), {
                   currencyDisplay: 'symbol',

src/components/creditNote/types.ts

@@ -7,6 +7,7 @@ export type FromFee = {
   name: string
   value: string | number
   isTrueUpFee?: boolean
+  succeededAt?: string
   appliedTaxes?: {
     id: string
     tax: {

src/components/invoices/details/InvoiceDetailsTable.tsx

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client'
+import { DateTime } from 'luxon'
 import { memo, RefObject } from 'react'
 import styled, { css } from 'styled-components'
 
@@ -157,9 +158,12 @@ export const InvoiceDetailsTable = memo(
      * One-off invoice
      ******************/
     if (
-      [InvoiceTypeEnum.AddOn, InvoiceTypeEnum.Credit, InvoiceTypeEnum.OneOff].includes(
-        invoice.invoiceType,
-      )
+      [
+        InvoiceTypeEnum.AddOn,
+        InvoiceTypeEnum.Credit,
+        InvoiceTypeEnum.OneOff,
+        InvoiceTypeEnum.AdvanceCharges,
+      ].includes(invoice.invoiceType)
     ) {
       return (
         <InvoiceWrapper $isDraftInvoice={isDraftInvoice} $canHaveUnitPrice={canHaveUnitPrice}>
@@ -178,10 +182,16 @@ export const InvoiceDetailsTable = memo(
                   displayName={
                     invoice.invoiceType === InvoiceTypeEnum.AddOn
                       ? translate('text_6388baa2e514213fed583611', { name: fee.itemName })
-                      : invoice.invoiceType === InvoiceTypeEnum.OneOff
+                      : invoice.invoiceType === InvoiceTypeEnum.OneOff ||
+                          invoice.invoiceType === InvoiceTypeEnum.AdvanceCharges
                         ? fee.invoiceDisplayName || fee.itemName
                         : translate('text_637ccf8133d2c9a7d11ce6e1')
                   }
+                  succeededDate={
+                    invoice.invoiceType === InvoiceTypeEnum.AdvanceCharges
+                      ? DateTime.fromISO(fee.succeededAt).toFormat('LLL. dd, yyyy')
+                      : undefined
+                  }
                   editFeeDrawerRef={editFeeDrawerRef}
                   deleteAdjustedFeeDialogRef={deleteAdjustedFeeDialogRef}
                   isDraftInvoice={isDraftInvoice}

src/components/invoices/details/InvoiceDetailsTableBodyLine.tsx

@@ -40,6 +40,7 @@ gql`
     eventsCount
     adjustedFee
     adjustedFeeType
+    succeededAt
     charge {
       id
       chargeModel
@@ -94,6 +95,7 @@ type InvoiceDetailsTableBodyLineProps = {
   hideVat?: boolean
   editFeeDrawerRef?: RefObject<EditFeeDrawerRef>
   deleteAdjustedFeeDialogRef?: RefObject<DeleteAdjustedFeeDialogRef>
+  succeededDate?: string
 }
 
 export const calculateIfDetailsShouldBeDisplayed = (
@@ -159,6 +161,7 @@ export const InvoiceDetailsTableBodyLine = memo(
     fee,
     hideVat,
     isDraftInvoice,
+    succeededDate,
   }: InvoiceDetailsTableBodyLineProps) => {
     const { translate } = useInternationalization()
     const chargeModel = fee?.charge?.chargeModel
@@ -206,8 +209,10 @@ export const InvoiceDetailsTableBodyLine = memo(
                 </Typography>
               )}
             </Stack>
-            {!!subLabel && (
+            {(succeededDate || !!subLabel) && (
               <Typography variant="caption" color="grey600">
+                {succeededDate}
+                {succeededDate && !!subLabel && ' • '}
                 {subLabel}
               </Typography>
             )}

src/hooks/__tests__/fixtures.ts

@@ -545,6 +545,7 @@ export const fullSubscriptionInvoiceGroupTrueUpMockAndExpect = () => ({
           trueUpFee: null,
           maxAmount: '167',
           appliedTaxes: [],
+          succeededAt: undefined,
         },
         '5ff24500-2c67-4872-9808-746c59e94d38': {
           name: 'Invoice custom name',
@@ -587,6 +588,7 @@ export const fullSubscriptionInvoiceGroupTrueUpMockAndExpect = () => ({
           trueUpFee: null,
           maxAmount: '10666',
           appliedTaxes: [],
+          succeededAt: undefined,
         },
         '594fe1d1-69f1-4b47-8cae-9c76fd409f76': {
           name: 'Count BM - One dimension',
@@ -620,6 +622,7 @@ export const fullSubscriptionInvoiceGroupTrueUpMockAndExpect = () => ({
           trueUpFee: null,
           maxAmount: '40000',
           appliedTaxes: [],
+          succeededAt: undefined,
         },
       },
     },

src/hooks/useCreateCreditNote.ts

@@ -34,6 +34,7 @@ gql`
     invoiceName
     invoiceDisplayName
     groupedBy
+    succeededAt
     appliedTaxes {
       id
       tax {
@@ -73,6 +74,7 @@ gql`
       invoiceName
       invoiceDisplayName
       creditableAmountCents
+      succeededAt
       appliedTaxes {
         id
         tax {
@@ -283,6 +285,7 @@ export const useCreateCreditNote: () => UseCreateCreditNoteReturn = () => {
                   trueUpFee: fee?.trueUpFee,
                   maxAmount: fee?.creditableAmountCents,
                   appliedTaxes: fee?.appliedTaxes || [],
+                  succeededAt: fee?.succeededAt,
                 },
                 ...groupApp,
               }
@@ -321,6 +324,7 @@ export const useCreateCreditNote: () => UseCreateCreditNoteReturn = () => {
                 trueUpFee: firstFee?.trueUpFee,
                 maxAmount: firstFee?.creditableAmountCents,
                 appliedTaxes: firstFee?.appliedTaxes || [],
+                succeededAt: firstFee?.succeededAt,
               },
             }
           }

src/pages/CreateCreditNote.tsx

@@ -1,6 +1,7 @@
 import { gql } from '@apollo/client'
 import { useFormik } from 'formik'
 import _get from 'lodash/get'
+import { DateTime } from 'luxon'
 import { useMemo, useRef, useState } from 'react'
 import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import styled from 'styled-components'
@@ -453,6 +454,13 @@ const CreateCreditNote = () => {
                                   }`}
                                   formikKey={`fees.${subKey}.fees.${groupFeeKey}`}
                                   maxValue={child?.maxAmount || 0}
+                                  feeSucceededAt={
+                                    !!child?.succeededAt
+                                      ? DateTime.fromISO(child?.succeededAt).toFormat(
+                                          'LLL. dd, yyyy',
+                                        )
+                                      : undefined
+                                  }
                                 />
                               )
                             }