Merge pull request #32 from NEARFoundation/develop

Merging new version with KTA-94

.env.development.local.example

@@ -4,14 +4,15 @@
 # From https://dashboard.onfido.com/api/tokens
 SDK_TOKEN_FACTORY_SECRET=""
 
+KYC_ENDPOINT_KEY="go"
+
 #------------------------------------------------------------------------------------------------------------
 #https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
 #------------------------------------------------------------------------------------------------------------
 
 NEXT_PUBLIC_BASE_URL="http://localhost:3000"
 # NEXT_PUBLIC_TOKEN_FACTORY_URL="https://token-factory.onfido.com/sdk_token"
 NEXT_PUBLIC_TOKEN_FACTORY_URL="$NEXT_PUBLIC_BASE_URL/api/generate-token"
-NEXT_PUBLIC_KYC_ENDPOINT_KEY="go"
 
 # Put false and run manually your local server to test many times faster
 BUILD_AND_SERVE_WEBSITE_BEFORE_RUNNING_TEST=true

.github/workflows/playwright.yml

@@ -25,7 +25,7 @@ jobs:
           SDK_TOKEN_FACTORY_SECRET: ${{secrets.SDK_TOKEN_FACTORY_SECRET}}
           NEXT_PUBLIC_BASE_URL: ${{secrets.NEXT_PUBLIC_BASE_URL}}
           NEXT_PUBLIC_TOKEN_FACTORY_URL: ${{secrets.NEXT_PUBLIC_TOKEN_FACTORY_URL}}
-          NEXT_PUBLIC_KYC_ENDPOINT_KEY: ${{secrets.NEXT_PUBLIC_KYC_ENDPOINT_KEY}}
+          KYC_ENDPOINT_KEY: ${{secrets.KYC_ENDPOINT_KEY}}
           BUILD_AND_SERVE_WEBSITE_BEFORE_RUNNING_TEST: ${{secrets.BUILD_AND_SERVE_WEBSITE_BEFORE_RUNNING_TEST}}
       - uses: actions/upload-artifact@v3
         if: always()

components/common/ErrorRuntime.tsx

@@ -1,5 +1,4 @@
 import MainLayout from '../layout/MainLayout';
-import ResultsRetryButton from '../results/ResultsRetryButton';
 
 import CenteredCard from './CenteredCard';
 import CenteredCardContent from './CenteredCardContent';
@@ -8,9 +7,7 @@ export default function ErrorRuntime(): JSX.Element {
   return (
     <MainLayout>
       <CenteredCard>
-        <CenteredCardContent title="An error occurred" description="Sorry, an error occurred. Please try again." iconClasses="fa fa-exclamation-circle text-warning mb-4">
-          <ResultsRetryButton autoRetry={false} />
-        </CenteredCardContent>
+        <CenteredCardContent title="An error occurred" description="Sorry, an error occurred. Please try again." iconClasses="fa fa-exclamation-circle text-warning mb-4" />
       </CenteredCard>
     </MainLayout>
   );

components/results/ResultsError.tsx

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

components/results/ResultsFailure.tsx

@@ -4,7 +4,7 @@ import CenteredCardContent from '../common/CenteredCardContent';
 
 import ResultsRetryButton from './ResultsRetryButton';
 
-export default function ResultsFailure({ validationFailureDetails }: { validationFailureDetails: ValidationFailure[] }): JSX.Element {
+export default function ResultsFailure({ validationFailureDetails, kycEndpointKey }: { validationFailureDetails: ValidationFailure[]; kycEndpointKey: string }): JSX.Element {
   const EMPTY_ARRAY = 0;
 
   const description =
@@ -19,7 +19,7 @@ export default function ResultsFailure({ validationFailureDetails }: { validatio
           <li>{validationMessages.get(validationFailureDetail)}</li>
         ))}
       </ul>
-      <ResultsRetryButton />
+      <ResultsRetryButton kycEndpointKey={kycEndpointKey} />
     </CenteredCardContent>
   );
 }

components/results/ResultsRetryButton.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
-export default function ResultsRetryButton({ autoRetry = true }: { autoRetry?: boolean }): JSX.Element {
-  const link = autoRetry ? `/${process.env.NEXT_PUBLIC_KYC_ENDPOINT_KEY}?retry=1` : `/${process.env.NEXT_PUBLIC_KYC_ENDPOINT_KEY}`;
+export default function ResultsRetryButton({ autoRetry = true, kycEndpointKey }: { autoRetry?: boolean; kycEndpointKey: string }): JSX.Element {
+  const link = autoRetry ? `/${kycEndpointKey}?retry=1` : `/${kycEndpointKey}`;
 
   return (
     <Link href={link} passHref>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "near-kyc-onfido",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/[key]/index.tsx

@@ -4,25 +4,20 @@ import type { NextPage } from 'next';
 import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
 import * as Onfido from 'onfido-sdk-ui';
-import { ParsedUrlQuery } from 'querystring';
 
 import FirstStep from '../../components/form/FirstStep';
 import MainLayout from '../../components/layout/MainLayout';
 import { LOCALSTORAGE_USER_DATA_NAME } from '../../constants';
 import { getToken, initCheck } from '../../services/apiService';
 import type ApplicantProperties from '../../types/ApplicantProperties';
+import type IParams from '../../types/IParams';
 import { FORBIDDEN } from '../../utils/statusCodes';
 
-interface IParams extends ParsedUrlQuery {
-  key: string;
-}
-
 type Props = {
   csrfToken: string;
+  kycEndpointKey: string;
 };
 
-const baseStartUrl = process.env.NEXT_PUBLIC_KYC_ENDPOINT_KEY ?? '';
-
 const options: Onfido.SdkOptions = {
   // What / where should define these?
   useModal: false,
@@ -46,7 +41,7 @@ const options: Onfido.SdkOptions = {
   ],
 };
 
-const StartPage: NextPage<Props> = ({ csrfToken }) => {
+const StartPage: NextPage<Props> = ({ csrfToken, kycEndpointKey }) => {
   const [onfidoInstance, setOnfidoInstance] = useState<Onfido.SdkHandle | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
@@ -80,7 +75,7 @@ const StartPage: NextPage<Props> = ({ csrfToken }) => {
           return;
         }
 
-        window.location.href = `${baseStartUrl}/results`;
+        window.location.href = `${kycEndpointKey}/results`;
       },
     };
 
@@ -135,14 +130,14 @@ export const getServerSideProps: GetServerSideProps = async ({ res, params }) =>
   const { key } = params as IParams;
   const csrfToken = res.getHeader('x-csrf-token');
 
-  if (key !== process.env.NEXT_PUBLIC_KYC_ENDPOINT_KEY) {
+  if (key !== process.env.KYC_ENDPOINT_KEY) {
     return {
       notFound: true,
     };
   }
 
   return {
-    props: { csrfToken },
+    props: { csrfToken, kycEndpointKey: process.env.KYC_ENDPOINT_KEY },
   };
 };
 

pages/[key]/results.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import type { NextPage } from 'next';
+import { GetServerSideProps } from 'next';
 
 import CenteredCard from '../../components/common/CenteredCard';
 import MainLayout from '../../components/layout/MainLayout';
@@ -11,8 +12,9 @@ import ResultsSuccess from '../../components/results/ResultsSuccess';
 import { LONG_POLLING_INTERVAL, SHORT_POLLING_INTERVAL } from '../../constants';
 import { fetchCheckResults } from '../../services/apiService';
 import { CheckResultsStatus } from '../../types/CheckResults';
+import type IParams from '../../types/IParams';
 
-const ResultsPage: NextPage = () => {
+const ResultsPage: NextPage<{ kycEndpointKey: string }> = ({ kycEndpointKey }) => {
   const NO_POLLING = 0;
 
   const [refetchInterval, setRefetchInterval] = useState(SHORT_POLLING_INTERVAL);
@@ -46,12 +48,26 @@ const ResultsPage: NextPage = () => {
         <>
           {showLoading && <ResultsLoading willTakeLonger={data?.status === CheckResultsStatus.willTakeLonger} />}
           {showSuccess && <ResultsSuccess />}
-          {showFailure && <ResultsFailure validationFailureDetails={data?.validationFailureDetails} />}
-          {showError && <ResultsError />}
+          {showFailure && <ResultsFailure validationFailureDetails={data?.validationFailureDetails} kycEndpointKey={kycEndpointKey} />}
+          {showError && <ResultsError kycEndpointKey={kycEndpointKey} />}
         </>
       </CenteredCard>
     </MainLayout>
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+  const { key } = params as IParams;
+
+  if (key !== process.env.KYC_ENDPOINT_KEY) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: { kycEndpointKey: process.env.KYC_ENDPOINT_KEY },
+  };
+};
+
 export default ResultsPage;

tests/e2e/utils/constants.ts

@@ -2,5 +2,5 @@ import path from 'path';
 
 export const MOCK_VIDEO_PATH = path.join(__dirname, '../assets/camera.mjpeg');
 export const MOCK_IMAGE = 'tests/e2e/assets/id-card.jpg';
-export const FLOW_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/${process.env.NEXT_PUBLIC_KYC_ENDPOINT_KEY}`;
+export const FLOW_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/${process.env.KYC_ENDPOINT_KEY}`;
 export const HOME_URL = process.env.NEXT_PUBLIC_BASE_URL ?? 'http://localhost:3000';

types/IParams.ts

@@ -0,0 +1,7 @@
+import { ParsedUrlQuery } from 'querystring';
+
+interface IParams extends ParsedUrlQuery {
+  key: string;
+}
+
+export default IParams;