From 37ff05d006d25f94e49b4b8360b7098ab0fbeebe Mon Sep 17 00:00:00 2001
From: Dotan Simha <dotansimha@gmail.com>
Date: Mon, 22 May 2023 11:03:52 +0300
Subject: [PATCH] Update plans content (#2283)

Co-authored-by: Kamil Kisiela <kamil.kisiela@gmail.com>
Co-authored-by: Laurin Quast <laurinquast@googlemail.com>
---
 .../billing/BillingPlanPicker.tsx             | 34 ++++++++++------
 packages/web/docs/src/components/pricing.tsx  | 39 +++++++++++--------
 2 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx b/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
index c34879c69..b08a652ca 100644
--- a/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
+++ b/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { Label, Section } from '@/components/common';
-import { Link, Radio, RadioGroup } from '@/components/v2';
+import { Radio, RadioGroup } from '@/components/v2';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { BillingPlanType } from '@/graphql';
 import { CheckIcon } from '@radix-ui/react-icons';
@@ -15,18 +15,19 @@ const planCollection: {
   [BillingPlanType.Hobby]: {
     description: 'For personal or small projects',
     features: [
-      'Unlimited seats',
-      'Unlimited schema pushes',
-      'Limit of 1M operations',
+      'Unlimited seats, projects and organizations',
+      'Unlimited schema pushes & checks',
+      'Full access to all features (including SSO)',
+      'Limit of 1M operations per month',
       '7 days of usage data retention',
     ],
   },
   [BillingPlanType.Pro]: {
-    description: 'For scaling API',
+    description: 'For scaling APIs and teams',
     features: [
-      'Unlimited seats',
-      'Unlimited schema pushes',
-      '$10 per 1M operations',
+      '+ $10 per 1M operations',
+      'Change your plan at any time',
+      'Everything in Hobby plan, and:',
       '90 days of usage data retention',
     ],
     footer: (
@@ -41,12 +42,21 @@ const planCollection: {
       'Unlimited seats',
       'Unlimited operations',
       'Unlimited schema pushes',
+      'Change your plan at any time',
+      'Improved pricing as you scale',
       '12 months of usage data retention',
-      <span className="flex gap-1">
-        Support from
-        <Link variant="primary" href="https://the-guild.dev" target="_blank" rel="noreferrer">
+      <span className="gap-1">
+        GraphQL/APIs support and guidance
+        <br />
+        from{' '}
+        <a
+          href="https://the-guild.dev"
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium text-orange-500 transition-colors hover:underline"
+        >
           The Guild
-        </Link>
+        </a>
       </span>,
     ],
     footer: 'Shape a custom plan for your business',
diff --git a/packages/web/docs/src/components/pricing.tsx b/packages/web/docs/src/components/pricing.tsx
index e17d0a7a8..5283830f2 100644
--- a/packages/web/docs/src/components/pricing.tsx
+++ b/packages/web/docs/src/components/pricing.tsx
@@ -3,7 +3,7 @@ import { Arrow, Content, Root, Trigger } from '@radix-ui/react-tooltip';
 
 function Tooltip({ content, children }: { content: string; children: ReactNode }) {
   return (
-    <Root>
+    <Root delayDuration={0}>
       <Trigger>{children}</Trigger>
       <Content
         sideOffset={5}
@@ -53,9 +53,8 @@ function Plan(plan: {
   );
 }
 
-const USAGE_DATA_RETENTION_EXPLAINER =
-  'How long to store GraphQL requests reported to GraphQL Hive';
-const OPERATIONS_EXPLAINER = 'GraphQL requests reported to GraphQL Hive';
+const USAGE_DATA_RETENTION_EXPLAINER = 'How long your GraphQL operations are stored on Hive';
+const OPERATIONS_EXPLAINER = 'GraphQL operations reported to GraphQL Hive';
 
 export function Pricing({ gradient }: { gradient: [string, string] }): ReactElement {
   return (
@@ -69,16 +68,20 @@ export function Pricing({ gradient }: { gradient: [string, string] }): ReactElem
         >
           Pricing
         </h2>
-        <p className="text-gray-400">All features are available in every plan</p>
+        <p className="text-gray-400">
+          All features are available on all plans - including the free plan. Our pricing is honest
+          and based only on your real usage.
+        </p>
         <div className="mt-6 flex flex-col content-start items-stretch justify-start justify-items-start gap-4 md:flex-row">
           <Plan
             name="Hobby"
             description="For personal or small projects"
             price="Free"
             features={[
-              'Unlimited seats',
-              'Unlimited schema pushes',
-              <Tooltip content={OPERATIONS_EXPLAINER}>Limit of 1M operations monthly</Tooltip>,
+              'Unlimited seats, projects and organizations',
+              'Unlimited schema pushes & checks',
+              'Full access to all features (including SSO)',
+              <Tooltip content={OPERATIONS_EXPLAINER}>Limit of 1M operations per month</Tooltip>,
               <Tooltip content={USAGE_DATA_RETENTION_EXPLAINER}>
                 7 days of usage data retention
               </Tooltip>,
@@ -86,21 +89,21 @@ export function Pricing({ gradient }: { gradient: [string, string] }): ReactElem
           />
           <Plan
             name="Pro"
-            description="For scaling API"
+            description="For scaling API and teams"
             price={
               <Tooltip content="Base price charged monthly">
                 $10<span className="text-sm text-gray-500">/mo</span>
               </Tooltip>
             }
             features={[
-              'Unlimited seats',
-              'Unlimited schema pushes',
-              <Tooltip content={OPERATIONS_EXPLAINER}>$10 per 1M operations monthly</Tooltip>,
+              <Tooltip content={OPERATIONS_EXPLAINER}>+ $10 per 1M operations</Tooltip>,
+              'Change your plan at any time',
+              <strong>Everything in Hobby plan, and:</strong>,
               <Tooltip content={USAGE_DATA_RETENTION_EXPLAINER}>
                 90 days of usage data retention
               </Tooltip>,
             ]}
-            footer={<div className="mb-2 text-sm font-bold">Free 30 days trial period</div>}
+            footer={<div className="mb-2 text-sm font-bold">🎉 Free 30 days trial period</div>}
           />
           <Plan
             name="Enterprise"
@@ -116,14 +119,16 @@ export function Pricing({ gradient }: { gradient: [string, string] }): ReactElem
               </span>
             }
             features={[
-              'Unlimited seats',
-              'Unlimited schema pushes',
               <Tooltip content={OPERATIONS_EXPLAINER}>Custom limit of operations</Tooltip>,
+              'Change your plan at any time',
+              'Improved pricing as you scale',
               <Tooltip content={USAGE_DATA_RETENTION_EXPLAINER}>
                 12 months of usage data retention
               </Tooltip>,
-              <span className="flex gap-1">
-                Support from
+              <span className="gap-1">
+                GraphQL/APIs support and guidance
+                <br />
+                from{' '}
                 <a
                   href="https://the-guild.dev"
                   target="_blank"