feat: update pricing (#8676)

* pricing page updates * convert actions * update moment * updated plans * fix content * plans * fix: typecheck * fix: typecheck * fix: lint

Author: alexnm

packages/app/src/app/components/StripeMessages/AcquisitionAnnouncement.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MessageStripe, Text } from '@codesandbox/components';
+
+export const AcquisitionAnnouncement: React.FC<{ onDismiss: () => void }> = ({
+ onDismiss,
+}) => (
+ <MessageStripe
+ justify="space-between"
+ variant="primary"
+ corners="straight"
+ onDismiss={onDismiss}
+ >
+ <Text>
+ CodeSandbox is now part of{' '}
+ <a
+ style={{ color: 'inherit' }}
+ href="https://together.ai"
+ rel="noreferrer"
+ target="_blank"
+ >
+ Together AI!
+ </a>{' '}
+ We have joined forces to launch{' '}
+ <a
+ style={{ color: 'inherit' }}
+ href="https://codesandbox.io/sdk"
+ rel="noreferrer"
+ target="_blank"
+ >
+ CodeSandbox SDK
+ </a>{' '}
+ and bring code interpretation to generative AI.
+ </Text>
+ <MessageStripe.Action
+ as="a"
+ target="_blank"
+ rel="noreferrer"
+ href="https://codesandbox.io/blog/joining-forces-with-together-ai-introducing-codesandbox-sdk"
+ >
+ See full announcement
+ </MessageStripe.Action>
+ </MessageStripe>
+);

packages/app/src/app/components/WorkspaceSetup/Layout.tsx

@@ -35,10 +35,10 @@ export const WorkspaceFlowLayout: React.FC<{
  css={{
  width: '100%',
  height: '100%',
- padding: '64px',
+ padding: '64px 0px',
  flex: 1,
  '@media (max-width: 1330px)': {
- padding: '64px 24px',
+ padding: '64px 16px',
  },
  '@media (max-width: 768px)': {
  height: 'auto',

packages/app/src/app/components/WorkspaceSetup/StepHeader.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Icon, Stack, Text, Button } from '@codesandbox/components';
-import { useAppState } from 'app/overmind';
 
 interface StepHeaderProps {
  numberOfSteps: number;
  currentStep: number;
  title: string;
- workspaceId?: string;
+ headerNote?: React.ReactNode;
  onPrevStep: () => void;
  onDismiss: () => void;
 }
@@ -15,13 +14,10 @@ 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}>
  {currentStep === 0 ? (
@@ -65,7 +61,7 @@ export const StepHeader = ({
  {title}
  </Text>
 
- {workspaceName && <Text>Upgrade {workspaceName}&apos;s workspace</Text>}
+ {headerNote && <Text>{headerNote}</Text>}
  </Stack>
  </Stack>
  );

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

@@ -7,7 +7,6 @@ import { SpendingLimit } from './steps/SpendingLimit';
 import { SelectWorkspace } from './steps/SelectWorkspace';
 import { Addons } from './steps/Addons';
 import { Finalize } from './steps/Finalize';
-import { ChangeAddons } from './steps/ChangeAddons';
 import { SelectUsecases } from './steps/SelectUsecases';
 
 export type WorkspaceSetupProps = {
@@ -63,13 +62,8 @@ const STEP_COMPONENTS: Record<WorkspaceSetupStep, React.FC<StepProps>> = {
  usecases: SelectUsecases,
  plans: Plans,
  'spending-limit': SpendingLimit,
- addons: Addons,
+ addons: Addons, // Deprecated
  finalize: Finalize,
- 'change-addons-confirmation': ChangeAddons,
 };
 
-const STEPS_WITH_CHECKOUT: WorkspaceSetupStep[] = [
- 'spending-limit',
- 'addons',
- 'change-addons-confirmation',
-];
+const STEPS_WITH_CHECKOUT: WorkspaceSetupStep[] = ['spending-limit', 'addons'];

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

@@ -28,7 +28,9 @@ export const Addons: React.FC<StepProps> = ({
 
  const handleSubmit = () => {
  if (isPro) {
- checkout.calculateConversionCharge({ workspaceId: urlWorkspaceId });
+ checkout.calculateLegacyToUBBConversionCharge({
+ workspaceId: urlWorkspaceId,
+ });
  }
 
  track('Checkout - Next from addons', {
@@ -53,7 +55,6 @@ export const Addons: React.FC<StepProps> = ({
  ? 'Update plan'
  : 'Choose your add-ons (optional)'
  }
- workspaceId={urlWorkspaceId}
  />
 
  <Stack direction="vertical" gap={8}>

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import track from '@codesandbox/common/lib/utils/analytics';
+import { Stack, Button, Text, Icon } from '@codesandbox/components';
+import * as dashboardUrls from '@codesandbox/common/lib/utils/url-generator/dashboard';
+
+import { SubscriptionInterval } from 'app/graphql/types';
+import { useURLSearchParams } from 'app/hooks/useURLSearchParams';
+import { useActions, useAppState } from 'app/overmind';
+import { StepProps } from '../types';
+import { StepHeader } from '../StepHeader';
+import { AnimatedStep } from '../elements';
+
+export const ChangeLegacyPlan: React.FC<StepProps> = ({
+ onPrevStep,
+ onDismiss,
+ currentStep,
+ numberOfSteps,
+}) => {
+ const actions = useActions();
+ const { checkout } = useAppState();
+ const { getQueryParam } = useURLSearchParams();
+ const urlWorkspaceId = getQueryParam('workspace');
+
+ const handleSubmit = async e => {
+ e.preventDefault();
+ const result = await actions.checkout.convertToUsageBilling({
+ workspaceId: urlWorkspaceId,
+ });
+ if (result.success) {
+ track('Checkout - Change Pro Plan');
+ window.location.href = dashboardUrls.portalOverview(urlWorkspaceId);
+ } else {
+ actions.addNotification({
+ message: result.error,
+ type: 'error',
+ timeAlive: 10,
+ });
+ }
+ };
+
+ return (
+ <AnimatedStep>
+ <Stack direction="vertical" gap={12} as="form" onSubmit={handleSubmit}>
+ <StepHeader
+ onPrevStep={onPrevStep}
+ onDismiss={onDismiss}
+ currentStep={currentStep}
+ numberOfSteps={numberOfSteps}
+ title="Review plan"
+ />
+
+ <Text color="#e5e5e5">You are switching to the following plan:</Text>
+
+ <Stack justify="space-between" gap={4}>
+ <Stack direction="vertical">
+ <Text size={6} color="#e5e5e5">
+ Pro plan
+ </Text>
+ <Text>{checkout.newSubscription.totalCredits} VM credits</Text>
+ </Stack>
+ <Text size={6} color="#e5e5e5">
+ ${checkout.newSubscription.totalPrice} /{' '}
+ {checkout.newSubscription.billingInterval ===
+ SubscriptionInterval.Monthly
+ ? 'month'
+ : 'year'}
+ </Text>
+ </Stack>
+
+ <Text>
+ Additional VM credits are available on-demand for $0.018/credit.
+ <br />
+ Spending limit: ${checkout.spendingLimit} / month
+ </Text>
+
+ {checkout.convertLegacyPlanToUBBCharge && (
+ <Stack direction="vertical" gap={2}>
+ <Stack justify="space-between" gap={4}>
+ <Stack direction="vertical">
+ <Text size={6} color="#e5e5e5">
+ Current charge
+ </Text>
+ {checkout.convertLegacyPlanToUBBCharge.total > 0 && (
+ /** If amount charged is 0 show a single line */
+ <Text>Charge (excl. taxes)</Text>
+ )}
+ </Stack>
+ <Stack direction="vertical" align="flex-end">
+ <Text size={6} color="#e5e5e5">
+ ${checkout.convertLegacyPlanToUBBCharge.total}
+ </Text>
+ {checkout.convertLegacyPlanToUBBCharge.total > 0 && (
+ /** If amount charged is 0 show a single line */
+ <Text>
+ ${checkout.convertLegacyPlanToUBBCharge.totalExcludingTax}
+ </Text>
+ )}
+ </Stack>
+ </Stack>
+ <Stack css={{ color: '#A8BFFA' }} gap={1}>
+ <Icon name="circleBang" size={20} />
+ <Text>
+ The charge has been prorated based on your existing plan.
+ <br />
+ Your new billing cycle will start now.
+ </Text>
+ </Stack>
+ </Stack>
+ )}
+
+ <Button autoWidth size="large" type="submit">
+ Accept changes
+ </Button>
+ </Stack>
+ </AnimatedStep>
+ );
+};