diff --git a/packages/twenty-front/src/modules/activities/emails/components/Emails.tsx b/packages/twenty-front/src/modules/activities/emails/components/Emails.tsx
new file mode 100644
index 000000000..6e77927a6
--- /dev/null
+++ b/packages/twenty-front/src/modules/activities/emails/components/Emails.tsx
@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+
+import {
+ H1Title,
+ H1TitleFontColor,
+} from '@/ui/display/typography/components/H1Title';
+import { Section } from '@/ui/layout/section/components/Section';
+
+const StyledContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${({ theme }) => theme.spacing(6)};
+ padding: ${({ theme }) => theme.spacing(6, 6, 2)};
+`;
+
+const StyledH1Title = styled(H1Title)`
+ display: flex;
+ gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledEmailCount = styled.span`
+ color: ${({ theme }) => theme.font.color.light};
+`;
+
+export const Emails = () => (
+
+
+
+ Inbox 2
+ >
+ }
+ fontColor={H1TitleFontColor.Primary}
+ />
+
+
+);
diff --git a/packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx b/packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx
index c0adc8ceb..6d782c834 100644
--- a/packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx
+++ b/packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx
@@ -1,7 +1,8 @@
+import { ReactNode } from 'react';
import styled from '@emotion/styled';
type H1TitleProps = {
- title: string;
+ title: ReactNode;
fontColor?: H1TitleFontColor;
className?: string;
};
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
index 650e563af..e449ce60c 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@@ -1,5 +1,6 @@
import styled from '@emotion/styled';
+import { Emails } from '@/activities/emails/components/Emails';
import { Attachments } from '@/activities/files/components/Attachments';
import { Notes } from '@/activities/notes/components/Notes';
import { EntityTasks } from '@/activities/tasks/components/EntityTasks';
@@ -16,6 +17,7 @@ import { TabList } from '@/ui/layout/tab/components/TabList';
import { activeTabIdScopedState } from '@/ui/layout/tab/states/activeTabIdScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { ShowPageRecoilScopeContext } from '../../states/ShowPageRecoilScopeContext';
@@ -52,6 +54,8 @@ export const ShowPageRightContainer = ({
notes,
emails,
}: ShowPageRightContainerProps) => {
+ const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
+
const TASK_TABS = [
{
id: 'timeline',
@@ -86,7 +90,7 @@ export const ShowPageRightContainer = ({
title: 'Emails',
Icon: IconMail,
hide: !emails,
- disabled: true,
+ disabled: !isMessagingEnabled || entity.type === 'Custom',
},
];
@@ -104,6 +108,7 @@ export const ShowPageRightContainer = ({
{activeTabId === 'tasks' && }
{activeTabId === 'notes' && }
{activeTabId === 'files' && }
+ {activeTabId === 'emails' && }
);
};
diff --git a/packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts b/packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts
index 6e75f25f4..31906107d 100644
--- a/packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts
+++ b/packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts
@@ -1,17 +1,14 @@
import { useRecoilValue } from 'recoil';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { FeatureFlagKey } from '@/workspace/types/FeatureFlagKey';
-export const useIsFeatureEnabled = (featureKey: string): boolean => {
+export const useIsFeatureEnabled = (featureKey: FeatureFlagKey) => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);
const featureFlag = currentWorkspace?.featureFlags?.find(
(flag) => flag.key === featureKey,
);
- if (!featureFlag) {
- return false;
- }
-
- return featureFlag.value;
+ return !!featureFlag?.value;
};
diff --git a/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts b/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts
new file mode 100644
index 000000000..c7c6b38a2
--- /dev/null
+++ b/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts
@@ -0,0 +1,4 @@
+export type FeatureFlagKey =
+ | 'IS_MESSAGING_ENABLED'
+ | 'IS_NOTE_CREATE_IMAGES_ENABLED'
+ | 'IS_RELATION_FIELD_TYPE_ENABLED';