From fde9ba980c497bc15339a82cd3e9055d6d5bab43 Mon Sep 17 00:00:00 2001
From: Preston Mueller <pmueller@mbta.com>
Date: Fri, 20 Sep 2024 15:33:42 -0400
Subject: [PATCH] fix(OperatorSelection): ignore leading zeroes (#141)

---
 js/components/operatorSignIn/attestation.tsx  |  4 +++-
 .../operatorSignIn/operatorSelection.tsx      |  7 +++++-
 .../operatorSignIn/attestation.test.tsx       | 20 +++++++++++++++++
 .../operatorSignIn/operatorSelection.test.tsx | 22 +++++++++++++++++++
 js/util/string.ts                             |  3 +++
 5 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 js/util/string.ts

diff --git a/js/components/operatorSignIn/attestation.tsx b/js/components/operatorSignIn/attestation.tsx
index 87f0222..ed086be 100644
--- a/js/components/operatorSignIn/attestation.tsx
+++ b/js/components/operatorSignIn/attestation.tsx
@@ -3,6 +3,7 @@ import { reload } from "../../browser";
 import { lookupDisplayName } from "../../hooks/useEmployees";
 import { Employee } from "../../models/employee";
 import { className } from "../../util/dom";
+import { removeLeadingZero } from "../../util/string";
 import { useSignInText } from "./text";
 import { ReactElement, useEffect, useState } from "react";
 
@@ -157,8 +158,9 @@ export const SignaturePrompt = ({
           className="fs-mask w-full"
           inputMode="numeric"
           defaultValue={defaultValue}
+          // Do not set `value`- we are transforming below!
           onChange={(evt) => {
-            onChange(evt.target.value);
+            onChange(removeLeadingZero(evt.target.value));
           }}
           required
         />
diff --git a/js/components/operatorSignIn/operatorSelection.tsx b/js/components/operatorSignIn/operatorSelection.tsx
index b6934ab..68c1e0e 100644
--- a/js/components/operatorSignIn/operatorSelection.tsx
+++ b/js/components/operatorSignIn/operatorSelection.tsx
@@ -1,6 +1,7 @@
 import { fetchEmployeeByBadgeSerial } from "../../hooks/useEmployees";
 import { useNfc } from "../../hooks/useNfc";
 import { className } from "../../util/dom";
+import { removeLeadingZero } from "../../util/string";
 import { BadgeEntry } from "./types";
 import { ReactElement, useEffect, useId, useState } from "react";
 
@@ -51,8 +52,12 @@ export const OperatorSelection = ({
         className="fs-mask h-10"
         id={inputId}
         inputMode="numeric"
+        // Do not set `value`- we are transforming below!
         onChange={(evt) => {
-          setBadgeEntry({ number: evt.target.value, method: "manual" });
+          setBadgeEntry({
+            number: removeLeadingZero(evt.target.value),
+            method: "manual",
+          });
         }}
       />
       <button
diff --git a/js/test/components/operatorSignIn/attestation.test.tsx b/js/test/components/operatorSignIn/attestation.test.tsx
index 21663bc..c3fda97 100644
--- a/js/test/components/operatorSignIn/attestation.test.tsx
+++ b/js/test/components/operatorSignIn/attestation.test.tsx
@@ -116,6 +116,26 @@ describe("Attestation", () => {
     expect(onComplete).toHaveBeenCalledOnce();
   });
 
+  test("valid attestation with leading zero", async () => {
+    const onComplete = jest.fn();
+    const view = render(
+      <Attestation
+        badge="123"
+        prefill={false}
+        onComplete={onComplete}
+        loading={false}
+        employees={EMPLOYEES}
+      />,
+    );
+    await userEvent.type(view.getByRole("textbox"), "0123");
+    expect(view.getByText("Looks good!")).toBeInTheDocument();
+
+    await userEvent.click(
+      view.getByRole("button", { name: "Complete Fit for Duty Check" }),
+    );
+    expect(onComplete).toHaveBeenCalledOnce();
+  });
+
   test("invalid attestation", async () => {
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     jest.useFakeTimers();
diff --git a/js/test/components/operatorSignIn/operatorSelection.test.tsx b/js/test/components/operatorSignIn/operatorSelection.test.tsx
index b7329dd..dbd32a6 100644
--- a/js/test/components/operatorSignIn/operatorSelection.test.tsx
+++ b/js/test/components/operatorSignIn/operatorSelection.test.tsx
@@ -86,6 +86,28 @@ describe("OperatorSelection", () => {
     });
   });
 
+  test("trims leading zeros from typed operator badge", async () => {
+    const onOK = jest.fn();
+    const view = render(
+      <OperatorSelection
+        onOK={onOK}
+        onBadgeLookupError={jest.fn()}
+        onNfcScanError={jest.fn()}
+        nfcSupported={true}
+      />,
+    );
+
+    const textField = view.getByRole("textbox");
+    const button = view.getByRole("button");
+    await userEvent.type(textField, "0123");
+    await userEvent.click(button);
+
+    expect(onOK).toHaveBeenCalledExactlyOnceWith({
+      number: "123",
+      method: "manual",
+    });
+  });
+
   test("executes onOK on successful badge tap", async () => {
     const onOK = jest.fn();
     const onBadgeLookupError = jest.fn();
diff --git a/js/util/string.ts b/js/util/string.ts
new file mode 100644
index 0000000..854e0c0
--- /dev/null
+++ b/js/util/string.ts
@@ -0,0 +1,3 @@
+export const removeLeadingZero = (str: string) => {
+  return str.replace(/^0+/, "");
+};