feat: for tap sign in, automatically fill text box with badge number (#…

…124)
mbta · Sep 11, 2024 · cb617ad · cb617ad
1 parent 7dea21a
commit cb617ad
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/js/components/operatorSignIn/attestation.tsx b/js/components/operatorSignIn/attestation.tsx
@@ -11,13 +11,17 @@ export const Attestation = ({
   employees,
   onComplete,
   loading,
+  prefill,
 }: {
   badge: string;
   employees: ApiResult<Employee[]>;
   onComplete: () => void;
   loading: boolean;
+  prefill: boolean;
 }): ReactElement => {
-  const [entered, setEntered] = useState<string>("");
+  const defaultValue = prefill ? badge : "";
+
+  const [entered, setEntered] = useState<string>(defaultValue);
   const ready = entered === badge;
 
   if (employees.status === "loading") {
@@ -42,7 +46,7 @@ export const Attestation = ({
     <div className="text-sm">
       Step 2 of 2
       <SignInText />
-      <SignaturePrompt onChange={setEntered} />
+      <SignaturePrompt defaultValue={defaultValue} onChange={setEntered} />
       <SignatureHint badge={badge} signatureText={entered} />
       <p className="my-3">
         By pressing the button below I, <b className="fs-mask">{name}</b>,
@@ -136,8 +140,10 @@ const SignatureHint = ({
 
 export const SignaturePrompt = ({
   onChange,
+  defaultValue,
 }: {
   onChange: (value: string) => void;
+  defaultValue: string;
 }): ReactElement => {
   return (
     <div>
@@ -150,6 +156,7 @@ export const SignaturePrompt = ({
           type="text"
           className="w-full"
           inputMode="numeric"
+          defaultValue={defaultValue}
           onChange={(evt) => {
             onChange(evt.target.value);
           }}

diff --git a/js/components/operatorSignIn/operatorSignInModal.tsx b/js/components/operatorSignIn/operatorSignInModal.tsx
@@ -134,6 +134,7 @@ const OperatorSignInModalContent = ({
           }}
         />
       : <Attestation
+          prefill={badge.method === "nfc"}
           badge={badge.number}
           loading={loading}
           onComplete={() => {

diff --git a/js/test/components/operatorSignIn/attestation.test.tsx b/js/test/components/operatorSignIn/attestation.test.tsx
@@ -15,6 +15,7 @@ describe("Attestation", () => {
     const view = render(
       <Attestation
         badge="123"
+        prefill={false}
         onComplete={jest.fn()}
         loading={false}
         employees={EMPLOYEES}
@@ -29,6 +30,7 @@ describe("Attestation", () => {
     const view = render(
       <Attestation
         badge="123"
+        prefill={false}
         onComplete={jest.fn()}
         loading={false}
         employees={EMPLOYEES}
@@ -41,6 +43,7 @@ describe("Attestation", () => {
     const view = render(
       <Attestation
         badge="00000000"
+        prefill={false}
         onComplete={jest.fn()}
         loading={false}
         employees={EMPLOYEES}
@@ -49,22 +52,40 @@ describe("Attestation", () => {
     expect(view.getByText("Operator #00000000")).toBeInTheDocument();
   });
 
-  test("contains signature text box", () => {
-    const view = render(
-      <Attestation
-        badge="123"
-        onComplete={jest.fn()}
-        loading={false}
-        employees={EMPLOYEES}
-      />,
-    );
-    expect(view.getByRole("textbox")).toBeInTheDocument();
+  describe("signature text box", () => {
+    test("it's there", () => {
+      const view = render(
+        <Attestation
+          badge="123"
+          prefill={false}
+          onComplete={jest.fn()}
+          loading={false}
+          employees={EMPLOYEES}
+        />,
+      );
+      expect(view.getByRole("textbox")).toBeInTheDocument();
+      expect(view.getByRole("textbox")).toHaveValue("");
+    });
+
+    test("it pre-fills if requested", () => {
+      const view = render(
+        <Attestation
+          badge="123"
+          prefill={true}
+          onComplete={jest.fn()}
+          loading={false}
+          employees={EMPLOYEES}
+        />,
+      );
+      expect(view.getByRole("textbox")).toHaveValue("123");
+    });
   });
 
   test("contains Complete button", () => {
     const view = render(
       <Attestation
         badge="123"
+        prefill={false}
         onComplete={jest.fn()}
         loading={false}
         employees={EMPLOYEES}
@@ -80,6 +101,7 @@ describe("Attestation", () => {
     const view = render(
       <Attestation
         badge="123"
+        prefill={false}
         onComplete={onComplete}
         loading={false}
         employees={EMPLOYEES}
@@ -101,6 +123,7 @@ describe("Attestation", () => {
     const view = render(
       <Attestation
         badge="123"
+        prefill={false}
         onComplete={onComplete}
         loading={false}
         employees={EMPLOYEES}

diff --git a/js/test/components/operatorSignIn/operatorSignInModal.test.tsx b/js/test/components/operatorSignIn/operatorSignInModal.test.tsx
@@ -72,6 +72,7 @@ describe("OperatorSignInModal", () => {
     await userEvent.click(view.getByRole("button", { name: "OK" }));
 
     expect(view.getByText("Step 2 of 2")).toBeInTheDocument();
+    expect(view.getByRole("textbox")).toHaveValue(""); // Not pre-filled if manually typed
     await userEvent.type(view.getByRole("textbox"), "123");
     await userEvent.click(
       view.getByRole("button", { name: "Complete Fit for Duty Check" }),