From 67a55e1d859a1225450ad27fc3a14b09e83f0f8a Mon Sep 17 00:00:00 2001
From: Sokratis Vidros <SokratisVidros@users.noreply.github.com>
Date: Wed, 16 Oct 2024 19:17:30 +0300
Subject: [PATCH] fix(web): Minor UI fix in billing plans (#6665)

---
 .source                                       |  2 +-
 .../src/components/nav/SettingsNavMenu.tsx    |  2 +-
 .../src/ee/billing/components/Features.tsx    | 61 ++++---------------
 .../ee/billing/components/HighlightsRow.tsx   |  6 +-
 .../src/ee/clerk/pages/ManageAccountPage.tsx  |  4 +-
 apps/web/src/pages/settings/BillingPage.tsx   |  2 +-
 6 files changed, 19 insertions(+), 58 deletions(-)

diff --git a/.source b/.source
index bc019321ad9..0f6c1f5447f 160000
--- a/.source
+++ b/.source
@@ -1 +1 @@
-Subproject commit bc019321ad97eca87281cb0883c0a3d3a9be5814
+Subproject commit 0f6c1f5447f39bbdbba88b858dc949cbf5866502
diff --git a/apps/web/src/components/nav/SettingsNavMenu.tsx b/apps/web/src/components/nav/SettingsNavMenu.tsx
index a3c4136c0d9..eb5c4bde11d 100644
--- a/apps/web/src/components/nav/SettingsNavMenu.tsx
+++ b/apps/web/src/components/nav/SettingsNavMenu.tsx
@@ -71,7 +71,7 @@ export const SettingsNavMenu: React.FC = () => {
           ></NavMenuLinkButton>
         </When>
         <NavMenuLinkButton
-          label="Billing"
+          label="Plans & Billing"
           isVisible
           icon={<IconCreditCard />}
           link={ROUTES.BILLING}
diff --git a/apps/web/src/ee/billing/components/Features.tsx b/apps/web/src/ee/billing/components/Features.tsx
index ed19310e603..d5c45b3f471 100644
--- a/apps/web/src/ee/billing/components/Features.tsx
+++ b/apps/web/src/ee/billing/components/Features.tsx
@@ -60,7 +60,6 @@ type Feature = {
 const features: Feature[] = [
   {
     label: 'Platform',
-    isContrast: false,
     isTitle: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: '' },
@@ -70,7 +69,6 @@ const features: Feature[] = [
   },
   {
     label: 'Monthly events',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: 'Up to 30,000' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Up to 250,000' },
@@ -79,7 +77,6 @@ const features: Feature[] = [
   },
   {
     label: 'Additional Events',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: '-' },
       [SupportedPlansEnum.BUSINESS]: { value: '$0.0012 per event' },
@@ -88,7 +85,6 @@ const features: Feature[] = [
   },
   {
     label: 'Email, InApp, SMS, Chat, Push Channels',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: <IconCheck /> },
       [SupportedPlansEnum.BUSINESS]: { value: <IconCheck /> },
@@ -97,7 +93,6 @@ const features: Feature[] = [
   },
   {
     label: 'Notification subscribers',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: 'Unlimited' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Unlimited' },
@@ -106,7 +101,6 @@ const features: Feature[] = [
   },
   {
     label: 'Framework',
-    isContrast: false,
     isTitle: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: '' },
@@ -116,7 +110,6 @@ const features: Feature[] = [
   },
   {
     label: 'Total workflows',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: 'Unlimited' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Unlimited' },
@@ -125,7 +118,6 @@ const features: Feature[] = [
   },
   {
     label: 'Provider integrations',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: 'Unlimited' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Unlimited' },
@@ -133,8 +125,7 @@ const features: Feature[] = [
     },
   },
   {
-    label: 'Activity retention',
-    isContrast: false,
+    label: 'Activity Feed retention',
     values: {
       [SupportedPlansEnum.FREE]: { value: '30 days' },
       [SupportedPlansEnum.BUSINESS]: { value: '90 days' },
@@ -143,7 +134,6 @@ const features: Feature[] = [
   },
   {
     label: 'Digests',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: <IconCheck /> },
       [SupportedPlansEnum.BUSINESS]: { value: <IconCheck /> },
@@ -152,7 +142,6 @@ const features: Feature[] = [
   },
   {
     label: 'Step controls',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: <IconCheck /> },
       [SupportedPlansEnum.BUSINESS]: { value: <IconCheck /> },
@@ -161,7 +150,6 @@ const features: Feature[] = [
   },
   {
     label: 'Inbox',
-    isContrast: true,
     isTitle: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: '' },
@@ -171,7 +159,6 @@ const features: Feature[] = [
   },
   {
     label: 'Inbox component',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: <IconCheck /> },
       [SupportedPlansEnum.BUSINESS]: { value: <IconCheck /> },
@@ -180,7 +167,6 @@ const features: Feature[] = [
   },
   {
     label: 'User preferences component',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: <IconCheck /> },
       [SupportedPlansEnum.BUSINESS]: { value: <IconCheck /> },
@@ -189,25 +175,14 @@ const features: Feature[] = [
   },
   {
     label: 'Remove Novu branding',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: '-' },
       [SupportedPlansEnum.BUSINESS]: { value: <IconCheck /> },
       [SupportedPlansEnum.ENTERPRISE]: { value: <IconCheck /> },
     },
   },
-  {
-    label: 'Notifications retention',
-    isContrast: true,
-    values: {
-      [SupportedPlansEnum.FREE]: { value: <Badge label="Coming soon" /> },
-      [SupportedPlansEnum.BUSINESS]: { value: <Badge label="Coming soon" /> },
-      [SupportedPlansEnum.ENTERPRISE]: { value: <Badge label="Coming soon" /> },
-    },
-  },
   {
     label: 'Account administration and security',
-    isContrast: false,
     isTitle: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: '' },
@@ -217,25 +192,22 @@ const features: Feature[] = [
   },
   {
     label: 'Team members',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: '3' },
-      [SupportedPlansEnum.BUSINESS]: { value: '50' },
+      [SupportedPlansEnum.BUSINESS]: { value: '10' },
       [SupportedPlansEnum.ENTERPRISE]: { value: 'Unlimited' },
     },
   },
   {
     label: 'RBAC',
-    isContrast: false,
     values: {
-      [SupportedPlansEnum.FREE]: { value: <IconCheck /> },
+      [SupportedPlansEnum.FREE]: { value: '-' },
       [SupportedPlansEnum.BUSINESS]: { value: <IconCheck /> },
       [SupportedPlansEnum.ENTERPRISE]: { value: <IconCheck /> },
     },
   },
   {
     label: 'GDPR compliance',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: <IconCheck /> },
       [SupportedPlansEnum.BUSINESS]: { value: <IconCheck /> },
@@ -244,7 +216,6 @@ const features: Feature[] = [
   },
   {
     label: 'SAML SSO and Enterprise SSO providers',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: '-' },
       [SupportedPlansEnum.BUSINESS]: { value: '-' },
@@ -253,7 +224,6 @@ const features: Feature[] = [
   },
   {
     label: 'Support and account management',
-    isContrast: true,
     isTitle: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: '' },
@@ -263,25 +233,22 @@ const features: Feature[] = [
   },
   {
     label: 'Support SLA',
-    isContrast: false,
     values: {
-      [SupportedPlansEnum.FREE]: { value: 'Community & Intercom' },
+      [SupportedPlansEnum.FREE]: { value: '-' },
       [SupportedPlansEnum.BUSINESS]: { value: '48 hours' },
       [SupportedPlansEnum.ENTERPRISE]: { value: '24 hours' },
     },
   },
   {
     label: 'Support channels',
-    isContrast: true,
     values: {
-      [SupportedPlansEnum.FREE]: { value: 'Community & Intercom' },
-      [SupportedPlansEnum.BUSINESS]: { value: 'Chat and Email' },
-      [SupportedPlansEnum.ENTERPRISE]: { value: 'Dedicated support' },
+      [SupportedPlansEnum.FREE]: { value: 'Community & Discord' },
+      [SupportedPlansEnum.BUSINESS]: { value: 'Slack & Email' },
+      [SupportedPlansEnum.ENTERPRISE]: { value: 'Dedicated' },
     },
   },
   {
     label: 'Legal & Vendor management',
-    isContrast: false,
     isTitle: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: '' },
@@ -291,16 +258,14 @@ const features: Feature[] = [
   },
   {
     label: 'Payment method',
-    isContrast: true,
     values: {
-      [SupportedPlansEnum.FREE]: { value: 'N/A' },
+      [SupportedPlansEnum.FREE]: { value: '-' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Credit card only' },
-      [SupportedPlansEnum.ENTERPRISE]: { value: 'PO and Invoicing' },
+      [SupportedPlansEnum.ENTERPRISE]: { value: 'Credit card & PO and Invoicing' },
     },
   },
   {
     label: 'Terms of service',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: 'Standard' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Standard' },
@@ -309,7 +274,6 @@ const features: Feature[] = [
   },
   {
     label: 'DPA',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: 'Standard' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Standard' },
@@ -318,7 +282,6 @@ const features: Feature[] = [
   },
   {
     label: 'Security review',
-    isContrast: false,
     values: {
       [SupportedPlansEnum.FREE]: { value: 'SOC 2 and ISO 27001 upon request' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Custom' },
@@ -331,14 +294,14 @@ export const Features = () => {
   return (
     <div className={styles.featureList}>
       {features.map((feature, index) => (
-        <FeatureRow key={index} feature={feature} />
+        <FeatureRow key={index} feature={feature} index={index} />
       ))}
     </div>
   );
 };
 
-const FeatureRow = ({ feature }: { feature: Feature }) => (
-  <div className={styles.rowContainer(feature.isContrast, feature.isTitle)}>
+const FeatureRow = ({ feature, index }: { feature: Feature; index: number }) => (
+  <div className={styles.rowContainer(index % 2 === 1, feature.isTitle)}>
     <TitleCell>
       <Text
         variant={feature.isTitle ? 'strong' : undefined}
diff --git a/apps/web/src/ee/billing/components/HighlightsRow.tsx b/apps/web/src/ee/billing/components/HighlightsRow.tsx
index 276bb415060..156aafcb721 100644
--- a/apps/web/src/ee/billing/components/HighlightsRow.tsx
+++ b/apps/web/src/ee/billing/components/HighlightsRow.tsx
@@ -28,19 +28,17 @@ const highlights: PlanHighlights = {
   [ApiServiceLevelEnum.FREE]: [
     { text: 'Up to 30,000 events per month' },
     { text: '3 teammates' },
-    { text: '7 days activity feed' },
+    { text: '30 days Activity Feed retention' },
   ],
   [ApiServiceLevelEnum.BUSINESS]: [
     { text: 'Up to 250,000 events per month' },
     { text: '50 teammates' },
-    { text: '90 days activity feed' },
-    { text: 'RBAC', badgeLabel: 'Coming soon' },
+    { text: '90 days Activity Feed retention' },
   ],
   [ApiServiceLevelEnum.ENTERPRISE]: [
     { text: 'Up to 5,000,000 events per month' },
     { text: 'Unlimited teammates' },
     { text: 'SAML SSO' },
-    { text: 'RBAC', badgeLabel: 'Coming soon' },
   ],
 };
 
diff --git a/apps/web/src/ee/clerk/pages/ManageAccountPage.tsx b/apps/web/src/ee/clerk/pages/ManageAccountPage.tsx
index b789ef8f9d9..c7f642f91fe 100644
--- a/apps/web/src/ee/clerk/pages/ManageAccountPage.tsx
+++ b/apps/web/src/ee/clerk/pages/ManageAccountPage.tsx
@@ -91,7 +91,7 @@ export default function ManageAccountPage() {
             className={normalTabStyle}
             icon={<IconCreditCard className={tabIconStyle} />}
           >
-            Billing plans
+            Plans & Billing
           </Tabs.Tab>
         </Tabs.List>
 
@@ -125,7 +125,7 @@ export default function ManageAccountPage() {
           </Tabs.Panel>
         )}
         <Tabs.Panel value={MANAGE_ACCOUNT_ROUTE_SEGMENTS.BILLING}>
-          <Title className={billingTitle}>Billing plans</Title>
+          <Title className={billingTitle}>Plans & Billing</Title>
           <BillingPage />
         </Tabs.Panel>
       </Tabs>
diff --git a/apps/web/src/pages/settings/BillingPage.tsx b/apps/web/src/pages/settings/BillingPage.tsx
index 46e269a17a8..d161e39f05d 100644
--- a/apps/web/src/pages/settings/BillingPage.tsx
+++ b/apps/web/src/pages/settings/BillingPage.tsx
@@ -4,7 +4,7 @@ import { SettingsPageContainer } from './SettingsPageContainer';
 
 export const BillingPage: FC = () => {
   return (
-    <SettingsPageContainer title={'Billing'}>
+    <SettingsPageContainer title={'Plans & Billing'}>
       <BillingRoutes />
     </SettingsPageContainer>
   );