Add new Settings to front-end (#6154)

2024-07-08 10:47:55 +02:00
parent 87dc95c594
commit af83879d7a
12 changed files with 193 additions and 151 deletions
--- a/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts
+++ b/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;
--- a/packages/twenty-front/src/modules/onboarding/components/onboardingSyncEmailsOptions.tsx
+++ b/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)};
 `;

--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
+++ b/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={
-            <StyledCardMedia>
-              <IconUser
-                size={theme.icon.size.sm}
-                stroke={theme.icon.stroke.lg}
-              />
-            </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}
+          parameters={[
+            {
+              value: !!calendarChannel.isContactAutoCreationEnabled,
+              title: 'Auto-creation',
+              description: 'Automatically create contacts for people.',
+              onToggle: handleContactAutoCreationToggle,
+            },
+          ]}
        />
      </Section>
    </StyledDetailsContainer>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx
+++ b/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)};
 `;

--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationCard.tsx
+++ b/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}
+  />
+);
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx
+++ b/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>
+);
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
+++ b/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 { SettingsAccountsInboxVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard';
+import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
+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
-          cardMedia={
-            <SettingsAccountsCardMedia>
-              <IconUser
-                size={theme.icon.size.sm}
-                stroke={theme.icon.stroke.lg}
-              />
-            </SettingsAccountsCardMedia>
-          }
-          title="Auto-creation"
-          value={!!messageChannel.isContactAutoCreationEnabled}
-          onToggle={handleContactAutoCreationToggle}
+        <SettingsAccountsMessageAutoCreationCard
+          value={messageChannel.contactAutoCreationPolicy}
+          onChange={handleContactAutoCreationChange}
        />
      </Section>
      <Section>
-        <H2Title
-          title="Synchronization"
-          description="Past and future emails will automatically be synced to this workspace"
-        />
        <SettingsAccountsToggleSettingCard
-          cardMedia={
-            <SettingsAccountsCardMedia>
-              <IconRefresh
-                size={theme.icon.size.sm}
-                stroke={theme.icon.stroke.lg}
-              />
-            </SettingsAccountsCardMedia>
-          }
-          title="Sync emails"
-          value={!!messageChannel.isSyncEnabled}
-          onToggle={handleIsSyncEnabledToggle}
+          parameters={[
+            {
+              title: 'Exclude non-professional emails',
+              description: 'Don’t sync emails from/to Gmail, Outlook...',
+              value: !!messageChannel.excludeNonProfessionalEmails,
+              onToggle: handleIsNonProfessionalEmailExcludedToggle,
+            },
+            {
+              title: 'Exclude group emails',
+              description: 'Don’t sync emails from team@ support@ noreply@...',
+              value: !!messageChannel.excludeGroupEmails,
+              onToggle: handleIsGroupEmailExcludedToggle,
+            },
+          ]}
        />
      </Section>
    </StyledDetailsContainer>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard.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}
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
+++ b/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"
-    />
-  );
-};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx
+++ b/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 = {
-  cardMedia: ReactNode;
+type Parameter = {
  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,
-  value,
-  onToggle,
-  title,
+  parameters,
 }: SettingsAccountsToggleSettingCardProps) => (
  <Card rounded>
-    <StyledCardContent onClick={() => onToggle(!value)}>
-      {cardMedia}
-      <StyledTitle>{title}</StyledTitle>
-      <Toggle value={value} onChange={onToggle} />
-    </StyledCardContent>
+    {parameters.map((parameter, index) => (
+      <StyledCardContent
+        key={index}
+        divider={index < parameters.length - 1}
+        onClick={() => parameter.onToggle(!parameter.value)}
+      >
+        <div>
+          <StyledTitle>{parameter.title}</StyledTitle>
+          <StyledDescription>{parameter.description}</StyledDescription>
+        </div>
+        <StyledToggle value={parameter.value} onChange={parameter.onToggle} />
+      </StyledCardContent>
+    ))}
  </Card>
 );
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia.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'} />}
--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsMessageChannelDetails.stories.tsx
+++ b/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,
    },