From 15510c9fbe914622b4d3e66bc54e74738c91f34d Mon Sep 17 00:00:00 2001
From: Jeet Desai <52026385+jeet1desai@users.noreply.github.com>
Date: Wed, 21 Feb 2024 21:39:36 +0530
Subject: [PATCH] Added beta tag in email (#4098)

#4040 added beta tag
---
 .../settings/components/SettingsNavigationCard.tsx     |  4 ++--
 .../display/pill/components/{SoonPill.tsx => Pill.tsx} |  9 +++++----
 .../{SoonPill.stories.tsx => Pill.stories.tsx}         | 10 +++++-----
 .../src/modules/ui/input/button/components/Button.tsx  |  6 +++---
 .../show-page/components/ShowPageRightContainer.tsx    |  1 +
 .../src/modules/ui/layout/tab/components/Tab.tsx       |  4 ++++
 .../src/modules/ui/layout/tab/components/TabList.tsx   |  2 ++
 .../integrations/SettingsIntegrationComponent.tsx      |  6 +++---
 packages/twenty-front/tsup.ui.index.tsx                |  2 +-
 9 files changed, 26 insertions(+), 18 deletions(-)
 rename packages/twenty-front/src/modules/ui/display/pill/components/{SoonPill.tsx => Pill.tsx} (78%)
 rename packages/twenty-front/src/modules/ui/display/pill/components/__stories__/{SoonPill.stories.tsx => Pill.stories.tsx} (56%)

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
index 9c79a5a58..f5ada9b65 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
+++ b/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>
diff --git a/packages/twenty-front/src/modules/ui/display/pill/components/SoonPill.tsx b/packages/twenty-front/src/modules/ui/display/pill/components/Pill.tsx
similarity index 78%
rename from packages/twenty-front/src/modules/ui/display/pill/components/SoonPill.tsx
rename to packages/twenty-front/src/modules/ui/display/pill/components/Pill.tsx
index 8e1393436..414b11db7 100644
--- a/packages/twenty-front/src/modules/ui/display/pill/components/SoonPill.tsx
+++ b/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) => (
-  <StyledSoonPill className={className}>Soon</StyledSoonPill>
+export const Pill = ({ className, label }: PillProps) => (
+  <StyledPill className={className}>{label}</StyledPill>
 );
diff --git a/packages/twenty-front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx b/packages/twenty-front/src/modules/ui/display/pill/components/__stories__/Pill.stories.tsx
similarity index 56%
rename from packages/twenty-front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx
rename to packages/twenty-front/src/modules/ui/display/pill/components/__stories__/Pill.stories.tsx
index 0a302f97d..5ac65f7a0 100644
--- a/packages/twenty-front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx
+++ b/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> = {
-  title: 'UI/Display/Pill/SoonPill',
-  component: SoonPill,
+const meta: Meta<typeof Pill> = {
+  title: 'UI/Display/Pill/Pill',
+  component: Pill,
   decorators: [ComponentDecorator],
 };
 
 export default meta;
-type Story = StoryObj<typeof SoonPill>;
+type Story = StoryObj<typeof Pill>;
 
 export const Default: Story = {};
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
index 0248812b1..4c3a3fc47 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
+++ b/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>
   );
 };
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 7bfce7eb9..9fb0362fa 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
@@ -104,6 +104,7 @@ export const ShowPageRightContainer = ({
       Icon: IconMail,
       hide: !shouldDisplayEmailsTab,
       disabled: !isMessagingEnabled,
+      hasBetaPill: true,
     },
   ];
 
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
index 7866503be..e83aa260a 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
+++ b/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>
   );
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
index 157fb7aa2..8554be46b 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/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>
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx
index 0886dbd65..af01e5b65 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx
+++ b/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)}
diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx
index 13c317e5c..16af92eee 100644
--- a/packages/twenty-front/tsup.ui.index.tsx
+++ b/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'