signup sync with microsoft (#10008)

We want users to be able to sync their emails with microsoft duting
signup

We also want to respect the env ariables that decide if we allow
messaging and calendar providers.
```
MESSAGING_PROVIDER_GMAIL_ENABLED=false
MESSAGING_PROVIDER_MICROSOFT_ENABLED=false
CALENDAR_PROVIDER_GOOGLE_ENABLED=false
CALENDAR_PROVIDER_MICROSOFT_ENABLED=false
```

# design

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=53729-251492&t=1cwVzB0xFAom9PlM-0

packages/twenty-front/src/pages/onboarding/SyncEmails.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { ActionLink, IconGoogle, MainButton } from 'twenty-ui';
+import { ActionLink, IconGoogle, IconMicrosoft, MainButton } from 'twenty-ui';
 
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
@@ -13,8 +13,13 @@ import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboard
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
+import { isGoogleCalendarEnabledState } from '@/client-config/states/isGoogleCalendarEnabledState';
+import { isGoogleMessagingEnabledState } from '@/client-config/states/isGoogleMessagingEnabledState';
+import { isMicrosoftCalendarEnabledState } from '@/client-config/states/isMicrosoftCalendarEnabledState';
+import { isMicrosoftMessagingEnabledState } from '@/client-config/states/isMicrosoftMessagingEnabledState';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 import { AppPath } from '@/types/AppPath';
+import { ConnectedAccountProvider } from 'twenty-shared';
 import {
   CalendarChannelVisibility,
   MessageChannelVisibility,
@@ -34,6 +39,13 @@ const StyledActionLinkContainer = styled.div`
   display: flex;
   flex-direction: row;
   margin: ${({ theme }) => theme.spacing(3)} 0 0;
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledProviderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
 `;
 
 export const SyncEmails = () => {
@@ -47,13 +59,13 @@ export const SyncEmails = () => {
   const [skipSyncEmailOnboardingStatusMutation] =
     useSkipSyncEmailOnboardingStepMutation();
 
-  const handleButtonClick = async () => {
+  const handleButtonClick = async (provider: ConnectedAccountProvider) => {
     const calendarChannelVisibility =
       visibility === MessageChannelVisibility.SHARE_EVERYTHING
         ? CalendarChannelVisibility.SHARE_EVERYTHING
         : CalendarChannelVisibility.METADATA;
 
-    await triggerApisOAuth('google', {
+    await triggerApisOAuth(provider, {
       redirectLocation: AppPath.Index,
       messageVisibility: visibility,
       calendarVisibility: calendarChannelVisibility,
@@ -65,6 +77,24 @@ export const SyncEmails = () => {
     setNextOnboardingStatus();
   };
 
+  const isGoogleMessagingEnabled = useRecoilValue(
+    isGoogleMessagingEnabledState,
+  );
+  const isMicrosoftMessagingEnabled = useRecoilValue(
+    isMicrosoftMessagingEnabledState,
+  );
+
+  const isGoogleCalendarEnabled = useRecoilValue(isGoogleCalendarEnabledState);
+
+  const isMicrosoftCalendarEnabled = useRecoilValue(
+    isMicrosoftCalendarEnabledState,
+  );
+
+  const isGoogleProviderEnabled =
+    isGoogleMessagingEnabled || isGoogleCalendarEnabled;
+  const isMicrosoftProviderEnabled =
+    isMicrosoftMessagingEnabled || isMicrosoftCalendarEnabled;
+
   useScopedHotkeys(
     [Key.Enter],
     async () => {
@@ -90,12 +120,33 @@ export const SyncEmails = () => {
           onChange={setVisibility}
         />
       </StyledSyncEmailsContainer>
-      <MainButton
+      <StyledProviderContainer>
-        title="Sync with Google"
+        {isGoogleProviderEnabled && (
-        onClick={handleButtonClick}
+          <MainButton
-        width={200}
+            title="Sync with Google"
-        Icon={() => <IconGoogle size={theme.icon.size.sm} />}
+            onClick={() => handleButtonClick(ConnectedAccountProvider.GOOGLE)}
-      />
+            width={200}
+            Icon={() => <IconGoogle size={theme.icon.size.sm} />}
+          />
+        )}
+        {isMicrosoftProviderEnabled && (
+          <MainButton
+            title="Sync with Outlook"
+            onClick={() =>
+              handleButtonClick(ConnectedAccountProvider.MICROSOFT)
+            }
+            width={200}
+            Icon={() => <IconMicrosoft size={theme.icon.size.sm} />}
+          />
+        )}
+        {!isMicrosoftProviderEnabled && !isGoogleProviderEnabled && (
+          <MainButton
+            title="Continue"
+            onClick={continueWithoutSync}
+            width={144}
+          />
+        )}
+      </StyledProviderContainer>
       <StyledActionLinkContainer>
         <ActionLink onClick={continueWithoutSync}>
           Continue without sync