feat: add Event Visibility calendar settings (#4138)

Closes #4064

packages/twenty-front/src/modules/accounts/types/MessageChannel.ts

@@ -1,4 +1,4 @@
-import { InboxSettingsVisibilityValue } from '@/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection';
+import { InboxSettingsVisibilityValue } from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard';
 
 export type MessageChannel = {
   id: string;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard';
+import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia';
+
+export enum EventSettingsVisibilityValue {
+  Everything = 'share_everything',
+  Metadata = 'metadata',
+}
+
+type SettingsAccountsEventVisibilitySettingsCardProps = {
+  onChange: (nextValue: EventSettingsVisibilityValue) => void;
+  value?: EventSettingsVisibilityValue;
+};
+
+const StyledCardMedia = styled(SettingsAccountsVisibilitySettingCardMedia)`
+  height: ${({ theme }) => theme.spacing(6)};
+`;
+
+const eventSettingsVisibilityOptions = [
+  {
+    title: 'Everything',
+    description: 'The whole event details will be shared with your team.',
+    value: EventSettingsVisibilityValue.Everything,
+    cardMedia: <StyledCardMedia subject="active" body="active" />,
+  },
+  {
+    title: 'Metadata',
+    description: 'Only date & participants will be shared with your team.',
+    value: EventSettingsVisibilityValue.Metadata,
+    cardMedia: <StyledCardMedia subject="active" body="inactive" />,
+  },
+];
+
+export const SettingsAccountsEventVisibilitySettingsCard = ({
+  onChange,
+  value = EventSettingsVisibilityValue.Everything,
+}: SettingsAccountsEventVisibilitySettingsCardProps) => (
+  <SettingsAccountsRadioSettingsCard
+    options={eventSettingsVisibilityOptions}
+    value={value}
+    onChange={onChange}
+  />
+);

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection.tsx

@@ -1,139 +0,0 @@
-import styled from '@emotion/styled';
-
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { Radio } from '@/ui/input/components/Radio';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { Section } from '@/ui/layout/section/components/Section';
-
-export enum InboxSettingsVisibilityValue {
-  Everything = 'share_everything',
-  SubjectMetadata = 'subject',
-  Metadata = 'metadata',
-}
-
-type SettingsAccountsInboxSettingsVisibilitySectionProps = {
-  onChange: (nextValue: InboxSettingsVisibilityValue) => void;
-  value?: InboxSettingsVisibilityValue;
-};
-
-const StyledCardContent = styled(CardContent)`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(4)};
-  cursor: pointer;
-
-  &:hover {
-    background: ${({ theme }) => theme.background.transparent.lighter};
-  }
-`;
-
-const StyledCardMedia = styled(SettingsAccountsCardMedia)`
-  align-items: stretch;
-`;
-
-const StyledSubjectSkeleton = styled.div<{ isActive?: boolean }>`
-  background-color: ${({ isActive, theme }) =>
-    isActive ? theme.accent.accent4060 : theme.background.quaternary};
-  border-radius: 1px;
-  height: 3px;
-`;
-
-const StyledMetadataSkeleton = styled(StyledSubjectSkeleton)`
-  margin-right: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledBodySkeleton = styled(StyledSubjectSkeleton)`
-  border-radius: ${({ theme }) => theme.border.radius.xs};
-  height: 22px;
-`;
-
-const StyledTitle = styled.div`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledDescription = styled.div`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.sm};
-`;
-
-const StyledRadio = styled(Radio)`
-  margin-left: auto;
-`;
-
-const inboxSettingsVisibilityOptions = [
-  {
-    title: 'Everything',
-    description: 'Subject, body and attachments will be shared with your team.',
-    value: InboxSettingsVisibilityValue.Everything,
-    visibleElements: {
-      metadata: true,
-      subject: true,
-      body: true,
-    },
-  },
-  {
-    title: 'Subject and metadata',
-    description: 'Subject and metadata will be shared with your team.',
-    value: InboxSettingsVisibilityValue.SubjectMetadata,
-    visibleElements: {
-      metadata: true,
-      subject: true,
-      body: false,
-    },
-  },
-  {
-    title: 'Metadata',
-    description: 'Timestamp and participants will be shared with your team.',
-    value: InboxSettingsVisibilityValue.Metadata,
-    visibleElements: {
-      metadata: true,
-      subject: false,
-      body: false,
-    },
-  },
-];
-
-export const SettingsAccountsInboxSettingsVisibilitySection = ({
-  onChange,
-  value = InboxSettingsVisibilityValue.Everything,
-}: SettingsAccountsInboxSettingsVisibilitySectionProps) => (
-  <Section>
-    <H2Title
-      title="Email visibility"
-      description="Define what will be visible to other users in your workspace"
-    />
-    <Card>
-      {inboxSettingsVisibilityOptions.map(
-        (
-          { title, description, value: optionValue, visibleElements },
-          index,
-        ) => (
-          <StyledCardContent
-            key={optionValue}
-            divider={index < inboxSettingsVisibilityOptions.length - 1}
-            onClick={() => onChange(optionValue)}
-          >
-            <StyledCardMedia>
-              <StyledMetadataSkeleton isActive={visibleElements.metadata} />
-              <StyledSubjectSkeleton isActive={visibleElements.subject} />
-              <StyledBodySkeleton isActive={visibleElements.body} />
-            </StyledCardMedia>
-            <div>
-              <StyledTitle>{title}</StyledTitle>
-              <StyledDescription>{description}</StyledDescription>
-            </div>
-            <StyledRadio
-              value={optionValue}
-              onCheckedChange={() => onChange(optionValue)}
-              checked={value === optionValue}
-            />
-          </StyledCardContent>
-        ),
-      )}
-    </Card>
-  </Section>
-);

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard.tsx

@@ -0,0 +1,63 @@
+import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard';
+import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia';
+
+export enum InboxSettingsVisibilityValue {
+  Everything = 'share_everything',
+  SubjectMetadata = 'subject',
+  Metadata = 'metadata',
+}
+
+type SettingsAccountsInboxVisibilitySettingsCardProps = {
+  onChange: (nextValue: InboxSettingsVisibilityValue) => void;
+  value?: InboxSettingsVisibilityValue;
+};
+
+const inboxSettingsVisibilityOptions = [
+  {
+    title: 'Everything',
+    description: 'Subject, body and attachments will be shared with your team.',
+    value: InboxSettingsVisibilityValue.Everything,
+    cardMedia: (
+      <SettingsAccountsVisibilitySettingCardMedia
+        metadata="active"
+        subject="active"
+        body="active"
+      />
+    ),
+  },
+  {
+    title: 'Subject and metadata',
+    description: 'Subject and metadata will be shared with your team.',
+    value: InboxSettingsVisibilityValue.SubjectMetadata,
+    cardMedia: (
+      <SettingsAccountsVisibilitySettingCardMedia
+        metadata="active"
+        subject="active"
+        body="inactive"
+      />
+    ),
+  },
+  {
+    title: 'Metadata',
+    description: 'Timestamp and participants will be shared with your team.',
+    value: InboxSettingsVisibilityValue.Metadata,
+    cardMedia: (
+      <SettingsAccountsVisibilitySettingCardMedia
+        metadata="active"
+        subject="inactive"
+        body="inactive"
+      />
+    ),
+  },
+];
+
+export const SettingsAccountsInboxVisibilitySettingsCard = ({
+  onChange,
+  value = InboxSettingsVisibilityValue.Everything,
+}: SettingsAccountsInboxVisibilitySettingsCardProps) => (
+  <SettingsAccountsRadioSettingsCard
+    options={inboxSettingsVisibilityOptions}
+    value={value}
+    onChange={onChange}
+  />
+);

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { Radio } from '@/ui/input/components/Radio';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+
+type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
+  {
+    onChange: (nextValue: Option['value']) => void;
+    options: Option[];
+    value: Option['value'];
+  };
+
+const StyledCardContent = styled(CardContent)`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.lighter};
+  }
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledDescription = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
+const StyledRadio = styled(Radio)`
+  margin-left: auto;
+`;
+
+export const SettingsAccountsRadioSettingsCard = <
+  Option extends {
+    cardMedia: ReactNode;
+    description: string;
+    title: string;
+    value: string;
+  },
+>({
+  onChange,
+  options,
+  value,
+}: SettingsAccountsRadioSettingsCardProps<Option>) => (
+  <Card>
+    {options.map((option, index) => (
+      <StyledCardContent
+        key={option.value}
+        divider={index < options.length - 1}
+        onClick={() => onChange(option.value)}
+      >
+        {option.cardMedia}
+        <div>
+          <StyledTitle>{option.title}</StyledTitle>
+          <StyledDescription>{option.description}</StyledDescription>
+        </div>
+        <StyledRadio
+          value={option.value}
+          onCheckedChange={() => onChange(option.value)}
+          checked={value === option.value}
+        />
+      </StyledCardContent>
+    ))}
+  </Card>
+);

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx

@@ -1,15 +1,13 @@
-import { useTheme } from '@emotion/react';
+import { ReactNode } from '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;
+  cardMedia: ReactNode;
-  isEnabled: boolean;
+  value: boolean;
   onToggle: (value: boolean) => void;
   title: string;
 };
@@ -19,6 +17,11 @@ const StyledCardContent = styled(CardContent)`
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};
   padding: ${({ theme }) => theme.spacing(2, 4)};
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.lighter};
+  }
 `;
 
 const StyledTitle = styled.span`
@@ -28,22 +31,16 @@ const StyledTitle = styled.span`
 `;
 
 export const SettingsAccountsToggleSettingCard = ({
-  Icon,
+  cardMedia,
-  isEnabled,
+  value,
   onToggle,
   title,
-}: SettingsAccountsToggleSettingCardProps) => {
+}: SettingsAccountsToggleSettingCardProps) => (
-  const theme = useTheme();
+  <Card>
-
+    <StyledCardContent onClick={() => onToggle(!value)}>
-  return (
+      {cardMedia}
-    <Card>
+      <StyledTitle>{title}</StyledTitle>
-      <StyledCardContent>
+      <Toggle value={value} onChange={onToggle} />
-        <SettingsAccountsCardMedia>
+    </StyledCardContent>
-          <Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
+  </Card>
-        </SettingsAccountsCardMedia>
+);
-        <StyledTitle>{title}</StyledTitle>
-        <Toggle value={isEnabled} onChange={onToggle} />
-      </StyledCardContent>
-    </Card>
-  );
-};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+
+import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
+
+type VisibilityElementState = 'active' | 'inactive';
+
+type SettingsAccountsVisibilitySettingCardMediaProps = {
+  className?: string;
+  metadata?: VisibilityElementState;
+  subject?: VisibilityElementState;
+  body?: VisibilityElementState;
+};
+
+const StyledCardMedia = styled(SettingsAccountsCardMedia)`
+  align-items: stretch;
+`;
+
+const StyledSubjectSkeleton = styled.div<{ isActive?: boolean }>`
+  background-color: ${({ isActive, theme }) =>
+    isActive ? theme.accent.accent4060 : theme.background.quaternary};
+  border-radius: 1px;
+  height: 3px;
+`;
+
+const StyledMetadataSkeleton = styled(StyledSubjectSkeleton)`
+  margin-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledBodySkeleton = styled(StyledSubjectSkeleton)`
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  flex: 1 0 auto;
+`;
+
+export const SettingsAccountsVisibilitySettingCardMedia = ({
+  className,
+  metadata,
+  subject,
+  body,
+}: SettingsAccountsVisibilitySettingCardMediaProps) => (
+  <StyledCardMedia className={className}>
+    {!!metadata && <StyledMetadataSkeleton isActive={metadata === 'active'} />}
+    {!!subject && <StyledSubjectSkeleton isActive={subject === 'active'} />}
+    {!!body && <StyledBodySkeleton isActive={body === 'active'} />}
+  </StyledCardMedia>
+);

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

@@ -1,5 +1,12 @@
 import { useParams } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 
+import {
+  EventSettingsVisibilityValue,
+  SettingsAccountsEventVisibilitySettingsCard,
+} from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
+import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -11,7 +18,12 @@ import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
+const StyledCardMedia = styled(SettingsAccountsCardMedia)`
+  height: ${({ theme }) => theme.spacing(6)};
+`;
+
 export const SettingsAccountsCalendarsSettings = () => {
+  const theme = useTheme();
   const { accountUuid = '' } = useParams();
   const connectedAccount = mockedConnectedAccounts.find(
     ({ id }) => id === accountUuid,
@@ -33,15 +45,32 @@ export const SettingsAccountsCalendarsSettings = () => {
             { children: connectedAccount?.handle || '' },
           ]}
         />
+        <Section>
+          <H2Title
+            title="Event visibility"
+            description="Define what will be visible to other users in your workspace"
+          />
+          <SettingsAccountsEventVisibilitySettingsCard
+            value={EventSettingsVisibilityValue.Everything}
+            onChange={() => {}}
+          />
+        </Section>
         <Section>
           <H2Title
             title="Contact auto-creation"
             description="Automatically create contacts for people you've participated in an event with."
           />
           <SettingsAccountsToggleSettingCard
-            Icon={IconUser}
+            cardMedia={
+              <StyledCardMedia>
+                <IconUser
+                  size={theme.icon.size.sm}
+                  stroke={theme.icon.stroke.lg}
+                />
+              </StyledCardMedia>
+            }
             title="Auto-creation"
-            isEnabled={false}
+            value={false}
             onToggle={() => {}}
           />
         </Section>
@@ -51,9 +80,16 @@ export const SettingsAccountsCalendarsSettings = () => {
             description="Past and future calendar events will automatically be synced to this workspace"
           />
           <SettingsAccountsToggleSettingCard
-            Icon={IconRefresh}
+            cardMedia={
+              <StyledCardMedia>
+                <IconRefresh
+                  size={theme.icon.size.sm}
+                  stroke={theme.icon.stroke.lg}
+                />
+              </StyledCardMedia>
+            }
             title="Sync events"
-            isEnabled={false}
+            value={false}
             onToggle={() => {}}
           />
         </Section>

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

@@ -1,14 +1,16 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 
 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 { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import {
   InboxSettingsVisibilityValue,
-  SettingsAccountsInboxSettingsVisibilitySection,
+  SettingsAccountsInboxVisibilitySettingsCard,
-} from '@/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection';
+} from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { AppPath } from '@/types/AppPath';
@@ -19,6 +21,7 @@ import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsAccountsEmailsInboxSettings = () => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const { accountUuid: messageChannelId = '' } = useParams();
 
@@ -65,32 +68,33 @@ export const SettingsAccountsEmailsInboxSettings = () => {
             { children: messageChannel.handle || '' },
           ]}
         />
-        {/* TODO : discuss the desired sync behaviour */}
+        {/* TODO : discuss the desired sync behaviour and add Synchronization section */}
-        {/* <Section>
+        <Section>
           <H2Title
-            title="Synchronization"
+            title="Email visibility"
-            description="Past and future emails will automatically be synced to this workspace"
+            description="Define what will be visible to other users in your workspace"
           />
-          <SettingsAccountsSettingCard
+          <SettingsAccountsInboxVisibilitySettingsCard
-            Icon={IconRefresh}
+            value={messageChannel.visibility}
-            title="Sync emails"
+            onChange={handleVisibilityChange}
-            isEnabled={!!messageChannel.isSynced}
-            onToggle={handleSynchronizationToggle}
           />
-        </Section> */}
+        </Section>
-        <SettingsAccountsInboxSettingsVisibilitySection
-          value={messageChannel.visibility}
-          onChange={handleVisibilityChange}
-        />
         <Section>
           <H2Title
             title="Contact auto-creation"
             description="Automatically create contacts for people you’ve sent emails to"
           />
           <SettingsAccountsToggleSettingCard
-            Icon={IconUser}
+            cardMedia={
+              <SettingsAccountsCardMedia>
+                <IconUser
+                  size={theme.icon.size.sm}
+                  stroke={theme.icon.stroke.lg}
+                />
+              </SettingsAccountsCardMedia>
+            }
             title="Auto-creation"
-            isEnabled={!!messageChannel.isContactAutoCreationEnabled}
+            value={!!messageChannel.isContactAutoCreationEnabled}
             onToggle={handleContactAutoCreationToggle}
           />
         </Section>