Files
twenty/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
Raphaël Bosi 55a3ee2c3b Modify messaging settings description (#7089)
Modify messaging settings description
2024-09-18 15:07:08 +02:00

123 lines
3.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import styled from '@emotion/styled';
import { H2Title } from 'twenty-ui';
import {
MessageChannel,
MessageChannelContactAutoCreationPolicy,
} from '@/accounts/types/MessageChannel';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
import { Section } from '@/ui/layout/section/components/Section';
import { MessageChannelVisibility } from '~/generated-metadata/graphql';
type SettingsAccountsMessageChannelDetailsProps = {
messageChannel: Pick<
MessageChannel,
| 'id'
| 'visibility'
| 'contactAutoCreationPolicy'
| 'excludeNonProfessionalEmails'
| 'excludeGroupEmails'
| 'isSyncEnabled'
>;
};
const StyledDetailsContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(6)};
`;
export const SettingsAccountsMessageChannelDetails = ({
messageChannel,
}: SettingsAccountsMessageChannelDetailsProps) => {
const { updateOneRecord } = useUpdateOneRecord<MessageChannel>({
objectNameSingular: CoreObjectNameSingular.MessageChannel,
});
const handleVisibilityChange = (value: MessageChannelVisibility) => {
updateOneRecord({
idToUpdate: messageChannel.id,
updateOneRecordInput: {
visibility: value,
},
});
};
const handleContactAutoCreationChange = (
value: MessageChannelContactAutoCreationPolicy,
) => {
updateOneRecord({
idToUpdate: messageChannel.id,
updateOneRecordInput: {
contactAutoCreationPolicy: value,
},
});
};
const handleIsGroupEmailExcludedToggle = (value: boolean) => {
updateOneRecord({
idToUpdate: messageChannel.id,
updateOneRecordInput: {
excludeGroupEmails: value,
},
});
};
const handleIsNonProfessionalEmailExcludedToggle = (value: boolean) => {
updateOneRecord({
idToUpdate: messageChannel.id,
updateOneRecordInput: {
excludeNonProfessionalEmails: value,
},
});
};
return (
<StyledDetailsContainer>
<Section>
<H2Title
title="Visibility"
description="Define what will be visible to other users in your workspace"
/>
<SettingsAccountsMessageVisibilityCard
value={messageChannel.visibility}
onChange={handleVisibilityChange}
/>
</Section>
<Section>
<H2Title
title="Contact auto-creation"
description="Automatically create People records when receiving or sending emails"
/>
<SettingsAccountsMessageAutoCreationCard
value={messageChannel.contactAutoCreationPolicy}
onChange={handleContactAutoCreationChange}
/>
</Section>
<Section>
<SettingsAccountsToggleSettingCard
parameters={[
{
title: 'Exclude non-professional emails',
description:
'Dont create contacts from/to Gmail, Outlook emails',
value: !!messageChannel.excludeNonProfessionalEmails,
onToggle: handleIsNonProfessionalEmailExcludedToggle,
},
{
title: 'Exclude group emails',
description: 'Dont sync emails from team@ support@ noreply@...',
value: !!messageChannel.excludeGroupEmails,
onToggle: handleIsGroupEmailExcludedToggle,
},
]}
/>
</Section>
</StyledDetailsContainer>
);
};