Merge pull request #1746 from RafaelTaranto/backport/photo-previews-customer
LAM-375 feat: allow for edited customer photos to be previewed
This commit is contained in:
commit
3a04f19ad4
2 changed files with 65 additions and 30 deletions
|
|
@ -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 =>
|
||||
replacePhoto({
|
||||
save: values => {
|
||||
setPreviewPhoto(null)
|
||||
return replacePhoto({
|
||||
newPhoto: values.frontCamera,
|
||||
photoType: 'frontCamera'
|
||||
}),
|
||||
})
|
||||
},
|
||||
cancel: () => setPreviewPhoto(null),
|
||||
deleteEditedData: () => deleteEditedData({ frontCamera: null }),
|
||||
children: customer.frontCameraPath ? (
|
||||
<Photo
|
||||
show={customer.frontCameraPath}
|
||||
src={`${URI}/front-camera-photo/${R.path(['frontCameraPath'])(
|
||||
customer
|
||||
)}`}
|
||||
/>
|
||||
) : null,
|
||||
children: values => {
|
||||
if (values.frontCamera !== previewPhoto) {
|
||||
setPreviewPhoto(values.frontCamera)
|
||||
}
|
||||
|
||||
return customer.frontCameraPath ? (
|
||||
<Photo
|
||||
show={customer.frontCameraPath}
|
||||
src={
|
||||
!R.isNil(previewPhoto)
|
||||
? URL.createObjectURL(previewPhoto)
|
||||
: `${URI}/front-camera-photo/${R.path(['frontCameraPath'])(
|
||||
customer
|
||||
)}`
|
||||
}
|
||||
/>
|
||||
) : 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 =>
|
||||
replacePhoto({
|
||||
save: values => {
|
||||
setPreviewCard(null)
|
||||
return replacePhoto({
|
||||
newPhoto: values.idCardPhoto,
|
||||
photoType: 'idCardPhoto'
|
||||
}),
|
||||
})
|
||||
},
|
||||
cancel: () => setPreviewCard(null),
|
||||
deleteEditedData: () => deleteEditedData({ idCardPhoto: null }),
|
||||
children: customer.idCardPhotoPath ? (
|
||||
<Photo
|
||||
show={customer.idCardPhotoPath}
|
||||
src={`${URI}/id-card-photo/${R.path(['idCardPhotoPath'])(customer)}`}
|
||||
/>
|
||||
) : null,
|
||||
children: values => {
|
||||
if (values.idCardPhoto !== previewCard) {
|
||||
setPreviewCard(values.idCardPhoto)
|
||||
}
|
||||
|
||||
return customer.idCardPhotoPath ? (
|
||||
<Photo
|
||||
show={customer.idCardPhotoPath}
|
||||
src={
|
||||
!R.isNil(previewCard)
|
||||
? URL.createObjectURL(previewCard)
|
||||
: `${URI}/id-card-photo/${R.path(['idCardPhotoPath'])(
|
||||
customer
|
||||
)}`
|
||||
}
|
||||
/>
|
||||
) : 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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
authorize,
|
||||
save = () => {},
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue