Skip to content

Commit

Permalink
fix content
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexnm
alexnm committed Dec 11, 2024
1 parent 580a14f commit 317b9bb
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 43 deletions.
5 changes: 3 additions & 2 deletions packages/app/src/app/components/WorkspaceSetup/StepHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ interface StepHeaderProps {
numberOfSteps: number;
currentStep: number;
title: string;
headerNote?: React.ReactNode;
workspaceId?: string;
onPrevStep: () => void;
onDismiss: () => void;
Expand All @@ -15,12 +16,12 @@ export const StepHeader = ({
currentStep,
numberOfSteps,
title,
headerNote,
onDismiss,
onPrevStep,
workspaceId,
}: StepHeaderProps) => {
const { dashboard } = useAppState();
const workspaceName = dashboard.teams.find(t => t.id === workspaceId)?.name;

return (
<Stack direction="vertical" gap={8}>
Expand Down Expand Up @@ -65,7 +66,7 @@ export const StepHeader = ({
{title}
</Text>

{workspaceName && <Text>Upgrade {workspaceName}&apos;s workspace</Text>}
{headerNote && <Text>{headerNote}</Text>}
</Stack>
</Stack>
);
Expand Down
59 changes: 23 additions & 36 deletions packages/app/src/app/components/WorkspaceSetup/steps/Plans.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,19 @@ export const Plans: React.FC<StepProps> = ({
flow,
}) => {
const { getQueryParam } = useURLSearchParams();
const { activeTeam, checkout } = useAppState();
const { activeTeam, checkout, dashboard } = useAppState();

const actions = useActions();
const effects = useEffects();
const urlWorkspaceId = getQueryParam('workspace');
const [tiers, setTiers] = useState<VMTier[]>([]);
const { isFree, proPlanType } = useWorkspaceSubscription();

const planDisplayName = proPlanType === 'flex' ? 'Pro' : 'Builder';
const showFreePlan = isFree;
const workspaceName = dashboard.teams.find(t => t.id === urlWorkspaceId)
?.name;
const headerSuffix = workspaceName ? `for ${workspaceName}` : '';
const [billingInterval, setBillingInterval] = useState(
SubscriptionInterval.Monthly
);
Expand Down Expand Up @@ -122,8 +126,15 @@ export const Plans: React.FC<StepProps> = ({
onDismiss={onDismiss}
currentStep={currentStep}
numberOfSteps={numberOfSteps}
title="Choose a plan"
title={`Choose a plan ${headerSuffix}`}
workspaceId={urlWorkspaceId}
headerNote={
<>
Your workspace is currently on the{' '}
<Text color="#fff">{proPlanType ? planDisplayName : 'Free'}</Text>{' '}
plan.
</>
}
/>

<Stack gap={4} direction="vertical">
Expand Down Expand Up @@ -273,7 +284,7 @@ export const Plans: React.FC<StepProps> = ({
{enterprisePlan.name}
</Text>
<CardHeading>
The future of Cloud Development Environments
Cloud development & code execution at scale
</CardHeading>
<PlanPricing plan={enterprisePlan} overridePrice="Custom" />
<Button
Expand All @@ -294,7 +305,10 @@ export const Plans: React.FC<StepProps> = ({
</Button>
<Stack direction="vertical" gap={4}>
<Text>Everything in Pro, plus:</Text>
<PlanFeatures features={enterprisePlan.features} />
<PlanFeatures
features={enterprisePlan.features}
includeTooltips
/>
</Stack>
</StyledCard>
</Stack>
Expand Down Expand Up @@ -337,7 +351,7 @@ const CardHeading = styled(Text)`
`;

const GridCell = styled(Stack)`
padding: 24px 16px;
padding: 16px 8px;
max-height: 80px;
width: 100%;
min-width: 160px;
Expand Down Expand Up @@ -464,6 +478,8 @@ const PlanFeatures: React.FC<{
export const EXPLAINED_FEATURES: Record<string, string> = {
'VM credits':
'Credits measure VM runtime and apply to Devboxes and Repositories.',
'VM credit':
'Credits measure VM runtime and apply to Devboxes and Repositories.',
Devboxes:
'Devboxes are our Cloud Development Environment, which runs in virtual machines and requires VM credits.',
Sandboxes:
Expand Down Expand Up @@ -754,49 +770,20 @@ const FeaturesComparison: React.FC<{ plans: PricingPlanFeatures[] }> = ({
plans={plans}
property="privateProject"
/>
<FeatureComparisonBooleanRow
title="Shareable links"
description="Share your devboxes and sandboxes with users outside of your workspace."
plans={plans}
property="shareableLinks"
/>
<FeatureComparisonBooleanRow
title="Live sessions"
description="Collaborate with others on your devboxes and repositories."
plans={plans}
property="liveSessions"
/>
<FeatureComparisonBooleanRow
title="API access"
description="Automatically create, share and delete sandboxes and branches."
plans={plans}
property="apiAccess"
/>
<FeatureComparisonBooleanRow
title="Instant environment resume"
description="Load an existing Devbox in seconds without having to rebuild all assets."
plans={plans}
property="instantEnvironmentResume"
/>
<FeatureComparisonBooleanRow
title="Instant environment share"
description="Share your Devbox with the same VM and settings with your team in seconds."
plans={plans}
property="instantEnvironmentShare"
/>

<FeatureComparisonBooleanRow
title="Private NPM"
description="Use private npm packages from your own custom registry."
plans={plans}
property="privateNPM"
/>

<FeatureComparisonBooleanRow
title="Protected previews"
description="Protect who can view your dev server preview. (Coming soon)."
plans={plans}
property="protectedPreviews"
/>
<FeatureComparisonBooleanRow
title="SSO"
description="Single Sign-On support for Okta and more."
Expand Down Expand Up @@ -843,7 +830,7 @@ const FeatureComparisonNumbersRow: React.FC<FeatureComparisonRowProps> = ({
}) => (
<>
<GridCellDetails css={{ alignItems: 'flex-start' }}>
<Text weight="medium" size={5}>
<Text weight="medium" size={4}>
{title}
</Text>
<Text
Expand Down
9 changes: 4 additions & 5 deletions packages/app/src/app/overmind/namespaces/checkout/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ export const FREE_PLAN: PricingPlan = {
credits: 400,
storage: 20,
usage: [
'Up to 40 hours worth of VM credits per month',

'Up to 40 hours of monthly VM credits',
'Unlimited Sandboxes & Devboxes',
'5 members',
],
Expand All @@ -33,7 +32,7 @@ export const PRO_PLAN: PricingPlan = {
storage: 50,
features: ['All free features', 'VMs up to 16 vCPUs + 32 GiB RAM'],
usage: [
'Start from 100 hours worth of VM credits per month',
'Start from 100 hours of monthly VM credits',
'Unlimited Sandboxes & Devboxes',
'20 members',
'Access on-demand VM credits for $0.18 per hour',
Expand All @@ -49,7 +48,7 @@ export const BUILDER_PLAN: PricingPlan = {
storage: 50,
features: ['All Pro features', 'CodeSandbox SDK', 'More VM tiers'],
usage: [
'Start from 160 hours worth of VM credits per month',
'Start from 160 hours of monthly VM credits',
'Unlimited Sandboxes & Devboxes',
'20 members',
'100 concurrent VMs',
Expand All @@ -66,8 +65,8 @@ export const ENTERPRISE_PLAN: PricingPlan = {
storage: 0,
usage: [],
features: [
'Bulk VM credit packs up to 50% off',
'Unlimited members',
'Unlimited API',
'VMs up to 64 vCPUs + 128 GiB RAM',
'On-premise options',
'Private managed cloud',
Expand Down

0 comments on commit 317b9bb

Please sign in to comment.