Update format for dailyCalls

pagopa · Oct 23, 2023 · cf3b922 · cf3b922
1 parent b7a0da5
commit cf3b922
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/...poseDetailsPage/components/PurposeDetailsTab/ConsumerPurposeDetailsDailyCallsPlanCard.tsx b/...poseDetailsPage/components/PurposeDetailsTab/ConsumerPurposeDetailsDailyCallsPlanCard.tsx
@@ -7,6 +7,7 @@ import { AuthHooks } from '@/api/auth'
 import { useTranslation } from 'react-i18next'
 import { ConsumerPurposeDetailsDailyCallsUpdateDrawer } from './ConsumerPurposeDetailsDailyCallsUpdateDrawer'
 import { Box } from '@mui/system'
+import { formatThousands } from '@/utils/format.utils'
 
 type ConsumerPurposeDetailsDailyCallsPlanCardProps = {
   purpose: Purpose
@@ -60,8 +61,10 @@ export const ConsumerPurposeDetailsDailyCallsPlanCard: React.FC<
           <Stack direction="column" spacing={2} flexGrow={1}>
             <Box flexGrow={1}>
               <Typography variant="h4">
-                {purpose.currentVersion?.dailyCalls ??
-                  purpose.waitingForApprovalVersion?.dailyCalls}
+                {formatThousands(
+                  purpose.currentVersion?.dailyCalls ??
+                    purpose.waitingForApprovalVersion!.dailyCalls
+                )}
               </Typography>
             </Box>
             <Divider />

diff --git a/...tailsPage/components/PurposeDetailsTab/ConsumerPurposeDetailsDailyCallsThresholdsCard.tsx b/...tailsPage/components/PurposeDetailsTab/ConsumerPurposeDetailsDailyCallsThresholdsCard.tsx
@@ -1,3 +1,4 @@
+import { formatThousands } from '@/utils/format.utils'
 import { Card, CardContent, CardHeader, Stack, Typography } from '@mui/material'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -37,11 +38,11 @@ export const ConsumerPurposeDetailsDailyCallsThresholdsCard: React.FC<
       <CardContent sx={{ px: 3, pt: 1 }}>
         <Stack direction="row" spacing={3}>
           <Stack direction="column" flex={1}>
-            <Typography variant="h4">{dailyCallsPerConsumer}</Typography>
+            <Typography variant="h4">{formatThousands(dailyCallsPerConsumer)}</Typography>
             <Typography variant="body2">{t('dailyCallsPerConsumerField.label')}</Typography>
           </Stack>
           <Stack direction="column" flex={1}>
-            <Typography variant="h4">{dailyCallsTotal}</Typography>
+            <Typography variant="h4">{formatThousands(dailyCallsTotal)}</Typography>
             <Typography variant="body2">{t('dailyCallsTotalsField.label')}</Typography>
           </Stack>
         </Stack>

diff --git a/...tailsPage/components/PurposeDetailsTab/ConsumerPurposeDetailsDailyCallsUpdatePlanCard.tsx b/...tailsPage/components/PurposeDetailsTab/ConsumerPurposeDetailsDailyCallsUpdatePlanCard.tsx
@@ -7,6 +7,7 @@ import { AuthHooks } from '@/api/auth'
 import { Trans, useTranslation } from 'react-i18next'
 import format from 'date-fns/format'
 import { PurposeMutations } from '@/api/purpose'
+import { formatThousands } from '@/utils/format.utils'
 
 type ConsumerPurposeDetailsDailyCallsUpdatePlanCardProps = {
   purpose: Purpose
@@ -56,7 +57,9 @@ export const ConsumerPurposeDetailsDailyCallsUpdatePlanCard: React.FC<
       <CardContent sx={{ px: 3, pt: 1, display: 'flex', flexGrow: 1 }}>
         <Stack direction="column" spacing={2} flexGrow={1}>
           <Box flexGrow={1}>
-            <Typography variant="h4">{waitingForApprovalVersion.dailyCalls}</Typography>
+            <Typography variant="h4">
+              {formatThousands(waitingForApprovalVersion.dailyCalls)}
+            </Typography>
           </Box>
           {waitingForApprovalVersion.expectedApprovalDate && (
             <Typography variant="body2">

diff --git a/src/pages/ProviderPurposeDetailsPage/components/ProviderPurposeDetailsDailyCallsPlanCard.tsx b/src/pages/ProviderPurposeDetailsPage/components/ProviderPurposeDetailsDailyCallsPlanCard.tsx
@@ -9,6 +9,7 @@ import { AuthHooks } from '@/api/auth'
 import { ProviderPurposeDetailsDailyCallsActivationDateDrawer } from './ProviderPurposeDetailsDailyCallsActivationDateDrawer'
 import { Trans, useTranslation } from 'react-i18next'
 import format from 'date-fns/format'
+import { formatThousands } from '@/utils/format.utils'
 
 type ProviderPurposeDetailsDailyCallsPlanCardProps = {
   purpose: Purpose
@@ -79,7 +80,9 @@ export const ProviderPurposeDetailsDailyCallsPlanCard: React.FC<
                     {purpose.currentVersion?.dailyCalls}
                   </Typography>
                 )}
-                <Typography variant="h4">{waitingForApprovalVersion.dailyCalls}</Typography>
+                <Typography variant="h4">
+                  {formatThousands(waitingForApprovalVersion.dailyCalls)}
+                </Typography>
               </Stack>
               {waitingForApprovalVersion.expectedApprovalDate && (
                 <Typography variant="body2">
@@ -120,7 +123,9 @@ export const ProviderPurposeDetailsDailyCallsPlanCard: React.FC<
               </IconLink>
             </Stack>
           ) : (
-            <Typography variant="h4">{purpose.currentVersion?.dailyCalls}</Typography>
+            <Typography variant="h4">
+              {formatThousands(purpose.currentVersion!.dailyCalls)}
+            </Typography>
           )}
         </CardContent>
       </Card>

diff --git a/.../ProviderPurposeDetailsPage/components/ProviderPurposeDetailsDailyCallsThresholdsCard.tsx b/.../ProviderPurposeDetailsPage/components/ProviderPurposeDetailsDailyCallsThresholdsCard.tsx
@@ -1,3 +1,4 @@
+import { formatThousands } from '@/utils/format.utils'
 import { Card, CardContent, CardHeader, Stack, Typography } from '@mui/material'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -37,11 +38,11 @@ export const ProviderPurposeDetailsDailyCallsThresholdsCard: React.FC<
       <CardContent sx={{ px: 3, pt: 1 }}>
         <Stack direction="row" spacing={3}>
           <Stack direction="column" flex={1}>
-            <Typography variant="h4">{dailyCallsPerConsumer}</Typography>
+            <Typography variant="h4">{formatThousands(dailyCallsPerConsumer)}</Typography>
             <Typography variant="body2">{t('dailyCallsPerConsumerField.label')}</Typography>
           </Stack>
           <Stack direction="column" flex={1}>
-            <Typography variant="h4">{dailyCallsTotal}</Typography>
+            <Typography variant="h4">{formatThousands(dailyCallsTotal)}</Typography>
             <Typography variant="body2">{t('dailyCallsTotalsField.label')}</Typography>
           </Stack>
         </Stack>