fix(AddModal/ContactForm): Custom label now display correctly unsupported label

react/Contacts/AddModal/ContactForm/formValuesToContact.spec.js

@@ -117,6 +117,12 @@ describe('formValuesToContact', () => {
           primary: false,
           type: undefined,
           label: undefined
+        },
+        {
+          label: 'Mobile',
+          number: '0876467998',
+          primary: false,
+          type: 'mobile'
         }
       ],
       relationships: {

react/Contacts/AddModal/ContactForm/helpers.js

@@ -271,12 +271,17 @@ export const removeField = (fields, index) => {
 export const makeCustomLabel = (value, t) => {
   const { type, label } = JSON.parse(value)
 
+  const isSupportedLabel = ['home', 'work'].includes(label)
+
   const firstString = type || ''
-  const secondString = label
-    ? type
-      ? ` (${t(`Contacts.AddModal.ContactForm.label.${label}`)})`.toLowerCase()
-      : `label.${label}`
-    : ''
+  const secondString =
+    label && isSupportedLabel
+      ? type
+        ? ` (${t(
+            `Contacts.AddModal.ContactForm.label.${label}`
+          )})`.toLowerCase()
+        : `label.${label}`
+      : ''
 
   return firstString + secondString || null
 }

react/Contacts/AddModal/ContactForm/helpers.spec.js

@@ -1,10 +1,45 @@
+import get from 'lodash/get'
+
 import {
   moveToHead,
   makeItemLabel,
   makeTypeAndLabel,
   makeImppValues,
+  makeCustomLabel,
   makeInitialCustomValue
 } from './helpers'
+import { locales } from './locales'
+
+const t = x => get(locales.en, x)
+
+describe('makeCustomLabel', () => {
+  it('should return custom type and supported label', () => {
+    const resForWork = makeCustomLabel('{"type":"someType","label":"work"}', t)
+    expect(resForWork).toBe('someType (pro)')
+
+    const resForHome = makeCustomLabel('{"type":"someType","label":"home"}', t)
+    expect(resForHome).toBe('someType (personal)')
+  })
+
+  it('should return label if no type', () => {
+    const resForWork = makeCustomLabel('{"label":"work"}', t)
+    expect(resForWork).toBe('label.work')
+
+    const resForHome = makeCustomLabel('{"label":"home"}', t)
+    expect(resForHome).toBe('label.home')
+  })
+
+  it('should return only custom type if label is not supported or undefined', () => {
+    const resForNotSupported = makeCustomLabel(
+      '{"type":"someType","label":"someLabel"}',
+      t
+    )
+    expect(resForNotSupported).toBe('someType')
+
+    const resForUndefined = makeCustomLabel('{"type":"someType"}', t)
+    expect(resForUndefined).toBe('someType')
+  })
+})
 
 describe('moveToHead function', () => {
   it('should move an item to head of the array', () => {

react/Contacts/AddModal/mocks.js

@@ -86,6 +86,12 @@ export const johnDoeContact = {
     {
       number: '+33 6 77 11 22 33',
       primary: false
+    },
+    {
+      label: 'Mobile', // could be this when importing from other sources i.e. google
+      number: '0876467998',
+      primary: false,
+      type: 'mobile'
     }
   ]
 }
@@ -156,6 +162,11 @@ export const johnDoeFormValues = {
       fieldId: 'fieldId_6',
       phone: '+33 6 77 11 22 33',
       phoneLabel: undefined
+    },
+    {
+      fieldId: 'fieldId_7',
+      phone: '0876467998',
+      phoneLabel: '{"type":"mobile","label":"Mobile"}'
     }
   ],
   givenName: 'John',