Merge pull request #1606 from bcgov/fix/hamed-decimal-formatting-bcei…

…d-1529 Fix: Add Decimal Formatting to Units and Cost - 1529
bcgov · Jan 7, 2025 · cfc3bc7 · cfc3bc7
2 parents 9ec582f + ed4374a
commit cfc3bc7
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 30 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -72,6 +72,7 @@
     "react-hook-form": "^7.49.2",
     "react-i18next": "^14.0.3",
     "react-input-mask": "^2.0.4",
+    "react-number-format": "^5.4.3",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.21.1",
     "react-snowfall": "^1.2.1",

diff --git a/frontend/src/views/Transfers/components/TransferDetails.jsx b/frontend/src/views/Transfers/components/TransferDetails.jsx
@@ -14,6 +14,7 @@ import { Controller, useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { LabelBox } from './LabelBox'
 import { calculateTotalValue } from '@/utils/formatters'
+import { NumericFormat } from 'react-number-format'
 
 export const TransferDetails = () => {
   const { t } = useTranslation(['common', 'transfer', 'organization'])
@@ -26,6 +27,7 @@ export const TransferDetails = () => {
   } = useFormContext()
   const { data: currentUser } = useCurrentUser()
   const { data: orgData } = useRegExtOrgs()
+
   const organizations =
     orgData?.map((org) => ({
       value: parseInt(org.organizationId),
@@ -65,6 +67,7 @@ export const TransferDetails = () => {
       )
     )
   }
+
   return (
     <BCBox data-test="transfer-details">
       <LabelBox label={t('transfer:detailsLabel')}>
@@ -73,15 +76,29 @@ export const TransferDetails = () => {
             {currentUser?.organization?.name}
           </BCTypography>
           {` ${t('transfer:transfers')} `}
-          <TextField
-            inputProps={{ 'data-test': 'quantity' }}
-            {...register('quantity')}
-            placeholder={t('common:quantity')}
-            size="small"
-            error={!!errors.quantity}
-            helperText={errors.quantity?.message}
-            sx={{ width: '6rem', marginInline: '0.2rem', bottom: '0.2rem' }}
+
+          <Controller
+            name="quantity"
+            control={control}
+            render={({ field: { onChange, onBlur, value, name, ref } }) => (
+              <NumericFormat
+                customInput={TextField}
+                thousandSeparator
+                value={value}
+                onValueChange={(vals) => onChange(vals.floatValue)}
+                onBlur={onBlur}
+                name={name}
+                inputRef={ref}
+                inputProps={{ 'data-test': 'quantity' }}
+                placeholder={t('common:quantity')}
+                size="small"
+                error={!!errors.quantity}
+                helperText={errors.quantity?.message}
+                sx={{ width: '6rem', marginInline: '0.2rem', bottom: '0.2rem' }}
+              />
+            )}
           />
+
           {t('transfer:complianceUnitsTo')}
           <FormControl
             sx={{
@@ -149,30 +166,48 @@ export const TransferDetails = () => {
             />
             {renderError('toOrganizationId')}
           </FormControl>
+
           {t('transfer:for')}
-          <TextField
-            id="price-per-unit"
-            {...register('pricePerUnit')}
-            placeholder={t('transfer:fairMarketText')}
-            size="small"
-            error={!!errors.pricePerUnit}
-            helperText={errors.pricePerUnit?.message}
-            sx={{
-              minWidth: '25rem',
-              marginInline: '0.2rem',
-              bottom: '0.2rem'
-            }}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">$</InputAdornment>
-              ),
-              style: { textAlign: 'right' }
-            }}
-            inputProps={{
-              maxLength: 13,
-              'data-test': 'price-per-unit'
-            }}
+
+          <Controller
+            name="pricePerUnit"
+            control={control}
+            render={({ field: { onChange, onBlur, value, name, ref } }) => (
+              <NumericFormat
+                id="price-per-unit"
+                customInput={TextField}
+                thousandSeparator
+                decimalScale={2}
+                fixedDecimalScale={false}
+                prefix=""
+                value={value}
+                onValueChange={(vals) => onChange(vals.floatValue)}
+                onBlur={onBlur}
+                name={name}
+                inputRef={ref}
+                placeholder={t('transfer:fairMarketText')}
+                size="small"
+                error={!!errors.pricePerUnit}
+                helperText={errors.pricePerUnit?.message}
+                sx={{
+                  minWidth: '25rem',
+                  marginInline: '0.2rem',
+                  bottom: '0.2rem'
+                }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">$</InputAdornment>
+                  ),
+                  style: { textAlign: 'right' }
+                }}
+                inputProps={{
+                  maxLength: 13,
+                  'data-test': 'price-per-unit'
+                }}
+              />
+            )}
           />
+
           {t('transfer:totalValueText')}
           <BCTypography
             variant="body4"
@@ -187,6 +222,7 @@ export const TransferDetails = () => {
             })} CAD.`}
           </BCTypography>
         </BCTypography>
+
         <BCTypography
           variant="body4"
           component="div"