feat(plan details): display progressive billing details

getlago · Aug 20, 2024 · 877699b · 877699b
1 parent cf0b5f1
commit 877699b
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 11 deletions.
diff --git a/src/components/plans/details/PlanDetailsAdvancedSettingsSection.tsx b/src/components/plans/details/PlanDetailsAdvancedSettingsSection.tsx
@@ -1,7 +1,9 @@
 import { Stack } from '@mui/material'
+import styled from 'styled-components'
 
 import { Accordion, Typography } from '~/components/designSystem'
 import { mapChargeIntervalCopy } from '~/components/plans/ChargeAccordion'
+import { PROGRESSIVE_BILLING_DOC_URL } from '~/core/constants/externalUrls'
 import { getIntervalTranslationKey } from '~/core/constants/form'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { deserializeAmount } from '~/core/serializers/serializeAmount'
@@ -20,18 +22,109 @@ const PlanDetailsAdvancedSettingsSection = ({
 }) => {
   const { translate } = useInternationalization()
   const hasMinimumCommitment = isNaN(Number(plan?.minimumCommitment?.amountCents))
+  const hasProgressiveBilling = !!plan?.usageThresholds?.length
 
-  if (!hasMinimumCommitment) return null
+  if (!hasMinimumCommitment && !hasProgressiveBilling) return null
 
   return (
-    <section>
+    <Container>
       <DetailsSectionTitle variant="subhead" noWrap>
-        {translate('text_65d601bffb11e0f9d1d9f567')}
+        {translate('text_6661fc17337de3591e29e44d')}
       </DetailsSectionTitle>
 
       <Stack direction="column" gap={12}>
+        {hasProgressiveBilling && (
+          <Stack direction="column" gap={6}>
+            <div>
+              <Typography variant="bodyHl" color="grey700">
+                {translate('text_1724179887722baucvj7bvc1')}
+              </Typography>
+              <Typography
+                variant="caption"
+                color="grey600"
+                html={translate('text_1724179887723kdf3nisf6hp', {
+                  href: PROGRESSIVE_BILLING_DOC_URL,
+                })}
+              />
+            </div>
+
+            <Accordion
+              summary={
+                <Typography variant="bodyHl" color="grey700">
+                  {translate('text_1724179887722baucvj7bvc1')}
+                </Typography>
+              }
+            >
+              <Stack direction="column" spacing={4}>
+                <DetailsTableDisplay
+                  className="details-table-display-last-cell-ellipsis"
+                  header={[
+                    '',
+                    translate('text_1724179887723eh12a0kqbdw'),
+                    translate('text_17241798877234jhvoho4ci9'),
+                  ]}
+                  body={[
+                    ...(plan?.usageThresholds
+                      ?.filter((t) => !t.recurring)
+                      .map((threshold, i) => [
+                        i === 0
+                          ? translate('text_1724179887723hi673zmbvdj')
+                          : translate('text_1724179887723917j8ezkd9v'),
+                        intlFormatNumber(
+                          deserializeAmount(
+                            threshold.amountCents,
+                            plan?.amountCurrency || CurrencyEnum.Usd,
+                          ),
+                          {
+                            currency: currency,
+                          },
+                        ),
+                        threshold.thresholdDisplayName ||
+                          `${translate('text_1724179887723pt34ivcecdt')} ${i + 1}`,
+                      ]) || []),
+                  ]}
+                />
+
+                <DetailsInfoGrid
+                  grid={[
+                    {
+                      label: translate('text_17241798877230y851fdxzqt'),
+                      value: plan?.usageThresholds?.some((threshold) => threshold.recurring)
+                        ? translate('text_65251f46339c650084ce0d57')
+                        : translate('text_65251f4cd55aeb004e5aa5ef'),
+                    },
+                  ]}
+                />
+
+                {plan?.usageThresholds?.some((threshold) => threshold.recurring) && (
+                  <DetailsTableDisplay
+                    className="details-table-display-last-cell-ellipsis"
+                    // Only take the first recurring threshold
+                    body={[
+                      ...([plan?.usageThresholds?.find((t) => t.recurring)]?.map((threshold) => [
+                        translate('text_17241798877230y851fdxzqu'),
+                        intlFormatNumber(
+                          deserializeAmount(
+                            threshold?.amountCents,
+                            plan?.amountCurrency || CurrencyEnum.Usd,
+                          ),
+                          {
+                            currency: currency,
+                          },
+                        ),
+                        threshold?.thresholdDisplayName ||
+                          translate('text_17241798877230y851fdxzqv'),
+                      ]) || []),
+                    ]}
+                  />
+                )}
+              </Stack>
+            </Accordion>
+          </Stack>
+        )}
+
         {hasMinimumCommitment && (
-          <Stack direction="column" gap={4}>
+          <Stack direction="column" gap={6}>
             <div>
               <Typography variant="bodyHl" color="grey700">
                 {translate('text_65d601bffb11e0f9d1d9f569')}
@@ -103,8 +196,19 @@ const PlanDetailsAdvancedSettingsSection = ({
           </Stack>
         )}
       </Stack>
-    </section>
+    </Container>
   )
 }
 
 export default PlanDetailsAdvancedSettingsSection
+
+const Container = styled.section`
+  .details-table-display-last-cell-ellipsis {
+    tr > td:last-child {
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+`
diff --git a/src/core/constants/externalUrls.ts b/src/core/constants/externalUrls.ts
@@ -12,6 +12,9 @@ export const FEATURE_REQUESTS_URL = 'https://getlago.canny.io/feature-requests'
 export const ADYEN_SUCCESS_LINK_SPEC_URL =
   'https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-returnUrl'
 export const ROLE_ACCESS_LEVEL_DOC_URL = 'https://getlago.com/docs/guide/security/rbac'
+// TODO: Update this URL
+export const PROGRESSIVE_BILLING_DOC_URL =
+  'https://getlago.com/docs/guide/billing/progressive-billing'
 export const buildNetsuiteCustomerUrl = (
   connectionAccountId?: string | null,
   netsuiteCustomerId?: string | null,