add buzzer code identification to onboarding flow

packages/doorman-ui/src/components/CountdownBar.tsx

@@ -5,9 +5,12 @@ export interface ICountdownBarProps {
   timeSeconds: number;
   onCancel?: () => void;
   onExpiry?: () => void;
+  label?: string;
+  description?: string;
+  additionalInfo?: string;
 }
 
-export const CountdownBar = ({ timeSeconds, onCancel, onExpiry }: ICountdownBarProps) => {
+export const CountdownBar = ({ timeSeconds, onCancel, onExpiry, label, description, additionalInfo }: ICountdownBarProps) => {
   const [ countdown, setCountdown ] = useState<number>(timeSeconds);
 
   useEffect(() => {
@@ -26,16 +29,13 @@ export const CountdownBar = ({ timeSeconds, onCancel, onExpiry }: ICountdownBarP
     return () => clearTimeout(timer);
   }, [countdown]);
 
-  
-
   return (
     <ProgressBar
-      label={"Authentication Timeout"}
+      label={label || "Authentication Timeout"}
-      description={"Dial the buzzer before the time expires"} 
+      description={description || "Dial the buzzer before the time expires"} 
-      additionalInfo={`Authentication expires after ${timeSeconds}s to keep the door secure. Please dial the buzzer within the time remaining or it won't unlock`} 
+      additionalInfo={additionalInfo || `Authentication expires after ${timeSeconds}s to keep the door secure. Please dial the buzzer within the time remaining or it won't unlock`} 
       value={(countdown / timeSeconds) * 100}
       variant="flash"
     />
   );
-
 }

packages/doorman-ui/src/index.tsx

@@ -7,6 +7,7 @@ import { ErrorPage } from './pages/ErrorPage';
 import { QueryRouter } from './routers/QueryRouter';
 import { EditPage } from './pages/EditPage';
 import { RedirectPage } from './pages/RedirectPage';
+import { OnboardingPage } from './pages/OnboardingPage';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -26,7 +27,8 @@ const router = createBrowserRouter([
             mapping={{
                 edit: <EditPage />,
                 door: <DoorPage />,
-                onboard: <EditPage isOnboarding={true} />,
+                onboard: <OnboardingPage />,
+                onboardForm: <EditPage isOnboarding={true} />,
                 state: <RedirectPage />
             }}
           />

packages/doorman-ui/src/pages/EditPage.tsx

@@ -20,9 +20,14 @@ export interface EditPageProps {
 export const EditPage = ({ isOnboarding }: EditPageProps) => {
   const doorResponse = useLoaderData() as DoorResponse;
   const door = doorResponse.id;
+  const [params, setParams] = useSearchParams();
+
+  const buzzer = params.get("buzzer") || undefined;
+
   const { setValue, setError, getValues, watch, formState, clearErrors, control, register } = useForm<DoorEditForm>({
     defaultValues: {
       ...doorResponse,
+      buzzer,
       isConfirmed: !isOnboarding,
     },
     mode: "all",
@@ -62,7 +67,7 @@ export const EditPage = ({ isOnboarding }: EditPageProps) => {
   const fallbackNumbersError = formState.errors.fallbackNumbers?.message;
   const discordUsersError = formState.errors.discordUsers?.message;
 
-  const backUrl = isOnboarding? '/': `?door=${door}`;
+  const backUrl = isOnboarding? '/?onboard': `?door=${door}`;
   const apiRoute = isOnboarding ? ONBOARD_ROUTE: EDIT_ROUTE;
 
   return (     
@@ -74,7 +79,7 @@ export const EditPage = ({ isOnboarding }: EditPageProps) => {
         <BreadcrumbGroup
           items={[
             { text: 'Door', href: backUrl },
-            isOnboarding ? { text: "Onboard", href: "?onboard" }: { text: door, href: `?edit&door=${door}` },
+            isOnboarding ? { text: "Onboard Form", href: `?onboardForm&buzzer=${buzzer}` }: { text: door, href: `?edit&door=${door}` },
           ]}
         />
       }
@@ -146,11 +151,19 @@ export const EditPage = ({ isOnboarding }: EditPageProps) => {
         >
           <Container>
             <SpaceBetween direction="vertical" size="l">
+              {isOnboarding &&
+                <FormField label="Register Doorman in Building" constraintText="Confirm that you added our number to your buzzer system: 604-757-1824" errorText={formState.errors.isConfirmed?.message}>
+                  <label>
+                    I have added Doorman's number to my buzzer
+                    <input type="checkbox" {...register("isConfirmed")} />
+                  </label>
+                </FormField>
+              }
               <FormField label="Door Name" constraintText="Unique name for this Door, will be used in your Doorman URL">
                 <CInput readOnly={!isOnboarding} disabled={!isOnboarding} name="id" control={control} />
               </FormField>
               <FormField label="Buzzer Number" constraintText="Phone number that calls you when your buzzer is called">
-                <CInput readOnly={!isOnboarding} disabled={!isOnboarding} name="buzzer" control={control} />
+                <CInput readOnly={!!buzzer} disabled={!!buzzer} name="buzzer" control={control} />
               </FormField>
               <FormField label="PIN" constraintText={"Code to unlock this Door in Doorman"}>
                 <CInput type="password" name="pin" control={control} />
@@ -233,14 +246,6 @@ export const EditPage = ({ isOnboarding }: EditPageProps) => {
               <FormField label="Welcome Message" constraintText="Message to display after a successful unlock">
                 <CTextArea name="greeting" control={control} />
               </FormField>
-              {isOnboarding &&
-                <FormField label="Register Doorman in Building" constraintText="Confirm that you added our number to your buzzer system: 604-757-1824" errorText={formState.errors.isConfirmed?.message}>
-                  <label>
-                    I have added Doorman's number to my buzzer
-                    <input type="checkbox" {...register("isConfirmed")} />
-                  </label>
-                </FormField>
-              }
             </SpaceBetween>
           </Container>
         </Form>

packages/doorman-ui/src/pages/OnboardingPage.tsx

@@ -0,0 +1,239 @@
+import { ReactNode, useEffect, useState } from "react";
+import { useLoaderData, useNavigate, useSearchParams } from "react-router-dom";
+import { AppLayout, BreadcrumbGroup, Container, Flashbar, FlashbarProps, Header, SpaceBetween, TextContent, Wizard } from "@cloudscape-design/components";
+import OtpInput from 'react-otp-input';
+import { CountdownBar } from "../components/CountdownBar";
+import { fetchUrlEncoded } from "../helpers/FetchHelper";
+
+export function OnboardingPage() {
+  const navigate = useNavigate();
+  const [ step, setStep ] = useState(0);
+  const [ alerts, setAlerts ] = useState<FlashbarProps.MessageDefinition[]>([]);
+  
+  const [ otp, setOtp ] = useState("");
+  const [ buzzerNumber, setBuzzerNumber ] = useState("");
+
+  const dismissAlert = (id: string) => {
+    setAlerts(alerts => alerts.filter(alert => alert.id !== id));
+  }
+
+  const dismissInProgressAlerts = () => {
+    setAlerts(alerts => alerts.filter(alert => alert.type !== 'in-progress'));
+  }
+
+  const createAlert = (type: FlashbarProps.Type, content: ReactNode): FlashbarProps.MessageDefinition => {
+    const id = `${Math.random()}`;
+    return {
+      id,
+      type,
+      content,
+      dismissible: type !== 'in-progress',
+      onDismiss: () => dismissAlert(id),
+    }
+  }
+
+  const addAlert = (type: FlashbarProps.Type, content: ReactNode): string => {
+    const newAlert = createAlert(type, content);
+    setAlerts(alerts => [
+      newAlert,
+      ...alerts,
+    ]);
+
+    return newAlert.id as string;
+  }
+
+  useEffect(() => {
+    if (otp.length === 4) {
+      // see if this is valid otp
+      fetchUrlEncoded('/api/door/checkOtp', {
+        otp,
+      }).then(res => res.json())
+        .then(res => {
+          if (res.msg) {
+            addAlert("error", res.msg);
+            return;
+          }
+          const apiNumber = res.buzzer;
+      
+          setBuzzerNumber(apiNumber);
+          addAlert("success", `Successfully verified Buzzer as ${apiNumber}`);
+          setTimeout(() => {
+            setStep(3);
+          }, 1_000);
+        });
+    }
+  }, [otp]);
+
+  return (
+    <AppLayout
+      contentType="wizard"
+      navigationHide
+      toolsHide
+      breadcrumbs={
+        <BreadcrumbGroup
+          items={[
+            { text: 'Door', href: '#' },
+            { text: 'Onboarding', href: '#' },
+          ]}
+        />
+      }
+      notifications={
+        <Flashbar 
+          stackItems={true}
+          items={alerts}
+        />
+      }
+      content={
+        <Wizard
+          i18nStrings={{
+            stepNumberLabel: stepNumber =>
+              `Step ${stepNumber}`,
+            collapsedStepsLabel: (stepNumber, stepsCount) =>
+              `Step ${stepNumber} of ${stepsCount}`,
+            skipToButtonLabel: (step, stepNumber) =>
+              `Skip to ${step.title}`,
+            navigationAriaLabel: "Steps",
+            cancelButton: "Cancel",
+            previousButton: "Previous",
+            nextButton: "Next",
+            submitButton: "Finish",
+            optional: "optional"
+          }}
+          activeStepIndex={step}
+          onSubmit={() => {
+            navigate(`/?onboardForm&buzzer=${buzzerNumber}`)
+          }}
+          onNavigate={({ detail }) => {
+            if (detail.requestedStepIndex < step) {
+              dismissInProgressAlerts();
+              setStep(detail.requestedStepIndex);
+              return;
+            }
+            
+            if (detail.requestedStepIndex === 2) {
+              fetch('/api/door/auth?door=onboardingflag&key=1234')
+                .then(res => res.json())
+                .then(res => {
+                  if (res.status === "CLOSED") {
+                    addAlert('error', 'Something went wrong, please try again');
+                  } else {
+                    addAlert("in-progress", (
+                      <CountdownBar
+                        label="Onboarding Timeout"
+                        description="Complete Onboarding before timeout"
+                        additionalInfo="Onboarding times out after 15 minutes, please complete the onboarding before then"
+                        timeSeconds={15 * 60} 
+                        onExpiry={() => {
+                          addAlert("error", "Onboarding timed out: please try again");
+                          setStep(1);
+                        }}
+                      />
+                    ));
+                    setStep(detail.requestedStepIndex);
+                  }
+                });
+              return;
+            }
+
+            if (detail.requestedStepIndex === 3) {
+              if (buzzerNumber === "") {
+                addAlert('error', "Please enter 4 digit verification code to proceed");
+                return;
+              }
+            }
+
+            setStep(detail.requestedStepIndex);
+          }}
+          onCancel={() => {
+            setStep(0);
+            dismissInProgressAlerts();
+          }}
+          steps={[
+            {
+              title: "Set your Buzzer Number",
+              description:"Before onboarding Doorman, you need to configure your Buzzer number",
+              content: (
+                <Container
+                  header={
+                    <Header variant="h2">
+                      Set your Buzzer Number
+                    </Header>
+                  }
+                >
+                  This would usually involve contacting your building to change your Buzzer to call Doorman's phone number:
+                  <Header variant="h3">604-757-1824</Header>
+                  Once you have done this, continue along the onboarding process!
+                </Container>
+              )
+            },
+            {
+              title: "Get to the Buzzer",
+              description:"To continue onboarding this Door, you should go physically to the Buzzer",
+              content: (
+                <Container
+                  header={
+                    <Header variant="h2">
+                      Get to the buzzer
+                    </Header>
+                  }
+                >
+                  The next step will require you to dial your Buzzer so Doorman can identify who is calling. Once you arrive at your Buzzer, advance to the next step.
+                </Container>
+              )
+            },
+            {
+              title: "Identify",
+              description: "Enter the 4 digit code that you hear back from Doorman",
+              content: (
+                <Container
+                  header={
+                    <Header variant="h2">
+                      Identify
+                    </Header>
+                  }
+                >
+                  For this step, you need to dial your Buzzer. It should call Doorman, and you will hear a message with a generated 4 digit code. 
+                  <br/>
+                  Enter the 4 digit code below to proceed
+                  <OtpInput
+                    containerStyle={{
+                      width: "100%",
+                      justifyContent: "center",
+                    }}
+                    inputStyle={{
+                      margin: '0.5rem',
+                      height: '3rem',
+                      width: '2rem',
+                      fontSize: '2rem',
+                    }}
+                    value={otp}
+                    numInputs={4}
+                    onChange={(e) => setOtp(e)}
+                    renderInput={(props) => <input {...props} />}
+                  />
+                </Container>
+              )
+            },
+            {
+              title: "Complete Onboarding Form",
+              description: "Redirect to complete the rest of onboarding form",
+              content: (
+                <Container
+                  header={
+                    <Header variant="h2">
+                      Complete Onboarding Form
+                    </Header>
+                  }
+                >
+                  Your buzzer number was identified as:
+                  <Header>{buzzerNumber}</Header>
+                  Click Finish below to be redirected to complete the rest of the onboarding for Doorman
+                </Container>
+              )
+            },
+          ]}
+        />
+      }
+    />
+  );
+};