quick save

src/pages/teacherOnboarding/BulkCreateStudentsForm.tsx

@@ -0,0 +1,9 @@
+import { type FC } from "react"
+
+export interface BulkCreateStudentsFormProps {}
+
+const BulkCreateStudentsForm: FC<BulkCreateStudentsFormProps> = () => {
+  return <></>
+}
+
+export default BulkCreateStudentsForm

src/pages/teacherOnboarding/CreateClassForm.tsx

@@ -0,0 +1,42 @@
+import * as forms from "codeforlife/components/form"
+import { type FC } from "react"
+import { type SubmitFormOptions } from "codeforlife/utils/form"
+import { Typography } from "@mui/material"
+
+import { ClassNameField, ReadClassmatesDataField } from "../../components/form"
+import {
+  type CreateClassArg,
+  type CreateClassResult,
+  useCreateClassMutation,
+} from "../../api/klass"
+
+export interface CreateClassFormProps {
+  submitOptions: SubmitFormOptions<
+    CreateClassArg,
+    CreateClassArg,
+    CreateClassResult
+  >
+}
+
+const CreateClassForm: FC<CreateClassFormProps> = ({ submitOptions }) => (
+  <>
+    <Typography>
+      When you set up a new class, a unique class access code will automatically
+      be generated, with you being identified as the teacher for that class.
+    </Typography>
+    <forms.Form
+      initialValues={{
+        name: "",
+        read_classmates_data: false,
+      }}
+      useMutation={useCreateClassMutation}
+      submitOptions={submitOptions}
+    >
+      <ClassNameField required />
+      <ReadClassmatesDataField />
+      <forms.SubmitButton>Create class</forms.SubmitButton>
+    </forms.Form>
+  </>
+)
+
+export default CreateClassForm

src/pages/teacherOnboarding/CreateSchoolForm.tsx

@@ -0,0 +1,48 @@
+import * as forms from "codeforlife/components/form"
+import { type FC } from "react"
+import { type SubmitFormOptions } from "codeforlife/utils/form"
+import { Typography } from "@mui/material"
+
+import {
+  type CreateSchoolArg,
+  type CreateSchoolResult,
+  useCreateSchoolMutation,
+} from "../../api/school"
+import { SchoolNameField } from "../../components/form"
+
+export interface CreateSchoolFormProps {
+  submitOptions: SubmitFormOptions<
+    CreateSchoolArg,
+    CreateSchoolArg,
+    CreateSchoolResult
+  >
+}
+
+const CreateSchoolForm: FC<CreateSchoolFormProps> = ({ submitOptions }) => (
+  <>
+    <Typography>
+      As the first person from your school or club to register for Code for
+      Life, by default, you become the organisation&apos;s administrator.
+    </Typography>
+    <forms.Form
+      initialValues={{
+        name: "",
+        country: undefined,
+        uk_county: undefined,
+      }}
+      useMutation={useCreateSchoolMutation}
+      submitOptions={submitOptions}
+    >
+      {form => (
+        <>
+          <SchoolNameField />
+          <forms.CountryField />
+          {form.values.country === "GB" && <forms.UkCountyField />}
+          <forms.SubmitButton>Create school or club</forms.SubmitButton>
+        </>
+      )}
+    </forms.Form>
+  </>
+)
+
+export default CreateSchoolForm

src/pages/teacherOnboarding/StudentCredentialsTable.tsx

@@ -0,0 +1,9 @@
+import { type FC } from "react"
+
+export interface StudentCredentialsTableProps {}
+
+const StudentCredentialsTable: FC<StudentCredentialsTableProps> = () => {
+  return <></>
+}
+
+export default StudentCredentialsTable

src/pages/teacherOnboarding/TeacherOnboarding.tsx

@@ -0,0 +1,127 @@
+import * as pages from "codeforlife/components/page"
+import { type Class, type School } from "codeforlife/api"
+import { type FC, type ReactNode, useState } from "react"
+import { MobileStepper, Typography, mobileStepperClasses } from "@mui/material"
+import { type SessionMetadata } from "codeforlife/hooks"
+import { handleResultState } from "codeforlife/utils/api"
+
+import BulkCreateStudentsForm from "./BulkCreateStudentsForm"
+import CreateClassForm from "./CreateClassForm"
+import CreateSchoolForm from "./CreateSchoolForm"
+import StudentCredentialsTable from "./StudentCredentialsTable"
+import { useRetrieveUserQuery } from "../../api/user"
+
+export interface TeacherOnboardingProps {}
+
+const _TeacherOnboarding: FC<TeacherOnboardingProps & SessionMetadata> = ({
+  user_id,
+}) => {
+  const result = useRetrieveUserQuery(user_id)
+
+  const [activeStep, setActiveStep] = useState<{
+    index: number
+    schoolId?: School["id"]
+    classId?: Class["id"]
+    // users?: BulkCreateResult<User>
+  }>({ index: 0 })
+
+  function onSubmit(state: Omit<typeof activeStep, "index">): void {
+    setActiveStep(previousState => ({
+      index: previousState.index + 1,
+      ...state,
+    }))
+  }
+
+  function generateKey(step: number): string {
+    return `teacher-onboarding-step-${step}`
+  }
+
+  const steps: Array<{ header: string; element: ReactNode }> = [
+    {
+      header: "Create a school or club",
+      element: (
+        <CreateSchoolForm
+          key={generateKey(0)}
+          submitOptions={{
+            then: school => {
+              onSubmit({ schoolId: school.id })
+            },
+          }}
+        />
+      ),
+    },
+    {
+      header: "Create a class",
+      element: (
+        <CreateClassForm
+          key={generateKey(1)}
+          submitOptions={{
+            then: klass => {
+              onSubmit({ classId: klass.id })
+            },
+          }}
+        />
+      ),
+    },
+    {
+      header: "Add students to class",
+      element: (
+        <BulkCreateStudentsForm
+          key={generateKey(2)}
+          // classId={activeStep.classId as number}
+          // onSubmit={users => {
+          //   onSubmit({ users })
+          // }}
+        />
+      ),
+    },
+    {
+      header: "Student login details",
+      element: (
+        <StudentCredentialsTable
+          key={generateKey(3)}
+          // accessCode={activeStep.classAccessCode as string}
+          // users={activeStep.users as BulkCreateResult<User>}
+        />
+      ),
+    },
+  ]
+
+  return handleResultState(result, authUser => (
+    <>
+      <pages.Banner
+        header={`Welcome, ${authUser.first_name} ${authUser.last_name}`}
+        subheader="Everything you need to start coding with your class is here. Let's set you up."
+      />
+      <Typography variant="h4">{steps[activeStep.index].header}</Typography>
+      <Typography>
+        Progress &lt; {activeStep.index + 1} of {steps.length} &gt;
+      </Typography>
+      <MobileStepper
+        variant="progress"
+        position="static"
+        steps={steps.length + 1}
+        activeStep={activeStep.index + 1}
+        nextButton={undefined}
+        backButton={undefined}
+        sx={{
+          padding: 0,
+          marginBottom: 3,
+          [`.${mobileStepperClasses.progress}`]: {
+            width: "100%",
+            height: "7px",
+          },
+        }}
+      />
+      {steps[activeStep.index].element}
+    </>
+  ))
+}
+
+const TeacherOnboarding: FC<TeacherOnboardingProps> = props => (
+  <pages.Page session={{ userType: "teacher" }}>
+    {sessionMetadata => <_TeacherOnboarding {...props} {...sessionMetadata} />}
+  </pages.Page>
+)
+
+export default TeacherOnboarding