feat: allow for edited customer photos to be previewed

new-lamassu-admin/src/pages/Customers/CustomerData.js

@@ -77,6 +77,8 @@ const CustomerData = ({
 }) => {
   const classes = useStyles()
   const [listView, setListView] = useState(false)
+  const [previewPhoto, setPreviewPhoto] = useState(null)
+  const [previewCard, setPreviewCard] = useState(null)
 
   const idData = R.path(['idCardData'])(customer)
   const rawExpirationDate = R.path(['expirationDate'])(idData)
@@ -213,9 +215,6 @@ const CustomerData = ({
     {
       title: 'Name',
       titleIcon: <EditIcon className={classes.editIcon} />,
-      authorize: () => {},
-      reject: () => {},
-      save: () => {},
       isAvailable: false,
       editable: true
     },
@@ -226,7 +225,7 @@ const CustomerData = ({
       authorize: () =>
         updateCustomer({ sanctionsOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ sanctionsOverride: OVERRIDE_REJECTED }),
-      children: <Info3>{sanctionsDisplay}</Info3>,
+      children: () => <Info3>{sanctionsDisplay}</Info3>,
       isAvailable: !R.isNil(sanctions),
       editable: true
     },
@@ -238,20 +237,33 @@ const CustomerData = ({
       authorize: () =>
         updateCustomer({ frontCameraOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ frontCameraOverride: OVERRIDE_REJECTED }),
-      save: values =>
+      save: values => {
-        replacePhoto({
+        setPreviewPhoto(null)
+        return replacePhoto({
           newPhoto: values.frontCamera,
           photoType: 'frontCamera'
-        }),
+        })
+      },
+      cancel: () => setPreviewPhoto(null),
       deleteEditedData: () => deleteEditedData({ frontCamera: null }),
-      children: customer.frontCameraPath ? (
+      children: values => {
+        if (values.frontCamera !== previewPhoto) {
+          setPreviewPhoto(values.frontCamera)
+        }
+
+        return customer.frontCameraPath ? (
           <Photo
             show={customer.frontCameraPath}
-          src={`${URI}/front-camera-photo/${R.path(['frontCameraPath'])(
+            src={
+              !R.isNil(previewPhoto)
+                ? URL.createObjectURL(previewPhoto)
+                : `${URI}/front-camera-photo/${R.path(['frontCameraPath'])(
                     customer
-          )}`}
+                  )}`
+            }
           />
-      ) : null,
+        ) : null
+      },
       hasImage: true,
       validationSchema: customerDataSchemas.frontCamera,
       initialValues: initialValues.frontCamera,
@@ -266,18 +278,33 @@ const CustomerData = ({
       authorize: () =>
         updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED }),
-      save: values =>
+      save: values => {
-        replacePhoto({
+        setPreviewCard(null)
+        return replacePhoto({
           newPhoto: values.idCardPhoto,
           photoType: 'idCardPhoto'
-        }),
+        })
+      },
+      cancel: () => setPreviewCard(null),
       deleteEditedData: () => deleteEditedData({ idCardPhoto: null }),
-      children: customer.idCardPhotoPath ? (
+      children: values => {
+        if (values.idCardPhoto !== previewCard) {
+          setPreviewCard(values.idCardPhoto)
+        }
+
+        return customer.idCardPhotoPath ? (
           <Photo
             show={customer.idCardPhotoPath}
-          src={`${URI}/id-card-photo/${R.path(['idCardPhotoPath'])(customer)}`}
+            src={
+              !R.isNil(previewCard)
+                ? URL.createObjectURL(previewCard)
+                : `${URI}/id-card-photo/${R.path(['idCardPhotoPath'])(
+                    customer
+                  )}`
+            }
           />
-      ) : null,
+        ) : null
+      },
       hasImage: true,
       validationSchema: customerDataSchemas.idCardPhoto,
       initialValues: initialValues.idCardPhoto,
@@ -292,6 +319,7 @@ const CustomerData = ({
       authorize: () => updateCustomer({ usSsnOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ usSsnOverride: OVERRIDE_REJECTED }),
       save: values => editCustomer(values),
+      children: () => {},
       deleteEditedData: () => deleteEditedData({ usSsn: null }),
       validationSchema: customerDataSchemas.usSsn,
       initialValues: initialValues.usSsn,
@@ -427,6 +455,7 @@ const CustomerData = ({
       titleIcon,
       fields,
       save,
+      cancel,
       deleteEditedData,
       retrieveAdditionalData,
       children,
@@ -453,6 +482,7 @@ const CustomerData = ({
         validationSchema={validationSchema}
         initialValues={initialValues}
         save={save}
+        cancel={cancel}
         deleteEditedData={deleteEditedData}
         retrieveAdditionalData={retrieveAdditionalData}
         editable={editable}></EditableCard>

new-lamassu-admin/src/pages/Customers/components/EditableCard.js

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import { Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'
-import { useState, React } from 'react'
+import { useState, React, useRef } from 'react'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
@@ -132,14 +132,15 @@ const ReadOnlyField = ({ field, value, ...props }) => {
 
 const EditableCard = ({
   fields,
-  save,
+  save = () => {},
-  authorize,
+  cancel = () => {},
+  authorize = () => {},
   hasImage,
-  reject,
+  reject = () => {},
   state,
   title,
   titleIcon,
-  children,
+  children = () => {},
   validationSchema,
   initialValues,
   deleteEditedData,
@@ -149,6 +150,8 @@ const EditableCard = ({
 }) => {
   const classes = useStyles()
 
+  const formRef = useRef()
+
   const [editing, setEditing] = useState(false)
   const [input, setInput] = useState(null)
   const [error, setError] = useState(null)
@@ -187,8 +190,9 @@ const EditableCard = ({
               </div>
             )}
           </div>
-          {children}
+          {children(formRef.current?.values ?? {})}
           <Formik
+            innerRef={formRef}
             validateOnBlur={false}
             validateOnChange={false}
             enableReinitialize
@@ -359,6 +363,7 @@ const EditableCard = ({
                             color="secondary"
                             Icon={CancelReversedIcon}
                             InverseIcon={CancelReversedIcon}
+                            onClick={() => cancel()}
                             type="reset">
                             Cancel
                           </ActionButton>