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>
);
};