From 904957ea1e7b4655c5dc569047da01b3a3744fc7 Mon Sep 17 00:00:00 2001
From: neo773 <62795688+neo773@users.noreply.github.com>
Date: Sun, 5 Jul 2026 17:14:34 +0530
Subject: [PATCH] message campaign redesign (#22508)
---
.../modules/app/components/SettingsRoutes.tsx | 26 +--
.../SettingsAccountsNewEmailGroupChannel.tsx | 11 +-
.../components/SettingsDnsRecordsTable.tsx | 202 ++++++++++--------
.../components/SettingsTableListSection.tsx | 115 +++++-----
.../hooks/useSettingsNavigationItems.tsx | 7 +-
...ttingsWorkspaceUnsubscribeTopicSection.tsx | 51 ++---
...tingsWorkspaceEmailGroupForwardingCell.tsx | 23 --
.../SettingsWorkspaceEmailGroupSection.tsx | 17 +-
.../SettingsWorkspaceEmailGroupSourceCell.tsx | 3 -
...kspaceCommunicationGroupChannelDetail.tsx} | 96 ++++++---
.../SettingsWorkspaceCommunications.tsx | 127 +++++++++++
.../SettingsWorkspaceNewUnsubscribeTopic.tsx | 8 +-
...ettingsWorkspaceUnsubscribeTopicDetail.tsx | 6 +-
.../communications/assets/cover-dark.png | Bin 0 -> 47130 bytes
.../communications/assets/cover-light.png | Bin 0 -> 49703 bytes
.../settings/email/SettingsWorkspaceEmail.tsx | 82 -------
.../twenty-shared/src/types/SettingsPath.ts | 2 +-
.../src/icon/components/TablerIcons.ts | 2 +
packages/twenty-ui/src/icon/index.ts | 2 +
19 files changed, 423 insertions(+), 357 deletions(-)
delete mode 100644 packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupForwardingCell.tsx
rename packages/twenty-front/src/pages/settings/{email/SettingsWorkspaceEmailGroupChannelDetail.tsx => communications/SettingsWorkspaceCommunicationGroupChannelDetail.tsx} (79%)
create mode 100644 packages/twenty-front/src/pages/settings/communications/SettingsWorkspaceCommunications.tsx
rename packages/twenty-front/src/pages/settings/{email => communications}/SettingsWorkspaceNewUnsubscribeTopic.tsx (95%)
rename packages/twenty-front/src/pages/settings/{email => communications}/SettingsWorkspaceUnsubscribeTopicDetail.tsx (97%)
create mode 100644 packages/twenty-front/src/pages/settings/communications/assets/cover-dark.png
create mode 100644 packages/twenty-front/src/pages/settings/communications/assets/cover-light.png
delete mode 100644 packages/twenty-front/src/pages/settings/email/SettingsWorkspaceEmail.tsx
diff --git a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
index fe62db2515..9fa0d10da8 100644
--- a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
+++ b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
@@ -182,22 +182,24 @@ const SettingsLegalDpaNew = lazy(() =>
})),
);
-const SettingsWorkspaceEmail = lazy(() =>
- import('~/pages/settings/email/SettingsWorkspaceEmail').then((module) => ({
- default: module.SettingsWorkspaceEmail,
- })),
+const SettingsWorkspaceCommunications = lazy(() =>
+ import('~/pages/settings/communications/SettingsWorkspaceCommunications').then(
+ (module) => ({
+ default: module.SettingsWorkspaceCommunications,
+ }),
+ ),
);
-const SettingsWorkspaceEmailGroupChannelDetail = lazy(() =>
- import('~/pages/settings/email/SettingsWorkspaceEmailGroupChannelDetail').then(
+const SettingsWorkspaceCommunicationGroupChannelDetail = lazy(() =>
+ import('~/pages/settings/communications/SettingsWorkspaceCommunicationGroupChannelDetail').then(
(module) => ({
- default: module.SettingsWorkspaceEmailGroupChannelDetail,
+ default: module.SettingsWorkspaceCommunicationGroupChannelDetail,
}),
),
);
const SettingsWorkspaceNewUnsubscribeTopic = lazy(() =>
- import('~/pages/settings/email/SettingsWorkspaceNewUnsubscribeTopic').then(
+ import('~/pages/settings/communications/SettingsWorkspaceNewUnsubscribeTopic').then(
(module) => ({
default: module.SettingsWorkspaceNewUnsubscribeTopic,
}),
@@ -205,7 +207,7 @@ const SettingsWorkspaceNewUnsubscribeTopic = lazy(() =>
);
const SettingsWorkspaceUnsubscribeTopicDetail = lazy(() =>
- import('~/pages/settings/email/SettingsWorkspaceUnsubscribeTopicDetail').then(
+ import('~/pages/settings/communications/SettingsWorkspaceUnsubscribeTopicDetail').then(
(module) => ({
default: module.SettingsWorkspaceUnsubscribeTopicDetail,
}),
@@ -703,8 +705,8 @@ export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
>
} />
}
+ path={SettingsPath.WorkspaceCommunications}
+ element={}
/>
(
/>
}
+ element={}
/>
{
href: getSettingsPath(SettingsPath.General),
},
{
- children: t`Email`,
- href: getSettingsPath(SettingsPath.WorkspaceEmail),
+ children: t`Communications`,
+ href: getSettingsPath(SettingsPath.WorkspaceCommunications),
},
{ children: t`New Email Channel` },
]}
@@ -63,7 +63,7 @@ export const SettingsAccountsNewEmailGroupChannel = () => {
isSaveDisabled={!canSave}
isCancelDisabled={loading}
isLoading={loading}
- onCancel={() => navigate(SettingsPath.WorkspaceEmail)}
+ onCancel={() => navigate(SettingsPath.WorkspaceCommunications)}
onSave={handleSave}
/>
}
@@ -80,6 +80,11 @@ export const SettingsAccountsNewEmailGroupChannel = () => {
placeholder="support@mycompany.com"
value={handle}
onChange={setHandle}
+ onInputEnter={() => {
+ if (canSave) {
+ handleSave();
+ }
+ }}
disabled={loading}
/>
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx b/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx
index 7b7c4da060..d08d921534 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx
@@ -1,3 +1,4 @@
+import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
import { Table } from '@/ui/layout/table/components/Table';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
@@ -6,40 +7,41 @@ import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { capitalize, isDefined } from 'twenty-shared/utils';
import { Status } from 'twenty-ui/data-display';
-import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
import { type ThemeColor } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
-type RecordStatus = {
- status: string;
- statusColor: ThemeColor;
-};
-
-type DnsRecordBase = {
+type DnsRecord = {
type: string;
key: string;
value: string;
priority?: number | null;
ttl?: string;
+ status?: string;
+ statusColor?: ThemeColor;
};
-type DnsRecord = DnsRecordBase | (DnsRecordBase & RecordStatus);
-
type SettingsDnsRecordsTableProps = {
records: DnsRecord[];
};
-const StyledTableRowContainer = styled.div`
- > * > * {
- max-width: 100%;
- min-width: 0;
- overflow: hidden;
- }
+const StyledRecordTableRow = styled(TableRow)`
+ margin-top: ${themeCssVariables.spacing[2]};
`;
-const StyledTableCellFontWrapper = styled.div`
- display: contents;
- font-family: monospace;
+const StyledCopyableCell = styled.div`
+ min-width: 0;
+ width: 100%;
+
+ & input {
+ cursor: pointer;
+ pointer-events: none;
+ }
+
+ &:hover input {
+ background-color: ${themeCssVariables.background.transparent.light};
+ border-color: ${themeCssVariables.border.color.strong};
+ }
`;
export const SettingsDnsRecordsTable = ({
@@ -51,91 +53,101 @@ export const SettingsDnsRecordsTable = ({
return null;
}
- const hasTtlRecords = records.some((record) => isDefined(record.ttl));
- const hasStatusRecords = records.some((record) => 'status' in record);
- const hasPriorityRecords = records.some((record) =>
+ const hasPriorityColumn = records.some((record) =>
isDefined(record.priority),
);
+ const hasTtlColumn = records.some((record) => isDefined(record.ttl));
+ const hasStatusColumn = records.some((record) => isDefined(record.status));
- const buildGridColumns = () => {
- const baseColumns = ['max-content', '1fr', '1fr'];
-
- if (hasPriorityRecords) baseColumns.push('max-content');
- if (hasTtlRecords) baseColumns.push('max-content');
- if (hasStatusRecords) baseColumns.push('max-content');
-
- return baseColumns.join(' ');
- };
-
- const gridAutoColumns = buildGridColumns();
+ const gridAutoColumns = [
+ '100px',
+ 'minmax(0, 1fr)',
+ 'minmax(0, 1.5fr)',
+ ...(hasPriorityColumn ? ['max-content'] : []),
+ ...(hasTtlColumn ? ['max-content'] : []),
+ ...(hasStatusColumn ? ['max-content'] : []),
+ ].join(' ');
return (
-
-
- {t`Type`}
- {t`Key`}
- {t`Value`}
- {hasPriorityRecords && (
- {t`Priority`}
+
+ {t`Type`}
+ {t`Name`}
+ {t`Value`}
+ {hasPriorityColumn && (
+ {t`Priority`}
+ )}
+ {hasTtlColumn && {t`TTL`}}
+ {hasStatusColumn && (
+ {t`Status`}
+ )}
+
+
+ {records.map((record, index) => (
+
+
+
+ copyToClipboard(record.type, t`Copied to clipboard`)
+ }
+ >
+
+
+
+
+
+ copyToClipboard(record.key, t`Copied to clipboard`)
+ }
+ >
+
+
+
+
+
+ copyToClipboard(record.value, t`Copied to clipboard`)
+ }
+ >
+
+
+
+ {hasPriorityColumn && (
+ {record.priority}
)}
- {hasTtlRecords && {t`TTL`}}
- {hasStatusRecords && (
- {t`Status`}
+ {hasTtlColumn && {record.ttl}}
+ {hasStatusColumn && (
+
+ {isDefined(record.status) && isDefined(record.statusColor) && (
+
+ )}
+
)}
-
-
-
- {records.map((record) => (
-
-
- {record.type}
-
- {
- copyToClipboard(record.key || '');
- }}
- >
-
-
-
-
-
- {
- copyToClipboard(record.value);
- }}
- >
-
-
-
-
- {hasPriorityRecords && (
-
- {record.priority}
-
- )}
- {hasTtlRecords && (
-
- {record.ttl}
-
- )}
- {hasStatusRecords && (
-
-
- {'status' in record ? (
-
- ) : null}
-
-
- )}
-
-
+
))}
);
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsTableListSection.tsx b/packages/twenty-front/src/modules/settings/components/SettingsTableListSection.tsx
index 3996bad44e..3eee717fdd 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsTableListSection.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsTableListSection.tsx
@@ -6,7 +6,7 @@ import { Table } from '@/ui/layout/table/components/Table';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { IconPlus } from 'twenty-ui/icon';
+import { IconChevronRight, IconPlus } from 'twenty-ui/icon';
import { H2Title } from 'twenty-ui/typography';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
@@ -53,6 +53,7 @@ type SettingsTableListSectionProps- = {
items: Item[];
columns: SettingsTableListSectionColumn
- [];
gridAutoColumns: string;
+ showRowChevron?: boolean;
onRowClick?: (item: Item) => void;
footerButtonLabel: string;
onFooterButtonClick: () => void;
@@ -67,55 +68,71 @@ export const SettingsTableListSection = <
items,
columns,
gridAutoColumns,
+ showRowChevron = false,
onRowClick,
footerButtonLabel,
onFooterButtonClick,
-}: SettingsTableListSectionProps
- ) => (
-
-
- {items.length > 0 && (
-
-
- {columns.map((column) => (
-
- {column.label}
-
- ))}
-
-
- {items.map((item) => (
-
- onRowClick(item) : undefined}
- >
- {columns.map((column) => (
-
-
-
- ))}
-
-
- ))}
-
-
- )}
-
-
-
-);
+ {items.length > 0 && (
+
+
+ {columns.map((column) => (
+
+ {column.label}
+
+ ))}
+ {showRowChevron && }
+
+
+ {items.map((item) => (
+
+ onRowClick(item) : undefined}
+ >
+ {columns.map((column) => (
+
+
+
+ ))}
+ {showRowChevron && (
+
+
+
+ )}
+
+
+ ))}
+
+
+ )}
+
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx b/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
index 4a795f4bd3..42ee67b27a 100644
--- a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
+++ b/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
@@ -28,6 +28,7 @@ import {
IconLayout,
IconMail,
IconMessage,
+ IconMessageCircle,
IconPlug,
IconServer,
IconSettings,
@@ -173,9 +174,9 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
isHidden: !permissionMap[PermissionFlagType.AI_SETTINGS],
},
{
- label: t`Email`,
- path: SettingsPath.WorkspaceEmail,
- Icon: IconMail,
+ label: t`Communications`,
+ path: SettingsPath.WorkspaceCommunications,
+ Icon: IconMessageCircle,
isHidden:
!isEmailGroupFeatureEnabled ||
!permissionMap[PermissionFlagType.WORKSPACE],
diff --git a/packages/twenty-front/src/modules/settings/unsubscribe-topics/components/SettingsWorkspaceUnsubscribeTopicSection.tsx b/packages/twenty-front/src/modules/settings/unsubscribe-topics/components/SettingsWorkspaceUnsubscribeTopicSection.tsx
index d43b550751..cdffd6b53c 100644
--- a/packages/twenty-front/src/modules/settings/unsubscribe-topics/components/SettingsWorkspaceUnsubscribeTopicSection.tsx
+++ b/packages/twenty-front/src/modules/settings/unsubscribe-topics/components/SettingsWorkspaceUnsubscribeTopicSection.tsx
@@ -1,18 +1,14 @@
-import { useLazyQuery } from '@apollo/client/react';
import { useLingui } from '@lingui/react/macro';
import { useUnsubscribeTopics } from '@/activities/emails/hooks/useUnsubscribeTopics';
import { SettingsTableListSection } from '@/settings/components/SettingsTableListSection';
-import { GET_UNSUBSCRIBE_PAGE_PREVIEW_URL } from '@/settings/unsubscribe-topics/graphql/queries/getUnsubscribePagePreviewUrl';
import { SettingsPath } from 'twenty-shared/types';
-import { isDefined } from 'twenty-shared/utils';
import {
type UnsubscribeTopicsQuery,
UnsubscribeTopicVisibility,
} from '~/generated-metadata/graphql';
-import { Status } from 'twenty-ui/data-display';
-import { IconExternalLink } from 'twenty-ui/icon';
-import { Button } from 'twenty-ui/input';
+import { Pill, Status } from 'twenty-ui/data-display';
+import { IconLock } from 'twenty-ui/icon';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
type UnsubscribeTopic = UnsubscribeTopicsQuery['unsubscribeTopics'][number];
@@ -21,49 +17,25 @@ export const SettingsWorkspaceUnsubscribeTopicSection = () => {
const { t } = useLingui();
const navigateSettings = useNavigateSettings();
const { unsubscribeTopics } = useUnsubscribeTopics();
- const [getPreviewUrl] = useLazyQuery<{
- unsubscribePagePreviewUrl: string;
- }>(GET_UNSUBSCRIBE_PAGE_PREVIEW_URL);
- // Open the tab synchronously on click (so it isn't popup-blocked), then point
- // it at the freshly minted preview URL once the query resolves.
- const handlePreview = () => {
- const previewWindow = window.open('', '_blank');
-
- void getPreviewUrl()
- .then(({ data }) => {
- const url = data?.unsubscribePagePreviewUrl;
-
- if (isDefined(previewWindow) && isDefined(url)) {
- previewWindow.location.href = url;
- } else {
- previewWindow?.close();
- }
- })
- .catch(() => previewWindow?.close());
- };
+ const title = t`Unsubscribe topics`;
+ const description = t`Email categories recipients can opt out of`;
+ const organizationPill = ;
return (
- title={t`Unsubscribe Topics`}
- description={t`Email categories recipients can opt out of.`}
- headerAdornment={
-
- }
+ title={title}
+ description={description}
+ headerAdornment={organizationPill}
items={unsubscribeTopics}
columns={[
{
- label: t`Name`,
+ label: t`Topic`,
Cell: ({ item }) => <>{item.name ?? t`Untitled topic`},
},
{
label: t`Visibility`,
+ align: 'right',
Cell: ({ item }) =>
item.visibility === UnsubscribeTopicVisibility.PUBLIC ? (
@@ -73,12 +45,13 @@ export const SettingsWorkspaceUnsubscribeTopicSection = () => {
},
]}
gridAutoColumns="1fr 1fr"
+ showRowChevron
onRowClick={(topic) =>
navigateSettings(SettingsPath.UnsubscribeTopicDetail, {
unsubscribeTopicId: topic.id,
})
}
- footerButtonLabel={t`Add unsubscribe topic`}
+ footerButtonLabel={t`Add topic`}
onFooterButtonClick={() =>
navigateSettings(SettingsPath.NewUnsubscribeTopic)
}
diff --git a/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupForwardingCell.tsx b/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupForwardingCell.tsx
deleted file mode 100644
index 7d080231f7..0000000000
--- a/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupForwardingCell.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { styled } from '@linaria/react';
-
-import { type MessageChannel } from '@/accounts/types/MessageChannel';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
-const StyledForwardingCell = styled.div`
- color: ${themeCssVariables.font.color.tertiary};
- font-family: monospace;
- font-size: ${themeCssVariables.font.size.sm};
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-`;
-
-type SettingsWorkspaceEmailGroupForwardingCellProps = {
- item: MessageChannel;
-};
-
-export const SettingsWorkspaceEmailGroupForwardingCell = ({
- item,
-}: SettingsWorkspaceEmailGroupForwardingCellProps) => (
- {item.handle}
-);
diff --git a/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSection.tsx b/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSection.tsx
index f1cb129851..2fd31749cc 100644
--- a/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSection.tsx
+++ b/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSection.tsx
@@ -4,9 +4,10 @@ import { type MessageChannel } from '@/accounts/types/MessageChannel';
import { useMyMessageChannels } from '@/settings/accounts/hooks/useMyMessageChannels';
import { SettingsTableListSection } from '@/settings/components/SettingsTableListSection';
import { SettingsWorkspaceEmailChannelDomainStatusCell } from '@/settings/workspace/components/SettingsWorkspaceEmailChannelDomainStatusCell';
-import { SettingsWorkspaceEmailGroupForwardingCell } from '@/settings/workspace/components/SettingsWorkspaceEmailGroupForwardingCell';
import { SettingsWorkspaceEmailGroupSourceCell } from '@/settings/workspace/components/SettingsWorkspaceEmailGroupSourceCell';
import { MessageChannelType, SettingsPath } from 'twenty-shared/types';
+import { Pill } from 'twenty-ui/data-display';
+import { IconLock } from 'twenty-ui/icon';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
export const SettingsWorkspaceEmailGroupSection = () => {
@@ -20,22 +21,20 @@ export const SettingsWorkspaceEmailGroupSection = () => {
return (
- title={t`Email Channels`}
- description={t`Shared addresses your workspace uses to send and receive email.`}
+ title={t`Channels`}
+ description={t`Addresses your workspace uses to send and receive email from shared inboxes`}
+ headerAdornment={}
items={emailGroupChannels}
columns={[
- { label: t`Source`, Cell: SettingsWorkspaceEmailGroupSourceCell },
- {
- label: t`Forwarding address`,
- Cell: SettingsWorkspaceEmailGroupForwardingCell,
- },
+ { label: t`Email`, Cell: SettingsWorkspaceEmailGroupSourceCell },
{
label: t`Domain`,
align: 'right',
Cell: SettingsWorkspaceEmailChannelDomainStatusCell,
},
]}
- gridAutoColumns="1fr 1fr 1fr"
+ gridAutoColumns="1fr 1fr"
+ showRowChevron
onRowClick={(channel) =>
navigateSettings(SettingsPath.EmailGroupChannelDetail, {
messageChannelId: channel.id,
diff --git a/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSourceCell.tsx b/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSourceCell.tsx
index 2d0ef5cc07..c7bf0bcf10 100644
--- a/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSourceCell.tsx
+++ b/packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSourceCell.tsx
@@ -1,7 +1,6 @@
import { styled } from '@linaria/react';
import { type MessageChannel } from '@/accounts/types/MessageChannel';
-import { IconMail } from 'twenty-ui/icon';
import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -10,7 +9,6 @@ const StyledNameCell = styled.div`
color: ${themeCssVariables.font.color.primary};
display: flex;
font-weight: ${themeCssVariables.font.weight.medium};
- gap: ${themeCssVariables.spacing[2]};
min-width: 0;
`;
@@ -25,7 +23,6 @@ export const SettingsWorkspaceEmailGroupSourceCell = ({
return (
-
);
diff --git a/packages/twenty-front/src/pages/settings/email/SettingsWorkspaceEmailGroupChannelDetail.tsx b/packages/twenty-front/src/pages/settings/communications/SettingsWorkspaceCommunicationGroupChannelDetail.tsx
similarity index 79%
rename from packages/twenty-front/src/pages/settings/email/SettingsWorkspaceEmailGroupChannelDetail.tsx
rename to packages/twenty-front/src/pages/settings/communications/SettingsWorkspaceCommunicationGroupChannelDetail.tsx
index f42de0761d..e9bb74b3f1 100644
--- a/packages/twenty-front/src/pages/settings/email/SettingsWorkspaceEmailGroupChannelDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/communications/SettingsWorkspaceCommunicationGroupChannelDetail.tsx
@@ -3,11 +3,12 @@ import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useParams } from 'react-router-dom';
-import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails';
import { useDeleteEmailGroupChannel } from '@/settings/accounts/hooks/useDeleteEmailGroupChannel';
import { useMyMessageChannels } from '@/settings/accounts/hooks/useMyMessageChannels';
+
import { getEmailChannelDomain } from '@/settings/accounts/utils/getEmailChannelDomain';
import { SettingsDnsRecordsTable } from '@/settings/components/SettingsDnsRecordsTable';
+
import { SettingsEmailingDomainVerifyButton } from '@/settings/emailing-domains/components/SettingsEmailingDomainVerifyButton';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
@@ -16,6 +17,7 @@ import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
import { SettingsPageLayout } from '@/settings/components/layout/SettingsPageLayout';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { getDocumentationUrl } from '@/support/utils/getDocumentationUrl';
import { MessageChannelType, SettingsPath } from 'twenty-shared/types';
import { getSettingsPath, isDefined } from 'twenty-shared/utils';
import { GetEmailingDomainsDocument } from '~/generated-metadata/graphql';
@@ -23,7 +25,9 @@ import { Status } from 'twenty-ui/data-display';
import { IconCopy, IconTrash } from 'twenty-ui/icon';
import { H2Title } from 'twenty-ui/typography';
import { Button } from 'twenty-ui/input';
+import { InlineBanner } from 'twenty-ui/feedback';
import { Section } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui/surfaces';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { NotFound } from '~/pages/not-found/NotFound';
import { getColorByEmailingDomainStatus } from '~/pages/settings/emailing-domains/utils/getEmailingDomainStatusColor';
@@ -43,7 +47,22 @@ const StyledForwardingInputContainer = styled.div`
margin-right: ${themeCssVariables.spacing[2]};
`;
-export const SettingsWorkspaceEmailGroupChannelDetail = () => {
+const StyledDomainStatusRow = styled.div`
+ align-items: center;
+ display: flex;
+ gap: ${themeCssVariables.spacing[2]};
+ justify-content: space-between;
+ padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]};
+`;
+
+const StyledDomainName = styled.div`
+ color: ${themeCssVariables.font.color.secondary};
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+`;
+
+export const SettingsWorkspaceCommunicationGroupChannelDetail = () => {
const { t } = useLingui();
const navigateSettings = useNavigateSettings();
const { messageChannelId } = useParams<{ messageChannelId: string }>();
@@ -80,7 +99,7 @@ export const SettingsWorkspaceEmailGroupChannelDetail = () => {
const handleDelete = async () => {
try {
await deleteEmailGroupChannel(channel.id);
- navigateSettings(SettingsPath.WorkspaceEmail);
+ navigateSettings(SettingsPath.WorkspaceCommunications);
} catch {
enqueueErrorSnackBar({
message: t`Failed to delete email channel.`,
@@ -97,10 +116,9 @@ export const SettingsWorkspaceEmailGroupChannelDetail = () => {
href: getSettingsPath(SettingsPath.General),
},
{
- children: t`Email`,
- href: getSettingsPath(SettingsPath.WorkspaceEmail),
+ children: t`Communications`,
+ href: getSettingsPath(SettingsPath.WorkspaceCommunications),
},
- { children: sourceHandle },
]}
actionButton={