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';