misc: refactor plan advanced settings section (#1684)

getlago · Aug 20, 2024 · 4c58c58 · 4c58c58
1 parent c33b891
commit 4c58c58
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 109 deletions.
diff --git a/src/components/plans/details/PlanDetailsAdvancedSettingsSection.tsx b/src/components/plans/details/PlanDetailsAdvancedSettingsSection.tsx
@@ -0,0 +1,110 @@
+import { Stack } from '@mui/material'
+
+import { Accordion, Typography } from '~/components/designSystem'
+import { mapChargeIntervalCopy } from '~/components/plans/ChargeAccordion'
+import { getIntervalTranslationKey } from '~/core/constants/form'
+import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
+import { deserializeAmount } from '~/core/serializers/serializeAmount'
+import { CurrencyEnum, EditPlanFragment, PlanInterval } from '~/generated/graphql'
+import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { DetailsInfoGrid, DetailsSectionTitle } from '~/styles/detailsPage'
+
+import DetailsTableDisplay from '../../details/DetailsTableDisplay'
+
+const PlanDetailsAdvancedSettingsSection = ({
+  currency,
+  plan,
+}: {
+  currency: CurrencyEnum
+  plan?: EditPlanFragment | null
+}) => {
+  const { translate } = useInternationalization()
+  const hasMinimumCommitment = isNaN(Number(plan?.minimumCommitment?.amountCents))
+
+  if (!hasMinimumCommitment) return null
+
+  return (
+    <section>
+      <DetailsSectionTitle variant="subhead" noWrap>
+        {translate('text_65d601bffb11e0f9d1d9f567')}
+      </DetailsSectionTitle>
+
+      <Stack direction="column" gap={12}>
+        {hasMinimumCommitment && (
+          <Stack direction="column" gap={4}>
+            <div>
+              <Typography variant="bodyHl" color="grey700">
+                {translate('text_65d601bffb11e0f9d1d9f569')}
+              </Typography>
+              <Typography variant="caption" color="grey600">
+                {translate('text_6661fc17337de3591e29e451', {
+                  interval: translate(
+                    mapChargeIntervalCopy(plan?.interval ?? PlanInterval.Monthly, false),
+                  ).toLocaleLowerCase(),
+                })}
+              </Typography>
+            </div>
+
+            <Accordion
+              summary={
+                <Typography variant="bodyHl" color="grey700">
+                  {plan?.minimumCommitment?.invoiceDisplayName ||
+                    translate('text_65d601bffb11e0f9d1d9f569')}
+                </Typography>
+              }
+            >
+              <Stack direction="column" spacing={4}>
+                <DetailsTableDisplay
+                  header={[translate('text_65d601bffb11e0f9d1d9f571')]}
+                  body={[
+                    [
+                      intlFormatNumber(
+                        deserializeAmount(
+                          plan?.minimumCommitment?.amountCents || 0,
+                          plan?.amountCurrency || CurrencyEnum.Usd,
+                        ),
+                        {
+                          currency: currency,
+                        },
+                      ),
+                    ],
+                  ]}
+                />
+
+                <DetailsInfoGrid
+                  grid={[
+                    {
+                      label: translate('text_65201b8216455901fe273dc1'),
+                      value: translate(getIntervalTranslationKey[plan?.interval as PlanInterval]),
+                    },
+                    {
+                      label: translate('text_645bb193927b375079d28a8f'),
+                      value: !!plan?.minimumCommitment?.taxes?.length
+                        ? plan?.minimumCommitment?.taxes?.map((tax, i) => (
+                            <Typography
+                              key={`plan-details-fixed-fee-taxe-${i}`}
+                              variant="body"
+                              color="grey700"
+                            >
+                              {tax.name} (
+                              {intlFormatNumber(Number(tax.rate) / 100 || 0, {
+                                maximumFractionDigits: 2,
+                                style: 'percent',
+                              })}
+                              )
+                            </Typography>
+                          ))
+                        : '-',
+                    },
+                  ]}
+                />
+              </Stack>
+            </Accordion>
+          </Stack>
+        )}
+      </Stack>
+    </section>
+  )
+}
+
+export default PlanDetailsAdvancedSettingsSection
diff --git a/src/components/plans/details/PlanDetailsCommitmentsSection.tsx b/src/components/plans/details/PlanDetailsCommitmentsSection.tsx
diff --git a/src/components/plans/details/PlanDetailsOverview.tsx b/src/components/plans/details/PlanDetailsOverview.tsx
@@ -13,8 +13,8 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { theme } from '~/styles'
 import { DetailsInfoGrid, DetailsInfoItem, DetailsSectionTitle } from '~/styles/detailsPage'
 
+import PlanDetailsAdvancedSettingsSection from './PlanDetailsAdvancedSettingsSection'
 import PlanDetailsChargesSection from './PlanDetailsChargesSection'
-import PlanDetailsCommitmentsSection from './PlanDetailsCommitmentsSection'
 import PlanDetailsFixedFeeAccordion from './PlanDetailsFixedFeeAccordion'
 
 gql`
@@ -92,17 +92,11 @@ const PlanDetailsOverview = ({ planId }: { planId?: string }) => {
           />
         </section>
       )}
-      {!isNaN(Number(plan?.minimumCommitment?.amountCents)) && (
-        <section>
-          <DetailsSectionTitle variant="subhead" noWrap>
-            {translate('text_65d601bffb11e0f9d1d9f567')}
-          </DetailsSectionTitle>
-          <PlanDetailsCommitmentsSection
-            plan={plan}
-            currency={plan?.amountCurrency || CurrencyEnum.Usd}
-          />
-        </section>
-      )}
+
+      <PlanDetailsAdvancedSettingsSection
+        plan={plan}
+        currency={plan?.amountCurrency || CurrencyEnum.Usd}
+      />
     </Container>
   )
 }