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:
Rafael Taranto 2024-11-28 08:43:36 +00:00 committed by GitHub
commit 3a04f19ad4
2 changed files with 65 additions and 30 deletions

View file

@ -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>

View file

@ -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>