From af83879d7a25fa656eef0bb2583b9eee14def4ee Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 8 Jul 2024 10:47:55 +0200 Subject: [PATCH] Add new Settings to front-end (#6154) image --- .../modules/accounts/types/MessageChannel.ts | 10 ++- .../onboardingSyncEmailsOptions.tsx | 4 +- ...SettingsAccountsCalendarChannelDetails.tsx | 56 ++---------- ...AccountsCalendarVisibilitySettingsCard.tsx | 4 +- ...ettingsAccountsMessageAutoCreationCard.tsx | 47 ++++++++++ ...ettingsAccountsMessageAutoCreationIcon.tsx | 31 +++++++ .../SettingsAccountsMessageChannelDetails.tsx | 88 ++++++++++--------- ...SettingsAccountsMessageVisibilityCard.tsx} | 14 +-- .../SettingsAccountsSynchronizationStatus.tsx | 31 ------- .../SettingsAccountsToggleSettingCard.tsx | 48 ++++++---- ...tsx => SettingsAccountsVisibilityIcon.tsx} | 6 +- ...sAccountsMessageChannelDetails.stories.tsx | 5 +- 12 files changed, 193 insertions(+), 151 deletions(-) create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationCard.tsx create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx rename packages/twenty-front/src/modules/settings/accounts/components/{SettingsAccountsInboxVisibilitySettingsCard.tsx => SettingsAccountsMessageVisibilityCard.tsx} (74%) delete mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx rename packages/twenty-front/src/modules/settings/accounts/components/{SettingsAccountsVisibilitySettingCardMedia.tsx => SettingsAccountsVisibilityIcon.tsx} (87%) diff --git a/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts b/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts index b875854f1..33df519b4 100644 --- a/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts +++ b/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts @@ -1,9 +1,17 @@ import { MessageChannelVisibility } from '~/generated/graphql'; +export enum MessageChannelContactAutoCreationPolicy { + SENT_AND_RECEIVED = 'SENT_AND_RECEIVED', + SENT = 'SENT', + NONE = 'NONE', +} + export type MessageChannel = { id: string; handle: string; - isContactAutoCreationEnabled?: boolean; + contactAutoCreationPolicy?: MessageChannelContactAutoCreationPolicy; + excludeNonProfessionalEmails: boolean; + excludeGroupEmails: boolean; isSyncEnabled: boolean; visibility: MessageChannelVisibility; syncStatus: string; diff --git a/packages/twenty-front/src/modules/onboarding/components/onboardingSyncEmailsOptions.tsx b/packages/twenty-front/src/modules/onboarding/components/onboardingSyncEmailsOptions.tsx index 71e53d472..121408787 100644 --- a/packages/twenty-front/src/modules/onboarding/components/onboardingSyncEmailsOptions.tsx +++ b/packages/twenty-front/src/modules/onboarding/components/onboardingSyncEmailsOptions.tsx @@ -1,9 +1,9 @@ +import { SettingsAccountsVisibilityIcon } from '@/settings/accounts/components/SettingsAccountsVisibilityIcon'; import styled from '@emotion/styled'; -import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia'; import { MessageChannelVisibility } from '~/generated/graphql'; -const StyledCardMedia = styled(SettingsAccountsVisibilitySettingCardMedia)` +const StyledCardMedia = styled(SettingsAccountsVisibilityIcon)` width: ${({ theme }) => theme.spacing(10)}; `; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx index 5ea723016..6cd442b61 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx @@ -2,18 +2,12 @@ import { CalendarChannel } from '@/accounts/types/CalendarChannel'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard'; -import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia'; import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard'; -import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { Section } from '@react-email/components'; -import { H2Title, IconRefresh, IconUser } from 'twenty-ui'; +import { H2Title } from 'twenty-ui'; import { CalendarChannelVisibility } from '~/generated-metadata/graphql'; -const StyledCardMedia = styled(SettingsAccountsCardMedia)` - height: ${({ theme }) => theme.spacing(6)}; -`; - const StyledDetailsContainer = styled.div` display: flex; flex-direction: column; @@ -31,8 +25,6 @@ type SettingsAccountsCalendarChannelDetailsProps = { export const SettingsAccountsCalendarChannelDetails = ({ calendarChannel, }: SettingsAccountsCalendarChannelDetailsProps) => { - const theme = useTheme(); - const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular: CoreObjectNameSingular.CalendarChannel, }); @@ -55,14 +47,6 @@ export const SettingsAccountsCalendarChannelDetails = ({ }); }; - const handleSyncEventsToggle = (value: boolean) => { - updateOneRecord({ - idToUpdate: calendarChannel.id, - updateOneRecordInput: { - isSyncEnabled: value, - }, - }); - }; return (
@@ -81,36 +65,14 @@ export const SettingsAccountsCalendarChannelDetails = ({ description="Automatically create contacts for people you've participated in an event with." /> - - - } - title="Auto-creation" - value={!!calendarChannel.isContactAutoCreationEnabled} - onToggle={handleContactAutoCreationToggle} - /> -
-
- - - - - } - title="Sync events" - value={!!calendarChannel.isSyncEnabled} - onToggle={handleSyncEventsToggle} + parameters={[ + { + value: !!calendarChannel.isContactAutoCreationEnabled, + title: 'Auto-creation', + description: 'Automatically create contacts for people.', + onToggle: handleContactAutoCreationToggle, + }, + ]} />
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx index b1a26e3ca..c626b8bb0 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard'; -import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia'; +import { SettingsAccountsVisibilityIcon } from '@/settings/accounts/components/SettingsAccountsVisibilityIcon'; import { CalendarChannelVisibility } from '~/generated/graphql'; type SettingsAccountsEventVisibilitySettingsCardProps = { @@ -9,7 +9,7 @@ type SettingsAccountsEventVisibilitySettingsCardProps = { value?: CalendarChannelVisibility; }; -const StyledCardMedia = styled(SettingsAccountsVisibilitySettingCardMedia)` +const StyledCardMedia = styled(SettingsAccountsVisibilityIcon)` height: ${({ theme }) => theme.spacing(6)}; `; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationCard.tsx new file mode 100644 index 000000000..f87c96f35 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationCard.tsx @@ -0,0 +1,47 @@ +import { MessageChannelContactAutoCreationPolicy } from '@/accounts/types/MessageChannel'; +import { SettingsAccountsMessageAutoCreationIcon } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon'; +import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard'; + +type SettingsAccountsMessageAutoCreationCardProps = { + onChange: (nextValue: MessageChannelContactAutoCreationPolicy) => void; + value?: MessageChannelContactAutoCreationPolicy; +}; + +const autoCreationOptions = [ + { + title: 'Send and Received', + description: 'People I’ve sent emails to and received emails from.', + value: MessageChannelContactAutoCreationPolicy.SENT_AND_RECEIVED, + cardMedia: ( + + ), + }, + { + title: 'Sent', + description: 'People I’ve sent emails to.', + value: MessageChannelContactAutoCreationPolicy.SENT, + cardMedia: , + }, + { + title: 'None', + description: 'Don’t auto-create contacts.', + value: MessageChannelContactAutoCreationPolicy.NONE, + cardMedia: ( + + ), + }, +]; + +export const SettingsAccountsMessageAutoCreationCard = ({ + onChange, + value = MessageChannelContactAutoCreationPolicy.SENT_AND_RECEIVED, +}: SettingsAccountsMessageAutoCreationCardProps) => ( + +); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx new file mode 100644 index 000000000..d628f347c --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx @@ -0,0 +1,31 @@ +import styled from '@emotion/styled'; + +import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia'; + +type SettingsAccountsMessageAutoCreationIconProps = { + className?: string; + isSentActive?: boolean; + isReceivedActive?: boolean; +}; + +const StyledIconContainer = styled(SettingsAccountsCardMedia)` + align-items: stretch; +`; + +const StyledDirectionSkeleton = styled.div<{ isActive?: boolean }>` + background-color: ${({ isActive, theme }) => + isActive ? theme.accent.accent4060 : theme.background.quaternary}; + border-radius: 1px; + height: 24px; +`; + +export const SettingsAccountsMessageAutoCreationIcon = ({ + className, + isSentActive, + isReceivedActive, +}: SettingsAccountsMessageAutoCreationIconProps) => ( + + + + +); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx index ad3b912db..0f1a331b6 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx @@ -1,12 +1,14 @@ -import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { H2Title, IconRefresh, IconUser } from 'twenty-ui'; +import { H2Title } from 'twenty-ui'; -import { MessageChannel } from '@/accounts/types/MessageChannel'; +import { + MessageChannel, + MessageChannelContactAutoCreationPolicy, +} from '@/accounts/types/MessageChannel'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; -import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia'; -import { SettingsAccountsInboxVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard'; +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'; @@ -14,7 +16,12 @@ import { MessageChannelVisibility } from '~/generated-metadata/graphql'; type SettingsAccountsMessageChannelDetailsProps = { messageChannel: Pick< MessageChannel, - 'id' | 'visibility' | 'isContactAutoCreationEnabled' | 'isSyncEnabled' + | 'id' + | 'visibility' + | 'contactAutoCreationPolicy' + | 'excludeNonProfessionalEmails' + | 'excludeGroupEmails' + | 'isSyncEnabled' >; }; @@ -28,8 +35,6 @@ const StyledDetailsContainer = styled.div` export const SettingsAccountsMessageChannelDetails = ({ messageChannel, }: SettingsAccountsMessageChannelDetailsProps) => { - const theme = useTheme(); - const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular: CoreObjectNameSingular.MessageChannel, }); @@ -43,20 +48,31 @@ export const SettingsAccountsMessageChannelDetails = ({ }); }; - const handleContactAutoCreationToggle = (value: boolean) => { + const handleContactAutoCreationChange = ( + value: MessageChannelContactAutoCreationPolicy, + ) => { updateOneRecord({ idToUpdate: messageChannel.id, updateOneRecordInput: { - isContactAutoCreationEnabled: value, + contactAutoCreationPolicy: value, }, }); }; - const handleIsSyncEnabledToggle = (value: boolean) => { + const handleIsGroupEmailExcludedToggle = (value: boolean) => { updateOneRecord({ idToUpdate: messageChannel.id, updateOneRecordInput: { - isSyncEnabled: value, + excludeGroupEmails: value, + }, + }); + }; + + const handleIsNonProfessionalEmailExcludedToggle = (value: boolean) => { + updateOneRecord({ + idToUpdate: messageChannel.id, + updateOneRecordInput: { + excludeNonProfessionalEmails: value, }, }); }; @@ -68,7 +84,7 @@ export const SettingsAccountsMessageChannelDetails = ({ title="Visibility" description="Define what will be visible to other users in your workspace" /> - @@ -76,39 +92,29 @@ export const SettingsAccountsMessageChannelDetails = ({
- - - - } - title="Auto-creation" - value={!!messageChannel.isContactAutoCreationEnabled} - onToggle={handleContactAutoCreationToggle} +
- - - - } - title="Sync emails" - value={!!messageChannel.isSyncEnabled} - onToggle={handleIsSyncEnabledToggle} + parameters={[ + { + title: 'Exclude non-professional emails', + description: 'Don’t sync emails from/to Gmail, Outlook...', + value: !!messageChannel.excludeNonProfessionalEmails, + onToggle: handleIsNonProfessionalEmailExcludedToggle, + }, + { + title: 'Exclude group emails', + description: 'Don’t sync emails from team@ support@ noreply@...', + value: !!messageChannel.excludeGroupEmails, + onToggle: handleIsGroupEmailExcludedToggle, + }, + ]} />
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageVisibilityCard.tsx similarity index 74% rename from packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard.tsx rename to packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageVisibilityCard.tsx index 9f9469f46..a2f10bc8c 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageVisibilityCard.tsx @@ -1,8 +1,8 @@ import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard'; -import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia'; +import { SettingsAccountsVisibilityIcon } from '@/settings/accounts/components/SettingsAccountsVisibilityIcon'; import { MessageChannelVisibility } from '~/generated/graphql'; -type SettingsAccountsInboxVisibilitySettingsCardProps = { +type SettingsAccountsMessageVisibilityCardProps = { onChange: (nextValue: MessageChannelVisibility) => void; value?: MessageChannelVisibility; }; @@ -13,7 +13,7 @@ const inboxSettingsVisibilityOptions = [ description: 'Subject, body and attachments will be shared with your team.', value: MessageChannelVisibility.ShareEverything, cardMedia: ( - ( +}: SettingsAccountsMessageVisibilityCardProps) => ( { - const syncStatusOptions = useGetSyncStatusOptions(); - - const syncStatusOption = syncStatusOptions?.find( - (option) => option.value === syncStatus, - ); - - if (!isSyncEnabled) { - return ; - } - - return ( - - ); -}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx index 7dee8347d..62bfbaa40 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx @@ -1,22 +1,24 @@ -import { ReactNode } from 'react'; import styled from '@emotion/styled'; 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 = { - cardMedia: ReactNode; +type Parameter = { value: boolean; - onToggle: (value: boolean) => void; title: string; + description: string; + onToggle: (value: boolean) => void; +}; + +type SettingsAccountsToggleSettingCardProps = { + parameters: Parameter[]; }; const StyledCardContent = styled(CardContent)` align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(4)}; - padding: ${({ theme }) => theme.spacing(2, 4)}; cursor: pointer; &:hover { @@ -24,23 +26,37 @@ const StyledCardContent = styled(CardContent)` } `; -const StyledTitle = styled.span` +const StyledTitle = styled.div` color: ${({ theme }) => theme.font.color.primary}; font-weight: ${({ theme }) => theme.font.weight.medium}; - margin-right: auto; + margin-bottom: ${({ theme }) => theme.spacing(2)}; +`; + +const StyledDescription = styled.div` + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.sm}; +`; + +const StyledToggle = styled(Toggle)` + margin-left: auto; `; export const SettingsAccountsToggleSettingCard = ({ - cardMedia, - value, - onToggle, - title, + parameters, }: SettingsAccountsToggleSettingCardProps) => ( - onToggle(!value)}> - {cardMedia} - {title} - - + {parameters.map((parameter, index) => ( + parameter.onToggle(!parameter.value)} + > +
+ {parameter.title} + {parameter.description} +
+ + + ))} ); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilityIcon.tsx similarity index 87% rename from packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia.tsx rename to packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilityIcon.tsx index 119fb26e0..5931d828e 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilityIcon.tsx @@ -4,7 +4,7 @@ import { SettingsAccountsCardMedia } from '@/settings/accounts/components/Settin type VisibilityElementState = 'active' | 'inactive'; -type SettingsAccountsVisibilitySettingCardMediaProps = { +type SettingsAccountsVisibilityIconProps = { className?: string; metadata?: VisibilityElementState; subject?: VisibilityElementState; @@ -31,12 +31,12 @@ const StyledBodySkeleton = styled(StyledSubjectSkeleton)` flex: 1 0 auto; `; -export const SettingsAccountsVisibilitySettingCardMedia = ({ +export const SettingsAccountsVisibilityIcon = ({ className, metadata, subject, body, -}: SettingsAccountsVisibilitySettingCardMediaProps) => ( +}: SettingsAccountsVisibilityIconProps) => ( {!!metadata && } {!!subject && } diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx index e1472836e..02264d8e6 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from 'twenty-ui'; +import { MessageChannelContactAutoCreationPolicy } from '@/accounts/types/MessageChannel'; import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails'; import { MessageChannelVisibility } from '~/generated/graphql'; @@ -12,7 +13,9 @@ const meta: Meta = { args: { messageChannel: { id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6a', - isContactAutoCreationEnabled: true, + contactAutoCreationPolicy: MessageChannelContactAutoCreationPolicy.SENT, + excludeNonProfessionalEmails: true, + excludeGroupEmails: false, isSyncEnabled: true, visibility: MessageChannelVisibility.ShareEverything, },