5622 add a syncemail onboarding step (#5689)

- add sync email onboarding step
- refactor calendar and email visibility enums
- add a new table `keyValuePair` in `core` schema
- add a new resolved boolean field `skipSyncEmail` in current user




https://github.com/twentyhq/twenty/assets/29927851/de791475-5bfe-47f9-8e90-76c349fba56f

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import { CalendarChannelVisibility } from '@/accounts/types/CalendarChannel';
 import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard';
 import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia';
+import { CalendarChannelVisibility } from '~/generated/graphql';
 
 type SettingsAccountsEventVisibilitySettingsCardProps = {
   onChange: (nextValue: CalendarChannelVisibility) => void;
@@ -17,7 +17,7 @@ const eventSettingsVisibilityOptions = [
   {
     title: 'Everything',
     description: 'The whole event details will be shared with your team.',
-    value: CalendarChannelVisibility.Everything,
+    value: CalendarChannelVisibility.ShareEverything,
     cardMedia: <StyledCardMedia subject="active" body="active" />,
   },
   {
@@ -30,7 +30,7 @@ const eventSettingsVisibilityOptions = [
 
 export const SettingsAccountsEventVisibilitySettingsCard = ({
   onChange,
-  value = CalendarChannelVisibility.Everything,
+  value = CalendarChannelVisibility.ShareEverything,
 }: SettingsAccountsEventVisibilitySettingsCardProps) => (
   <SettingsAccountsRadioSettingsCard
     options={eventSettingsVisibilityOptions}

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard.tsx

@@ -1,22 +1,17 @@
 import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard';
 import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia';
-
-export enum InboxSettingsVisibilityValue {
-  Everything = 'share_everything',
-  SubjectMetadata = 'subject',
-  Metadata = 'metadata',
-}
+import { MessageChannelVisibility } from '~/generated/graphql';
 
 type SettingsAccountsInboxVisibilitySettingsCardProps = {
-  onChange: (nextValue: InboxSettingsVisibilityValue) => void;
-  value?: InboxSettingsVisibilityValue;
+  onChange: (nextValue: MessageChannelVisibility) => void;
+  value?: MessageChannelVisibility;
 };
 
 const inboxSettingsVisibilityOptions = [
   {
     title: 'Everything',
     description: 'Subject, body and attachments will be shared with your team.',
-    value: InboxSettingsVisibilityValue.Everything,
+    value: MessageChannelVisibility.ShareEverything,
     cardMedia: (
       <SettingsAccountsVisibilitySettingCardMedia
         metadata="active"
@@ -28,7 +23,7 @@ const inboxSettingsVisibilityOptions = [
   {
     title: 'Subject and metadata',
     description: 'Subject and metadata will be shared with your team.',
-    value: InboxSettingsVisibilityValue.SubjectMetadata,
+    value: MessageChannelVisibility.Subject,
     cardMedia: (
       <SettingsAccountsVisibilitySettingCardMedia
         metadata="active"
@@ -40,7 +35,7 @@ const inboxSettingsVisibilityOptions = [
   {
     title: 'Metadata',
     description: 'Timestamp and participants will be shared with your team.',
-    value: InboxSettingsVisibilityValue.Metadata,
+    value: MessageChannelVisibility.Metadata,
     cardMedia: (
       <SettingsAccountsVisibilitySettingCardMedia
         metadata="active"
@@ -53,7 +48,7 @@ const inboxSettingsVisibilityOptions = [
 
 export const SettingsAccountsInboxVisibilitySettingsCard = ({
   onChange,
-  value = InboxSettingsVisibilityValue.Everything,
+  value = MessageChannelVisibility.ShareEverything,
 }: SettingsAccountsInboxVisibilitySettingsCardProps) => (
   <SettingsAccountsRadioSettingsCard
     options={inboxSettingsVisibilityOptions}

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx

@@ -27,6 +27,10 @@ export const SettingsAccountsListEmptyStateCard = ({
 }: SettingsAccountsListEmptyStateCardProps) => {
   const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();
 
+  const handleOnClick = async () => {
+    await triggerGoogleApisOAuth();
+  };
+
   return (
     <Card>
       <StyledHeader>{label || 'No connected account'}</StyledHeader>
@@ -35,7 +39,7 @@ export const SettingsAccountsListEmptyStateCard = ({
           Icon={IconGoogle}
           title="Connect with Google"
           variant="secondary"
-          onClick={triggerGoogleApisOAuth}
+          onClick={handleOnClick}
         />
       </StyledBody>
     </Card>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx

@@ -50,7 +50,7 @@ export const SettingsAccountsRadioSettingsCard = <
   options,
   value,
 }: SettingsAccountsRadioSettingsCardProps<Option>) => (
-  <Card>
+  <Card rounded>
     {options.map((option, index) => (
       <StyledCardContent
         key={option.value}

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx

@@ -36,7 +36,7 @@ export const SettingsAccountsToggleSettingCard = ({
   onToggle,
   title,
 }: SettingsAccountsToggleSettingCardProps) => (
-  <Card>
+  <Card rounded>
     <StyledCardContent onClick={() => onToggle(!value)}>
       {cardMedia}
       <StyledTitle>{title}</StyledTitle>

packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerGoogleApisOAuth.ts

@@ -1,21 +1,47 @@
 import { useCallback } from 'react';
 
+import { AppPath } from '@/types/AppPath';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { useGenerateTransientTokenMutation } from '~/generated/graphql';
+import {
+  CalendarChannelVisibility,
+  MessageChannelVisibility,
+  useGenerateTransientTokenMutation,
+} from '~/generated/graphql';
 
 export const useTriggerGoogleApisOAuth = () => {
   const [generateTransientToken] = useGenerateTransientTokenMutation();
 
-  const triggerGoogleApisOAuth = useCallback(async () => {
-    const authServerUrl = REACT_APP_SERVER_BASE_URL;
+  const triggerGoogleApisOAuth = useCallback(
+    async (
+      redirectLocation?: AppPath,
+      messageVisibility?: MessageChannelVisibility,
+      calendarVisibility?: CalendarChannelVisibility,
+    ) => {
+      const authServerUrl = REACT_APP_SERVER_BASE_URL;
 
-    const transientToken = await generateTransientToken();
+      const transientToken = await generateTransientToken();
 
-    const token =
-      transientToken.data?.generateTransientToken.transientToken.token;
+      const token =
+        transientToken.data?.generateTransientToken.transientToken.token;
 
-    window.location.href = `${authServerUrl}/auth/google-apis?transientToken=${token}`;
-  }, [generateTransientToken]);
+      let params = `transientToken=${token}`;
+
+      params += redirectLocation
+        ? `&redirectLocation=${encodeURIComponent(redirectLocation)}`
+        : '';
+
+      params += calendarVisibility
+        ? `&calendarVisibility=${calendarVisibility}`
+        : '';
+
+      params += messageVisibility
+        ? `&messageVisibility=${messageVisibility}`
+        : '';
+
+      window.location.href = `${authServerUrl}/auth/google-apis?${params}`;
+    },
+    [generateTransientToken],
+  );
 
   return { triggerGoogleApisOAuth };
 };