diff --git a/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts b/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts index 9a5aa1c081a4..e148338d90e4 100644 --- a/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts +++ b/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts @@ -6,7 +6,7 @@ export enum CoreObjectNameSingular { Blocklist = 'blocklist', Comment = 'comment', Company = 'company', - ConenctedAccount = 'conenctedAccount', + ConnectedAccount = 'connectedAccount', Favorite = 'favorite', Message = 'message', MessageChannel = 'messageChannel', diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx new file mode 100644 index 000000000000..fa2165822883 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx @@ -0,0 +1,38 @@ +import { useRecoilValue } from 'recoil'; + +import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; +import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; +import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard'; +import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard'; +import { H2Title } from '@/ui/display/typography/components/H2Title'; +import { Section } from '@/ui/layout/section/components/Section'; + +export const SettingsAccountsCalendarSettingsSection = () => { + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + + const { records: accounts, loading } = useFindManyRecords({ + objectNameSingular: CoreObjectNameSingular.ConnectedAccount, + filter: { + accountOwnerId: { + eq: currentWorkspaceMember?.id, + }, + }, + }); + + return ( +
+ + + {loading ? ( + + ) : !accounts.length ? ( + + ) : null} +
+ ); +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCardMedia.tsx similarity index 88% rename from packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx rename to packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCardMedia.tsx index cbf7f28d4f1b..69f4e60e05e2 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCardMedia.tsx @@ -14,4 +14,4 @@ const StyledCardMedia = styled.div` width: ${({ theme }) => theme.spacing(6)}; `; -export { StyledCardMedia as SettingsAccountsInboxSettingsCardMedia }; +export { StyledCardMedia as SettingsAccountsCardMedia }; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx index 7b9863e66a95..50db7192fb23 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx @@ -4,7 +4,7 @@ import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Section } from '@/ui/layout/section/components/Section'; import { SettingsAccountsCard } from './SettingsAccountsCard'; -import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard'; +import { SettingsAccountsListEmptyStateCard } from './SettingsAccountsListEmptyStateCard'; export const SettingsAccountsConnectedAccountsSection = ({ accounts, @@ -30,7 +30,7 @@ export const SettingsAccountsConnectedAccountsSection = ({ onAccountRemove={handleAccountRemove} /> ) : ( - + )} ); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx index 198e474203dc..f5a4aa93afb3 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx @@ -3,20 +3,20 @@ import { useRecoilValue } from 'recoil'; import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; import { MessageChannel } from '@/accounts/types/MessageChannel'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; -import { SettingsAccountEmailsSkeletonCard } from '@/settings/accounts/components/SettingsAccountEmailsSkeletonCard'; +import { SettingsAccountsEmailsCard } from '@/settings/accounts/components/SettingsAccountsEmailsCard'; +import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard'; +import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard'; import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Section } from '@/ui/layout/section/components/Section'; -import { SettingsAccountsEmailsCard } from './SettingsAccountsEmailsCard'; -import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard'; - export const SettingsAccountsEmailsSyncSection = () => { const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); const { records: accounts, loading: accountsLoading } = useFindManyRecords({ - objectNameSingular: 'connectedAccount', + objectNameSingular: CoreObjectNameSingular.ConnectedAccount, filter: { accountOwnerId: { eq: currentWorkspaceMember?.id, @@ -51,13 +51,13 @@ export const SettingsAccountsEmailsSyncSection = () => { /> {loading ? ( - + ) : accounts.length ? ( ) : ( - + )} ); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx index 176b3efc5da9..15bc3a7406f5 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { MessageChannel } from '@/accounts/types/MessageChannel'; -import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia'; +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'; @@ -42,9 +42,9 @@ export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({ /> - + - + Auto-creation { +}: SettingsAccountsListEmptyStateCardProps) => { const [generateTransientToken] = useGenerateTransientTokenMutation(); const handleGmailLogin = useCallback(async () => { diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx similarity index 75% rename from packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx rename to packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx index b30fbbec56d6..2044d629a416 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx @@ -7,4 +7,4 @@ const StyledCard = styled(Card)` height: 40px; `; -export const SettingsAccountEmailsSkeletonCard = () => ; +export { StyledCard as SettingsAccountsListSkeletonCard }; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx similarity index 58% rename from packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx rename to packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx index 83a2f0eb0f8d..4ac658acc792 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx @@ -1,8 +1,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { MessageChannel } from '@/accounts/types/MessageChannel'; -import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia'; +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'; @@ -23,33 +22,34 @@ const StyledTitle = styled.span` margin-right: auto; `; -type SettingsAccountsInboxSettingsSynchronizationSectionProps = { - messageChannel: MessageChannel; +type SettingsAccountsSynchronizationSectionProps = { + cardTitle: string; + description: string; + isSynced: boolean; onToggle: (value: boolean) => void; }; -export const SettingsAccountsInboxSettingsSynchronizationSection = ({ - messageChannel, +export const SettingsAccountsSynchronizationSection = ({ + cardTitle, + description, + isSynced, onToggle, -}: SettingsAccountsInboxSettingsSynchronizationSectionProps) => { +}: SettingsAccountsSynchronizationSectionProps) => { const theme = useTheme(); return (
- + - + - - Sync emails - + + {cardTitle} +
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx index 9546c65201e9..06e07a063852 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx @@ -1,8 +1,7 @@ +import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard'; import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Section } from '@/ui/layout/section/components/Section'; -import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard'; - export const SettingsNewAccountSection = () => { return (
@@ -10,7 +9,7 @@ export const SettingsNewAccountSection = () => { title="New account" description="Connect a new account to your workspace" /> - +
); }; diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx index d9f90f1addbf..d77a9d6b989a 100644 --- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx +++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx @@ -1,3 +1,4 @@ +import { SettingsAccountsCalendarSettingsSection } from '@/settings/accounts/components/SettingsAccountsCalendarSettingsSection'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { SettingsPath } from '@/types/SettingsPath'; @@ -17,6 +18,7 @@ export const SettingsAccountsCalendars = () => ( { children: 'Calendars' }, ]} /> + ); diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx index 7edcaa8239d3..2c40e1ee1262 100644 --- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx +++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx @@ -1,5 +1,6 @@ import { useParams } from 'react-router-dom'; +import { SettingsAccountsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsSynchronizationSection'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { SettingsPath } from '@/types/SettingsPath'; @@ -30,6 +31,12 @@ 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 6260dbeee13a..7fd94839ff1b 100644 --- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx +++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx @@ -63,8 +63,10 @@ export const SettingsAccountsEmailsInboxSettings = () => { ]} /> {/* TODO : discuss the desired sync behaviour */} - {/* */}