feat: Add units on two attributes on ExpandedAttributes component

- Add "€" unit on display of `refTaxIncome` metadata - Add the word "day(s)" to the display of the `noticePeriod` metadata
cozy · Apr 21, 2023 · 5410558 · 5410558
1 parent 7276cca
commit 5410558
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 2 deletions.
diff --git a/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers.js b/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers.js
@@ -174,3 +174,17 @@ export const hasExpandedAttributesDisplayed = ({
 
   return attrsKeyAndFormatedValue?.length > 0 || false
 }
+
+export const getValueExtended = ({ attrKey, value, t }) => {
+  if (attrKey === 'metadata.noticePeriod') {
+    if (!isNaN(parseInt(value))) {
+      return t('common.day', { smart_count: parseInt(value) })
+    }
+  }
+  if (attrKey === 'metadata.refTaxIncome') {
+    if (!isNaN(parseInt(value))) {
+      return `${value} €`
+    }
+  }
+  return value
+}
diff --git a/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers.spec.js b/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers.spec.js
@@ -1,8 +1,16 @@
 import {
   formatAttrValue,
+  getValueExtended,
   makeAttrKey,
   normalizeExpandedAttribute
 } from './helpers'
+import { I18nContext } from '../../../jestLib/I18n'
+import en from '../locales/en'
+
+const i18nContext = I18nContext({
+  locale: en
+})
+const tMock = i18nContext.t
 
 const f = () => 'someMockedDate'
 const lang = 'en'
@@ -173,3 +181,24 @@ describe('normalizeExpandedAttribute', () => {
     expect(res).toBe('fullname')
   })
 })
+
+describe('getValueExtended', () => {
+  it.each`
+    attrKey                    | value        | expected
+    ${'metadata.other'}        | ${'bar'}     | ${'bar'}
+    ${'metadata.noticePeriod'} | ${'1'}       | ${'1 day'}
+    ${'metadata.noticePeriod'} | ${'10'}      | ${'10 days'}
+    ${'metadata.noticePeriod'} | ${'foo'}     | ${'foo'}
+    ${'metadata.noticePeriod'} | ${undefined} | ${undefined}
+    ${'metadata.refTaxIncome'} | ${'1'}       | ${'1 €'}
+    ${'metadata.refTaxIncome'} | ${'foo'}     | ${'foo'}
+    ${'metadata.refTaxIncome'} | ${undefined} | ${undefined}
+  `(
+    'should return "$expected" if attribute "$attrKey" is "$value"',
+    ({ attrKey, value, expected }) => {
+      const res = getValueExtended({ attrKey, value, t: tMock })
+
+      expect(res).toBe(expected)
+    }
+  )
+})
diff --git a/react/MuiCozyTheme/ListItem/ExpandedAttributes/index.jsx b/react/MuiCozyTheme/ListItem/ExpandedAttributes/index.jsx
@@ -6,7 +6,7 @@ import Alert from '../../../Alert'
 import withListItemLocales from '../hoc/withListItemLocales'
 import ExpandedAttribute from './ExpandedAttribute'
 import { useI18n } from '../../../I18n'
-import { makeAttrsKeyAndFormatedValue } from './helpers'
+import { getValueExtended, makeAttrsKeyAndFormatedValue } from './helpers'
 
 const ExpandedAttributes = ({ doc, expandedAttributes }) => {
   const { t, f, lang } = useI18n()
@@ -29,12 +29,17 @@ const ExpandedAttributes = ({ doc, expandedAttributes }) => {
     <>
       {attrsKeyAndFormatedValue.map(({ attrKey, attrFormatedValue }, index) => {
         const label = t(`ListItem.attributes.${attrKey}`)
+        const valueExtended = getValueExtended({
+          attrKey,
+          value: attrFormatedValue,
+          t
+        })
 
         return (
           <ExpandedAttribute
             key={index}
             label={label}
-            value={attrFormatedValue}
+            value={valueExtended}
             setAlertProps={setAlertProps}
           />
         )

diff --git a/react/MuiCozyTheme/ListItem/locales/en.json b/react/MuiCozyTheme/ListItem/locales/en.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "day": "%{smart_count} day |||| %{smart_count} days"
+  },
   "ListItem": {
     "attributes": {
       "birthday": "Birthday",

diff --git a/react/MuiCozyTheme/ListItem/locales/fr.json b/react/MuiCozyTheme/ListItem/locales/fr.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "day": "%{smart_count} jour |||| %{smart_count} jours"
+  },
   "ListItem": {
     "attributes": {
       "birthday": "Date de naissance",

diff --git a/react/Viewer/Panel/QualificationListItemInformation.jsx b/react/Viewer/Panel/QualificationListItemInformation.jsx
@@ -26,6 +26,9 @@ export const makeInformationValue = ({ name, value, t, scannerT }) => {
   if (name === 'contractType') {
     return scannerT(`Scan.attributes.contractType.${value}`)
   }
+  if (name === 'refTaxIncome') {
+    return `${value} €`
+  }
 
   return <MidEllipsis text={`${value}`} />
 }