feat(create-ws): new step for use cases

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

@@ -8,6 +8,7 @@ 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 = {
   flow: WorkspaceFlow;
@@ -59,6 +60,7 @@ export const WorkspaceSetup: React.FC<WorkspaceSetupProps> = ({
 const STEP_COMPONENTS: Record<WorkspaceSetupStep, React.FC<StepProps>> = {
   create: Create,
   'select-workspace': SelectWorkspace,
+  usecases: SelectUsecases,
   plans: Plans,
   'spending-limit': SpendingLimit,
   addons: Addons,

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

@@ -165,6 +165,7 @@ export const Create: React.FC<StepProps> = ({
             disabled={disableButton || loading || !!error}
             type="submit"
             size="large"
+            autoWidth
           >
             Next
           </Button>

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

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { Button, Element, Stack, Text } from '@codesandbox/components';
+import { useAppState, useEffects } from 'app/overmind';
+import styled from 'styled-components';
+import { StepHeader } from '../StepHeader';
+import { AnimatedStep } from '../elements';
+import { StepProps } from '../types';
+
+const USE_CASES = [
+  'Conduct interviews',
+  'Build design systems',
+  'Teach',
+  'Work on repositories',
+  'Make prototypes',
+  'Conduct QA',
+  'Live collaboration',
+  'Showcase work',
+  'Code with AI',
+];
+
+export const SelectUsecases: React.FC<StepProps> = ({
+  onNextStep,
+  onPrevStep,
+  onDismiss,
+  currentStep,
+  numberOfSteps,
+}) => {
+  const { activeTeam } = useAppState();
+  const effects = useEffects();
+  const [usecases, setUsecases] = useState<Record<string, boolean>>(
+    USE_CASES.reduce((res, usecase) => {
+      res[usecase] = false;
+      return res;
+    }, {})
+  );
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    const selectedUseCases = Object.keys(usecases).filter(k => usecases[k]);
+    if (selectedUseCases.length > 0) {
+      effects.gql.mutations.setTeamMetadata({
+        teamId: activeTeam,
+        useCases: selectedUseCases,
+      });
+    }
+    onNextStep();
+  };
+
+  return (
+    <AnimatedStep>
+      <Stack direction="vertical" gap={6}>
+        <StepHeader
+          onPrevStep={onPrevStep}
+          onDismiss={onDismiss}
+          currentStep={currentStep}
+          numberOfSteps={numberOfSteps}
+          title="How would you like to use CodeSandox?"
+        />
+        <Stack
+          as="form"
+          onSubmit={handleSubmit}
+          direction="vertical"
+          gap={6}
+          css={{ width: '100%' }}
+          align="flex-start"
+        >
+          <Text color="#e5e5e5">
+            Select all that apply. We will customize your dashboard experience
+            based on this.
+          </Text>
+          <Element
+            css={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr 1fr',
+              gap: '16px',
+            }}
+          >
+            {USE_CASES.map(useCase => (
+              <ToggleButton
+                key={useCase}
+                type="button"
+                variant="secondary"
+                data-selected={usecases[useCase]}
+                onClick={() =>
+                  setUsecases({ ...usecases, [useCase]: !usecases[useCase] })
+                }
+              >
+                {useCase}
+              </ToggleButton>
+            ))}
+          </Element>
+          <Button type="submit" size="large" autoWidth>
+            Next
+          </Button>
+        </Stack>
+      </Stack>
+    </AnimatedStep>
+  );
+};
+
+const ToggleButton = styled(Button)`
+  width: 220px;
+  height: 80px;
+  border-radius: 16px;
+  font-size: 16px;
+
+  &[data-selected='true'] {
+    background-color: #644ed7;
+    color: #fff;
+
+    &:focus {
+      background-color: #644ed7;
+    }
+
+    &:hover {
+      background-color: #644ed7;
+    }
+  }
+`;

packages/app/src/app/components/WorkspaceSetup/types.ts

@@ -1,6 +1,7 @@
 export type WorkspaceSetupStep =
   | 'create'
   | 'select-workspace'
+  | 'usecases'
   | 'plans'
   | 'addons'
   | 'change-addons-confirmation'

packages/app/src/app/graphql/types.ts

@@ -516,7 +516,11 @@ export type TeamLimits = {
   includedDrafts: Scalars['Int'];
   /** Number of workspace members included with the team's subscription, including add-ons */
   includedMembers: Scalars['Int'];
-  /** Number of sandboxes included with the team's subscription, including add-ons */
+  /** Number of included private browser sandboxes with the team's subscription */
+  includedPrivateSandboxes: Scalars['Int'];
+  /** Number of included public browser sandboxes with the team's subscription */
+  includedPublicSandboxes: Scalars['Int'];
+  /** DEPRECATED: Number of sandboxes included with the team's subscription */
   includedSandboxes: Scalars['Int'];
   /** Storage (in GB) included with the team's subscription, including add-ons */
   includedStorage: Scalars['Int'];
@@ -2193,12 +2197,14 @@ export type RootMutationTypeAddSandboxesToAlbumArgs = {
 
 export type RootMutationTypeAddToCollectionArgs = {
   collectionPath: Scalars['String'];
+  privacy: InputMaybe<Scalars['Int']>;
   sandboxIds: InputMaybe<Array<InputMaybe<Scalars['ID']>>>;
   teamId: InputMaybe<Scalars['UUID4']>;
 };
 
 export type RootMutationTypeAddToCollectionOrTeamArgs = {
   collectionPath: InputMaybe<Scalars['String']>;
+  privacy: InputMaybe<Scalars['Int']>;
   sandboxIds: InputMaybe<Array<InputMaybe<Scalars['ID']>>>;
   teamId: InputMaybe<Scalars['UUID4']>;
 };
@@ -4834,6 +4840,7 @@ export type CurrentTeamInfoFragmentFragment = {
     ubbBeta: boolean;
     friendOfCsb: boolean;
   };
+  metadata: { __typename?: 'TeamMetadata'; useCases: Array<string> };
 };
 
 export type BranchFragment = {
@@ -5645,6 +5652,63 @@ export type UpdateProjectVmTierMutation = {
   };
 };
 
+export type SetTeamMetadataMutationVariables = Exact<{
+  teamId: Scalars['UUID4'];
+  useCases: Array<Scalars['String']> | Scalars['String'];
+}>;
+
+export type SetTeamMetadataMutation = {
+  __typename?: 'RootMutationType';
+  setTeamMetadata: {
+    __typename?: 'Team';
+    id: any;
+    name: string;
+    type: TeamType;
+    description: string | null;
+    creatorId: any | null;
+    avatarUrl: string | null;
+    legacy: boolean;
+    frozen: boolean;
+    insertedAt: string;
+    settings: {
+      __typename?: 'WorkspaceSandboxSettings';
+      minimumPrivacy: number;
+    } | null;
+    userAuthorizations: Array<{
+      __typename?: 'UserAuthorization';
+      userId: any;
+      authorization: TeamMemberAuthorization;
+      teamManager: boolean;
+    }>;
+    users: Array<{
+      __typename?: 'User';
+      id: any;
+      name: string | null;
+      username: string;
+      avatarUrl: string;
+    }>;
+    invitees: Array<{
+      __typename?: 'User';
+      id: any;
+      name: string | null;
+      username: string;
+      avatarUrl: string;
+    }>;
+    subscription: {
+      __typename?: 'ProSubscription';
+      origin: SubscriptionOrigin | null;
+      type: SubscriptionType;
+      status: SubscriptionStatus;
+      paymentProvider: SubscriptionPaymentProvider | null;
+    } | null;
+    featureFlags: {
+      __typename?: 'TeamFeatureFlags';
+      ubbBeta: boolean;
+      friendOfCsb: boolean;
+    };
+  };
+};
+
 export type JoinEligibleWorkspaceMutationVariables = Exact<{
   workspaceId: Scalars['ID'];
 }>;
@@ -6356,6 +6420,7 @@ export type GetTeamQuery = {
         ubbBeta: boolean;
         friendOfCsb: boolean;
       };
+      metadata: { __typename?: 'TeamMetadata'; useCases: Array<string> };
     } | null;
   } | null;
 };

packages/app/src/app/overmind/effects/gql/dashboard/fragments.ts

@@ -268,6 +268,10 @@ export const currentTeamInfoFragment = gql`
       ubbBeta
       friendOfCsb
     }
+
+    metadata {
+      useCases
+    }
   }
 `;
 

packages/app/src/app/overmind/effects/gql/dashboard/mutations.ts

@@ -61,6 +61,8 @@ import {
   UpdateProjectVmTierMutation,
   UpdateUsageSubscriptionMutationVariables,
   UpdateUsageSubscriptionMutation,
+  SetTeamMetadataMutation,
+  SetTeamMetadataMutationVariables,
   JoinEligibleWorkspaceMutation,
   JoinEligibleWorkspaceMutationVariables,
 } from 'app/graphql/types';
@@ -479,6 +481,18 @@ export const updateProjectVmTier: Query<
   }
 `;
 
+export const setTeamMetadata: Query<
+  SetTeamMetadataMutation,
+  SetTeamMetadataMutationVariables
+> = gql`
+  mutation SetTeamMetadata($teamId: UUID4!, $useCases: [String!]!) {
+    setTeamMetadata(teamId: $teamId, metadata: { useCases: $useCases }) {
+      ...teamFragmentDashboard
+    }
+  }
+  ${teamFragmentDashboard}
+`;
+
 export const joinEligibleWorkspace: Query<
   JoinEligibleWorkspaceMutation,
   JoinEligibleWorkspaceMutationVariables

packages/app/src/app/pages/WorkspaceFlows/CreateWorkspace.tsx

@@ -24,7 +24,14 @@ export const CreateWorkspace = () => {
 
   return (
     <WorkspaceSetup
-      steps={['create', 'plans', 'addons', 'spending-limit', 'finalize']}
+      steps={[
+        'create',
+        'usecases',
+        'plans',
+        'addons',
+        'spending-limit',
+        'finalize',
+      ]}
       flow="create-workspace"
       onComplete={() => {
         clearFreshWorkspaceId();