From 5c30509d21e30a46aad8901a2863ffb6e51445ce Mon Sep 17 00:00:00 2001
From: Deepak Kumar <deepak.kumar852182@gmail.com>
Date: Thu, 18 Apr 2024 01:36:52 +0530
Subject: [PATCH] GH-4362 Add syncing status (#4950)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adds a `syncing` status on frontend.

Issue
- #4362

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .../modules/accounts/types/MessageChannel.ts  |  1 +
 ...ettingsAccountsMessageChannelsListCard.tsx |  6 +--
 .../SettingsAccountsSynchronizationStatus.tsx | 37 +++++++++----------
 .../accounts/hooks/useGetSyncStatusOptions.ts | 25 +++++++++++++
 4 files changed, 44 insertions(+), 25 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/settings/accounts/hooks/useGetSyncStatusOptions.ts

diff --git a/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts b/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts
index 90f28ed78..2517f506e 100644
--- a/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts
+++ b/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts
@@ -6,4 +6,5 @@ export type MessageChannel = {
   isContactAutoCreationEnabled?: boolean;
   isSyncEnabled: boolean;
   visibility: InboxSettingsVisibilityValue;
+  syncStatus: string;
 };
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
index 1d6e6f28a..f3a08a0d0 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
@@ -55,11 +55,7 @@ export const SettingsAccountsMessageChannelsListCard = () => {
   } & SettingsAccountsSynchronizationStatusProps)[] = messageChannels.map(
     (messageChannel) => ({
       ...messageChannel,
-      syncStatus: messageChannel.connectedAccount?.authFailedAt
-        ? 'failed'
-        : messageChannel.isSyncEnabled
-          ? 'synced'
-          : 'notSynced',
+      syncStatus: messageChannel.syncStatus,
     }),
   );
 
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
index 8d07a6ad0..a8c074868 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
@@ -1,27 +1,24 @@
+import { useGetSyncStatusOptions } from '@/settings/accounts/hooks//useGetSyncStatusOptions';
 import { Status } from '@/ui/display/status/components/Status';
 
 export type SettingsAccountsSynchronizationStatusProps = {
-  syncStatus: 'synced' | 'failed' | 'notSynced';
+  syncStatus: string;
 };
 
 export const SettingsAccountsSynchronizationStatus = ({
   syncStatus,
-}: SettingsAccountsSynchronizationStatusProps) => (
-  <Status
-    color={
-      syncStatus === 'synced'
-        ? 'green'
-        : syncStatus === 'failed'
-          ? 'red'
-          : 'gray'
-    }
-    text={
-      syncStatus === 'synced'
-        ? 'Synced'
-        : syncStatus === 'failed'
-          ? 'Sync failed'
-          : 'Not synced'
-    }
-    weight="medium"
-  />
-);
+}: SettingsAccountsSynchronizationStatusProps) => {
+  const syncStatusOptions = useGetSyncStatusOptions();
+
+  const syncStatusOption = syncStatusOptions?.find(
+    (option) => option.value === syncStatus,
+  );
+
+  return (
+    <Status
+      color={syncStatusOption?.color ?? 'gray'}
+      text={syncStatusOption?.label ?? 'Not synced'}
+      weight="medium"
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/settings/accounts/hooks/useGetSyncStatusOptions.ts b/packages/twenty-front/src/modules/settings/accounts/hooks/useGetSyncStatusOptions.ts
new file mode 100644
index 000000000..f349f3fe9
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/hooks/useGetSyncStatusOptions.ts
@@ -0,0 +1,25 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+
+export const useGetSyncStatusOptions = () => {
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: CoreObjectNameSingular.MessageChannel,
+  });
+
+  if (isUndefinedOrNull(objectMetadataItem)) {
+    throw new Error('ObjectMetadataItem not found for MessageChannel');
+  }
+
+  const syncStatusMetadata = objectMetadataItem.fields.find(
+    (field) => field.name === 'syncStatus',
+  );
+
+  const syncStatusOptions = syncStatusMetadata?.options;
+
+  if (isUndefinedOrNull(syncStatusMetadata)) {
+    throw new Error('syncStatusMetaData not found for MessageChannel');
+  }
+
+  return syncStatusOptions;
+};