3889 activate settingsaccountsemailsinboxsettings (#3962)

* update email visibility in settings

* improve styling

* Add contact auto creation toggle to inbox settings

* re
move soonpill

* update Icon

* create job

* Add logic to create contacts and companies for message participants without personId and workspaceMemberId

* add listener

* wip

* wip

* refactoring

* improve structure

* Add isContactAutoCreationEnabled method to MessageChannelService

* wip

* wip

* clean

* add job

* fix bug

* contact creation is working

* wip

* working

* improve code

* improve typing

* resolve conflicts

* fix

* create company repository

* move util

* wip

* fix

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

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
-import { IconSend } from '@/ui/display/icon';
+import { IconUser } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Toggle } from '@/ui/input/components/Toggle';
 import { Card } from '@/ui/layout/card/components/Card';
@@ -43,7 +43,7 @@ export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
       <Card>
         <StyledCardContent>
           <SettingsAccountsInboxSettingsCardMedia>
-            <IconSend size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
+            <IconUser size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
           </SettingsAccountsInboxSettingsCardMedia>
           <StyledTitle>Auto-creation</StyledTitle>
           <Toggle

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

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { SoonPill } from 'tsup.ui.index';
 
 import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -23,7 +22,11 @@ const StyledCardContent = styled(CardContent)`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};
-  opacity: 0.56;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.lighter};
+  }
 `;
 
 const StyledCardMedia = styled(SettingsAccountsInboxSettingsCardMedia)`
@@ -61,16 +64,6 @@ const StyledRadio = styled(Radio)`
   margin-left: auto;
 `;
 
-const StyledSoonPill = styled(SoonPill)`
-  position: absolute;
-  right: 0;
-  top: 0;
-`;
-
-const StyledSection = styled(Section)`
-  position: relative;
-`;
-
 const inboxSettingsVisibilityOptions = [
   {
     title: 'Everything',
@@ -108,12 +101,11 @@ export const SettingsAccountsInboxSettingsVisibilitySection = ({
   onChange,
   value = InboxSettingsVisibilityValue.Everything,
 }: SettingsAccountsInboxSettingsVisibilitySectionProps) => (
-  <StyledSection>
+  <Section>
     <H2Title
       title="Email visibility"
       description="Define what will be visible to other users in your workspace"
     />
-    <StyledSoonPill />
     <Card>
       {inboxSettingsVisibilityOptions.map(
         (
@@ -123,6 +115,7 @@ export const SettingsAccountsInboxSettingsVisibilitySection = ({
           <StyledCardContent
             key={optionValue}
             divider={index < inboxSettingsVisibilityOptions.length - 1}
+            onClick={() => onChange(optionValue)}
           >
             <StyledCardMedia>
               <StyledMetadataSkeleton isActive={visibleElements.metadata} />
@@ -137,11 +130,10 @@ export const SettingsAccountsInboxSettingsVisibilitySection = ({
               value={optionValue}
               onCheckedChange={() => onChange(optionValue)}
               checked={value === optionValue}
-              disabled={true}
             />
           </StyledCardContent>
         ),
       )}
     </Card>
-  </StyledSection>
+  </Section>
 );

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { SettingsAccountsInboxSettingsContactAutoCreateSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection';
 import {
   InboxSettingsVisibilityValue,
   SettingsAccountsInboxSettingsVisibilitySection,
@@ -36,6 +37,15 @@ export const SettingsAccountsEmailsInboxSettings = () => {
     });
   };
 
+  const handleContactAutoCreationToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: messageChannelId,
+      updateOneRecordInput: {
+        isContactAutoCreationEnabled: value,
+      },
+    });
+  };
+
   useEffect(() => {
     if (!loading && !messageChannel) navigate(AppPath.NotFound);
   }, [loading, messageChannel, navigate]);
@@ -61,11 +71,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
           value={messageChannel?.visibility}
           onChange={handleVisibilityChange}
         />
-        {/* TODO : Add this section when the backend will be ready to auto create contacts */}
-        {/* <SettingsAccountsInboxSettingsContactAutoCreateSection
+        <SettingsAccountsInboxSettingsContactAutoCreateSection
           messageChannel={messageChannel}
           onToggle={handleContactAutoCreationToggle}
-        /> */}
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );