feat: progressive billing (plan + subscription) (#1696)

* feat(ChargeTable): improve table component

* feat(CreatePlan): add progressive billing section

* fix: handle validations

* feat: handle freemium check

* feat: delete progressive billing

* feat: handle subscription

* refactor: add two different formik object and merge on submit

* fix: move alert outside of switch

* fix: missing translations

* fix(lago-256): remove default name

* fix(lago-257): add empty string on save

* fix(lago-255): usage billed on invoice details

* fix(lago-257): add null for empty threshold name

* fix: forgot translations

* feat(lago-229): update doc link

* fix: code review

src/components/designSystem/Table/ChargeTable.tsx

@@ -37,6 +37,7 @@ interface ChargeTableProps<T> {
   data: DataType<T>[]
   className?: string
   onDeleteRow?: (row: DataType<T>, index: number) => unknown
+  deleteTooltipContent?: string
 }
 
 export const ChargeTable = <T extends Record<string, unknown>>({
@@ -45,27 +46,32 @@ export const ChargeTable = <T extends Record<string, unknown>>({
   columns,
   data,
   onDeleteRow,
+  deleteTooltipContent,
 }: ChargeTableProps<T>) => {
   const { translate } = useInternationalization()
 
+  const hasHeader = columns?.some(({ title }) => title)
+
   return (
     <Content className={className}>
       {/* Header */}
-      <thead>
-        <HeaderRow>
-          {columns?.map(({ title, size = 124, onClick }, i) => {
-            return (
-              <HeaderCell
-                key={`table-${name}-head-${i}`}
-                $size={size}
-                onClick={() => onClick && onClick()}
-              >
-                {title && title}
-              </HeaderCell>
-            )
-          })}
-        </HeaderRow>
-      </thead>
+      {hasHeader && (
+        <thead>
+          <HeaderRow>
+            {columns?.map(({ title, size = 124, onClick }, i) => {
+              return (
+                <HeaderCell
+                  key={`table-${name}-head-${i}`}
+                  $size={size}
+                  onClick={() => onClick && onClick()}
+                >
+                  {title && title}
+                </HeaderCell>
+              )
+            })}
+          </HeaderRow>
+        </thead>
+      )}
       <tbody>
         {data?.map((row, i) => {
           return (
@@ -87,7 +93,7 @@ export const ChargeTable = <T extends Record<string, unknown>>({
                 {onDeleteRow && !row.disabledDelete && (
                   <DeleteButtonContainer>
                     <Tooltip
-                      title={translate('text_62793bbb599f1c01522e9239')}
+                      title={deleteTooltipContent ?? translate('text_62793bbb599f1c01522e9239')}
                       placement="top-start"
                     >
                       <Button

src/components/invoices/details/InvoiceDetailsTableFooter.tsx

@@ -25,6 +25,7 @@ gql`
     invoiceType
     status
     prepaidCreditAmountCents
+    progressiveBillingCreditAmountCents
     versionNumber
     appliedTaxes {
       id
@@ -62,6 +63,31 @@ export const InvoiceDetailsTableFooter = memo(
       <tfoot>
         {invoice.invoiceType !== InvoiceTypeEnum.Credit && (
           <>
+            {!!Number(invoice.progressiveBillingCreditAmountCents) && (
+              <tr>
+                <td></td>
+                <td colSpan={colSpan}>
+                  <Typography variant="bodyHl" color="grey600">
+                    {translate('text_1724936123802q74m2xxak3o')}
+                  </Typography>
+                </td>
+                <td>
+                  <Typography variant="body" color="success600">
+                    -
+                    {intlFormatNumber(
+                      deserializeAmount(
+                        invoice?.progressiveBillingCreditAmountCents || 0,
+                        currency,
+                      ),
+                      {
+                        currencyDisplay: 'symbol',
+                        currency,
+                      },
+                    )}
+                  </Typography>
+                </td>
+              </tr>
+            )}
             {shouldDisplayCouponRow && !isLegacyInvoice && (
               <tr>
                 <td></td>

src/components/plans/CommitmentsSection.tsx

@@ -116,7 +116,7 @@ export const CommitmentsSection = ({
   }, [formikProps.initialValues.minimumCommitment?.amountCents])
 
   return (
-    <Card>
+    <Stack gap={4} alignItems="flex-start">
       <SectionTitle>
         <Typography variant="bodyHl" color="grey700">
           {translate('text_65d601bffb11e0f9d1d9f569')}
@@ -131,7 +131,7 @@ export const CommitmentsSection = ({
       </SectionTitle>
 
       {displayMinimumCommitment ? (
-        <Accordion
+        <StyledAccordion
           summary={
             <BoxHeader>
               <BoxHeaderGroupLeft>
@@ -306,7 +306,7 @@ export const CommitmentsSection = ({
               </Group>
             </div>
           </Stack>
-        </Accordion>
+        </StyledAccordion>
       ) : (
         <Button
           variant="quaternary"
@@ -330,7 +330,7 @@ export const CommitmentsSection = ({
           {translate('text_6661ffe746c680007e2df0e1')}
         </Button>
       )}
-    </Card>
+    </Stack>
   )
 }
 
@@ -342,18 +342,6 @@ const SectionTitle = styled.div`
   }
 `
 
-const Card = styled.div`
-  padding: ${theme.spacing(8)};
-  border: 1px solid ${theme.palette.grey[300]};
-  background-color: ${theme.palette.common.white};
-  border-radius: 12px;
-  box-sizing: border-box;
-
-  > *:not(:first-child) {
-    margin-top: ${theme.spacing(6)};
-  }
-`
-
 const BoxHeader = styled.div`
   /* Used to prevent long invoice display name to overflow */
   overflow: hidden;
@@ -413,3 +401,7 @@ const Group = styled.div`
     margin-bottom: ${theme.spacing(4)};
   }
 `
+
+const StyledAccordion = styled(Accordion)`
+  width: 100%;
+`