From c8c1890ad7aea061b048f23efbf5020988e3ed04 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Fri, 20 Sep 2024 17:40:12 +0200
Subject: [PATCH] Safely parse phone numbers before display (#7186)

Timeline activity properties are stored as string rather than array.
Adding a safe parsing in front. Would be better to also update in
backend but doing this as a quick fix
---
 .../display/components/PhonesDisplay.tsx      | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
index 04423ff32..17e9d27f4 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
@@ -8,6 +8,7 @@ import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
 
 import { parsePhoneNumber } from 'libphonenumber-js';
 import { isDefined } from '~/utils/isDefined';
+import { logError } from '~/utils/logError';
 
 type PhonesDisplayProps = {
   value?: FieldPhonesValue;
@@ -39,7 +40,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
               countryCode: value.primaryPhoneCountryCode,
             }
           : null,
-        ...(value?.additionalPhones ?? []),
+        ...parseAdditionalPhones(value?.additionalPhones),
       ]
         .filter(isDefined)
         .map(({ number, countryCode }) => {
@@ -85,3 +86,23 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
     </StyledContainer>
   );
 };
+
+const parseAdditionalPhones = (additionalPhones?: any) => {
+  if (!additionalPhones) {
+    return [];
+  }
+
+  if (typeof additionalPhones === 'object') {
+    return additionalPhones;
+  }
+
+  if (typeof additionalPhones === 'string') {
+    try {
+      return JSON.parse(additionalPhones);
+    } catch (error) {
+      logError(`Error parsing additional phones' : ` + error);
+    }
+  }
+
+  return [];
+};