Skip to content

Commit

Permalink
feat: add Contact Auto-Creation calendar settings (twentyhq#4132)
Browse files Browse the repository at this point in the history 
* feat: add Contact Auto-Creation calendar settings

Closes twentyhq#4065

* fix: fix wrong Section component import

* fix: fix wrong Toggle import
  • Loading branch information
@thaisguigon
thaisguigon authored Feb 22, 2024
1 parent d5e8844 commit 292e97a
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 143 deletions.
57 changes: 0 additions & 57 deletions .../settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx
View file

This file was deleted.

4 changes: 2 additions & 2 deletions packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 = <
Expand Down
57 changes: 0 additions & 57 deletions ...front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx
View file

This file was deleted.

49 changes: 49 additions & 0 deletions ...enty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 28 additions & 8 deletions packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>
);
Expand Down
55 changes: 36 additions & 19 deletions packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,40 @@ 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 = () => {
const navigate = useNavigate();
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,
},
});
};
Expand All @@ -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>
);
Expand Down

0 comments on commit 292e97a

Please sign in to comment.