Allow user to choose their type

frontend/src/Root.tsx

@@ -9,7 +9,6 @@ import AboutPageContainer from "./pages/aboutPage/AboutPageContainer";
 import UpgradePageContainer from "./pages/upgradePage/UpgradePageContainer";
 import LandingPage from "./pages/landingPage/LandingPage";
 import StandaloneWifiPageContainer from "./pages/wifiPage/StandaloneWifiPageContainer";
-import SchoolPageContainer from "./pages/schoolPage/SchoolPageContainer";
 
 export default () => (
   <ErrorBoundary
@@ -24,7 +23,7 @@ export default () => (
         <Route path="/onboarding" component={OnboardingApp} />
         <Route path="/about" component={AboutPageContainer} />
         <Route path="/wifi" component={StandaloneWifiPageContainer} />
-        <Route path="/school" component={SchoolPageContainer} />
+
         <Route
           path="/updater"
           render={() => <UpgradePageContainer hideSkip />}

frontend/src/components/choice/Choice.module.css

@@ -0,0 +1,101 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+}
+
+.header {
+  text-align: center;
+  margin-top: 100px;
+}
+
+.title {
+  composes: text from '../../globalStyles/Typography.module.css';
+  line-height: 1;
+  font-size: 42px;
+  font-weight: bold;
+  text-align: center;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+  padding: 10px 0px 10px 0px;
+  margin: 0;
+}
+
+.description {
+  /* composes: fontBody from '../../globalStyles/Typography.module.css';
+  font-size: 2rem;
+  color: var(--darkGrey);
+  margin: 1rem; */
+  composes: text from '../../globalStyles/Typography.module.css';
+  color: var(--font80);
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.options {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  justify-content: center;
+  isolation: isolate;
+  flex-wrap: wrap;
+}
+
+.card {
+  margin: 1.5rem;
+  max-height: 32.3rem;
+  min-height: 22.8rem;
+  max-width: 43.7rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.buttons1 {
+  margin: 4rem auto;
+  padding-bottom: 2rem;
+  width: 100%;
+  max-width: 60rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.buttons {
+  flex: 1 1 auto;
+  width: 100%;
+  margin-top: auto;
+  padding-bottom: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+}
+
+.buttonContainer {
+  margin: 2rem 0;
+  display: flex;
+  position: relative;
+}
+
+.nextButton {
+  margin: 0 auto;
+}
+
+
+.backButton {
+  composes: fontSub from '../../globalStyles/Typography.module.css';
+  color: var(--piTopGreen);
+  font-weight: 800;
+  position: absolute;
+  left: 0;
+  top: 0.8rem;
+}

frontend/src/components/choice/Choice.tsx

@@ -0,0 +1,131 @@
+/* eslint react-hooks/rules-of-hooks: warn, react-hooks/exhaustive-deps: warn */
+
+import React, { ReactNode, memo, useState } from "react";
+import cx from "classnames";
+
+import PrimaryButton, {
+  Props as ButtonProps,
+} from "../primaryButton/PrimaryButton";
+import OptionCard, { OptionProps } from "../optionCard/OptionCard";
+import Button from "../atoms/button/Button";
+import Header from "../header/Header";
+import Spinner from "../atoms/spinner/Spinner";
+
+import styles from "./Choice.module.css";
+
+export type ChoiceViewProps = {
+  title: ReactNode;
+  description?: string;
+  options: OptionProps[];
+};
+
+type LayoutButtonProps = Omit<ButtonProps, "children"> & {
+  label?: string;
+};
+
+export type Props = ChoiceViewProps & {
+  selected?: string;
+  onOptionClick?: (value: string) => void;
+  backButton?: LayoutButtonProps;
+  skipButton?: LayoutButtonProps;
+  nextButton: LayoutButtonProps;
+  isLoading?: boolean;
+  showSkip?: boolean;
+  showNext?: boolean;
+  showBack?: boolean;
+  children?: ReactNode;
+};
+
+const Choice = ({
+  title,
+  description,
+  options,
+  selected,
+  backButton,
+  skipButton,
+  nextButton,
+  isLoading = false,
+  showSkip = false,
+  showNext = true,
+  showBack = false,
+  onOptionClick,
+  children,
+}: Props) => {
+  const [selectedOption, setSelectedOption] = useState<string | undefined>(
+    selected
+  );
+
+  const onOptionCardClick = (value: string | undefined) => {
+    if (value) {
+      setSelectedOption(selectedOption === value ? undefined : value);
+      onOptionClick && onOptionClick(value);
+    }
+  };
+
+  return (
+    <section data-testid="choice-root" className={cx(styles.root)}>
+      <Header />
+
+      <header className={styles.header}>
+        <h1 data-testid="choice-title" className={styles.title}>
+          {title}
+        </h1>
+        <p data-testid="choice-description" className={styles.description}>
+          {description}
+        </p>
+      </header>
+
+      <div data-testid="choice-options" className={styles.options}>
+        {options.map((optionProps) => (
+          <OptionCard
+            {...optionProps}
+            key={optionProps.value}
+            selected={selectedOption === optionProps.value}
+            onClick={(value) => {
+              optionProps.onClick && optionProps.onClick(value);
+              onOptionCardClick(value);
+            }}
+            className={styles.card}
+          />
+        ))}
+      </div>
+
+      {children}
+
+      <div className={styles.spacer} />
+
+      <div className={styles.buttons}>
+        <div className={styles.backButtonContainer}>
+          {backButton && showBack && (
+            <Button {...backButton} className={styles.backButton} unstyled>
+              {backButton.label ? backButton.label : "Back"}
+            </Button>
+          )}
+        </div>
+
+        {isLoading ? (
+          <Spinner size={60} />
+        ) : (
+          showNext && (
+            <PrimaryButton
+              {...nextButton}
+              disabled={!selectedOption || nextButton?.disabled}
+            >
+              {nextButton.label ? nextButton.label : "Next"}
+            </PrimaryButton>
+          )
+        )}
+
+        <div className={styles.skipButtonContainer}>
+          {skipButton && showSkip && (
+            <Button {...skipButton} className={styles.skipButton} unstyled>
+              {skipButton.label ? skipButton.label : "Skip"}
+            </Button>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default memo(Choice);