Merge pull request #73 from reapit/feature/cld-346-disable-secondary-id

[CLD-346] Disabled secondary id if primary id not added
reapit · Oct 23, 2019 · dd0c4e2 · dd0c4e2
2 parents fa5cf2d + 1839024
commit dd0c4e2
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "test-e2e:ci": "concurrently --success=\"first\" \"yarn start\" \"yarn test-e2e\" -k"
   },
   "dependencies": {
-    "@reapit/elements": "^0.4.49",
+    "@reapit/elements": "^0.4.50",
     "dayjs": "^1.8.16",
     "react": "^16.8.6",
     "react-datepicker": "^2.9.6",

diff --git a/src/components/ui/forms/__tests__/__snapshots__/identification.tsx.snap b/src/components/ui/forms/__tests__/__snapshots__/identification.tsx.snap
@@ -12,7 +12,13 @@ exports[`Identification Identification should match snapshot 1`] = `
 />
 `;
 
-exports[`Identification renderFormHandler should match snapshot 1`] = `
+exports[`Identification renderFormHandler should match snapshot when DISABLED false 1`] = `
+<div>
+  <Component />
+</div>
+`;
+
+exports[`Identification renderFormHandler should match snapshot when DISABLED true 1`] = `
 <div>
   <Component />
 </div>

diff --git a/src/components/ui/forms/__tests__/identification.tsx b/src/components/ui/forms/__tests__/identification.tsx
@@ -5,10 +5,25 @@ import Identification, { renderFormHandler, onSubmitHandler } from '../identific
 
 describe('Identification', () => {
   describe('renderFormHandler', () => {
-    it('should match snapshot', () => {
+    it('should match snapshot when DISABLED true', () => {
+      const mockProps = {
+        contact: contact,
+        loading: false,
+        disabled: true,
+        onNextHandler: jest.fn(),
+        onPrevHandler: jest.fn(),
+        isDesktopMode: false
+      }
+      const component = renderFormHandler(mockProps)
+      const wrapper = shallow(<div>{component}</div>)
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should match snapshot when DISABLED false', () => {
       const mockProps = {
         contact: contact,
         loading: false,
+        disabled: false,
         onNextHandler: jest.fn(),
         onPrevHandler: jest.fn(),
         isDesktopMode: false

diff --git a/src/components/ui/forms/identification.tsx b/src/components/ui/forms/identification.tsx
@@ -18,46 +18,58 @@ export type IdentificationProps = {
   initFormValues: IdentityDocumentModel
   loading: boolean
   isDesktopMode: boolean
+  disabled?: boolean
   onSaveHandler: (values: any) => void
   onNextHandler: (values: any) => () => void
   onPrevHandler: () => void
 }
 
-export const renderFormHandler = ({ contact, loading, onNextHandler, onPrevHandler, isDesktopMode }) => ({
-  values
-}) => {
+export const renderFormHandler = ({
+  contact,
+  loading,
+  onNextHandler,
+  onPrevHandler,
+  isDesktopMode,
+  disabled = false
+}) => ({ values }) => {
   const id = oc(contact).id('')
   return (
-    <Form>
-      <SelectIdentity id="typeId" name="typeId" labelText="ID Type" />
-      <Input id="details" name="details" type="text" placeholder="ID Reference" labelText="ID Reference" />
-      <DatePicker id="expiry" name="expiry" labelText="Expiry Date" />
-      <CameraImageInput
-        id="fileUrl"
-        name="fileUrl"
-        labelText={isDesktopMode ? 'Upload File' : 'Upload File/Take a Pic'}
-        allowClear={true}
-      />
+    <>
+      {disabled && (
+        <p className="mb-4">*Please ensure the Primary ID has been completed before adding a Secondary ID</p>
+      )}
+      <Form>
+        <SelectIdentity id="typeId" name="typeId" labelText="ID Type" />
+        <Input id="details" name="details" type="text" placeholder="ID Reference" labelText="ID Reference" />
+        <DatePicker id="expiry" name="expiry" labelText="Expiry Date" />
+        <CameraImageInput
+          id="fileUrl"
+          name="fileUrl"
+          labelText={isDesktopMode ? 'Upload File' : 'Upload File/Take a Pic'}
+          allowClear={true}
+          inputProps={{ disabled: disabled }}
+        />
 
-      <div className={`flex mt-4 ${styles.justifyBetween}`}>
-        <div className="flex items-center">
-          <span>RPS Ref:</span>
-          <span className="ml-1">{id}</span>
-        </div>
+        <div className={`flex mt-4 ${styles.justifyBetween}`}>
+          <div className="flex items-center">
+            <span>RPS Ref:</span>
+            <span className="ml-1">{id}</span>
+          </div>
 
-        <div>
-          <Button className="mr-2" variant="primary" type="submit" loading={loading}>
-            Save
-          </Button>
-          <Button className="mr-2" variant="primary" type="button" onClick={onPrevHandler} disabled={loading}>
-            Previous
-          </Button>
-          <Button variant="primary" type="button" onClick={onNextHandler(values)} disabled={loading}>
-            Next
-          </Button>
+          <div>
+            <Button className="mr-2" variant="primary" type="submit" loading={loading} disabled={disabled}>
+              Save
+            </Button>
+            <Button className="mr-2" variant="primary" type="button" onClick={onPrevHandler} disabled={loading}>
+              Previous
+            </Button>
+            <Button variant="primary" type="button" onClick={onNextHandler(values)} disabled={loading || disabled}>
+              Next
+            </Button>
+          </div>
         </div>
-      </div>
-    </Form>
+      </Form>
+    </>
   )
 }
 
@@ -66,6 +78,7 @@ export const onSubmitHandler = (formValues: IdentityDocumentModel, onSaveHandler
 export const Identification: React.FC<IdentificationProps> = ({
   loading,
   contact,
+  disabled,
   initFormValues,
   onSaveHandler,
   onNextHandler,
@@ -75,7 +88,7 @@ export const Identification: React.FC<IdentificationProps> = ({
   <Formik
     initialValues={initFormValues}
     onSubmit={(formValues: IdentityDocumentModel) => onSubmitHandler(formValues, onSaveHandler)}
-    render={renderFormHandler({ contact, loading, onNextHandler, onPrevHandler, isDesktopMode })}
+    render={renderFormHandler({ contact, loading, onNextHandler, onPrevHandler, isDesktopMode, disabled })}
   />
 )
 

diff --git a/src/components/ui/modal/__tests__/__snapshots__/secondary-identification.tsx.snap b/src/components/ui/modal/__tests__/__snapshots__/secondary-identification.tsx.snap
@@ -95,6 +95,7 @@ exports[`SecondaryIdentification SecondaryIdentification should match snapshot 1
       "title": "Ms",
     }
   }
+  disabled={false}
   initFormValues={Object {}}
   isDesktopMode={false}
   loading={false}

diff --git a/src/components/ui/modal/__tests__/secondary-identification.tsx b/src/components/ui/modal/__tests__/secondary-identification.tsx
@@ -3,13 +3,15 @@ import { shallow } from 'enzyme'
 import { contact } from '@/sagas/__stubs__/contact'
 import { SecondaryIdentification, mapStateToProps, mapDispatchToProps } from '../secondary-identification'
 import { ReduxState } from '@/types/core'
+import { idCheck } from '@/sagas/__stubs__/idCheck'
 describe('SecondaryIdentification', () => {
   describe('SecondaryIdentification', () => {
     it('should match snapshot', () => {
       const mockProps = {
         contact: contact,
         initFormValues: {},
         loading: false,
+        idCheck: idCheck,
         updateIdentification: jest.fn(),
         onNextHandler: jest.fn(),
         onPrevHandler: jest.fn(),

diff --git a/src/components/ui/modal/secondary-identification.tsx b/src/components/ui/modal/secondary-identification.tsx
@@ -9,44 +9,53 @@ import {
   selectCheckListDetailContact,
   selectCheckListDetailSecondaryId,
   selectCheckListDetailIsSubmitting,
-  selectCheckListDetailSecondaryIdUrl
+  selectCheckListDetailSecondaryIdUrl,
+  selectCheckListDetailIdCheck
 } from '@/selectors/checklist-detail'
-import { IdentityDocumentModel, ContactModel } from '@/types/contact-api-schema'
+import { IdentityDocumentModel, ContactModel, IdentityCheckModel } from '@/types/contact-api-schema'
 import { checkIsDesktopMode } from '@/selectors/auth'
+import { isCompletedPrimaryID } from '@reapit/elements'
 
 export const SecondaryIdentification = ({
   contact,
+  idCheck,
   initFormValues,
   loading,
   updateIdentification,
   onNextHandler,
   onPrevHandler,
   isDesktopMode
-}) => (
-  <Identification
-    isDesktopMode={isDesktopMode}
-    loading={loading}
-    initFormValues={initFormValues}
-    contact={contact}
-    onSaveHandler={updateIdentification}
-    onNextHandler={onNextHandler}
-    onPrevHandler={onPrevHandler}
-  />
-)
+}) => {
+  const isDisabled = !isCompletedPrimaryID(idCheck)
+  return (
+    <Identification
+      isDesktopMode={isDesktopMode}
+      loading={loading}
+      initFormValues={initFormValues}
+      contact={contact}
+      onSaveHandler={updateIdentification}
+      onNextHandler={onNextHandler}
+      onPrevHandler={onPrevHandler}
+      disabled={isDisabled}
+    />
+  )
+}
 
 export type StateProps = {
   loading: boolean
   contact: ContactModel | null
   initFormValues: IdentityDocumentModel
   isDesktopMode: boolean
+  idCheck: IdentityCheckModel | null
 }
 
-export const mapStateToProps = (state: ReduxState) => {
+export const mapStateToProps = (state: ReduxState): StateProps => {
   const isSubmitting = selectCheckListDetailIsSubmitting(state)
   const contact = selectCheckListDetailContact(state)
   const secondaryIdDocument = selectCheckListDetailSecondaryId(state)
   const secondaryIdUrl = selectCheckListDetailSecondaryIdUrl(state)
   const isDesktopMode = checkIsDesktopMode(state)
+  const idCheck = selectCheckListDetailIdCheck(state)
 
   let initFormValues = IDENTIFICATION_FORM_DEFAULT_VALUES
   const DEFAULT_TYPE = ''
@@ -65,6 +74,7 @@ export const mapStateToProps = (state: ReduxState) => {
   return {
     loading: isSubmitting,
     contact,
+    idCheck,
     initFormValues,
     isDesktopMode
   }
@@ -76,7 +86,7 @@ export type DispatchProps = {
   onNextHandler: (values: any) => () => void
 }
 
-export const mapDispatchToProps = (dispatch: Dispatch) => ({
+export const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
   updateIdentification: (values: IdentityDocumentModel) =>
     dispatch(checklistDetailSecondaryIdUpdateData({ identityChecks: values })),
   onPrevHandler: () => dispatch(checklistDetailShowModal(STEPS.PRIMARY_IDENTIFICATION)),

diff --git a/src/sagas/__stubs__/idCheck.ts b/src/sagas/__stubs__/idCheck.ts
@@ -0,0 +1,49 @@
+import { IdentityCheckModel } from '@/types/contact-api-schema'
+
+export const idCheck: IdentityCheckModel = {
+  id: 'AYL19000004',
+  contactId: 'AYL19000002',
+  created: '2019-10-14T15:23:21',
+  modified: '2019-10-22T09:46:24',
+  checkDate: '2019-10-14T15:23:17',
+  status: 'pass',
+  negotiatorId: 'LJW',
+  documents: [
+    {
+      typeId: 'PP',
+      expiry: '2019-12-05T16:44:00',
+      details: 'This is a test'
+    },
+    {
+      typeId: 'ER',
+      expiry: '2019-12-05T16:44:00',
+      details: 'This is a test'
+    }
+  ],
+  metadata: {
+    primaryIdUrl: 'https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/AYL19000002-This is a test.jpg',
+    secondaryIdUrl: 'https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/AYL19000002-secondary test.jpg'
+  },
+  links: [
+    {
+      rel: 'self',
+      href: 'http://reapit.cloud.tyk.io/AYL19000002/identityChecks/AYL19000004',
+      action: 'GET'
+    },
+    {
+      rel: 'contact',
+      href: 'http://reapit.cloud.tyk.io/AYL19000002',
+      action: 'GET'
+    },
+    {
+      rel: 'idDocumentType',
+      href: 'https://reapit.cloud.tyk.io/configuration/identityDocumentTypes/PP',
+      action: 'GET'
+    },
+    {
+      rel: 'idDocumentType',
+      href: 'https://reapit.cloud.tyk.io/configuration/identityDocumentTypes/ER',
+      action: 'GET'
+    }
+  ]
+}
diff --git a/src/selectors/checklist-detail.ts b/src/selectors/checklist-detail.ts
@@ -41,7 +41,7 @@ export const selectCheckListDetailIsSubmitting = (state: ReduxState) => {
 }
 
 export const selectCheckListDetailIdCheck = (state: ReduxState) => {
-  return oc(state).checklistDetail.checklistDetailData.idCheck(undefined)
+  return oc(state).checklistDetail.checklistDetailData.idCheck(null)
 }
 
 export const selectCheckListDetailPrimaryIdUrl = (state: ReduxState) => {

diff --git a/yarn.lock b/yarn.lock
@@ -299,10 +299,10 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@reapit/elements@^0.4.49":
-  version "0.4.49"
-  resolved "https://registry.yarnpkg.com/@reapit/elements/-/elements-0.4.49.tgz#07de9e29798dcdbab7f026ba99b2d77fd53f8dde"
-  integrity sha512-eNS2l3p6CEmXP8yKb2UCW6buVf2pBmHgq3aPuLbGyulMPojpXM6E8uM0KhaxQ9leRk0jpzbhVhzfpvqe7WyYgA==
+"@reapit/elements@^0.4.50":
+  version "0.4.50"
+  resolved "https://registry.yarnpkg.com/@reapit/elements/-/elements-0.4.50.tgz#382534e03e0b93c8cb018ad76a9311e77e013e40"
+  integrity sha512-DLimGe0a2uvHSDbZ7u9K/mf2agLdapAOwWyxtKMWAnUz7vahfKFOQlcxLaDV7cYw4lj7lydGY2sDPjInJea2dg==
   dependencies:
     bulma "^0.7.5"
     dayjs "^1.8.16"