fix(web): Minor UI fix in billing plans (#6665)

novuhq · Oct 16, 2024 · 67a55e1 · 67a55e1
1 parent e06f75e
commit 67a55e1
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 58 deletions.
diff --git a/.source b/.source
diff --git 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
@@ -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,16 +118,14 @@ const features: Feature[] = [
   },
   {
     label: 'Provider integrations',
-    isContrast: true,
     values: {
       [SupportedPlansEnum.FREE]: { value: 'Unlimited' },
       [SupportedPlansEnum.BUSINESS]: { value: 'Unlimited' },
       [SupportedPlansEnum.ENTERPRISE]: { value: 'Unlimited' },
     },
   },
   {
-    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
@@ -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
@@ -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
@@ -4,7 +4,7 @@ import { SettingsPageContainer } from './SettingsPageContainer';
 
 export const BillingPage: FC = () => {
   return (
-    <SettingsPageContainer title={'Billing'}>
+    <SettingsPageContainer title={'Plans & Billing'}>
       <BillingRoutes />
     </SettingsPageContainer>
   );