admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add Contact Auto-Creation calendar settings (#4132)

Browse Source 
* feat: add Contact Auto-Creation calendar settings

Closes #4065

* fix: fix wrong Section component import

* fix: fix wrong Toggle import
This commit is contained in:
Thaïs
2024-02-22 14:18:05 -03:00
committed by GitHub
parent d5e8844521
commit 292e97a045
6 changed files with 115 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 (
<Section>
<H2Title
title="Contact auto-creation"
description="Automatically create contacts for people you’ve sent emails to"
/>
<Card>
<StyledCardContent>
<SettingsAccountsCardMedia>
<IconUser size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
</SettingsAccountsCardMedia>
<StyledTitle>Auto-creation</StyledTitle>
<Toggle
value={messageChannel.isContactAutoCreationEnabled}
onChange={onToggle}
/>
</StyledCardContent>
</Card>
</Section>
);
};

4
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
View File

@ -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 = <

57
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx
View File

@ -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 (
<Section>
<H2Title title="Synchronization" description={description} />
<Card>
<StyledCardContent>
<SettingsAccountsCardMedia>
<IconRefresh
size={theme.icon.size.sm}
stroke={theme.icon.stroke.lg}
/>
</SettingsAccountsCardMedia>
<StyledTitle>{cardTitle}</StyledTitle>
<Toggle value={isSynced} onChange={onToggle} />
</StyledCardContent>
</Card>
</Section>
);
};

49
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx Normal file
View File

@ -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 (
<Card>
<StyledCardContent>
<SettingsAccountsCardMedia>
<Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
</SettingsAccountsCardMedia>
<StyledTitle>{title}</StyledTitle>
<Toggle value={isEnabled} onChange={onToggle} />
</StyledCardContent>
</Card>
);
};

36
packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
View File

@ -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 || '' },
]}
/>
<SettingsAccountsSynchronizationSection
description="Past and future calendar events will automatically be synced to this workspace"
cardTitle="Sync events"
isSynced={false}
onToggle={() => {}}
/>
<Section>
<H2Title
title="Contact auto-creation"
description="Automatically create contacts for people you've participated in an event with."
/>
<SettingsAccountsToggleSettingCard
Icon={IconUser}
title="Auto-creation"
isEnabled={false}
onToggle={() => {}}
/>
</Section>
<Section>
<H2Title
title="Synchronization"
description="Past and future calendar events will automatically be synced to this workspace"
/>
<SettingsAccountsToggleSettingCard
Icon={IconRefresh}
title="Sync events"
isEnabled={false}
onToggle={() => {}}
/>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);

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

@ -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<MessageChannel>({
objectNameSingular: 'messageChannel',
objectNameSingular: CoreObjectNameSingular.MessageChannel,
objectRecordId: messageChannelId,
});
const { updateOneRecord } = useUpdateOneRecord({
objectNameSingular: 'messageChannel',
const { updateOneRecord } = useUpdateOneRecord<MessageChannel>({
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 */}
{/* <SettingsAccountsSynchronizationSection
description="Past and future emails will automatically be synced to this workspace"
cardTitle="Sync emails"
isSynced={!!messageChannel?.isSynced}
onToggle={handleSynchronizationToggle}
/> */}
{/* <Section>
<H2Title
title="Synchronization"
description="Past and future emails will automatically be synced to this workspace"
/>
<SettingsAccountsSettingCard
Icon={IconRefresh}
title="Sync emails"
isEnabled={!!messageChannel.isSynced}
onToggle={handleSynchronizationToggle}
/>
</Section> */}
<SettingsAccountsInboxSettingsVisibilitySection
value={messageChannel?.visibility}
value={messageChannel.visibility}
onChange={handleVisibilityChange}
/>
<SettingsAccountsInboxSettingsContactAutoCreateSection
messageChannel={messageChannel}
onToggle={handleContactAutoCreationToggle}
/>
<Section>
<H2Title
title="Contact auto-creation"
description="Automatically create contacts for people you’ve sent emails to"
/>
<SettingsAccountsToggleSettingCard
Icon={IconUser}
title="Auto-creation"
isEnabled={!!messageChannel.isContactAutoCreationEnabled}
onToggle={handleContactAutoCreationToggle}
/>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);