feat: #3689 #3812 #3913 aml app fixes (#3922)

reapit · Apr 9, 2021 · 44fdc5e · 44fdc5e
1 parent a9e628e
commit 44fdc5e
Show file tree

Hide file tree

Showing 23 changed files with 327 additions and 184 deletions.
diff --git a/packages/aml-checklist/src/components/ui/forms/__tests__/identification.tsx b/packages/aml-checklist/src/components/ui/forms/__tests__/identification.tsx
@@ -23,7 +23,7 @@ describe('Identification', () => {
       const mockEvent = {
         preventDefault: jest.fn(),
       }
-      handleFilenameClick(mockValues)(mockEvent)
+      handleFilenameClick(mockValues, jest.fn())(mockEvent)
       expect(mockEvent.preventDefault).toBeCalled()
       expect(downloadDocument).toBeCalledWith(mockValues.documentId)
     })

diff --git a/packages/aml-checklist/src/components/ui/forms/identification.tsx b/packages/aml-checklist/src/components/ui/forms/identification.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { Dispatch, SetStateAction, useState } from 'react'
 import { ContactModel, IdentityDocumentModel } from '@reapit/foundations-ts-definitions'
-import { Button, Input, DatePicker, CameraImageInput, Formik, Form, ButtonGroup } from '@reapit/elements'
+import { Button, Input, CameraImageInput, Formik, Form, ButtonGroup, ModalV2, Loader, Section } from '@reapit/elements'
 import SelectIdentity from '@/components/ui/inputs/select-identity'
 import styles from '@/styles/pages/checklist-detail.scss?mod'
 import { downloadDocument } from '@/services/documents'
@@ -30,15 +30,30 @@ export type IdentificationProps = {
   onPrevHandler: () => void
 }
 
+export interface ModalState {
+  image: string | null
+  isLoading: boolean
+  isVisible: boolean
+}
+
 export const onSubmitHandler = (onSaveHandler: (formValues: IdentityDocumentForm) => void) => (
   formValues: IdentityDocumentForm,
 ) => onSaveHandler(formValues)
 
-export const handleFilenameClick = (values: IdentityDocumentForm) => {
-  return (e) => {
-    e.preventDefault()
-    downloadDocument(values.documentId)
-  }
+export const handleFilenameClick = (
+  values: IdentityDocumentForm,
+  setModalState: Dispatch<SetStateAction<ModalState>>,
+) => async (e) => {
+  e.preventDefault()
+  console.log(values)
+  setModalState({ isLoading: true, isVisible: true, image: null })
+  const imageURL = await downloadDocument(values.documentId)
+  const image = imageURL ? imageURL : null
+  setModalState({ isLoading: false, isVisible: true, image })
+}
+
+export const handleCloseModal = (setModalState: Dispatch<SetStateAction<ModalState>>) => () => {
+  setModalState({ isLoading: false, isVisible: false, image: null })
 }
 
 export const Identification: React.FC<IdentificationProps> = ({
@@ -49,82 +64,110 @@ export const Identification: React.FC<IdentificationProps> = ({
   onNextHandler,
   onPrevHandler,
   disabled = false,
-}) => (
-  <Formik
-    validateOnMount
-    initialValues={initFormValues}
-    onSubmit={onSubmitHandler(onSaveHandler)}
-    validationSchema={validationSchema}
-  >
-    {({ values, isValid }) => {
-      const id = contact?.id || ''
-      return (
-        <>
-          {disabled && (
-            <p data-test="primaryIdWarinLabel" className="mb-4">
-              *Please ensure the Primary ID has been completed before adding a Secondary ID
-            </p>
-          )}
-          <Form>
-            <SelectIdentity id={typeIdField.name} name={typeIdField.name} labelText={typeIdField.label} />
-            <Input
-              id={detailsField.name}
-              name={detailsField.name}
-              type="text"
-              placeholder={detailsField.placeHolder}
-              required
-              labelText={detailsField.label}
-            />
-            <DatePicker id={expiryField.name} name={expiryField.name} labelText={expiryField.label} required />
-            <CameraImageInput
-              id={documentIdField.name}
-              name={documentIdField.name}
-              labelText={documentIdField.label}
-              allowClear={true}
-              inputProps={{ disabled: disabled }}
-              required
-              onFilenameClick={handleFilenameClick(values)}
-              isNarrowWidth
-              accept="image/*"
-            />
-            <div className="field pb-2">
-              <div className={`columns ${styles.reverseColumns}`}>
-                <div className="column">
-                  <div className={`${styles.isFullHeight} flex items-center`}>
-                    <span>RPS Ref:</span>
-                    <span className="ml-1">{id}</span>
+}) => {
+  const [modalState, setModalState] = useState<ModalState>({
+    image: null,
+    isLoading: false,
+    isVisible: false,
+  })
+  return (
+    <Formik
+      validateOnMount
+      initialValues={initFormValues}
+      onSubmit={onSubmitHandler(onSaveHandler)}
+      validationSchema={validationSchema}
+    >
+      {({ values, isValid }) => {
+        const id = contact?.id || ''
+        return (
+          <>
+            {disabled && (
+              <p data-test="primaryIdWarinLabel" className="mb-4">
+                *Please ensure the Primary ID has been completed before adding a Secondary ID
+              </p>
+            )}
+            <Form>
+              <SelectIdentity id={typeIdField.name} name={typeIdField.name} labelText={typeIdField.label} />
+              <Input
+                id={detailsField.name}
+                name={detailsField.name}
+                type="text"
+                placeholder={detailsField.placeHolder}
+                required
+                labelText={detailsField.label}
+              />
+              <Input id={expiryField.name} name={expiryField.name} type="date" labelText={expiryField.label} required />
+              <CameraImageInput
+                id={documentIdField.name}
+                name={documentIdField.name}
+                labelText={documentIdField.label}
+                allowClear={true}
+                inputProps={{ disabled: disabled }}
+                required
+                onFilenameClick={handleFilenameClick(values, setModalState)}
+                isNarrowWidth
+                accept="image/*"
+              />
+              <div className="field pb-2">
+                <div className={`columns ${styles.reverseColumns}`}>
+                  <div className="column">
+                    <div className={`${styles.isFullHeight} flex items-center`}>
+                      <span>RPS Ref:</span>
+                      <span className="ml-1">{id}</span>
+                    </div>
                   </div>
+                  <ButtonGroup hasSpacing isCentered>
+                    <Button
+                      className="mr-2"
+                      variant="success"
+                      type="submit"
+                      loading={loading}
+                      disabled={loading || disabled || !isValid}
+                    >
+                      Save
+                    </Button>
+                    <Button
+                      className="mr-2"
+                      variant="secondary"
+                      type="button"
+                      onClick={onPrevHandler}
+                      disabled={loading}
+                    >
+                      Previous
+                    </Button>
+                    <Button
+                      variant="primary"
+                      type="button"
+                      onClick={onNextHandler(values)}
+                      disabled={loading || disabled || !isValid}
+                    >
+                      Next
+                    </Button>
+                  </ButtonGroup>
                 </div>
-                <ButtonGroup hasSpacing isCentered>
-                  <Button
-                    className="mr-2"
-                    variant="success"
-                    type="submit"
-                    loading={loading}
-                    disabled={loading || disabled || !isValid}
-                  >
-                    Save
-                  </Button>
-                  <Button className="mr-2" variant="secondary" type="button" onClick={onPrevHandler} disabled={loading}>
-                    Previous
-                  </Button>
-                  <Button
-                    variant="primary"
-                    type="button"
-                    onClick={onNextHandler(values)}
-                    disabled={loading || disabled || !isValid}
-                  >
-                    Next
-                  </Button>
-                </ButtonGroup>
               </div>
-            </div>
-            <p className="is-size-6">* Indicates fields that are required in order to ‘Complete’ this section.</p>
-          </Form>
-        </>
-      )
-    }}
-  </Formik>
-)
+              <p className="is-size-6">* Indicates fields that are required in order to ‘Complete’ this section.</p>
+            </Form>
+            <ModalV2
+              isCentered
+              isResponsive
+              visible={modalState.isVisible}
+              afterClose={handleCloseModal(setModalState)}
+              title="Viewing document"
+            >
+              {modalState.isLoading ? (
+                <Loader />
+              ) : (
+                <Section>
+                  <img src={modalState.image || ''} />
+                </Section>
+              )}
+            </ModalV2>
+          </>
+        )
+      }}
+    </Formik>
+  )
+}
 
 export default Identification
diff --git a/...ages/aml-checklist/src/components/ui/modal/__tests__/__snapshots__/update-status.tsx.snap b/...ages/aml-checklist/src/components/ui/modal/__tests__/__snapshots__/update-status.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`UpdateStatus should match snapshot 1`] = `
 <Fragment>
-  <p>
+  <p
+    className="mb-4"
+  >
     You have completed 
     2
      out of 
@@ -11,26 +13,15 @@ exports[`UpdateStatus should match snapshot 1`] = `
     Mrs H Phillips
     . Please now select one of the following options in order to continue
   </p>
-  <div>
-    <AcButton
-      buttonProps={
-        Object {
-          "loading": false,
-          "onClick": [Function],
-          "type": "button",
-          "variant": "primary",
-        }
+  <Formik
+    initialValues={
+      Object {
+        "status": "unchecked",
       }
-      dynamicLinkParams={
-        Object {
-          "appMode": "WEB",
-          "entityCode": "AYL19000001",
-          "entityType": "contacts",
-        }
-      }
-    >
-      ID Check Successful
-    </AcButton>
-  </div>
+    }
+    onSubmit={[Function]}
+  >
+    <Component />
+  </Formik>
 </Fragment>
 `;
diff --git a/packages/aml-checklist/src/components/ui/modal/__tests__/primary-identification.tsx b/packages/aml-checklist/src/components/ui/modal/__tests__/primary-identification.tsx
@@ -43,7 +43,7 @@ describe('PrimaryIdentification', () => {
         initFormValues: {
           typeId: idCheck.identityDocument1?.typeId,
           details: idCheck.identityDocument1?.details,
-          expiry: new Date(idCheck.identityDocument1?.expiry as string),
+          expiry: idCheck.identityDocument1?.expiry,
           documentId: 'SOME_ID',
         },
       }

diff --git a/packages/aml-checklist/src/components/ui/modal/__tests__/secondary-identification.tsx b/packages/aml-checklist/src/components/ui/modal/__tests__/secondary-identification.tsx
@@ -42,7 +42,7 @@ describe('SecondaryIdentification', () => {
         initFormValues: {
           typeId: idCheck.identityDocument2?.typeId,
           details: idCheck.identityDocument2?.details,
-          expiry: new Date(idCheck.identityDocument2?.expiry as string),
+          expiry: idCheck.identityDocument2?.expiry,
           documentId: 'SOME_ID',
         },
       }

diff --git a/packages/aml-checklist/src/components/ui/modal/__tests__/update-status.tsx b/packages/aml-checklist/src/components/ui/modal/__tests__/update-status.tsx
@@ -16,6 +16,7 @@ describe('UpdateStatus', () => {
       status: sectionsStatus,
       loginMode: 'WEB',
       updateIdentityCheckStatus: jest.fn(),
+      idCheckStatus: 'unchecked',
     }
     const wrapper = shallow(<UpdateStatus {...mockProps} />)
     expect(wrapper).toMatchSnapshot()
@@ -27,6 +28,9 @@ describe('UpdateStatus', () => {
         checklistDetail: {
           checklistDetailData: {
             contact,
+            idCheck: {
+              status: 'checked',
+            },
           },
           status: sectionsStatus,
           isSubmitting: false,
@@ -37,6 +41,7 @@ describe('UpdateStatus', () => {
         isSubmitting: false,
         contact,
         status: sectionsStatus,
+        idCheckStatus: 'checked',
       })
     })
     it('should run correctly', () => {
@@ -46,6 +51,7 @@ describe('UpdateStatus', () => {
         isSubmitting: false,
         contact: null,
         status: defaultStatus,
+        idCheckStatus: 'unchecked',
       })
     })
   })

diff --git a/...ponents/ui/modal/address-information/__tests__/__snapshots__/address-information.tsx.snap b/...ponents/ui/modal/address-information/__tests__/__snapshots__/address-information.tsx.snap
@@ -612,8 +612,22 @@ exports[`AddressInformation AddressInput should render correctly 1`] = `
     isNarrowWidth={true}
     labelText="Upload File"
     name="metadata.primaryAddress[documentImage]"
+    onFilenameClick={[Function]}
     required={true}
   />
+  <ModalV2
+    afterClose={[Function]}
+    isCentered={true}
+    isResponsive={true}
+    title="Viewing document"
+    visible={false}
+  >
+    <Section>
+      <img
+        src=""
+      />
+    </Section>
+  </ModalV2>
 </div>
 `;
 
@@ -1229,8 +1243,22 @@ exports[`AddressInformation renderSencondaryAddress should match snapshot 1`] =
     isNarrowWidth={true}
     labelText="Upload File"
     name="metadata.secondaryAddress[documentImage]"
+    onFilenameClick={[Function]}
     required={true}
   />
+  <ModalV2
+    afterClose={[Function]}
+    isCentered={true}
+    isResponsive={true}
+    title="Viewing document"
+    visible={false}
+  >
+    <Section>
+      <img
+        src=""
+      />
+    </Section>
+  </ModalV2>
 </div>
 `;