diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx
deleted file mode 100644
index 15bc3a740..000000000
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { MessageChannel } from '@/accounts/types/MessageChannel';
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
-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';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { Section } from '@/ui/layout/section/components/Section';
-
-const StyledCardContent = styled(CardContent)`
- align-items: center;
- display: flex;
- gap: ${({ theme }) => theme.spacing(4)};
- padding: ${({ theme }) => theme.spacing(2, 4)};
-`;
-
-const StyledTitle = styled.span`
- color: ${({ theme }) => theme.font.color.primary};
- font-weight: ${({ theme }) => theme.font.weight.medium};
- margin-right: auto;
-`;
-
-type SettingsAccountsInboxSettingsContactAutoCreateSectionProps = {
- messageChannel: MessageChannel;
- onToggle: (value: boolean) => void;
-};
-
-export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
- messageChannel,
- onToggle,
-}: SettingsAccountsInboxSettingsContactAutoCreateSectionProps) => {
- const theme = useTheme();
-
- return (
-
-
-
-
-
-
-
- Auto-creation
-
-
-
-
- );
-};
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
index dbdcdc456..53d84310d 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentType } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@@ -39,7 +39,7 @@ type SettingsAccountsListCardProps<
isLoading?: boolean;
onRowClick?: (account: Account) => void;
RowIcon?: IconComponent;
- RowRightComponent: ({ account }: { account: Account }) => ReactNode;
+ RowRightComponent: ComponentType<{ account: Account }>;
};
export const SettingsAccountsListCard = <
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx
deleted file mode 100644
index 4ac658acc..000000000
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
-import { IconRefresh } 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';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { Section } from '@/ui/layout/section/components/Section';
-
-const StyledCardContent = styled(CardContent)`
- align-items: center;
- display: flex;
- gap: ${({ theme }) => theme.spacing(4)};
- padding: ${({ theme }) => theme.spacing(2, 4)};
-`;
-
-const StyledTitle = styled.span`
- color: ${({ theme }) => theme.font.color.primary};
- font-weight: ${({ theme }) => theme.font.weight.medium};
- margin-right: auto;
-`;
-
-type SettingsAccountsSynchronizationSectionProps = {
- cardTitle: string;
- description: string;
- isSynced: boolean;
- onToggle: (value: boolean) => void;
-};
-
-export const SettingsAccountsSynchronizationSection = ({
- cardTitle,
- description,
- isSynced,
- onToggle,
-}: SettingsAccountsSynchronizationSectionProps) => {
- const theme = useTheme();
-
- return (
-
-
-
-
-
-
-
- {cardTitle}
-
-
-
-
- );
-};
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx
new file mode 100644
index 000000000..88d9dcaf0
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx
@@ -0,0 +1,49 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+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 = {
+ Icon: IconComponent;
+ isEnabled: boolean;
+ onToggle: (value: boolean) => void;
+ title: string;
+};
+
+const StyledCardContent = styled(CardContent)`
+ align-items: center;
+ display: flex;
+ gap: ${({ theme }) => theme.spacing(4)};
+ padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+const StyledTitle = styled.span`
+ color: ${({ theme }) => theme.font.color.primary};
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+ margin-right: auto;
+`;
+
+export const SettingsAccountsToggleSettingCard = ({
+ Icon,
+ isEnabled,
+ onToggle,
+ title,
+}: SettingsAccountsToggleSettingCardProps) => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
+
+ {title}
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
index 2c40e1ee1..b37537cf0 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
@@ -1,11 +1,13 @@
import { useParams } from 'react-router-dom';
-import { SettingsAccountsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsSynchronizationSection';
+import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
-import { IconSettings } from '@/ui/display/icon';
+import { IconRefresh, IconSettings, IconUser } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
@@ -31,12 +33,30 @@ export const SettingsAccountsCalendarsSettings = () => {
{ children: connectedAccount?.handle || '' },
]}
/>
- {}}
- />
+
+
);
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
index 7fd94839f..d45f8b5a0 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
@@ -2,17 +2,20 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { MessageChannel } from '@/accounts/types/MessageChannel';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
-import { SettingsAccountsInboxSettingsContactAutoCreateSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection';
import {
InboxSettingsVisibilityValue,
SettingsAccountsInboxSettingsVisibilitySection,
} from '@/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection';
+import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { AppPath } from '@/types/AppPath';
-import { IconSettings } from '@/ui/display/icon';
+import { IconSettings, IconUser } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsAccountsEmailsInboxSettings = () => {
@@ -20,19 +23,19 @@ export const SettingsAccountsEmailsInboxSettings = () => {
const { accountUuid: messageChannelId = '' } = useParams();
const { record: messageChannel, loading } = useFindOneRecord({
- objectNameSingular: 'messageChannel',
+ objectNameSingular: CoreObjectNameSingular.MessageChannel,
objectRecordId: messageChannelId,
});
- const { updateOneRecord } = useUpdateOneRecord({
- objectNameSingular: 'messageChannel',
+ const { updateOneRecord } = useUpdateOneRecord({
+ objectNameSingular: CoreObjectNameSingular.MessageChannel,
});
- const handleVisibilityChange = (_value: InboxSettingsVisibilityValue) => {
+ const handleVisibilityChange = (value: InboxSettingsVisibilityValue) => {
updateOneRecord({
idToUpdate: messageChannelId,
updateOneRecordInput: {
- visibility: _value,
+ visibility: value,
},
});
};
@@ -59,24 +62,38 @@ export const SettingsAccountsEmailsInboxSettings = () => {
links={[
{ children: 'Accounts', href: '/settings/accounts' },
{ children: 'Emails', href: '/settings/accounts/emails' },
- { children: messageChannel?.handle || '' },
+ { children: messageChannel.handle || '' },
]}
/>
{/* TODO : discuss the desired sync behaviour */}
- {/* */}
+ {/* */}
-
+
);