feat: added auto submit on verification page in consent (#3447)

* feat: added auto submit on verification page in consent * test: changes in test for auto submit --------- Co-authored-by: Siddharth <[email protected]>
GaloyMoney · Oct 29, 2023 · ecc8a1d · ecc8a1d
1 parent 0565cfa
commit ecc8a1d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 33 deletions.
diff --git a/apps/consent/app/components/varification-components/verification-code-form.tsx b/apps/consent/app/components/varification-components/verification-code-form.tsx
@@ -1,4 +1,5 @@
-import React from "react"
+"use client"
+import React, { useState, useEffect } from "react"
 
 import InputComponent from "@/app/components/input-component"
 import PrimaryButtonComponent from "@/app/components/button/primary-button-component"
@@ -21,35 +22,53 @@ const VerificationCodeForm: React.FC<VerificationCodeFormProps> = ({
   remember,
   loginType,
   value,
-}) => (
-  <>
-    <h1 id="verification-title" className="text-center mb-4 text-xl font-semibold">
-      Enter Verification Code
-    </h1>
-    <form action={formAction} className="flex flex-col">
-      <input type="hidden" name="login_challenge" value={login_challenge} />
-      <input type="hidden" name="loginId" value={loginId} />
-      <input type="hidden" name="remember" value={remember} />
-      <input type="hidden" name="loginType" value={loginType} />
-      <input type="hidden" name="value" value={value} />
-      <div className="flex flex-col items-center mb-4">
-        <p className="text-center text-sm w-60 mb-1">
-          The code was sent to your {loginType}{" "}
-        </p>
-        <span className="font-semibold">{value}</span>
-      </div>
-      <InputComponent
-        type="text"
-        id="code"
-        name="code"
-        placeholder="Enter code here"
-        data-testid="verification_code_input"
-      />
-      <PrimaryButtonComponent data-testid="verification_code_submit_btn" type="submit">
-        Submit
-      </PrimaryButtonComponent>
-    </form>
-  </>
-)
+}) => {
+  const [code, setCode] = useState("")
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.length <= 6) {
+      setCode(e.target.value)
+    }
+  }
+
+  useEffect(() => {
+    if (code.length === 6 && !isNaN(Number(code))) {
+      document.forms[0].requestSubmit()
+    }
+  }, [code])
+
+  return (
+    <>
+      <h1 id="verification-title" className="text-center mb-4 text-xl font-semibold">
+        Enter Verification Code
+      </h1>
+      <form action={formAction} className="flex flex-col">
+        <input type="hidden" name="login_challenge" value={login_challenge} />
+        <input type="hidden" name="loginId" value={loginId} />
+        <input type="hidden" name="remember" value={remember} />
+        <input type="hidden" name="loginType" value={loginType} />
+        <input type="hidden" name="value" value={value} />
+        <div className="flex flex-col items-center mb-4">
+          <p className="text-center text-sm w-60 mb-1">
+            The code was sent to your {loginType}{" "}
+          </p>
+          <span className="font-semibold">{value}</span>
+        </div>
+        <InputComponent
+          type="text"
+          id="code"
+          name="code"
+          placeholder="Enter code here"
+          data-testid="verification_code_input"
+          onChange={handleChange}
+          value={code}
+        />
+        <PrimaryButtonComponent data-testid="verification_code_submit_btn" type="submit">
+          Submit
+        </PrimaryButtonComponent>
+      </form>
+    </>
+  )
+}
 
 export default VerificationCodeForm
diff --git a/apps/consent/cypress/e2e/email-sign-in/login-email.cy.ts b/apps/consent/cypress/e2e/email-sign-in/login-email.cy.ts
@@ -21,7 +21,6 @@ describe("Account ID Test", () => {
     cy.getOTP(email).then((otp) => {
       const code = otp
       cy.get("[data-testid=verification_code_input]").type(code)
-      cy.get("[data-testid=verification_code_submit_btn]").click()
       cy.get("[data-testid=submit_consent_btn]").click()
     })
   })

diff --git a/apps/consent/cypress/e2e/phone-sign-in/login-phone.cy.ts b/apps/consent/cypress/e2e/phone-sign-in/login-phone.cy.ts
@@ -37,7 +37,6 @@ describe("Account ID Test", () => {
     cy.setCookie(login_challenge, cookieValue, { secure: true })
     cy.visit(`/login/verification?login_challenge=${login_challenge}`)
     cy.get("[data-testid=verification_code_input]").type(testData.VERIFICATION_CODE)
-    cy.get("[data-testid=verification_code_submit_btn]").click()
     cy.get("[data-testid=submit_consent_btn]").click()
   })
 })