feat(silver revamp): implemented KYC extra fields to be dynamic

blockchain · Apr 29, 2022 · 6bffc12 · 6bffc12
1 parent a7b7c50
commit 6bffc12
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 47 deletions.
diff --git a/...ges/blockchain-wallet-v4-frontend/src/data/components/identityVerification/actionTypes.ts b/...ges/blockchain-wallet-v4-frontend/src/data/components/identityVerification/actionTypes.ts
@@ -64,3 +64,4 @@ export const FETCH_KYC_EXTRA_QUESTIONS_SUCCESS = '@DATA.KYC.FETCH_KYC_EXTRA_QUES
 export const FETCH_KYC_EXTRA_QUESTIONS_FAILURE = '@DATA.KYC.FETCH_KYC_EXTRA_QUESTIONS_FAILURE'
 // save additional KYC
 export const SAVE_KYC_EXTRA_QUESTIONS = '@DATA.KYC.SAVE_KYC_EXTRA_QUESTIONS'
+export const UPDATE_KYC_EXTRA_QUESTIONS = '@DATA.KYC.UPDATE_KYC_EXTRA_QUESTIONS'
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/actions.ts
@@ -195,3 +195,8 @@ export const fetchExtraKYCFailure = (e): IdentityVerificationActionTypes => ({
   payload: { e },
   type: AT.FETCH_KYC_EXTRA_QUESTIONS_FAILURE
 })
+
+export const updateExtraKYCQuestions = (questions): IdentityVerificationActionTypes => ({
+  payload: { questions },
+  type: AT.UPDATE_KYC_EXTRA_QUESTIONS
+})
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/reducers.ts
@@ -171,6 +171,12 @@ const identityVerificationReducer = (
         kycExtraQuestions: Remote.Failure(action.payload.e)
       }
     }
+    case AT.UPDATE_KYC_EXTRA_QUESTIONS: {
+      return {
+        ...state,
+        kycExtraQuestions: Remote.Success(action.payload.questions)
+      }
+    }
     default:
       return state
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/sagas.ts
@@ -505,52 +505,10 @@ export default ({ api, coreSagas, networks }) => {
   const saveKYCExtraQuestions = function* () {
     try {
       yield put(actions.form.startSubmit(KYC_EXTRA_QUESTIONS_FORM))
-      const formValues = yield select(selectors.form.getFormValues(KYC_EXTRA_QUESTIONS_FORM))
       const extraForm = selectors.components.identityVerification
         .getKYCExtraSteps(yield select())
         .getOrElse({} as ExtraQuestionsType)
 
-      if (extraForm) {
-        const question1 = Object.keys(formValues).filter((k) => k.startsWith('q1'))
-        if (question1.length > 0) {
-          Object.keys(question1).forEach((que1) =>
-            extraForm.nodes[0].children.forEach((q1) => {
-              if (q1.id === question1[que1]) {
-                q1.checked = true
-              }
-            })
-          )
-        }
-        extraForm.nodes[1].children.forEach((q2) => {
-          if (q2.id === formValues.q2) {
-            q2.checked = true
-          }
-          if (q2.id === 'q2-a8' && formValues['q2-a8-a1'] && q2.children && q2.children[0]) {
-            q2.children[0].input = formValues['q2-a8-a1']
-          }
-        })
-        extraForm.nodes[2].children.forEach((q3) => {
-          if (q3.id === formValues.q3) {
-            q3.checked = true
-          }
-        })
-        extraForm.nodes[3].children.forEach((q4) => {
-          if (q4.id === formValues.q4) {
-            q4.checked = true
-          }
-          // name and relationship
-          if (
-            q4.id === 'q4-a3' &&
-            formValues['q4-a3-a1'] &&
-            formValues['q4-a3-a2'] &&
-            q4.children
-          ) {
-            q4.children[0].input = formValues['q4-a3-a1']
-            q4.children[1].input = formValues['q4-a3-a2']
-          }
-        })
-      }
-
       yield call(api.updateKYCExtraQuestions, extraForm)
 
       yield put(actions.form.stopSubmit(KYC_EXTRA_QUESTIONS_FORM))

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/types.ts
@@ -249,6 +249,12 @@ interface FetchExtraKYCSuccess {
   }
   type: typeof AT.FETCH_KYC_EXTRA_QUESTIONS_SUCCESS
 }
+interface UpdateKYCQuestions {
+  payload: {
+    questions: any
+  }
+  type: typeof AT.UPDATE_KYC_EXTRA_QUESTIONS
+}
 
 export type IdentityVerificationActionTypes =
   | FetchSupportedDocumentAction
@@ -278,6 +284,7 @@ export type IdentityVerificationActionTypes =
   | FetchExtraKYCFailure
   | FetchExtraKYCLoading
   | FetchExtraKYCSuccess
+  | UpdateKYCQuestions
 
 export type InfoAndResidentialFormValuesType = {
   country: CountryType

diff --git a/...wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx b/...wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import { Field, InjectedFormProps, reduxForm } from 'redux-form'
 import styled from 'styled-components'
 
-import { NodeType } from '@core/types'
+import { NodeItemTypes, NodeType } from '@core/types'
 import { BlockchainLoader, Button, HeartbeatLoader, Icon, Text } from 'blockchain-info-components'
 import { FlyoutWrapper } from 'components/Flyout'
 import CheckBox from 'components/Form/CheckBox'
@@ -136,8 +136,70 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
     )
   }
 
+  const validateMultiSelectNodes = (): boolean => {
+    const { nodes } = props.extraSteps
+    if (nodes) {
+      const multipleSelection = nodes.filter(
+        (node) => node.type === NodeItemTypes.MULTIPLE_SELECTION
+      )
+
+      if (multipleSelection) {
+        const multipleItems = multipleSelection.map((node) =>
+          node.children.some((item) => item.checked)
+        )
+        return multipleItems.every((item) => item)
+      }
+    }
+    return true
+  }
+
   const updateItem = (nodeId: string, childId: string) => {
     props.formActions.change(KYC_EXTRA_QUESTIONS_FORM, nodeId, childId)
+
+    const { nodes } = props.extraSteps
+    let isChanged = false
+
+    nodes.map(
+      (node) =>
+        node.id === nodeId &&
+        node.children &&
+        node.children.map((child) => {
+          if (child.id === childId && !child.checked) {
+            child.checked = true
+            isChanged = true
+          }
+          return child
+        })
+    )
+    if (isChanged) {
+      props.identityVerificationActions.updateExtraKYCQuestions({ nodes })
+    }
+  }
+
+  const onChangeInput = (e, value) => {
+    const itemId = e.currentTarget.name
+
+    const { nodes } = props.extraSteps
+    const isChanged = false
+
+    nodes.map(
+      (node) =>
+        node.children &&
+        node.children.map(
+          (child) =>
+            child.children &&
+            child.children.map((item) => {
+              if (item.id === itemId && item.input !== value) {
+                item.input = value
+              }
+              return item
+            })
+        )
+    )
+
+    if (isChanged) {
+      props.identityVerificationActions.updateExtraKYCQuestions({ nodes })
+    }
   }
 
   const renderCheckBoxBasedQuestion = (node: NodeType, updateItem) => {
@@ -190,7 +252,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
 
         <FormItem>
           <Field
-            data-e2e='sourceOfFundsDropDown'
+            data-e2e={`sourceOfFundsDropDown_${node.id}`}
             name={node.id}
             validate={required}
             elements={questionElements}
@@ -214,6 +276,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
                       validate={required}
                       component={TextBox}
                       placeholder={item.text}
+                      onChange={onChangeInput}
                     />
                   ))}
                 </FormItem>
@@ -276,6 +339,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
                         validate={required}
                         component={TextBox}
                         placeholder={item.hint}
+                        onChange={onChangeInput}
                       />
                     </FormItem>
                   ))}
@@ -320,10 +384,10 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
 
         {props.extraSteps.nodes &&
           props.extraSteps.nodes.map((node) => {
-            if (node.type === 'MULTIPLE_SELECTION') {
+            if (node.type === NodeItemTypes.MULTIPLE_SELECTION) {
               return renderCheckBoxBasedQuestion(node, updateItem)
             }
-            if (node.type === 'SINGLE_SELECTION') {
+            if (node.type === NodeItemTypes.SINGLE_SELECTION) {
               return node.isDropdown
                 ? renderDropDownBasedQuestion(node, updateItem)
                 : renderSingleSelectionQuestion(node, updateItem)
@@ -338,7 +402,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
           nature='primary'
           type='submit'
           fullwidth
-          disabled={disabled}
+          disabled={disabled || !validateMultiSelectNodes()}
         >
           {props.submitting ? (
             <HeartbeatLoader height='16px' width='16px' color='white' />

diff --git a/packages/blockchain-wallet-v4/src/network/api/kyc/types.ts b/packages/blockchain-wallet-v4/src/network/api/kyc/types.ts
@@ -4,6 +4,11 @@ export type SDDEligibleType = {
   tier: 0 | 1 | 2 | 3 | 4
 }
 
+export enum NodeItemTypes {
+  MULTIPLE_SELECTION = 'MULTIPLE_SELECTION',
+  SINGLE_SELECTION = 'SINGLE_SELECTION'
+}
+
 export type SDDVerifiedType = {
   taskComplete?: boolean
   verified: boolean