lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: button new comet3 color, replace lodash with ramda

Browse source
This commit is contained in:
José Oliveira 2021-11-17 14:22:46 +00:00
parent a35dd3e77e
commit e3b13a228b
4 changed files with 74 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

5
new-lamassu-admin/src/components/buttons/ActionButton.styles.js
View file

@ -1,11 +1,11 @@
import typographyStyles from 'src/components/typography/styles'
import {
white,
fontColor,
subheaderColor,
subheaderDarkColor,
offColor,
offDarkColor,
offDarkerColor,
secondaryColor,
secondaryColorDark,
secondaryColorDarker,
@ -56,10 +56,9 @@ export default {
}
},
secondary: {
extend: colors(offColor, offDarkColor, white),
extend: colors(offColor, offDarkColor, offDarkerColor),
color: white,
'&:active': {
color: fontColor,
'& $actionButtonIcon': {
display: 'flex'
},

127
new-lamassu-admin/src/pages/Customers/CustomerData.js
View file

@ -26,6 +26,7 @@ import { URI } from 'src/utils/apollo'
import styles from './CustomerData.styles.js'
import { EditableCard } from './components'
import { getName } from './helper.js'
const useStyles = makeStyles(styles)
@ -59,7 +60,6 @@ const Photo = ({ show, src }) => {
const CustomerData = ({
customer,
updateCustomer,
replacePhoto,
editCustomer,
deleteEditedData
}) => {
@ -68,6 +68,7 @@ const CustomerData = ({
const idData = R.path(['idCardData'])(customer)
const rawExpirationDate = R.path(['expirationDate'])(idData)
const country = R.path(['country'])(idData)
const rawDob = R.path(['dateOfBirth'])(idData)
const sanctions = R.path(['sanctions'])(customer)
@ -83,43 +84,54 @@ const CustomerData = ({
const isEven = elem => elem % 2 === 0
const getVisibleCards = _.filter(elem => elem.isAvailable)
const getVisibleCards = _.filter(
elem =>
!_.isEmpty(elem.fields) ||
(!_.isNil(elem.children) && !_.isNil(elem.state))
)
const getAvailableFields = _.filter(({ value }) => value !== '')
const schemas = {
idScan: Yup.object().shape({
firstName: Yup.string().required(),
lastName: Yup.string().required(),
documentNumber: Yup.string().required(),
dateOfBirth: Yup.string().required(),
gender: Yup.string().required(),
country: Yup.string().required(),
expirationDate: Yup.string().required()
name: Yup.string(),
idNumber: Yup.string(),
birthDate: Yup.string(),
age: Yup.string(),
gender: Yup.string(),
state: Yup.string(),
expirationDate: Yup.string()
}),
usSsn: Yup.object().shape({
usSsn: Yup.string().required()
usSsn: Yup.string()
}),
idCardPhoto: Yup.object().shape({
idCardPhoto: Yup.mixed().required()
idCardPhoto: Yup.mixed()
}),
frontCamera: Yup.object().shape({
frontCamera: Yup.mixed().required()
frontCamera: Yup.mixed()
})
}
const idScanElements = [
{
name: 'firstName',
label: 'First name',
name: 'name',
label: 'Name',
component: TextInput
},
{
name: 'documentNumber',
name: 'idNumber',
label: 'ID number',
component: TextInput
},
{
name: 'dateOfBirth',
label: 'Birthdate',
name: 'birthDate',
label: 'Birth Date',
component: TextInput
},
{
name: 'age',
label: 'Age',
component: TextInput
},
{
@ -128,19 +140,14 @@ const CustomerData = ({
component: TextInput
},
{
name: 'lastName',
label: 'Last name',
name: 'state',
label: country === 'Canada' ? 'Province' : 'State',
component: TextInput
},
{
name: 'expirationDate',
label: 'Expiration Date',
component: TextInput
},
{
name: 'country',
label: 'Country',
component: TextInput
}
]
@ -158,14 +165,27 @@ const CustomerData = ({
const initialValues = {
idScan: {
firstName: R.path(['firstName'])(idData) ?? '',
lastName: R.path(['lastName'])(idData) ?? '',
documentNumber: R.path(['documentNumber'])(idData) ?? '',
dateOfBirth: (rawDob && format('yyyy-MM-dd', rawDob)) ?? '',
name: getName(customer) ?? '',
idNumber: R.path(['documentNumber'])(idData) ?? '',
birthDate:
(rawDob &&
format('yyyy-MM-dd')(parse(new Date(), 'yyyyMMdd', rawDob))) ??
'',
age:
(rawDob &&
differenceInYears(
parse(new Date(), 'yyyyMMdd', rawDob),
new Date()
)) ??
'',
gender: R.path(['gender'])(idData) ?? '',
country: R.path(['country'])(idData) ?? '',
state: R.path(['state'])(idData) ?? '',
expirationDate:
(rawExpirationDate && format('yyyy-MM-dd', rawExpirationDate)) ?? ''
(rawExpirationDate &&
format('yyyy-MM-dd')(
parse(new Date(), 'yyyyMMdd', rawExpirationDate)
)) ??
''
},
usSsn: {
usSsn: customer.usSsn ?? ''
@ -180,34 +200,31 @@ const CustomerData = ({
const cards = [
{
fields: idScanElements,
fields: getAvailableFields(idScanElements),
title: 'ID Scan',
titleIcon: <CardIcon className={classes.cardIcon} />,
titleIcon: <PhoneIcon className={classes.cardIcon} />,
state: R.path(['idCardDataOverride'])(customer),
authorize: () =>
updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED }),
reject: () => updateCustomer({ idCardDataOverride: OVERRIDE_REJECTED }),
deleteEditedData: () => deleteEditedData({ idCardData: null }),
save: values => editCustomer({ idCardData: _.merge(idData, values) }),
save: values => editCustomer({ idCardData: values }),
validationSchema: schemas.idScan,
initialValues: initialValues.idScan,
isAvailable: !_.isNil(idData)
initialValues: initialValues.idScan
},
{
title: 'SMS Confirmation',
titleIcon: <PhoneIcon className={classes.cardIcon} />,
titleIcon: <CardIcon className={classes.cardIcon} />,
authorize: () => {},
reject: () => {},
save: () => {},
isAvailable: false
save: () => {}
},
{
title: 'Name',
titleIcon: <EditIcon className={classes.editIcon} />,
authorize: () => {},
reject: () => {},
save: () => {},
isAvailable: false
save: () => {}
},
{
title: 'Sanctions check',
@ -216,22 +233,17 @@ const CustomerData = ({
authorize: () =>
updateCustomer({ sanctionsOverride: OVERRIDE_AUTHORIZED }),
reject: () => updateCustomer({ sanctionsOverride: OVERRIDE_REJECTED }),
children: <Info3>{sanctionsDisplay}</Info3>,
isAvailable: !_.isNil(sanctions)
children: <Info3>{sanctionsDisplay}</Info3>
},
{
fields: frontCameraElements,
fields: getAvailableFields(frontCameraElements),
title: 'Front facing camera',
titleIcon: <EditIcon className={classes.editIcon} />,
state: R.path(['frontCameraOverride'])(customer),
authorize: () =>
updateCustomer({ frontCameraOverride: OVERRIDE_AUTHORIZED }),
reject: () => updateCustomer({ frontCameraOverride: OVERRIDE_REJECTED }),
save: values =>
replacePhoto({
newPhoto: values.frontCamera,
photoType: 'frontCamera'
}),
save: values => editCustomer({ frontCamera: values.frontCamera }),
deleteEditedData: () => deleteEditedData({ frontCamera: null }),
children: customer.frontCameraPath ? (
<Photo
@ -243,22 +255,17 @@ const CustomerData = ({
) : null,
hasImage: true,
validationSchema: schemas.frontCamera,
initialValues: initialValues.frontCamera,
isAvailable: !_.isNil(customer.frontCameraPath)
initialValues: initialValues.frontCamera
},
{
fields: idCardPhotoElements,
fields: getAvailableFields(idCardPhotoElements),
title: 'ID card image',
titleIcon: <EditIcon className={classes.editIcon} />,
state: R.path(['idCardPhotoOverride'])(customer),
authorize: () =>
updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED }),
reject: () => updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED }),
save: values =>
replacePhoto({
newPhoto: values.idCardPhoto,
photoType: 'idCardPhoto'
}),
save: values => editCustomer({ idCardPhoto: values.idCardPhoto }),
deleteEditedData: () => deleteEditedData({ idCardPhoto: null }),
children: customer.idCardPhotoPath ? (
<Photo
@ -268,11 +275,10 @@ const CustomerData = ({
) : null,
hasImage: true,
validationSchema: schemas.idCardPhoto,
initialValues: initialValues.idCardPhoto,
isAvailable: !_.isNil(customer.idCardPhotoPath)
initialValues: initialValues.idCardPhoto
},
{
fields: usSsnElements,
fields: getAvailableFields(usSsnElements),
title: 'US SSN',
titleIcon: <CardIcon className={classes.cardIcon} />,
state: R.path(['usSsnOverride'])(customer),
@ -281,8 +287,7 @@ const CustomerData = ({
save: values => editCustomer({ usSsn: values.usSsn }),
deleteEditedData: () => deleteEditedData({ usSsn: null }),
validationSchema: schemas.usSsn,
initialValues: initialValues.usSsn,
isAvailable: !_.isNil(customer.usSsn)
initialValues: initialValues.usSsn
}
]

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

@ -23,11 +23,8 @@ import { ReactComponent as EditReversedIcon } from 'src/styling/icons/action/edi
import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/white.svg'
import { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/white.svg'
import { ReactComponent as CancelReversedIcon } from 'src/styling/icons/button/cancel/white.svg'
import { ReactComponent as CancelIcon } from 'src/styling/icons/button/cancel/zodiac.svg'
import { ReactComponent as ReplaceReversedIcon } from 'src/styling/icons/button/replace/white.svg'
import { ReactComponent as ReplaceIcon } from 'src/styling/icons/button/replace/zodiac.svg'
import { ReactComponent as SaveReversedIcon } from 'src/styling/icons/circle buttons/save/white.svg'
import { ReactComponent as SaveIcon } from 'src/styling/icons/circle buttons/save/zodiac.svg'
import { comet } from 'src/styling/variables'
import styles from './EditableCard.styles.js'
@ -237,7 +234,7 @@ const EditableCard = ({
<ActionButton
color="secondary"
type="button"
Icon={ReplaceIcon}
Icon={ReplaceReversedIcon}
InverseIcon={ReplaceReversedIcon}
onClick={() => triggerInput()}>
{
@ -266,7 +263,7 @@ const EditableCard = ({
<div className={classes.button}>
<ActionButton
color="secondary"
Icon={SaveIcon}
Icon={SaveReversedIcon}
InverseIcon={SaveReversedIcon}
type="submit">
Save
@ -276,7 +273,7 @@ const EditableCard = ({
<div className={classes.button}>
<ActionButton
color="secondary"
Icon={CancelIcon}
Icon={CancelReversedIcon}
InverseIcon={CancelReversedIcon}
type="reset">
Cancel

3
new-lamassu-admin/src/styling/variables.js
View file

@ -7,6 +7,7 @@ const spring = '#48f694'
// Secondary
const comet = '#5f668a'
const comet2 = '#72799d'
const comet3 = '#525772'
const spring2 = '#44e188'
const spring3 = '#ecfbef'
const spring4 = '#3fd07e'
@ -47,6 +48,7 @@ const disabledColor2 = concrete
const fontColor = primaryColor
const offColor = comet
const offDarkColor = comet2
const offDarkerColor = comet3
const placeholderColor = comet
const errorColor = tomato
const errorColorDark = tomato1
@ -146,6 +148,7 @@ export {
placeholderColor,
offColor,
offDarkColor,
offDarkerColor,
fontColor,
disabledColor,
disabledColor2,