From 33e455655f6f7ec07e6495c94bf126d42ae553a9 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Tue, 27 Aug 2024 14:41:24 +0530
Subject: [PATCH] Added sync status on the FE (#6730)

Issue #6685

How do we make sure we get the latest syncStatus on the frontend?
For now we dont get it unless refreshed.
useInterval() on fetching account details?
---
 .../modules/accounts/types/CalendarChannel.ts |  1 +
 ...tingsAccountsConnectedAccountsListCard.tsx | 17 +-----
 ...untsConnectedAccountsRowRightContainer.tsx | 61 +++++++++++++++++++
 3 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx

diff --git a/packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts b/packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts
index 08a2261a3..21915d2cd 100644
--- a/packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts
+++ b/packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts
@@ -6,5 +6,6 @@ export type CalendarChannel = {
   isContactAutoCreationEnabled?: boolean;
   isSyncEnabled?: boolean;
   visibility: CalendarChannelVisibility;
+  syncStatus: string;
   __typename: 'CalendarChannel';
 };
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
index 5bb870d77..238371241 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@@ -1,22 +1,14 @@
 import { useNavigate } from 'react-router-dom';
-import styled from '@emotion/styled';
 import { IconGoogle } from 'twenty-ui';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Status } from '@/ui/display/status/components/Status';
 
+import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
 import { SettingsListCard } from '../../components/SettingsListCard';
 
-const StyledRowRightContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
 export const SettingsAccountsConnectedAccountsListCard = ({
   accounts,
   loading,
@@ -37,12 +29,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
       isLoading={loading}
       RowIcon={IconGoogle}
       RowRightComponent={({ item: account }) => (
-        <StyledRowRightContainer>
-          {account.authFailedAt && (
-            <Status color="red" text="Sync failed" weight="medium" />
-          )}
-          <SettingsAccountsRowDropdownMenu account={account} />
-        </StyledRowRightContainer>
+        <SettingsAccountsConnectedAccountsRowRightContainer account={account} />
       )}
       hasFooter
       footerButtonLabel="Add account"
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx
new file mode 100644
index 000000000..2d05e3752
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx
@@ -0,0 +1,61 @@
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
+import { Status } from '@/ui/display/status/components/Status';
+import styled from '@emotion/styled';
+import { useMemo } from 'react';
+
+const StyledRowRightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const SettingsAccountsConnectedAccountsRowRightContainer = ({
+  account,
+}: {
+  account: ConnectedAccount;
+}) => {
+  const mCSyncStatus = account.messageChannels[0]?.syncStatus;
+  const cCSyncStatus = account.calendarChannels[0]?.syncStatus;
+
+  const status = useMemo(() => {
+    if (mCSyncStatus === 'ACTIVE' && cCSyncStatus === 'ACTIVE') {
+      return 'Synced';
+    } else if (mCSyncStatus === 'NOT_SYNCED' && cCSyncStatus === 'NOT_SYNCED') {
+      return 'Not synced';
+    } else if (mCSyncStatus === 'ONGOING' || cCSyncStatus === 'ONGOING') {
+      return 'Importing';
+    } else if (
+      mCSyncStatus === 'FAILED' ||
+      mCSyncStatus === 'FAILED_INSUFFICIENT_PERMISSIONS' ||
+      cCSyncStatus === 'FAILED' ||
+      cCSyncStatus === 'FAILED_INSUFFICIENT_PERMISSIONS'
+    ) {
+      return 'Failed';
+    }
+    return '';
+  }, [mCSyncStatus, cCSyncStatus]);
+
+  return (
+    <StyledRowRightContainer>
+      {status === 'Failed' && (
+        <Status color="red" text="Sync failed" weight="medium" />
+      )}
+      {status === 'Synced' && (
+        <Status color="green" text="Synced" weight="medium" />
+      )}
+      {status === 'Not synced' && (
+        <Status color="orange" text="Not synced" weight="medium" />
+      )}
+      {status === 'Importing' && (
+        <Status
+          color="turquoise"
+          text="Importing"
+          weight="medium"
+          isLoaderVisible
+        />
+      )}
+      <SettingsAccountsRowDropdownMenu account={account} />
+    </StyledRowRightContainer>
+  );
+};