Merge pull request #124 from likhith-deriv/likhith/shaheer/COJ-506/in…

…tegrate-manual-upload-flow

Likhith/shaheer/coj 506/integrate manual upload flow

.github/actions/download_remote_config_backup/action.yml

@@ -3,12 +3,6 @@ description: Download remote config backup
 inputs:
   REMOTE_CONFIG_URL:
     description: "Remote config backup URL"
-  GPG_PRIVATE_KEY:
-    description: "GPG private key"
-  GPG_PASSPHRASE:
-    description: "GPG passphrase"
-  GITHUB_TOKEN:
-    description: "GitHub token"
 runs:
   using: composite
   steps:

.github/workflows/release_test.yml

@@ -16,13 +16,6 @@ jobs:
       uses: "./.github/actions/setup_node"
     - name: Install Dependencies
       uses: "./.github/actions/npm_install_from_cache"
-    - name: Download Remote Config Backup File
-      uses: ./.github/actions/download_remote_config_backup
-      with:
-        GITHUB_TOKEN: ${{ github.token }}
-        REMOTE_CONFIG_URL: ${{ vars.REMOTE_CONFIG_URL }}
-        GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
-        GPG_PASSPHRASE: ${{ secrets.GPG_PASSPHRASE }}
     - name: Build
       uses: "./.github/actions/build"
       with:

.github/workflows/remote_config_pr.yml

@@ -1,4 +1,12 @@
 name: Deriv App Remote Config backup file
+
+permissions:
+  actions: write
+  checks: write
+  contents: write
+  deployments: write
+  pull-requests: write
+  statuses: write
 on:
   push:
     branches:
@@ -13,24 +21,24 @@ jobs:
     steps:
     - name: Checkout
       uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
+    - name: Import GPG key
+      id: import-gpg
+      uses: deriv-com/ghaction-import-gpg@v6
+      with:
+        gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
+        passphrase: ${{ secrets.GPG_PASSPHRASE }}
+        git_user_signingkey: true
+        git_commit_gpgsign: true
     - name: Checkout to remote_config_update_branch
       run: |
         git fetch origin
         git checkout "${{ env.REMOTE_CONFIG_BRANCH }}" || git checkout -b "${{ env.REMOTE_CONFIG_BRANCH }}" origin/"${{ env.REMOTE_CONFIG_BRANCH }}"
-      
+      shell: bash
     - name: Download Remote Config Backup File
       uses: ./.github/actions/download_remote_config_backup
       with:
         REMOTE_CONFIG_URL: ${{ vars.REMOTE_CONFIG_URL }}
 
-    - name: Import GPG key
-      id: import-gpg
-      uses: deriv-com/ghaction-import-gpg@v6
-      with:
-        gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
-        passphrase: ${{ secrets.GPG_PASSPHRASE }}
-        git_user_signingkey: true
-        git_commit_gpgsign: true
     - name: Commit the file and Create PR
       env:
         GIT_AUTHOR_NAME: ${{ steps.import-gpg.outputs.name }}

packages/account-v2/package.json

@@ -11,7 +11,7 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "1.5.3",
+        "@deriv-com/ui": "1.8.1",
         "@deriv/api": "^1.0.0",
         "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",

packages/account-v2/src/containers/ManualForm/__tests__/manual-form.spec.tsx

@@ -16,6 +16,8 @@ describe('ManualForm', () => {
         selectedDocument?: React.ComponentProps<typeof ManualForm>['selectedDocument'];
     }) => {
         const mockProps: React.ComponentProps<typeof ManualForm> = {
+            formData: {},
+            isExpiryDateRequired: false,
             onCancel: jest.fn(),
             onSubmit: jest.fn(),
             selectedDocument: selectedDocument ?? 'driving_licence',

packages/account-v2/src/containers/ManualForm/manual-form.tsx

@@ -3,7 +3,6 @@ import { Form, Formik, FormikValues } from 'formik';
 import { InferType } from 'yup';
 import { Button } from '@deriv-com/ui';
 import { MANUAL_DOCUMENT_SELFIE, TManualDocumentTypes } from '../../constants/manualFormConstants';
-import { useManualForm } from '../../hooks';
 import { getManualFormValidationSchema, setInitialValues } from '../../utils/manual-form-utils';
 import { ManualFormDocumentUpload } from './manual-form-document-upload';
 import { ManualFormFooter } from './manual-form-footer';
@@ -13,14 +12,19 @@ type TmanualDocumentFormValues = InferType<ReturnType<typeof getManualFormValida
 
 type TManualFormProps = {
     formData: FormikValues;
+    isExpiryDateRequired: boolean;
     onCancel: () => void;
     onSubmit: (values: TmanualDocumentFormValues) => void;
     selectedDocument: TManualDocumentTypes;
 };
 
-export const ManualForm = ({ formData, onCancel, onSubmit, selectedDocument }: TManualFormProps) => {
-    const { isExpiryDateRequired } = useManualForm();
-
+export const ManualForm = ({
+    formData,
+    isExpiryDateRequired,
+    onCancel,
+    onSubmit,
+    selectedDocument,
+}: TManualFormProps) => {
     const validationSchema = getManualFormValidationSchema(selectedDocument, isExpiryDateRequired);
 
     const initialValues = useMemo(() => {
@@ -40,7 +44,10 @@ export const ManualForm = ({ formData, onCancel, onSubmit, selectedDocument }: T
                 <Form>
                     <div className='flex flex-col min-h-screen w-full'>
                         <div className='flex flex-col gap-1200'>
-                            <ManualFormInputs isExpiryDateRequired selectedDocument={selectedDocument} />
+                            <ManualFormInputs
+                                isExpiryDateRequired={isExpiryDateRequired}
+                                selectedDocument={selectedDocument}
+                            />
                             <ManualFormDocumentUpload selectedDocument={selectedDocument} />
                             <ManualFormFooter />
                         </div>

packages/account-v2/src/hooks/__tests__/useManualForm.spec.ts

@@ -1,46 +1,55 @@
-import { useSettings } from '@deriv/api';
+import { useKycAuthStatus } from '@deriv/api';
 import { renderHook } from '@testing-library/react-hooks';
 import useManualForm from '../useManualForm';
 
 jest.mock('@deriv/api', () => ({
     ...jest.requireActual('@deriv/api'),
-    useSettings: jest.fn(),
+    useKycAuthStatus: jest.fn(),
 }));
 
 describe('useManualForm', () => {
-    it('should return false if citizenship is ng', () => {
-        (useSettings as jest.Mock).mockReturnValue({
-            data: {
-                citizen: 'ng',
-                country_code: 'in',
+    it('should return false for expiry date if citizenship is ng and document is nimc slip', () => {
+        (useKycAuthStatus as jest.Mock).mockReturnValue({
+            isLoading: false,
+            kyc_auth_status: {
+                identity: {
+                    available_services: ['onfido', 'manual'],
+                },
             },
         });
-        const { result } = renderHook(() => useManualForm());
-        const { isExpiryDateRequired } = result.current;
-        expect(isExpiryDateRequired).toBe(false);
+        const { result } = renderHook(() => useManualForm('ng', 'nimc_slip'));
+        const { isExpiryDateRequired, poiService } = result.current;
+        expect(isExpiryDateRequired).toBeFalsy();
+        expect(poiService).toBe('manual');
     });
 
-    it('should return true if citizenship and country code is not ng', () => {
-        (useSettings as jest.Mock).mockReturnValue({
-            data: {
-                citizen: 'au',
-                country_code: 'au',
+    it('should return true for expiry date if citizenship is ng and document is passport', () => {
+        (useKycAuthStatus as jest.Mock).mockReturnValue({
+            isLoading: false,
+            kyc_auth_status: {
+                identity: {
+                    available_services: ['onfido', 'manual'],
+                },
             },
         });
-        const { result } = renderHook(() => useManualForm());
-        const { isExpiryDateRequired } = result.current;
-        expect(isExpiryDateRequired).toBe(true);
+        const { result } = renderHook(() => useManualForm('ng', 'passport'));
+        const { isExpiryDateRequired, poiService } = result.current;
+        expect(isExpiryDateRequired).toBeTruthy();
+        expect(poiService).toBe('onfido');
     });
 
-    it('should return true if citizenship is not ng but country code is ng', () => {
-        (useSettings as jest.Mock).mockReturnValue({
-            data: {
-                citizen: 'in',
-                country_code: 'ng',
+    it('should return manual as POI service if citizenship is in and document is passport', () => {
+        (useKycAuthStatus as jest.Mock).mockReturnValue({
+            isLoading: false,
+            kyc_auth_status: {
+                identity: {
+                    available_services: ['onfido', 'manual'],
+                },
             },
         });
-        const { result } = renderHook(() => useManualForm());
-        const { isExpiryDateRequired } = result.current;
-        expect(isExpiryDateRequired).toBe(true);
+        const { result } = renderHook(() => useManualForm('in', 'passport'));
+        const { isExpiryDateRequired, poiService } = result.current;
+        expect(isExpiryDateRequired).toBeTruthy();
+        expect(poiService).toBe('manual');
     });
 });

packages/account-v2/src/hooks/useManualForm.ts

@@ -1,13 +1,32 @@
-import { useSettings } from '@deriv/api';
+import { useKycAuthStatus } from '@deriv/api';
+import { MANUAL_DOCUMENT_TYPES, TManualDocumentTypes } from '../constants/manualFormConstants';
 
 /** A custom hook used for manual verification flow */
-const useManualForm = () => {
-    const { data: settings } = useSettings();
-    const countryCode = settings?.citizen ?? settings?.country_code;
-    const isExpiryDateRequired = !!countryCode && countryCode !== 'ng';
+const useManualForm = (countryCode: string, selectedDocument: TManualDocumentTypes) => {
+    const { isLoading, kyc_auth_status, ...rest } = useKycAuthStatus({ country: countryCode });
+    const servicesAvailable = kyc_auth_status?.identity?.available_services;
 
+    if (countryCode === 'ng') {
+        if (selectedDocument === MANUAL_DOCUMENT_TYPES.NIMC_SLIP) {
+            return {
+                isExpiryDateRequired: false,
+                isLoading,
+                poiService: 'manual',
+                ...rest,
+            };
+        }
+        return {
+            isExpiryDateRequired: true,
+            isLoading,
+            poiService: isLoading ? null : servicesAvailable[0],
+            ...rest,
+        };
+    }
     return {
-        isExpiryDateRequired,
+        isExpiryDateRequired: true,
+        isLoading,
+        poiService: 'manual',
+        ...rest,
     };
 };
 

packages/account-v2/src/modules/IDVForm/__tests__/idv-form.spec.tsx

@@ -1,7 +1,6 @@
 import React, { ComponentProps } from 'react';
 import { Formik } from 'formik';
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { IDVForm } from '../idv-form';
 
 jest.mock('@deriv-com/ui', () => ({

packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx

@@ -7,16 +7,23 @@ import { Button, Loader, Text } from '@deriv-com/ui';
 import IcAccountMissingDetails from '../../assets/proof-of-identity/ic-account-missing-details.svg';
 import { ErrorMessage } from '../../components/ErrorMessage';
 import { IconWithMessage } from '../../components/IconWithMessage';
+import { TManualDocumentTypes } from '../../constants/manualFormConstants';
 import { OnfidoView } from '../../containers/Onfido/OnfidoView';
 
 // TODO: Remove optional and default props when POI is ready
 type TOnfidoContainer = {
     country?: string;
     isEnabledByDefault?: boolean;
     onOnfidoSubmit?: () => void;
+    selectedDocument?: TManualDocumentTypes;
 };
 
-export const OnfidoContainer = ({ country = 'co', isEnabledByDefault = false, onOnfidoSubmit }: TOnfidoContainer) => {
+export const OnfidoContainer = ({
+    country,
+    isEnabledByDefault = false,
+    onOnfidoSubmit,
+    selectedDocument,
+}: TOnfidoContainer) => {
     const [isOnfidoEnabled, setIsOnfidoEnabled] = useState(isEnabledByDefault);
     const [transitionEnd, setTransitionEnd] = useState(false);
     const history = useHistory();
@@ -27,7 +34,7 @@ export const OnfidoContainer = ({ country = 'co', isEnabledByDefault = false, on
         isServiceTokenLoading,
         onfidoInitializationError,
         serviceTokenError,
-    } = useOnfido(country);
+    } = useOnfido(country, selectedDocument);
 
     useEffect(() => {
         if (hasSubmitted) {