update pricing + stripe

Author: sandrodesouza

apps/web/pages/api/plans/index.ts

@@ -11,35 +11,48 @@ const stripe = new Stripe(process.env.STRIPE_API_KEY!, {
 function getMembersCount({ price }: { price: string }): string {
   if (price === '150' || price === '1500') {
     return '5,000';
-  } else if (price === '200' || price === '2000') {
-    return '10,000';
   } else if (price === '250' || price === '2500') {
-    return '15,000';
-  } else if (price === '300' || price === '3000') {
     return '20,000';
+  } else if (price === '400' || price === '4000') {
+    return 'Unlimited';
   }
-  return 'Unlimited';
+  return '5,000';
+}
+
+function extraFeatures({ price }: { price: string }): string[] {
+  if (price === '150' || price === '1500') {
+    return ['Community Support'];
+  } else if (price === '250' || price === '2500') {
+    return ['Priority Support'];
+  } else if (price === '400' || price === '4000') {
+    return [
+      '24-hour support response time',
+      'Optional: Your company featured on the Linen.dev website and GitHub readme',
+      'Prioritized feature requests',
+    ];
+  }
+  return [];
 }
 
 function serializeProduct(product: any) {
   const { id, name, description, metadata, default_price } = product;
-  const { price, currency, period } = metadata;
+  const { price, period } = metadata;
   return {
     id,
     name,
     description,
     price,
     priceId: default_price,
-    currency,
     period,
     features: [
       `Up to ${getMembersCount({ price })} members`,
+      'Google Indexable',
+      'Unlimited history retention',
+      'Branded community',
       'Custom domain',
-      'Custom branding',
-      'SEO benefits',
-      'Private communities',
-      'Analytics',
-      'Priority Support',
+      'Sitemap generation',
+      'Import Slack and Discord conversations',
+      ...extraFeatures({ price }),
     ],
   };
 }
@@ -95,7 +108,7 @@ export async function create({
       },
     ],
     subscription_data: {
-      trial_period_days: 7,
+      trial_period_days: 14,
     },
     metadata: {
       communityId,

apps/web/pages/index.tsx

@@ -26,7 +26,7 @@ const tiers = [
       'Google Indexable',
       'Unlimited history retention',
       'Branded community',
-      'Priority Support',
+      'Community Support',
       'Custom domain',
       'Sitemap generation',
       'Import Slack and Discord conversations',
@@ -62,10 +62,11 @@ const tiers = [
       'Google Indexable',
       'Unlimited history retention',
       'Branded community',
-      'Priority Support',
+      '24-hour support response time',
       'Custom domain',
       'Sitemap generation',
       'Import Slack and Discord conversations',
+      'Optional: Your company featured on the Linen.dev website and GitHub readme',
     ],
     mostPopular: false,
   },
@@ -334,6 +335,9 @@ const Home = (props: { accounts: Props[] }) => {
                           /month
                         </span>
                       </p>
+                      <p className="text-sm leading-6 text-gray-600 italic ">
+                        2 months off when billed yearly
+                      </p>
                       <p className="mt-4 text-sm leading-6 text-gray-600">
                         {tier.description}
                       </p>

apps/web/ui/Tbody/index.module.scss

@@ -1,6 +1,6 @@
 .tbody > :not([hidden]) ~ :not([hidden]) {
   border-top-width: 1px;
   border-bottom-width: 1px;
-  background-color: var(--color-white);
+  background-color: var(--color-background);
   border-color: var(--color-gray-200);
 }

apps/web/ui/Tiers/index.module.scss

@@ -46,28 +46,29 @@
 
 .list svg {
   color: var(--color-primary);
+  min-width: 32px;
 }
 
 .grid {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1rem;
-  padding: 0 1rem;
+  padding: 1rem;
   max-width: 1440px;
 }
 
 @media (min-width: 768px) {
   .grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: 2rem;
-    padding: 0 2rem;
+    padding: 2rem;
   }
 }
 
 @media (min-width: 1280px) {
   .grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 2rem;
-    padding: 0 2rem;
+    padding: 2rem;
   }
 }

apps/web/ui/Tiers/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import classNames from 'classnames';
 import { SerializedAccount, Period } from '@linen/types';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
@@ -24,21 +24,6 @@ interface Props {
   currentCommunity: SerializedAccount;
 }
 
-const ENTERPRISE_PLAN = {
-  name: 'Community',
-  description: 'Dedicated support and infrastructure for your community.',
-  features: [
-    'Unlimited members',
-    'Custom domain',
-    'Custom branding',
-    'SEO benefits',
-    'Private communities',
-    'Analytics',
-    'Priority Support',
-  ],
-  price: 'Custom',
-};
-
 export default function Tiers({
   currentCommunity,
   tiers,
@@ -48,7 +33,7 @@ export default function Tiers({
   return (
     <div className={styles.grid}>
       {tiers.map((tier) => {
-        const active = tier.name === 'Vici';
+        const active = false; // tier.name === 'Vici';
 
         const onSubmit = (event: any) => {
           event.preventDefault();
@@ -100,36 +85,14 @@ export default function Tiers({
                 {tier.features.map((feature) => (
                   <li key={feature}>
                     <FiCheck />
-                    {feature}
+                    <span>{feature}</span>
                   </li>
                 ))}
               </ul>
             </div>
           </Card>
         );
       })}
-      <Card
-        title={ENTERPRISE_PLAN.name}
-        description={ENTERPRISE_PLAN.description}
-        price="Custom"
-      >
-        <a
-          href="mailto:[email protected]?subject=Linen Enterprise"
-          className={styles.button}
-        >
-          Contact us
-        </a>
-        <div>
-          <ul className={styles.list}>
-            {ENTERPRISE_PLAN.features.map((feature) => (
-              <li key={feature}>
-                <FiCheck />
-                {feature}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </Card>
     </div>
   );
 }