Added beta tag in email (#4098)

#4040 added beta tag

packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { SoonPill } from '@/ui/display/pill/components/SoonPill';
+import { Pill } from '@/ui/display/pill/components/Pill';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 
@@ -81,7 +81,7 @@ export const SettingsNavigationCard = ({
           <Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
           <StyledTitle disabled={disabled}>
             {title}
-            {soon && <SoonPill />}
+            {soon && <Pill label="Soon" />}
           </StyledTitle>
           <StyledIconChevronRight size={theme.icon.size.sm} />
         </StyledHeader>

packages/twenty-front/src/modules/ui/display/pill/components/Pill.tsx

@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
 
-type SoonPillProps = {
+type PillProps = {
   className?: string;
+  label?: string;
 };
 
-const StyledSoonPill = styled.span`
+const StyledPill = styled.span`
   align-items: center;
   background: ${({ theme }) => theme.background.transparent.light};
   border-radius: ${({ theme }) => theme.border.radius.pill};
@@ -20,6 +21,6 @@ const StyledSoonPill = styled.span`
   padding: ${({ theme }) => `0 ${theme.spacing(2)}`};
 `;
 
-export const SoonPill = ({ className }: SoonPillProps) => (
+export const Pill = ({ className, label }: PillProps) => (
-  <StyledSoonPill className={className}>Soon</StyledSoonPill>
+  <StyledPill className={className}>{label}</StyledPill>
 );

packages/twenty-front/src/modules/ui/display/pill/components/__stories__/Pill.stories.tsx

@@ -2,15 +2,15 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import { SoonPill } from '../SoonPill';
+import { Pill } from '../Pill';
 
-const meta: Meta<typeof SoonPill> = {
+const meta: Meta<typeof Pill> = {
-  title: 'UI/Display/Pill/SoonPill',
+  title: 'UI/Display/Pill/Pill',
-  component: SoonPill,
+  component: Pill,
   decorators: [ComponentDecorator],
 };
 
 export default meta;
-type Story = StoryObj<typeof SoonPill>;
+type Story = StoryObj<typeof Pill>;
 
 export const Default: Story = {};

packages/twenty-front/src/modules/ui/input/button/components/Button.tsx

@@ -3,7 +3,7 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { SoonPill } from '@/ui/display/pill/components/SoonPill';
+import { Pill } from '@/ui/display/pill/components/Pill';
 
 export type ButtonSize = 'medium' | 'small';
 export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
@@ -251,7 +251,7 @@ const StyledButton = styled.button<
   }
 `;
 
-const StyledSoonPill = styled(SoonPill)`
+const StyledSoonPill = styled(Pill)`
   margin-left: auto;
 `;
 
@@ -285,7 +285,7 @@ export const Button = ({
     >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
-      {soon && <StyledSoonPill />}
+      {soon && <StyledSoonPill label="Soon" />}
     </StyledButton>
   );
 };

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -104,6 +104,7 @@ export const ShowPageRightContainer = ({
       Icon: IconMail,
       hide: !shouldDisplayEmailsTab,
       disabled: !isMessagingEnabled,
+      hasBetaPill: true,
     },
   ];
 

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

@@ -3,6 +3,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { Pill } from '@/ui/display/pill/components/Pill';
 
 type TabProps = {
   id: string;
@@ -12,6 +13,7 @@ type TabProps = {
   className?: string;
   onClick?: () => void;
   disabled?: boolean;
+  hasBetaPill?: boolean;
 };
 
 const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
@@ -59,6 +61,7 @@ export const Tab = ({
   onClick,
   className,
   disabled,
+  hasBetaPill,
 }: TabProps) => {
   const theme = useTheme();
   return (
@@ -72,6 +75,7 @@ export const Tab = ({
       <StyledHover>
         {Icon && <Icon size={theme.icon.size.md} />}
         {title}
+        {hasBetaPill && <Pill label="Beta" />}
       </StyledHover>
     </StyledTab>
   );

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -14,6 +14,7 @@ type SingleTabProps = {
   id: string;
   hide?: boolean;
   disabled?: boolean;
+  hasBetaPill?: boolean;
 };
 
 type TabListProps = {
@@ -59,6 +60,7 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => {
                 setActiveTabId(tab.id);
               }}
               disabled={tab.disabled}
+              hasBetaPill={tab.hasBetaPill}
             />
           ))}
       </StyledContainer>

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
-import { SoonPill } from '@/ui/display/pill/components/SoonPill';
+import { Pill } from '@/ui/display/pill/components/Pill';
 import { Button } from '@/ui/input/button/components/Button';
 import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
 
@@ -36,7 +36,7 @@ const StyledIntegrationLogo = styled.div`
   color: ${({ theme }) => theme.border.color.strong};
 `;
 
-const StyledSoonPill = styled(SoonPill)`
+const StyledSoonPill = styled(Pill)`
   padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
 `;
 
@@ -69,7 +69,7 @@ export const SettingsIntegrationComponent = ({
         {integration.text}
       </StyledSection>
       {integration.type === 'Soon' ? (
-        <StyledSoonPill />
+        <StyledSoonPill label="Soon" />
       ) : (
         <Button
           onClick={() => openLinkInTab(integration.link)}

packages/twenty-front/tsup.ui.index.tsx

@@ -14,7 +14,7 @@ export * from './src/modules/ui/display/checkmark/components/AnimatedCheckmark'
 export * from './src/modules/ui/display/chip/components/Chip'
 export * from './src/modules/ui/display/chip/components/EntityChip'
 export * from './src/modules/ui/display/icon/components/IconAddressBook'
-export * from './src/modules/ui/display/pill/components/SoonPill'
+export * from './src/modules/ui/display/pill/components/Pill'
 export * from './src/modules/ui/display/tag/components/Tag'
 export * from './src/modules/ui/display/tooltip/AppTooltip'
 export * from './src/modules/ui/display/tooltip/OverflowingTextWithTooltip'