Merge pull request #10 from NEARFoundation/KTA-60-results-after-uploa…

…ding-data

Kta 60 results after uploading data

.eslintrc.js

@@ -34,7 +34,8 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'simple-import-sort/imports': 'error',
     'simple-import-sort/exports': 'error',
-    '@typescript-eslint/prefer-nullish-coalescing': 'warn',
+    '@typescript-eslint/prefer-nullish-coalescing': 'error',
+    'no-magic-numbers': 'error',
   },
   reportUnusedDisableDirectives: true, // https://eslint.org/docs/user-guide/configuring#report-unused-eslint-disable-comments
   settings: {

components/common/CenteredCard.module.scss

@@ -0,0 +1,19 @@
+.card {
+  width: 94vw;
+  max-width: 32em;
+  border-color: rgb(130, 136, 147);
+  border-width: 1px;
+  border-style: solid;
+  padding: 32px;
+  border-radius: 8px;
+  margin: auto;
+  margin-top: 32px;
+  text-align: center;
+  min-height: 37.5em;
+  background-color: #fcfcfd;
+
+  @media (max-width: 478px) {
+    border: none;
+    background-color: #fff;
+  }
+}

components/common/CenteredCard.tsx

@@ -0,0 +1,5 @@
+import styles from './CenteredCard.module.scss';
+
+export default function CenteredCard({ children }: { children: React.ReactNode }): JSX.Element {
+  return <div className={styles.card}>{children}</div>;
+}

components/common/CenteredCardContent.module.css

@@ -0,0 +1,9 @@
+.contentCentered {
+  min-height: 37.5em;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}

components/common/CenteredCardContent.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable react/require-default-props */
+import LoadingSpinner from './LoadingSpinner';
+
+import styles from './CenteredCardContent.module.css';
+
+export default function CenteredCardContent({
+  title,
+  description,
+  iconClasses,
+  isLoading = false,
+  children = null,
+}: {
+  title: string;
+  description: string | JSX.Element;
+  iconClasses: string;
+  isLoading?: boolean;
+  children?: React.ReactNode;
+}): JSX.Element {
+  return (
+    <div className={styles.contentCentered}>
+      {isLoading && <LoadingSpinner />}
+      <i className={iconClasses} style={{ fontSize: '98px' }} aria-hidden="true" />
+      <h1 className="fs-2 mb-2">{title}</h1>
+      <p className="text-secondary mb-4">{description}</p>
+      {children}
+    </div>
+  );
+}

components/common/LoadingSpinner.tsx

@@ -0,0 +1,7 @@
+export default function LoadingSpinner(): JSX.Element {
+  return (
+    <div className="spinner-border" role="status">
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}

components/ApplicantForm.tsx → components/form/ApplicantForm.tsx

@@ -2,20 +2,20 @@
 // https://getbootstrap.com/docs/5.0/forms/layout/
 // https://getbootstrap.com/docs/5.0/layout/gutters/
 
-export default function ApplicantForm({ onSubmit }: { onSubmit: (event: React.SyntheticEvent) => void }): JSX.Element {
+export default function ApplicantForm({ onSubmit, loading }: { onSubmit: (event: React.SyntheticEvent) => void; loading: boolean }): JSX.Element {
   return (
     <form className="applicant-form mt-5" onSubmit={onSubmit}>
       <div className="row">
         <div className="col-md-6 pb-2">
           <div className="form-floating">
-            <input name="firstName" type="text" className="form-control" aria-label="First Name" required />
+            <input name="firstName" type="text" className="form-control" aria-label="First Name" disabled={loading} required />
             {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
             <label htmlFor="firstName">First Name</label>
           </div>
         </div>
         <div className="col-md-6 pb-2">
           <div className="form-floating">
-            <input name="lastName" type="text" className="form-control" aria-label="Last Name" required />
+            <input name="lastName" type="text" className="form-control" aria-label="Last Name" disabled={loading} required />
             {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
             <label htmlFor="lastName">Last Name</label>
           </div>
@@ -24,23 +24,23 @@ export default function ApplicantForm({ onSubmit }: { onSubmit: (event: React.Sy
 
       <div className="pb-2">
         <div className="form-floating">
-          <input name="email" type="email" className="form-control" required />
+          <input name="email" type="email" className="form-control" disabled={loading} required />
           {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label htmlFor="email">Email Address</label>
         </div>
       </div>
 
       <div className="pb-2">
         <div className="form-floating">
-          <input name="dob" type="date" className="form-control" required />
+          <input name="dob" type="date" className="form-control" disabled={loading} required />
           {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label htmlFor="dob">Date of Birth</label>
         </div>
       </div>
 
       <div className="d-flex justify-content-end">
-        <button name="submit" type="submit" className="btn btn-lg btn-primary">
-          Start <i className="fa fa-chevron-right" aria-hidden="true" />
+        <button name="submit" type="submit" className="btn btn-lg btn-primary" disabled={loading}>
+          Start {loading ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : <i className="fa fa-chevron-right" aria-hidden="true" />}
         </button>
       </div>
     </form>

components/form/FirstStep.tsx

@@ -0,0 +1,23 @@
+import type { SdkHandle } from 'onfido-sdk-ui';
+
+import CenteredCard from '../common/CenteredCard';
+import Header from '../layout/Header';
+
+import ApplicantForm from './ApplicantForm';
+
+function FirstStep({ onfidoInstance, onSubmit, loading }: { onfidoInstance: SdkHandle | null; onSubmit: (event: React.SyntheticEvent) => void; loading: boolean }): JSX.Element {
+  return onfidoInstance ? (
+    <div />
+  ) : (
+    <CenteredCard>
+      <Header />
+      <h3 className="mb-4">We want to get to know you!</h3>
+      <p>Start by introducing yourself here.</p>
+      <p>On the next page, we&apos;ll ask you to provide other information (documents or photos) that will help verify your identity.</p>
+
+      <ApplicantForm onSubmit={onSubmit} loading={loading} />
+    </CenteredCard>
+  );
+}
+
+export default FirstStep;

components/Header.tsx → components/layout/Header.tsx

@@ -6,9 +6,12 @@ export default function Header(): JSX.Element {
   return (
     <header>
       <h1 className="mb-5">
-        <Link href="/">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img alt="NEAR logo" src="/img/logo_nm.svg" className="logo" />
+        <Link href="/" passHref>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img alt="NEAR logo" src="/img/logo_nm.svg" className="logo" />
+          </a>
         </Link>
       </h1>
     </header>

components/MainLayout.tsx → components/layout/MainLayout.tsx

@@ -11,7 +11,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
       </Head>
 
       <main>{children} </main>
-      <footer>
+      <footer className="text-center">
         <Link href="/privacy-policy">Privacy Policy</Link> | © 2022{' '}
         <a href="https://near.foundation/" target="_blank" rel="noreferrer">
           NEAR Foundation

components/results/ResultsError.tsx

@@ -0,0 +1,11 @@
+import CenteredCardContent from '../common/CenteredCardContent';
+
+import ResultsRetryButton from './ResultsRetryButton';
+
+export default function ResultsFailure(): JSX.Element {
+  return (
+    <CenteredCardContent title="An error occured" description="Sorry, an error occurred; we invite you to try again." iconClasses="fa fa-exclamation-circle text-warning mb-4">
+      <ResultsRetryButton />
+    </CenteredCardContent>
+  );
+}

components/results/ResultsFailure.tsx

@@ -0,0 +1,15 @@
+import CenteredCardContent from '../common/CenteredCardContent';
+
+import ResultsRetryButton from './ResultsRetryButton';
+
+export default function ResultsFailure(): JSX.Element {
+  return (
+    <CenteredCardContent
+      title="Verification failed"
+      description="We could not verify your identity. If you believe that you submitted any information incorrectly, you may try again."
+      iconClasses="fa fa-times-circle text-danger mb-4"
+    >
+      <ResultsRetryButton />
+    </CenteredCardContent>
+  );
+}

components/results/ResultsLoading.tsx

@@ -0,0 +1,22 @@
+import CenteredCardContent from '../common/CenteredCardContent';
+
+export default function ResultsLoading({ willTakeLonger }: { willTakeLonger: boolean }): JSX.Element {
+  return (
+    <CenteredCardContent
+      title=""
+      iconClasses=""
+      isLoading
+      description={
+        willTakeLonger ? (
+          <p>
+            <strong>This identity verification is taking more time than usual.</strong>
+            <br />
+            Feel free to close this page and come back later to {window.location.href}
+          </p>
+        ) : (
+          'Please wait...'
+        )
+      }
+    />
+  );
+}

components/results/ResultsRetryButton.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link';
+
+export default function ResultsRetryButton(): JSX.Element {
+  return (
+    <Link href={`/${process.env.NEXT_PUBLIC_KYC_ENDPOINT_KEY}?retry=1`} passHref>
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <a className="btn btn-primary">
+        Try again <i className="fa fa-repeat" aria-hidden="true" />
+      </a>
+    </Link>
+  );
+}

components/results/ResultsSuccess.tsx

@@ -0,0 +1,11 @@
+import CenteredCardContent from '../common/CenteredCardContent';
+
+export default function ResultsSuccess(): JSX.Element {
+  return (
+    <CenteredCardContent
+      title="Verification validated"
+      description="Congratulations! 🎉 We have verified your identity and are excited to move forward. NEAR Foundation will contact you for the next steps shortly. You can now close this window."
+      iconClasses="fa fa-check-circle text-success mb-4"
+    />
+  );
+}

constants/index.tsx

@@ -0,0 +1,5 @@
+export const COOKIES_EXPIRATION_TIME = 2592000; // 30 days
+export const COOKIE_CHECK_ID_NAME = 'onfido-check-id';
+export const LOCALSTORAGE_USER_DATA_NAME = 'onfido-user-data';
+export const SHORT_POLLING_INTERVAL = 1000; // 1 second - Short polling applies when the check is in progress
+export const LONG_POLLING_INTERVAL = 30_000; // 30 seconds - Long polling applies when the check is under manual approval

package.json

@@ -6,11 +6,11 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "next lint --dir . --fix"
+    "lint": "next lint"
   },
   "dependencies": {
     "@onfido/api": "^2.1.1",
+    "@tanstack/react-query": "^4.10.1",
     "next": "12.1.6",
     "onfido-sdk-ui": "^6.16.0",
     "react": "18.1.0",