Add new Settings to front-end (#6154)

<img width="1512" alt="image"
src="https://github.com/twentyhq/twenty/assets/12035771/cfcc6ac9-feeb-4d91-aa68-bd0119780d6d">

packages/twenty-front/src/modules/accounts/types/MessageChannel.ts

@@ -1,9 +1,17 @@
 import { MessageChannelVisibility } from '~/generated/graphql';
 
+export enum MessageChannelContactAutoCreationPolicy {
+  SENT_AND_RECEIVED = 'SENT_AND_RECEIVED',
+  SENT = 'SENT',
+  NONE = 'NONE',
+}
+
 export type MessageChannel = {
   id: string;
   handle: string;
-  isContactAutoCreationEnabled?: boolean;
+  contactAutoCreationPolicy?: MessageChannelContactAutoCreationPolicy;
+  excludeNonProfessionalEmails: boolean;
+  excludeGroupEmails: boolean;
   isSyncEnabled: boolean;
   visibility: MessageChannelVisibility;
   syncStatus: string;

packages/twenty-front/src/modules/onboarding/components/onboardingSyncEmailsOptions.tsx

@@ -1,9 +1,9 @@
+import { SettingsAccountsVisibilityIcon } from '@/settings/accounts/components/SettingsAccountsVisibilityIcon';
 import styled from '@emotion/styled';
 
-import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia';
 import { MessageChannelVisibility } from '~/generated/graphql';
 
-const StyledCardMedia = styled(SettingsAccountsVisibilitySettingCardMedia)`
+const StyledCardMedia = styled(SettingsAccountsVisibilityIcon)`
   width: ${({ theme }) => theme.spacing(10)};
 `;
 

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

@@ -2,18 +2,12 @@ import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { H2Title, IconRefresh, IconUser } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
-const StyledCardMedia = styled(SettingsAccountsCardMedia)`
-  height: ${({ theme }) => theme.spacing(6)};
-`;
-
 const StyledDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -31,8 +25,6 @@ type SettingsAccountsCalendarChannelDetailsProps = {
 export const SettingsAccountsCalendarChannelDetails = ({
   calendarChannel,
 }: SettingsAccountsCalendarChannelDetailsProps) => {
-  const theme = useTheme();
-
   const { updateOneRecord } = useUpdateOneRecord<CalendarChannel>({
     objectNameSingular: CoreObjectNameSingular.CalendarChannel,
   });
@@ -55,14 +47,6 @@ export const SettingsAccountsCalendarChannelDetails = ({
     });
   };
 
-  const handleSyncEventsToggle = (value: boolean) => {
-    updateOneRecord({
-      idToUpdate: calendarChannel.id,
-      updateOneRecordInput: {
-        isSyncEnabled: value,
-      },
-    });
-  };
   return (
     <StyledDetailsContainer>
       <Section>
@@ -81,36 +65,14 @@ export const SettingsAccountsCalendarChannelDetails = ({
           description="Automatically create contacts for people you've participated in an event with."
         />
         <SettingsAccountsToggleSettingCard
-          cardMedia={
+          parameters={[
-            <StyledCardMedia>
+            {
-              <IconUser
+              value: !!calendarChannel.isContactAutoCreationEnabled,
-                size={theme.icon.size.sm}
+              title: 'Auto-creation',
-                stroke={theme.icon.stroke.lg}
+              description: 'Automatically create contacts for people.',
-              />
+              onToggle: handleContactAutoCreationToggle,
-            </StyledCardMedia>
+            },
-          }
+          ]}
-          title="Auto-creation"
-          value={!!calendarChannel.isContactAutoCreationEnabled}
-          onToggle={handleContactAutoCreationToggle}
-        />
-      </Section>
-      <Section>
-        <H2Title
-          title="Synchronization"
-          description="Past and future calendar events will automatically be synced to this workspace"
-        />
-        <SettingsAccountsToggleSettingCard
-          cardMedia={
-            <StyledCardMedia>
-              <IconRefresh
-                size={theme.icon.size.sm}
-                stroke={theme.icon.stroke.lg}
-              />
-            </StyledCardMedia>
-          }
-          title="Sync events"
-          value={!!calendarChannel.isSyncEnabled}
-          onToggle={handleSyncEventsToggle}
         />
       </Section>
     </StyledDetailsContainer>

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

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard';
-import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia';
+import { SettingsAccountsVisibilityIcon } from '@/settings/accounts/components/SettingsAccountsVisibilityIcon';
 import { CalendarChannelVisibility } from '~/generated/graphql';
 
 type SettingsAccountsEventVisibilitySettingsCardProps = {
@@ -9,7 +9,7 @@ type SettingsAccountsEventVisibilitySettingsCardProps = {
   value?: CalendarChannelVisibility;
 };
 
-const StyledCardMedia = styled(SettingsAccountsVisibilitySettingCardMedia)`
+const StyledCardMedia = styled(SettingsAccountsVisibilityIcon)`
   height: ${({ theme }) => theme.spacing(6)};
 `;
 

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

@@ -0,0 +1,47 @@
+import { MessageChannelContactAutoCreationPolicy } from '@/accounts/types/MessageChannel';
+import { SettingsAccountsMessageAutoCreationIcon } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon';
+import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard';
+
+type SettingsAccountsMessageAutoCreationCardProps = {
+  onChange: (nextValue: MessageChannelContactAutoCreationPolicy) => void;
+  value?: MessageChannelContactAutoCreationPolicy;
+};
+
+const autoCreationOptions = [
+  {
+    title: 'Send and Received',
+    description: 'People I’ve sent emails to and received emails from.',
+    value: MessageChannelContactAutoCreationPolicy.SENT_AND_RECEIVED,
+    cardMedia: (
+      <SettingsAccountsMessageAutoCreationIcon isSentActive isReceivedActive />
+    ),
+  },
+  {
+    title: 'Sent',
+    description: 'People I’ve sent emails to.',
+    value: MessageChannelContactAutoCreationPolicy.SENT,
+    cardMedia: <SettingsAccountsMessageAutoCreationIcon isSentActive />,
+  },
+  {
+    title: 'None',
+    description: 'Don’t auto-create contacts.',
+    value: MessageChannelContactAutoCreationPolicy.NONE,
+    cardMedia: (
+      <SettingsAccountsMessageAutoCreationIcon
+        isSentActive={false}
+        isReceivedActive={false}
+      />
+    ),
+  },
+];
+
+export const SettingsAccountsMessageAutoCreationCard = ({
+  onChange,
+  value = MessageChannelContactAutoCreationPolicy.SENT_AND_RECEIVED,
+}: SettingsAccountsMessageAutoCreationCardProps) => (
+  <SettingsAccountsRadioSettingsCard
+    options={autoCreationOptions}
+    value={value}
+    onChange={onChange}
+  />
+);

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

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
+
+type SettingsAccountsMessageAutoCreationIconProps = {
+  className?: string;
+  isSentActive?: boolean;
+  isReceivedActive?: boolean;
+};
+
+const StyledIconContainer = styled(SettingsAccountsCardMedia)`
+  align-items: stretch;
+`;
+
+const StyledDirectionSkeleton = styled.div<{ isActive?: boolean }>`
+  background-color: ${({ isActive, theme }) =>
+    isActive ? theme.accent.accent4060 : theme.background.quaternary};
+  border-radius: 1px;
+  height: 24px;
+`;
+
+export const SettingsAccountsMessageAutoCreationIcon = ({
+  className,
+  isSentActive,
+  isReceivedActive,
+}: SettingsAccountsMessageAutoCreationIconProps) => (
+  <StyledIconContainer className={className}>
+    <StyledDirectionSkeleton isActive={isSentActive} />
+    <StyledDirectionSkeleton isActive={isReceivedActive} />
+  </StyledIconContainer>
+);

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

@@ -1,12 +1,14 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { H2Title, IconRefresh, IconUser } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 
-import { MessageChannel } from '@/accounts/types/MessageChannel';
+import {
+  MessageChannel,
+  MessageChannelContactAutoCreationPolicy,
+} from '@/accounts/types/MessageChannel';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
+import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
-import { SettingsAccountsInboxVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard';
+import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { Section } from '@/ui/layout/section/components/Section';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
@@ -14,7 +16,12 @@ import { MessageChannelVisibility } from '~/generated-metadata/graphql';
 type SettingsAccountsMessageChannelDetailsProps = {
   messageChannel: Pick<
     MessageChannel,
-    'id' | 'visibility' | 'isContactAutoCreationEnabled' | 'isSyncEnabled'
+    | 'id'
+    | 'visibility'
+    | 'contactAutoCreationPolicy'
+    | 'excludeNonProfessionalEmails'
+    | 'excludeGroupEmails'
+    | 'isSyncEnabled'
   >;
 };
 
@@ -28,8 +35,6 @@ const StyledDetailsContainer = styled.div`
 export const SettingsAccountsMessageChannelDetails = ({
   messageChannel,
 }: SettingsAccountsMessageChannelDetailsProps) => {
-  const theme = useTheme();
-
   const { updateOneRecord } = useUpdateOneRecord<MessageChannel>({
     objectNameSingular: CoreObjectNameSingular.MessageChannel,
   });
@@ -43,20 +48,31 @@ export const SettingsAccountsMessageChannelDetails = ({
     });
   };
 
-  const handleContactAutoCreationToggle = (value: boolean) => {
+  const handleContactAutoCreationChange = (
+    value: MessageChannelContactAutoCreationPolicy,
+  ) => {
     updateOneRecord({
       idToUpdate: messageChannel.id,
       updateOneRecordInput: {
-        isContactAutoCreationEnabled: value,
+        contactAutoCreationPolicy: value,
       },
     });
   };
 
-  const handleIsSyncEnabledToggle = (value: boolean) => {
+  const handleIsGroupEmailExcludedToggle = (value: boolean) => {
     updateOneRecord({
       idToUpdate: messageChannel.id,
       updateOneRecordInput: {
-        isSyncEnabled: value,
+        excludeGroupEmails: value,
+      },
+    });
+  };
+
+  const handleIsNonProfessionalEmailExcludedToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: messageChannel.id,
+      updateOneRecordInput: {
+        excludeNonProfessionalEmails: value,
       },
     });
   };
@@ -68,7 +84,7 @@ export const SettingsAccountsMessageChannelDetails = ({
           title="Visibility"
           description="Define what will be visible to other users in your workspace"
         />
-        <SettingsAccountsInboxVisibilitySettingsCard
+        <SettingsAccountsMessageVisibilityCard
           value={messageChannel.visibility}
           onChange={handleVisibilityChange}
         />
@@ -76,39 +92,29 @@ export const SettingsAccountsMessageChannelDetails = ({
       <Section>
         <H2Title
           title="Contact auto-creation"
-          description="Automatically create contacts for people you’ve sent emails to"
+          description="Automatically create People records when receiving or sending emails"
         />
-        <SettingsAccountsToggleSettingCard
+        <SettingsAccountsMessageAutoCreationCard
-          cardMedia={
+          value={messageChannel.contactAutoCreationPolicy}
-            <SettingsAccountsCardMedia>
+          onChange={handleContactAutoCreationChange}
-              <IconUser
-                size={theme.icon.size.sm}
-                stroke={theme.icon.stroke.lg}
-              />
-            </SettingsAccountsCardMedia>
-          }
-          title="Auto-creation"
-          value={!!messageChannel.isContactAutoCreationEnabled}
-          onToggle={handleContactAutoCreationToggle}
         />
       </Section>
       <Section>
-        <H2Title
-          title="Synchronization"
-          description="Past and future emails will automatically be synced to this workspace"
-        />
         <SettingsAccountsToggleSettingCard
-          cardMedia={
+          parameters={[
-            <SettingsAccountsCardMedia>
+            {
-              <IconRefresh
+              title: 'Exclude non-professional emails',
-                size={theme.icon.size.sm}
+              description: 'Don’t sync emails from/to Gmail, Outlook...',
-                stroke={theme.icon.stroke.lg}
+              value: !!messageChannel.excludeNonProfessionalEmails,
-              />
+              onToggle: handleIsNonProfessionalEmailExcludedToggle,
-            </SettingsAccountsCardMedia>
+            },
-          }
+            {
-          title="Sync emails"
+              title: 'Exclude group emails',
-          value={!!messageChannel.isSyncEnabled}
+              description: 'Don’t sync emails from team@ support@ noreply@...',
-          onToggle={handleIsSyncEnabledToggle}
+              value: !!messageChannel.excludeGroupEmails,
+              onToggle: handleIsGroupEmailExcludedToggle,
+            },
+          ]}
         />
       </Section>
     </StyledDetailsContainer>

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

@@ -1,8 +1,8 @@
 import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard';
-import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia';
+import { SettingsAccountsVisibilityIcon } from '@/settings/accounts/components/SettingsAccountsVisibilityIcon';
 import { MessageChannelVisibility } from '~/generated/graphql';
 
-type SettingsAccountsInboxVisibilitySettingsCardProps = {
+type SettingsAccountsMessageVisibilityCardProps = {
   onChange: (nextValue: MessageChannelVisibility) => void;
   value?: MessageChannelVisibility;
 };
@@ -13,7 +13,7 @@ const inboxSettingsVisibilityOptions = [
     description: 'Subject, body and attachments will be shared with your team.',
     value: MessageChannelVisibility.ShareEverything,
     cardMedia: (
-      <SettingsAccountsVisibilitySettingCardMedia
+      <SettingsAccountsVisibilityIcon
         metadata="active"
         subject="active"
         body="active"
@@ -25,7 +25,7 @@ const inboxSettingsVisibilityOptions = [
     description: 'Subject and metadata will be shared with your team.',
     value: MessageChannelVisibility.Subject,
     cardMedia: (
-      <SettingsAccountsVisibilitySettingCardMedia
+      <SettingsAccountsVisibilityIcon
         metadata="active"
         subject="active"
         body="inactive"
@@ -37,7 +37,7 @@ const inboxSettingsVisibilityOptions = [
     description: 'Timestamp and participants will be shared with your team.',
     value: MessageChannelVisibility.Metadata,
     cardMedia: (
-      <SettingsAccountsVisibilitySettingCardMedia
+      <SettingsAccountsVisibilityIcon
         metadata="active"
         subject="inactive"
         body="inactive"
@@ -46,10 +46,10 @@ const inboxSettingsVisibilityOptions = [
   },
 ];
 
-export const SettingsAccountsInboxVisibilitySettingsCard = ({
+export const SettingsAccountsMessageVisibilityCard = ({
   onChange,
   value = MessageChannelVisibility.ShareEverything,
-}: SettingsAccountsInboxVisibilitySettingsCardProps) => (
+}: SettingsAccountsMessageVisibilityCardProps) => (
   <SettingsAccountsRadioSettingsCard
     options={inboxSettingsVisibilityOptions}
     value={value}

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

@@ -1,31 +0,0 @@
-import { useGetSyncStatusOptions } from '@/settings/accounts/hooks//useGetSyncStatusOptions';
-import { Status } from '@/ui/display/status/components/Status';
-
-export type SettingsAccountsSynchronizationStatusProps = {
-  syncStatus: string;
-  isSyncEnabled?: boolean;
-};
-
-export const SettingsAccountsSynchronizationStatus = ({
-  syncStatus,
-  isSyncEnabled,
-}: SettingsAccountsSynchronizationStatusProps) => {
-  const syncStatusOptions = useGetSyncStatusOptions();
-
-  const syncStatusOption = syncStatusOptions?.find(
-    (option) => option.value === syncStatus,
-  );
-
-  if (!isSyncEnabled) {
-    return <Status color="gray" text="Not synced" weight="medium" />;
-  }
-
-  return (
-    <Status
-      color={syncStatusOption?.color ?? 'gray'}
-      isLoaderVisible={syncStatus === 'ONGOING' || syncStatus === 'PENDING'}
-      text={syncStatusOption?.label ?? 'Not synced'}
-      weight="medium"
-    />
-  );
-};

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

@@ -1,22 +1,24 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
 import { Toggle } from '@/ui/input/components/Toggle';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 
-type SettingsAccountsToggleSettingCardProps = {
+type Parameter = {
-  cardMedia: ReactNode;
   value: boolean;
-  onToggle: (value: boolean) => void;
   title: string;
+  description: string;
+  onToggle: (value: boolean) => void;
+};
+
+type SettingsAccountsToggleSettingCardProps = {
+  parameters: Parameter[];
 };
 
 const StyledCardContent = styled(CardContent)`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};
-  padding: ${({ theme }) => theme.spacing(2, 4)};
   cursor: pointer;
 
   &:hover {
@@ -24,23 +26,37 @@ const StyledCardContent = styled(CardContent)`
   }
 `;
 
-const StyledTitle = styled.span`
+const StyledTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  margin-right: auto;
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledDescription = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
+const StyledToggle = styled(Toggle)`
+  margin-left: auto;
 `;
 
 export const SettingsAccountsToggleSettingCard = ({
-  cardMedia,
+  parameters,
-  value,
-  onToggle,
-  title,
 }: SettingsAccountsToggleSettingCardProps) => (
   <Card rounded>
-    <StyledCardContent onClick={() => onToggle(!value)}>
+    {parameters.map((parameter, index) => (
-      {cardMedia}
+      <StyledCardContent
-      <StyledTitle>{title}</StyledTitle>
+        key={index}
-      <Toggle value={value} onChange={onToggle} />
+        divider={index < parameters.length - 1}
-    </StyledCardContent>
+        onClick={() => parameter.onToggle(!parameter.value)}
+      >
+        <div>
+          <StyledTitle>{parameter.title}</StyledTitle>
+          <StyledDescription>{parameter.description}</StyledDescription>
+        </div>
+        <StyledToggle value={parameter.value} onChange={parameter.onToggle} />
+      </StyledCardContent>
+    ))}
   </Card>
 );

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

@@ -4,7 +4,7 @@ import { SettingsAccountsCardMedia } from '@/settings/accounts/components/Settin
 
 type VisibilityElementState = 'active' | 'inactive';
 
-type SettingsAccountsVisibilitySettingCardMediaProps = {
+type SettingsAccountsVisibilityIconProps = {
   className?: string;
   metadata?: VisibilityElementState;
   subject?: VisibilityElementState;
@@ -31,12 +31,12 @@ const StyledBodySkeleton = styled(StyledSubjectSkeleton)`
   flex: 1 0 auto;
 `;
 
-export const SettingsAccountsVisibilitySettingCardMedia = ({
+export const SettingsAccountsVisibilityIcon = ({
   className,
   metadata,
   subject,
   body,
-}: SettingsAccountsVisibilitySettingCardMediaProps) => (
+}: SettingsAccountsVisibilityIconProps) => (
   <StyledCardMedia className={className}>
     {!!metadata && <StyledMetadataSkeleton isActive={metadata === 'active'} />}
     {!!subject && <StyledSubjectSkeleton isActive={subject === 'active'} />}

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
+import { MessageChannelContactAutoCreationPolicy } from '@/accounts/types/MessageChannel';
 import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails';
 import { MessageChannelVisibility } from '~/generated/graphql';
 
@@ -12,7 +13,9 @@ const meta: Meta<typeof SettingsAccountsMessageChannelDetails> = {
   args: {
     messageChannel: {
       id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6a',
-      isContactAutoCreationEnabled: true,
+      contactAutoCreationPolicy: MessageChannelContactAutoCreationPolicy.SENT,
+      excludeNonProfessionalEmails: true,
+      excludeGroupEmails: false,
       isSyncEnabled: true,
       visibility: MessageChannelVisibility.ShareEverything,
     },