feat: add Event Visibility calendar settings (#4138)

Closes #4064

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;
-  isEnabled: boolean;
+  cardMedia: ReactNode;
+  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,
-  isEnabled,
+  cardMedia,
+  value,
   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>
-  );
-};
+}: SettingsAccountsToggleSettingCardProps) => (
+  <Card>
+    <StyledCardContent onClick={() => onToggle(!value)}>
+      {cardMedia}
+      <StyledTitle>{title}</StyledTitle>
+      <Toggle value={value} 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>
+);