feat: subscription changes in pricing page (#8444)

Author: danilowoz

packages/app/src/app/components/WorkspaceSetup/steps/Plans.tsx

@@ -345,7 +345,9 @@ const PlanPricing: React.FC<{
           weight="medium"
           css={{ textWrap: 'balance', width: 180 }}
         >
-          {interval === SubscriptionInterval.Monthly ? "per month per workspace" : "per workspace per month billed annually"}
+          {interval === SubscriptionInterval.Monthly
+            ? 'per month per workspace'
+            : 'per workspace per month billed annually'}
         </Text>
       )}
     </Stack>
@@ -612,21 +614,38 @@ const FeaturesComparison: React.FC<{ plans: PricingPlanFeatures[] }> = ({
           property="storage"
         />
         <FeatureComparisonNumbersRow
-          title="Sandboxes"
+          title="Private Sandboxes"
           description={
             <>
-              The maximum number of Sandboxes in a workspace. <br />
+              The maximum number of private Sandboxes in a workspace. <br />
               <a
                 target="_blank"
                 rel="noreferrer"
-                href="https://codesandbox.io/docs/learn/devboxes/overview?tab=sandbox#difference-between-devboxes--sandboxes"
+                href="https://codesandbox.io/docs/learn/devboxes/editors?tab=sandbox"
               >
                 Learn more about Sandboxes.
               </a>
             </>
           }
           plans={plans}
-          property="sandboxes"
+          property="privateSandboxes"
+        />
+        <FeatureComparisonNumbersRow
+          title="Public Sandboxes"
+          description={
+            <>
+              The maximum number of public Sandboxes in a workspace. <br />
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href="https://codesandbox.io/docs/learn/devboxes/editors?tab=sandbox"
+              >
+                Learn more about Sandboxes.
+              </a>
+            </>
+          }
+          plans={plans}
+          property="publicSandboxes"
         />
         <FeatureComparisonNumbersRow
           title="Personal drafts"

packages/app/src/app/components/WorkspaceSetup/steps/constants.ts

@@ -5,7 +5,8 @@ export type PricingPlanFeatures = {
   name: string;
   members: number;
   storage: string;
-  sandboxes: string | number;
+  publicSandboxes: string | number;
+  privateSandboxes: string | number;
   devboxes: number;
   repositories: number;
   drafts: number;
@@ -28,10 +29,11 @@ export const FREE_FEATURES: PricingPlanFeatures = {
   name: 'Free',
   members: 5,
   storage: '20 GB',
-  sandboxes: 20,
+  publicSandboxes: 'Unlimited',
+  privateSandboxes: 5,
   devboxes: Number.MAX_SAFE_INTEGER,
   repositories: Number.MAX_SAFE_INTEGER,
-  drafts: 10,
+  drafts: Number.MAX_SAFE_INTEGER,
   vmType: `4 vCPUs<br/>8 GB RAM`,
   privateProject: true,
   shareableLinks: true,
@@ -52,7 +54,8 @@ export const PRO_FEATURES: PricingPlanFeatures = {
   members: 20,
   storage: `50 GB<br/>
     <small>more with add-ons</small>`,
-  sandboxes: Number.MAX_SAFE_INTEGER,
+  publicSandboxes: Number.MAX_SAFE_INTEGER,
+  privateSandboxes: Number.MAX_SAFE_INTEGER,
   devboxes: Number.MAX_SAFE_INTEGER,
   repositories: Number.MAX_SAFE_INTEGER,
   drafts: Number.MAX_SAFE_INTEGER,
@@ -75,7 +78,8 @@ export const ENTERPRISE_FEATURES: PricingPlanFeatures = {
   name: 'Enterprise',
   members: Number.MAX_SAFE_INTEGER,
   storage: 'Custom',
-  sandboxes: Number.MAX_SAFE_INTEGER,
+  publicSandboxes: Number.MAX_SAFE_INTEGER,
+  privateSandboxes: Number.MAX_SAFE_INTEGER,
   devboxes: Number.MAX_SAFE_INTEGER,
   repositories: Number.MAX_SAFE_INTEGER,
   drafts: Number.MAX_SAFE_INTEGER,

packages/app/src/app/overmind/namespaces/checkout/constants.ts

@@ -13,11 +13,11 @@ export const FREE_PLAN: PricingPlan = {
   storage: 20,
   usage: [
     'Up to 40 hours worth of VM credits per month',
-    '20 GB storage per VM',
-    'VMs up to 4 vCPUs + 8 GB RAM',
+    'VMs up to 4 vCPUs + 8 GiB RAM',
+    '5 private Sandboxes',
+    'Unlimited public Sandboxes',
+    'Unlimited personal drafts',
     'Unlimited Devboxes and repositories',
-    '20 Sandboxes',
-    '10 personal drafts',
     '5 members',
   ],
   features: [
@@ -44,9 +44,10 @@ export const PRO_PLAN: PricingPlan = {
     'Start from 100 hours worth of VM credits per month',
     '50 GB storage per VM',
     'VMs up to 16 vCPUs + 32 GB RAM',
-    'Unlimited Devboxes and repositories',
-    'Unlimited Sandboxes',
+    'Unlimited public Sandboxes',
+    'Unlimited private Sandboxes',
     'Unlimited personal drafts',
+    'Unlimited Devboxes and repositories',
     '20 members',
     'Access on-demand VM credits for $0.18 per hour',
   ],
@@ -63,7 +64,7 @@ export const ENTERPRISE_PLAN: PricingPlan = {
   features: [
     'Unlimited members',
     'Unlimited API',
-    'VMs up to 64 vCPUs + 128 GB RAM',
+    'VMs up to 64 vCPUs + 128 GiB RAM',
     'On-premise options',
     'Private managed cloud',
     'Dedicated support',