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

partial: customer page css migration

Browse source
This commit is contained in:
Rafael Taranto 2025-05-05 14:43:58 +01:00
parent 926b7e6933
commit d7b2e12f94
48 changed files with 524 additions and 2183 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,14 +7,15 @@ import styles from './ActionButton.styles'
const useStyles = makeStyles(styles)
const ActionButton = memo(
({ className, Icon, InverseIcon, color, children, ...props }) => {
({ className, Icon, InverseIcon, color, center, children, ...props }) => {
const classes = useStyles()
const classNames = {
[classes.actionButton]: true,
[classes.primary]: color === 'primary',
[classes.secondary]: color === 'secondary',
[classes.spring]: color === 'spring',
[classes.tomato]: color === 'tomato'
[classes.tomato]: color === 'tomato',
[classes.center]: center
}
return (

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

@ -119,5 +119,9 @@ export default {
}
}
},
center: {
alignItems: 'center',
justifyContent: 'center'
},
actionButtonIconActive: {}
}

13
new-lamassu-admin/src/components/inputs/base/TextInput.jsx
View file

@ -19,6 +19,7 @@ const TextInput = memo(
suffix,
textAlign,
width,
inputClasses,
// lg or sm
size,
bold,
@ -29,7 +30,7 @@ const TextInput = memo(
const classes = useStyles({ textAlign, width, size })
const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value)
const filled = isPasswordFilled || isTextFilled
const inputClasses = {
const divClass = {
[classes.bold]: bold
}
@ -44,15 +45,17 @@ const TextInput = memo(
classes={{ root: classes.root }}
className={className}
InputProps={{
className: classnames(inputClasses),
className: classnames(divClass),
classes: {
root: classes.size,
underline: filled ? classes.underline : null
underline: filled ? classes.underline : null,
input: inputClasses
},
...InputProps
}}
{...props} />
);
{...props}
/>
)
}
)

247
new-lamassu-admin/src/pages/Customers/CustomerData.jsx
View file

@ -1,28 +1,19 @@
import Grid from '@mui/material/Grid'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import { useState, React } from 'react'
import ImagePopper from 'src/components/ImagePopper'
import { H3, Info3 } from 'src/components/typography'
import CardIcon from 'src/styling/icons/ID/card/comet.svg?react'
import PhoneIcon from 'src/styling/icons/ID/phone/comet.svg?react'
import CrossedCameraIcon from 'src/styling/icons/ID/photo/crossed-camera.svg?react'
import EditIcon from 'src/styling/icons/action/edit/comet.svg?react'
import CustomerListViewReversedIcon from 'src/styling/icons/circle buttons/customer-list-view/white.svg?react'
import CustomerListViewIcon from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg?react'
import OverviewReversedIcon from 'src/styling/icons/circle buttons/overview/white.svg?react'
import OverviewIcon from 'src/styling/icons/circle buttons/overview/zodiac.svg?react'
import * as Yup from 'yup'
import { FeatureButton } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik'
import {
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED
} from 'src/pages/Customers/components/propertyCard'
} from 'src/pages/Customers/components/consts'
import { onlyFirstToUpper } from 'src/utils/string'
import styles from './CustomerData.styles'
import { EditableCard } from './components'
import {
customerDataElements,
@ -32,32 +23,20 @@ import {
getFormattedPhone
} from './helper'
const useStyles = makeStyles(styles)
const IMAGE_WIDTH = 165
const IMAGE_HEIGHT = 32
const POPUP_IMAGE_WIDTH = 360
const POPUP_IMAGE_HEIGHT = 240
const Photo = ({ show, src }) => {
const classes = useStyles({ width: IMAGE_WIDTH })
const Photo = ({ src }) => {
return (
<>
{show ? (
<ImagePopper
src={src}
width={IMAGE_WIDTH}
height={IMAGE_HEIGHT}
popupWidth={POPUP_IMAGE_WIDTH}
popupHeight={POPUP_IMAGE_HEIGHT}
/>
) : (
<div className={classes.photoWrapper}>
<CrossedCameraIcon />
</div>
)}
</>
<ImagePopper
src={src}
width={IMAGE_WIDTH}
height={IMAGE_HEIGHT}
popupWidth={POPUP_IMAGE_WIDTH}
popupHeight={POPUP_IMAGE_HEIGHT}
/>
)
}
@ -75,8 +54,6 @@ const CustomerData = ({
setRetrieve,
checkAgainstSanctions
}) => {
const classes = useStyles()
const [listView, setListView] = useState(false)
const [previewPhoto, setPreviewPhoto] = useState(null)
const [previewCard, setPreviewCard] = useState(null)
@ -163,7 +140,7 @@ const CustomerData = ({
{
fields: customerDataElements.idCardData,
title: 'ID Scan',
titleIcon: <CardIcon className={classes.cardIcon} />,
titleIcon: <CardIcon />,
state: R.path(['idCardDataOverride'])(customer),
authorize: () =>
updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED }),
@ -187,7 +164,7 @@ const CustomerData = ({
{
fields: smsDataElements,
title: 'SMS data',
titleIcon: <PhoneIcon className={classes.cardIcon} />,
titleIcon: <PhoneIcon />,
state: R.path(['phoneOverride'])(customer),
authorize: () => updateCustomer({ phoneOverride: OVERRIDE_AUTHORIZED }),
reject: () => updateCustomer({ phoneOverride: OVERRIDE_REJECTED }),
@ -208,7 +185,7 @@ const CustomerData = ({
{
title: 'Email',
fields: customerDataElements.email,
titleIcon: <CardIcon className={classes.cardIcon} />,
titleIcon: <CardIcon />,
// state: R.path(['emailOverride'])(customer),
// authorize: () => updateCustomer({ emailOverride: OVERRIDE_AUTHORIZED }),
// reject: () => updateCustomer({ emailOverride: OVERRIDE_REJECTED }),
@ -220,13 +197,13 @@ const CustomerData = ({
},
{
title: 'Name',
titleIcon: <EditIcon className={classes.editIcon} />,
titleIcon: <EditIcon />,
isAvailable: false,
editable: true
},
{
title: 'Sanctions check',
titleIcon: <EditIcon className={classes.editIcon} />,
titleIcon: <EditIcon />,
state: R.path(['sanctionsOverride'])(customer),
authorize: () =>
updateCustomer({ sanctionsOverride: OVERRIDE_AUTHORIZED }),
@ -238,7 +215,7 @@ const CustomerData = ({
{
fields: customerDataElements.frontCamera,
title: 'Front facing camera',
titleIcon: <EditIcon className={classes.editIcon} />,
titleIcon: <EditIcon />,
state: R.path(['frontCameraOverride'])(customer),
authorize: () =>
updateCustomer({ frontCameraOverride: OVERRIDE_AUTHORIZED }),
@ -259,7 +236,6 @@ const CustomerData = ({
return customer.frontCameraPath ? (
<Photo
show={customer.frontCameraPath}
src={
!R.isNil(previewPhoto)
? URL.createObjectURL(previewPhoto)
@ -277,7 +253,7 @@ const CustomerData = ({
{
fields: customerDataElements.idCardPhoto,
title: 'ID card image',
titleIcon: <EditIcon className={classes.editIcon} />,
titleIcon: <EditIcon />,
state: R.path(['idCardPhotoOverride'])(customer),
authorize: () =>
updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED }),
@ -298,7 +274,6 @@ const CustomerData = ({
return customer.idCardPhotoPath ? (
<Photo
show={customer.idCardPhotoPath}
src={
!R.isNil(previewCard)
? URL.createObjectURL(previewCard)
@ -316,7 +291,7 @@ const CustomerData = ({
{
fields: customerDataElements.usSsn,
title: 'US SSN',
titleIcon: <CardIcon className={classes.cardIcon} />,
titleIcon: <CardIcon />,
state: R.path(['usSsnOverride'])(customer),
authorize: () => updateCustomer({ usSsnOverride: OVERRIDE_AUTHORIZED }),
reject: () => updateCustomer({ usSsnOverride: OVERRIDE_REJECTED }),
@ -342,7 +317,7 @@ const CustomerData = ({
}
],
title: it.customInfoRequest.customRequest.name,
titleIcon: <CardIcon className={classes.cardIcon} />,
titleIcon: <CardIcon />,
state: R.path(['override'])(it),
authorize: () =>
authorizeCustomRequest({
@ -395,7 +370,7 @@ const CustomerData = ({
}
],
title: it.label,
titleIcon: <EditIcon className={classes.editIcon} />,
titleIcon: <EditIcon />,
save: values => {
updateCustomEntry({
fieldId: it.id,
@ -445,7 +420,7 @@ const CustomerData = ({
editable: false
}
],
titleIcon: <CardIcon className={classes.cardIcon} />,
titleIcon: <CardIcon />,
title: `External Info [${it.service}]`,
initialValues: it ?? {
externalId: '',
@ -477,26 +452,28 @@ const CustomerData = ({
idx
) => {
return (
<EditableCard
title={title}
key={idx}
authorize={authorize}
reject={reject}
state={state}
titleIcon={titleIcon}
hasImage={hasImage}
hasAdditionalData={hasAdditionalData}
fields={fields}
validationSchema={validationSchema}
initialValues={initialValues}
save={save}
cancel={cancel}
deleteEditedData={deleteEditedData}
retrieveAdditionalData={retrieveAdditionalData}
checkAgainstSanctions={checkAgainstSanctions}
editable={editable}>
{children}
</EditableCard>
<div className="mb-4">
<EditableCard
title={title}
key={idx}
authorize={authorize}
reject={reject}
state={state}
titleIcon={titleIcon}
hasImage={hasImage}
hasAdditionalData={hasAdditionalData}
fields={fields}
validationSchema={validationSchema}
initialValues={initialValues}
save={save}
cancel={cancel}
deleteEditedData={deleteEditedData}
retrieveAdditionalData={retrieveAdditionalData}
checkAgainstSanctions={checkAgainstSanctions}
editable={editable}>
{children}
</EditableCard>
</div>
)
}
@ -505,113 +482,67 @@ const CustomerData = ({
idx
) => {
return (
<EditableCard
title={title}
key={idx}
state={state}
initialValues={initialValues}
titleIcon={titleIcon}
editable={false}
hasImage={hasImage}
fields={fields}>
{children}
</EditableCard>
<div className="mb-4">
<EditableCard
title={title}
key={idx}
state={state}
initialValues={initialValues}
titleIcon={titleIcon}
editable={false}
hasImage={hasImage}
fields={fields}>
{children}
</EditableCard>
</div>
)
}
const visibleCards = getVisibleCards(cards)
const Separator = ({ title }) => (
<div className="w-full my-4 col-span-all">
<div className="flex items-center">
<div className="h-px bg-comet grow-1"></div>
<span className="mx-4 text-comet font-medium">{title}</span>
<div className="h-px bg-comet grow-5"></div>
</div>
</div>
)
return (
<div>
<div className={classes.header}>
<H3 className={classes.title}>{'Customer data'}</H3>
{
// TODO: Remove false condition for next release
// false && (
// <>
// <FeatureButton
// active={!listView}
// className={classes.viewIcons}
// Icon={OverviewIcon}
// InverseIcon={OverviewReversedIcon}
// onClick={() => setListView(false)}
// />
// <FeatureButton
// active={listView}
// className={classes.viewIcons}
// Icon={CustomerListViewIcon}
// InverseIcon={CustomerListViewReversedIcon}
// onClick={() => setListView(true)}></FeatureButton>
// </>
// )
}
</div>
<H3 className="mt-1 mb-7">{'Customer data'}</H3>
<div>
{!listView && customer && (
<Grid container>
<Grid container direction="column" item xs={6}>
{visibleCards.map((elem, idx) => {
return isEven(idx) ? editableCard(elem, idx) : null
})}
</Grid>
<Grid container direction="column" item xs={6}>
{visibleCards.map((elem, idx) => {
return !isEven(idx) ? editableCard(elem, idx) : null
})}
</Grid>
</Grid>
)}
{!R.isEmpty(customFields) && (
<div className={classes.wrapper}>
<span className={classes.separator}>Custom data entry</span>
<Grid container>
<Grid container direction="column" item xs={6}>
{customer && (
<div className="columns-2 gap-4">
{visibleCards.map((elem, idx) => {
return editableCard(elem, idx)
})}
{!R.isEmpty(customFields) && (
<>
<Separator title="Custom data entry" />
{customFields.map((elem, idx) => {
return isEven(idx) ? editableCard(elem, idx) : null
return editableCard(elem, idx)
})}
</Grid>
<Grid container direction="column" item xs={6}>
{customFields.map((elem, idx) => {
return !isEven(idx) ? editableCard(elem, idx) : null
})}
</Grid>
</Grid>
</div>
)}
{!R.isEmpty(customRequirements) && (
<div className={classes.wrapper}>
<span className={classes.separator}>Custom requirements</span>
<Grid container>
<Grid container direction="column" item xs={6}>
</>
)}
{!R.isEmpty(customRequirements) && (
<>
<Separator title="Custom requirements" />
{customRequirements.map((elem, idx) => {
return isEven(idx) ? editableCard(elem, idx) : null
return editableCard(elem, idx)
})}
</Grid>
<Grid container direction="column" item xs={6}>
{customRequirements.map((elem, idx) => {
return !isEven(idx) ? editableCard(elem, idx) : null
})}
</Grid>
</Grid>
</div>
)}
{!R.isEmpty(externalCompliance) && (
<div className={classes.wrapper}>
<span className={classes.separator}>
External compliance information
</span>
<Grid container>
<Grid container direction="column" item xs={6}>
</>
)}
{!R.isEmpty(externalCompliance) && (
<>
<Separator title="External compliance information" />
{externalCompliance.map((elem, idx) => {
return isEven(idx) ? nonEditableCard(elem, idx) : null
return nonEditableCard(elem, idx)
})}
</Grid>
<Grid container direction="column" item xs={6}>
{externalCompliance.map((elem, idx) => {
return !isEven(idx) ? nonEditableCard(elem, idx) : null
})}
</Grid>
</Grid>
</>
)}
</div>
)}
</div>

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

@ -1,49 +0,0 @@
import { offColor } from 'src/styling/variables'
export default {
header: {
display: 'flex',
flexDirection: 'row',
marginBottom: 15
},
title: {
marginTop: 7,
marginRight: 24
},
editIcon: {
marginTop: 5
},
cardIcon: {
marginTop: 7
},
viewIcons: {
marginRight: 12
},
wrapper: {
display: 'block',
overflow: 'hidden',
whiteSpace: 'nowrap'
},
separator: {
color: offColor,
margin: [[8, 0, 8, 150]],
position: 'relative',
display: 'inline-block',
'&:before, &:after': {
content: '""',
position: 'absolute',
background: offColor,
top: '50%',
width: 1000,
height: 1
},
'&:before': {
right: '100%',
marginRight: 15
},
'&:after': {
left: '100%',
marginLeft: 15
}
}
}

11
new-lamassu-admin/src/pages/Customers/CustomerNotes.jsx
View file

@ -1,16 +1,12 @@
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import { React, useState } from 'react'
import { H3 } from 'src/components/typography'
import styles from './CustomerNotes.styles'
import NewNoteCard from './components/notes/NewNoteCard'
import NewNoteModal from './components/notes/NewNoteModal'
import NoteCard from './components/notes/NoteCard'
import NoteEdit from './components/notes/NoteEdit'
const useStyles = makeStyles(styles)
const CustomerNotes = ({
customer,
createNote,
@ -18,7 +14,6 @@ const CustomerNotes = ({
editNote,
timezone
}) => {
const classes = useStyles()
const [openModal, setOpenModal] = useState(false)
const [editing, setEditing] = useState(null)
@ -52,11 +47,9 @@ const CustomerNotes = ({
return (
<div>
<div className={classes.header}>
<H3 className={classes.title}>{'Notes'}</H3>
</div>
<H3 className="mt-1 mb-7">{'Notes'}</H3>
{R.isNil(editing) && (
<div className={classes.notesChipList}>
<div className="grid grid-cols-[repeat(4,_200px)] gap-5 auto-rows-[200px]">
<NewNoteCard setOpenModal={setOpenModal} />
{customerNotes.map((it, idx) => (
<NoteCard

17
new-lamassu-admin/src/pages/Customers/CustomerNotes.styles.js
View file

@ -1,17 +0,0 @@
const styles = {
header: {
display: 'flex',
flexDirection: 'row'
},
title: {
marginTop: 7,
marginRight: 24
},
notesChipList: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap'
}
}
export default styles

28
new-lamassu-admin/src/pages/Customers/CustomerPhotos.jsx
View file

@ -1,5 +1,4 @@
import Paper from '@mui/material/Paper'
import { makeStyles } from '@mui/styles'
import { format } from 'date-fns/fp'
import * as R from 'ramda'
import { React, useState } from 'react'
@ -7,14 +6,9 @@ import { InformativeDialog } from 'src/components/InformativeDialog'
import { Label2, H3 } from 'src/components/typography'
import CameraIcon from 'src/styling/icons/ID/photo/comet.svg?react'
import styles from './CustomerPhotos.styles'
import PhotosCarousel from './components/PhotosCarousel'
const useStyles = makeStyles(styles)
const CustomerPhotos = ({ photosData, timezone }) => {
const classes = useStyles()
const [photosDialog, setPhotosDialog] = useState(false)
const [photoClickedIndex, setPhotoClickIndex] = useState(null)
const orderedPhotosData = !R.isNil(photoClickedIndex)
@ -23,10 +17,8 @@ const CustomerPhotos = ({ photosData, timezone }) => {
return (
<div>
<div className={classes.header}>
<H3 className={classes.title}>{'Photos & files'}</H3>
</div>
<div className={classes.photosChipList}>
<H3 className="mt-1 mb-7">{'Photos & files'}</H3>
<div className="flex flex-wrap gap-4">
{photosData.map((elem, idx) => (
<PhotoCard
key={idx}
@ -59,21 +51,21 @@ export const PhotoCard = ({
setPhotosDialog,
setPhotoClickIndex
}) => {
const classes = useStyles()
return (
<Paper
className={classes.photoCardChip}
className="cursor-pointer overflow-hidden"
onClick={() => {
setPhotoClickIndex(idx)
setPhotosDialog(true)
}}>
<img className={classes.image} src={src} alt="" />
<div className={classes.footer}>
<img
className="w-56 h-50 object-cover object-center block"
src={src}
alt=""
/>
<div className="flex p-3 gap-3">
<CameraIcon />
<Label2 className={classes.date}>
{format('yyyy-MM-dd', new Date(date))}
</Label2>
<Label2 noMargin>{format('yyyy-MM-dd', new Date(date))}</Label2>
</div>
</Paper>
)

38
new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js
View file

@ -1,38 +0,0 @@
const styles = {
header: {
display: 'flex',
flexDirection: 'row'
},
title: {
marginTop: 7,
marginRight: 24,
marginBottom: 32
},
photosChipList: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
gap: 14
},
image: {
objectFit: 'cover',
objectPosition: 'center',
width: 224,
height: 200,
borderTopLeftRadius: 4,
borderTopRightRadius: 4
},
photoCardChip: {
cursor: 'pointer'
},
footer: {
display: 'flex',
flexDirection: 'row',
margin: [[8, 0, 0, 8]]
},
date: {
margin: [[0, 0, 8, 12]]
}
}
export default styles

59
new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx
View file

@ -4,7 +4,6 @@ import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import Dialog from '@mui/material/Dialog'
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import NavigateNextIcon from '@mui/icons-material/NavigateNext'
import * as R from 'ramda'
import React, { memo, useState } from 'react'
@ -23,7 +22,7 @@ import { Button, IconButton, ActionButton } from 'src/components/buttons'
import {
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED
} from 'src/pages/Customers/components/propertyCard'
} from 'src/pages/Customers/components/consts'
// TODO: Enable for next release
// import DiscountReversedIcon from 'src/styling/icons/button/discount/white.svg?react'
// import Discount from 'src/styling/icons/button/discount/zodiac.svg?react'
@ -32,7 +31,6 @@ import { fromNamespace, namespaces } from 'src/utils/config'
import CustomerData from './CustomerData'
import CustomerNotes from './CustomerNotes'
import CustomerPhotos from './CustomerPhotos'
import styles from './CustomerProfile.styles'
import {
CustomerDetails,
TransactionsList,
@ -41,8 +39,6 @@ import {
} from './components'
import { getFormattedPhone, getName, formatPhotosData } from './helper'
const useStyles = makeStyles(styles)
const GET_CUSTOMER = gql`
query customer($customerId: ID!) {
config
@ -528,23 +524,22 @@ const CustomerProfile = memo(() => {
display: it.customRequest.name
})) ?? []
const classes = useStyles()
const email = R.path(['email'])(customerData)
const phone = R.path(['phone'])(customerData)
return (
<>
<Breadcrumbs
classes={{ root: classes.breadcrumbs }}
className="my-5"
separator={<NavigateNextIcon fontSize="small" />}
aria-label="breadcrumb">
<Label1
noMargin
className={classes.labelLink}
className="cursor-pointer text-comet"
onClick={() => history.push('/compliance/customers')}>
Customers
</Label1>
<Label2 noMargin className={classes.labelLink}>
<Label2 noMargin className="cursor-pointer text-comet">
{name.length
? name
: email?.length
@ -552,8 +547,8 @@ const CustomerProfile = memo(() => {
: getFormattedPhone(phone, locale.country)}
</Label2>
</Breadcrumbs>
<div className={classes.panels}>
<div className={classes.leftSidePanel}>
<div className="flex gap-20">
<div className="w-55 flex flex-col gap-6">
{!loading && !customerData.isAnonymous && (
<>
<CustomerSidebar
@ -561,10 +556,12 @@ const CustomerProfile = memo(() => {
onClick={onClickSidebarItem}
/>
<div>
<Label1 className={classes.actionLabel}>Actions</Label1>
<div className={classes.actionBar}>
<Label1 noMargin className="text-comet my-1">
Actions
</Label1>
<div className="flex flex-col gap-1">
<ActionButton
className={classes.actionButton}
center
color="primary"
Icon={DataIcon}
InverseIcon={DataReversedIcon}
@ -572,7 +569,6 @@ const CustomerProfile = memo(() => {
{`Manual data entry`}
</ActionButton>
{/* <ActionButton
className={classes.actionButton}
color="primary"
Icon={Discount}
InverseIcon={DiscountReversedIcon}
@ -581,7 +577,7 @@ const CustomerProfile = memo(() => {
</ActionButton> */}
{isSuspended && (
<ActionButton
className={classes.actionButton}
center
color="primary"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeReversedIcon}
@ -595,7 +591,7 @@ const CustomerProfile = memo(() => {
)}
<ActionButton
color="primary"
className={classes.actionButton}
center
Icon={blocked ? AuthorizeIcon : BlockIcon}
InverseIcon={
blocked ? AuthorizeReversedIcon : BlockReversedIcon
@ -612,11 +608,11 @@ const CustomerProfile = memo(() => {
</div>
</div>
<div>
<Label1 className={classes.actionLabel}>
<Label1 className="text-comet my-1">
{`Special user status`}
</Label1>
<div className={classes.actionBar}>
<div className={classes.userStatusAction}>
<div className="flex flex-col">
<div className="flex items-center bg-zircon px-1 rounded-lg">
<Switch
checked={!!R.path(['isTestCustomer'])(customerData)}
value={!!R.path(['isTestCustomer'])(customerData)}
@ -626,14 +622,14 @@ const CustomerProfile = memo(() => {
: enableTestCustomer()
}
/>
{`Test user`}
<Label1 noMargin>Test user</Label1>
</div>
</div>
</div>
</>
)}
</div>
<div className={classes.rightSidePanel}>
<div className="flex-1">
{isOverview && (
<div>
<div className="flex justify-between mb-5">
@ -724,8 +720,6 @@ const RetrieveDataDialog = ({
error,
props
}) => {
const classes = useStyles()
return (
<Dialog
open={open}
@ -739,31 +733,28 @@ const RetrieveDataDialog = ({
}
}}
{...props}>
<div className={classes.closeButton}>
<div className="pt-4 pr-4 flex justify-end">
<IconButton
size={16}
size={32}
aria-label="close"
onClick={() => onDismissed(false)}>
<CloseIcon />
</IconButton>
</div>
<H2 className={classes.dialogTitle}>{'Retrieve API data from Twilio'}</H2>
<DialogContent className={classes.dialogContent}>
<H2 className="mb-2 ml-10">{'Retrieve API data from Twilio'}</H2>
<DialogContent className="w-153 ml-4">
<Info3>{`With this action you'll be using Twilio's API to retrieve additional
data from this user. This includes name and address, if available.\n`}</Info3>
<Info3>{` There is a small cost from Twilio for each retrieval. Would you like
to proceed?`}</Info3>
</DialogContent>
{error && (
<ErrorMessage className={classes.errorMessage}>
<ErrorMessage className="ml-10">
Failed to fetch additional data
</ErrorMessage>
)}
<DialogActions className={classes.dialogActions}>
<Button
backgroundColor="grey"
className={classes.cancelButton}
onClick={() => onDismissed(false)}>
<DialogActions className="p-8 pt-4 gap-2">
<Button backgroundColor="grey" onClick={() => onDismissed(false)}>
Cancel
</Button>
<Button

81
new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js
View file

@ -1,81 +0,0 @@
import { comet, subheaderColor, spacer } from 'src/styling/variables'
export default {
labelLink: {
cursor: 'pointer',
color: comet
},
breadcrumbs: {
margin: [[20, 0]]
},
actionLabel: {
color: comet,
margin: [[4, 0]]
},
customerDetails: {
marginBottom: 18
},
actionButton: {
margin: [[0, 0, 4, 0]],
display: 'flex',
flexDirection: 'row',
justifyContent: 'center'
},
actionBar: {
display: 'flex',
flexDirection: 'column',
width: 219
},
panels: {
display: 'flex'
},
rightSidePanel: {
display: 'block',
width: 1100,
marginBottom: 25
},
leftSidePanel: {
width: 300,
'& > *': {
marginBottom: 25
},
'& > *:last-child': {
marginBottom: 0
},
'& > *:first-child': {
marginBottom: 50
}
},
userStatusAction: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
backgroundColor: subheaderColor,
borderRadius: 8,
padding: [[0, 5]]
},
closeButton: {
display: 'flex',
padding: [[spacer * 2, spacer * 2, 0, spacer * 2]],
paddingRight: spacer * 1.5,
justifyContent: 'end'
},
dialogTitle: {
margin: [[0, spacer * 2, spacer, spacer * 4 + spacer]]
},
dialogContent: {
width: 615,
marginLeft: 16
},
dialogActions: {
padding: spacer * 4,
paddingTop: spacer * 2
},
cancelButton: {
marginRight: 8,
padding: 0
},
errorMessage: {
marginLeft: 38
}
}

7
new-lamassu-admin/src/pages/Customers/Customers.jsx
View file

@ -1,5 +1,4 @@
import { useQuery, useMutation, gql } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import { useHistory } from 'react-router-dom'
@ -10,7 +9,6 @@ import TxInIcon from 'src/styling/icons/direction/cash-in.svg?react'
import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'
import { Link } from 'src/components/buttons'
import baseStyles from 'src/pages/Logs.styles'
import { fromNamespace, namespaces } from 'src/utils/config'
import CustomersList from './CustomersList'
@ -93,13 +91,10 @@ const CREATE_CUSTOMER = gql`
}
`
const useBaseStyles = makeStyles(baseStyles)
const getFiltersObj = filters =>
R.reduce((s, f) => ({ ...s, [f.type]: f.value }), {}, filters)
const Customers = () => {
const baseStyles = useBaseStyles()
const history = useHistory()
const handleCustomerClicked = customer =>
@ -210,7 +205,7 @@ const Customers = () => {
<TitleSection
title="Customers"
appendix={
<div className={baseStyles.buttonsWrapper}>
<div className="flex ml-4">
<SearchBox
loading={loadingFilters}
filters={filters}

8
new-lamassu-admin/src/pages/Customers/CustomersList.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import { format } from 'date-fns/fp'
import * as R from 'ramda'
import React from 'react'
@ -7,11 +6,8 @@ import DataTable from 'src/components/tables/DataTable'
import TxInIcon from 'src/styling/icons/direction/cash-in.svg?react'
import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'
import styles from './CustomersList.styles'
import { getFormattedPhone, getName } from './helper'
const useStyles = makeStyles(styles)
const CustomersList = ({
data,
locale,
@ -20,8 +16,6 @@ const CustomersList = ({
triggers,
customRequests
}) => {
const classes = useStyles()
const elements = [
{
header: 'Phone/email',
@ -60,7 +54,7 @@ const CustomersList = ({
view: it => {
const hasLastTx = !R.isNil(it.lastTxFiatCode)
const LastTxIcon = it.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon
const lastIcon = <LastTxIcon className={classes.txClassIconRight} />
const lastIcon = <LastTxIcon className="ml-3" />
return (
<>
{hasLastTx &&

117
new-lamassu-admin/src/pages/Customers/CustomersList.styles.js
View file

@ -1,117 +0,0 @@
import typographyStyles from 'src/components/typography/styles'
import baseStyles from 'src/pages/Logs.styles'
import { zircon, comet, primaryColor, fontSize4 } from 'src/styling/variables'
const { label1 } = typographyStyles
const { titleWrapper, titleAndButtonsContainer } = baseStyles
export default {
titleWrapper,
titleAndButtonsContainer,
row: {
display: 'flex',
flexFlow: 'row nowrap'
},
rowSpaceBetween: {
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
justifyContent: 'space-between'
},
column: {
display: 'flex',
flexFlow: 'column nowrap',
width: '100%',
height: '100%',
justifyContent: 'space-between'
},
textInput: {
width: 144
},
p: {
fontFamily: 'MuseoSans',
fontSize: fontSize4,
fontWeight: 500,
fontStretch: 'normal',
fontStyle: 'normal',
lineHeight: 1.14,
letterSpacing: 'normal',
color: primaryColor
},
txId: {
fontFamily: 'MuseoSans',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
},
txClassIconLeft: {
marginRight: 11
},
txClassIconRight: {
marginLeft: 11
},
headerLabels: {
display: 'flex',
flexDirection: 'row',
'& div': {
display: 'flex',
alignItems: 'center'
},
'& > div:first-child': {
marginRight: 24
},
'& span': {
extend: label1,
marginLeft: 6
}
},
photo: {
width: 92,
height: 92,
borderRadius: 8,
backgroundColor: zircon,
margin: [[0, 28, 0, 0]],
alignItems: 'center',
justifyContent: 'center',
display: 'flex'
},
img: {
width: 80
},
customerName: {
marginBottom: 32
},
icon: {
marginRight: 11
},
name: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
value: {
height: 16
},
label: {
marginBottom: 4,
color: comet
},
txSummaryValue: {
height: 16,
marginRight: 25
},
txSummaryLabel: {
marginBottom: 4,
color: comet,
marginRight: 25
},
idIcon: {
marginRight: 10
},
subpageButton: {
marginLeft: 16
},
txTableSpacing: {
marginTop: 40
}
}

55
new-lamassu-admin/src/pages/Customers/Wizard.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import { Form, Formik } from 'formik'
import * as R from 'ramda'
import React, { useState, Fragment } from 'react'
@ -7,7 +6,6 @@ import Modal from 'src/components/Modal'
import Stepper from 'src/components/Stepper'
import { Button } from 'src/components/buttons'
import { comet } from 'src/styling/variables'
import {
entryType,
@ -20,43 +18,6 @@ import {
const LAST_STEP = 2
const styles = {
stepper: {
margin: [[16, 0, 14, 0]]
},
submit: {
display: 'flex',
flexDirection: 'row',
margin: [['auto', 0, 24]]
},
button: {
marginLeft: 'auto'
},
form: {
height: '100%',
display: 'flex',
flexDirection: 'column'
},
infoTitle: {
margin: [[18, 0, 20, 0]]
},
infoCurrentText: {
color: comet
},
blankSpace: {
padding: [[0, 30]],
margin: [[0, 4, 0, 2]],
borderBottom: `1px solid ${comet}`,
display: 'inline-block'
},
dropdownField: {
marginTop: 16,
minWidth: 155
}
}
const useStyles = makeStyles(styles)
const getStep = (step, selectedValues) => {
const elements =
selectedValues?.entryType === REQUIREMENT &&
@ -82,8 +43,6 @@ const Wizard = ({
addCustomerData,
addPhoto
}) => {
const classes = useStyles()
const [selectedValues, setSelectedValues] = useState(null)
const [{ step, config }, setState] = useState({
@ -98,7 +57,7 @@ const Wizard = ({
const stepOptions = getStep(step, selectedValues)
const onContinue = async it => {
const newConfig = R.merge(config, stepOptions.schema.cast(it))
const newConfig = R.mergeRight(config, stepOptions.schema.cast(it))
setSelectedValues(newConfig)
if (isLastStep) {
@ -135,11 +94,7 @@ const Wizard = ({
width={520}
height={520}
open={true}>
<Stepper
className={classes.stepper}
steps={LAST_STEP}
currentStep={step}
/>
<Stepper steps={LAST_STEP} currentStep={step} className="my-4" />
<Formik
validateOnBlur={false}
validateOnChange={false}
@ -148,19 +103,19 @@ const Wizard = ({
initialValues={stepOptions.initialValues}
validationSchema={stepOptions.schema}>
{({ errors }) => (
<Form className={classes.form}>
<Form className="h-full flex flex-col">
<stepOptions.Component
selectedValues={selectedValues}
customInfoRequirementOptions={customInfoRequirementOptions}
errors={errors}
{...stepOptions.props}
/>
<div className={classes.submit}>
<div className="flex mt-auto mb-6">
{error && <ErrorMessage>Failed to save</ErrorMessage>}
{Object.keys(errors).length > 0 && (
<ErrorMessage>{Object.values(errors)[0]}</ErrorMessage>
)}
<Button className={classes.button} type="submit">
<Button className="ml-auto" type="submit">
{isLastStep ? 'Add Data' : 'Next'}
</Button>
</div>

41
new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import { Field, Form, Formik } from 'formik'
import { parsePhoneNumberWithError } from 'libphonenumber-js'
import * as R from 'ramda'
@ -10,28 +9,6 @@ import * as Yup from 'yup'
import { Button } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik'
import { spacer, primaryColor, fontPrimary } from 'src/styling/variables'
const styles = {
modalTitle: {
marginTop: -5,
color: primaryColor,
fontFamily: fontPrimary
},
footer: {
display: 'flex',
flexDirection: 'row',
margin: [['auto', 0, spacer * 3, 0]]
},
form: {
display: 'flex',
flexDirection: 'column',
height: '100%'
},
submit: {
margin: [['auto', 0, 0, 'auto']]
}
}
const getValidationSchema = countryCodes =>
Yup.object().shape({
@ -39,7 +16,9 @@ const getValidationSchema = countryCodes =>
.required('A phone number is required')
.test('is-valid-number', 'That is not a valid phone number', value => {
try {
return countryCodes.some(countryCode => parsePhoneNumberWithError(value, countryCode).isValid())
return countryCodes.some(countryCode =>
parsePhoneNumberWithError(value, countryCode).isValid()
)
} catch (e) {
return false
}
@ -60,8 +39,6 @@ const initialValues = {
phoneNumber: ''
}
const useStyles = makeStyles(styles)
const getErrorMsg = (formikErrors, formikTouched) => {
if (!formikErrors || !formikTouched) return null
if (formikErrors.phoneNumber && formikTouched.phoneNumber)
@ -70,8 +47,6 @@ const getErrorMsg = (formikErrors, formikTouched) => {
}
const CreateCustomerModal = ({ showModal, handleClose, onSubmit, locale }) => {
const classes = useStyles()
const possibleCountries = R.append(
locale?.country,
R.map(it => it.country, locale?.overrides ?? [])
@ -99,8 +74,10 @@ const CreateCustomerModal = ({ showModal, handleClose, onSubmit, locale }) => {
})
}}>
{({ errors, touched }) => (
<Form id="customer-registration-form" className={classes.form}>
<H1 className={classes.modalTitle}>Create new customer</H1>
<Form
id="customer-registration-form"
className="flex flex-col h-full">
<H1 className="-mt-2">Create new customer</H1>
<Field
component={TextInput}
name="phoneNumber"
@ -108,14 +85,14 @@ const CreateCustomerModal = ({ showModal, handleClose, onSubmit, locale }) => {
autoFocus
label="Phone number"
/>
<div className={classes.footer}>
<div className="flex flex-row mt-auto mb-6">
{getErrorMsg(errors, touched) && (
<ErrorMessage>{getErrorMsg(errors, touched)}</ErrorMessage>
)}
<Button
type="submit"
form="customer-registration-form"
className={classes.submit}>
className="ml-auto">
Finish
</Button>
</div>

193
new-lamassu-admin/src/pages/Customers/components/CustomInfoRequestsData.jsx
View file

@ -1,193 +0,0 @@
import { useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { useState } from 'react'
import Modal from 'src/components/Modal'
import { MainStatus } from 'src/components/Status'
import {
Table,
THead,
Th,
Tr,
Td,
TBody
} from 'src/components/fake-table/Table'
import { H3, Label1 } from 'src/components/typography'
import AuthorizeReversedIcon from 'src/styling/icons/button/authorize/white.svg?react'
import AuthorizeIcon from 'src/styling/icons/button/authorize/zodiac.svg?react'
import RejectReversedIcon from 'src/styling/icons/button/cancel/white.svg?react'
import RejectIcon from 'src/styling/icons/button/cancel/zodiac.svg?react'
import LinkIcon from 'src/styling/icons/month arrows/right.svg?react'
import { ActionButton } from 'src/components/buttons'
import { white, disabledColor } from 'src/styling/variables'
import DetailsCard from '../../Triggers/CustomInfoRequests/DetailsCard'
const styles = {
white: {
color: white
},
actionButton: {
display: 'flex',
height: 28,
marginRight: 'auto'
},
flex: {
display: 'flex'
},
disabledBtn: {
backgroundColor: disabledColor,
'&:hover': {
backgroundColor: disabledColor
}
},
linkIcon: {
marginTop: 12,
marginLeft: 4,
cursor: 'pointer'
}
}
const SET_AUTHORIZED_REQUEST = gql`
mutation setAuthorizedCustomRequest(
$customerId: ID!
$infoRequestId: ID!
$override: String!
) {
setAuthorizedCustomRequest(
customerId: $customerId
infoRequestId: $infoRequestId
override: $override
)
}
`
const useStyles = makeStyles(styles)
const CustomInfoRequestsData = ({ data }) => {
const classes = useStyles()
const [toView, setToView] = useState(null)
const [setAuthorized] = useMutation(SET_AUTHORIZED_REQUEST, {
onError: () => console.error('Error while clearing notification'),
refetchQueries: () => ['customer']
})
const authorize = it =>
setAuthorized({
variables: {
customerId: it.customerId,
infoRequestId: it.customInfoRequest.id,
isAuthorized: true
}
})
const reject = it =>
setAuthorized({
variables: {
customerId: it.customerId,
infoRequestId: it.customInfoRequest.id,
isAuthorized: false
}
})
const getBtnClasses = (it, isAuthorize) => {
return {
[classes.actionButton]: true,
[classes.disabledBtn]:
(isAuthorize && it.approved === true) ||
(!isAuthorize && it.approved === false)
}
}
const AuthorizeButton = it => (
<ActionButton
className={classnames(getBtnClasses(it, true))}
color="secondary"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeReversedIcon}
onClick={() => authorize(it)}>
Authorize
</ActionButton>
)
const RejectButton = it => (
<ActionButton
className={classnames(getBtnClasses(it, false))}
color="secondary"
Icon={RejectIcon}
InverseIcon={RejectReversedIcon}
onClick={() => reject(it)}>
Reject
</ActionButton>
)
const getActionButtons = it => {
return (
<>
{AuthorizeButton(it)}
{RejectButton(it)}
</>
)
}
const getAuthorizedStatus = it =>
it.approved === null
? { label: 'Pending', type: 'neutral' }
: it.approved === false
? { label: 'Rejected', type: 'error' }
: { label: 'Accepted', type: 'success' }
return (
<>
<H3>Custom Info Requests Data</H3>
<div>
<Table>
<THead>
<Th width={250}>Custom Request Name</Th>
<Th width={500}>Custom Request Data</Th>
<Th width={200}>Status</Th>
<Th width={250} textAlign="center">
Actions
</Th>
</THead>
<TBody>
{data.map((it, idx) => (
<React.Fragment key={idx}>
<Tr>
<Td size="sm" width={250}>
<div className={classes.flex}>
<Label1>{it.customInfoRequest.customRequest.name}</Label1>
<div onClick={() => setToView(it)}>
<LinkIcon className={classes.linkIcon} />
</div>
</div>
</Td>
<Td size="sm" width={500}>
<div>{JSON.stringify(it.customerData.data, null, 2)}</div>
</Td>
<Td size="sm" width={200}>
<MainStatus statuses={[getAuthorizedStatus(it)]} />
</Td>
<Td size="sm" width={250}>
<div className={classes.flex}>{getActionButtons(it)}</div>
</Td>
</Tr>
</React.Fragment>
))}
</TBody>
</Table>
{toView && (
<Modal
width={900}
height={400}
open={true}
handleClose={() => setToView(null)}>
<H3>Custom Information Request Details</H3>
<DetailsCard it={{ ...toView.customInfoRequest }} />
</Modal>
)}
</div>
</>
)
}
export default CustomInfoRequestsData

20
new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx
View file

@ -1,19 +1,13 @@
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { memo } from 'react'
import { H2, Label1, P } from 'src/components/typography'
import IdIcon from 'src/styling/icons/ID/card/zodiac.svg?react'
import mainStyles from '../CustomersList.styles'
import { getFormattedPhone, getName } from '../helper'
import PhotosCard from './PhotosCard'
const useStyles = makeStyles(mainStyles)
const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
const classes = useStyles()
const idNumber = R.path(['idCardData', 'documentNumber'])(customer)
const usSsn = R.path(['usSsn'])(customer)
const name = getName(customer)
@ -50,11 +44,11 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
})
return (
<div className="flex">
<div className="flex gap-7">
<PhotosCard photosData={photosData} timezone={timezone} />
<div className="flex flex-col">
<div className={classes.name}>
<IdIcon className={classes.idIcon} />
<div className="flex items-center gap-2">
<IdIcon />
<H2 noMargin>
{name.length
? name
@ -68,7 +62,7 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
<Label1
noMargin
key={idx}
className={classes.label}
className="mb-1 text-comet"
style={{ width: size }}>
{header}
</Label1>
@ -76,11 +70,7 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
</div>
<div className="flex">
{elements.map(({ size, value }, idx) => (
<P
noMargin
key={idx}
className={classes.value}
style={{ width: size }}>
<P noMargin key={idx} style={{ width: size }}>
{value}
</P>
))}

25
new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React from 'react'
import CustomerDataReversedIcon from 'src/styling/icons/customer-nav/data/comet.svg?react'
@ -10,12 +9,9 @@ import OverviewIcon from 'src/styling/icons/customer-nav/overview/white.svg?reac
import PhotosReversedIcon from 'src/styling/icons/customer-nav/photos/comet.svg?react'
import Photos from 'src/styling/icons/customer-nav/photos/white.svg?react'
import styles from './CustomerSidebar.styles'
const useStyles = makeStyles(styles)
import { P } from '/src/components/typography/index.jsx'
const CustomerSidebar = ({ isSelected, onClick }) => {
const classes = useStyles()
const sideBarOptions = [
{
code: 'overview',
@ -44,19 +40,24 @@ const CustomerSidebar = ({ isSelected, onClick }) => {
]
return (
<div className={classes.sidebar}>
<div className="flex flex-col rounded-sm w-55 bg-zircon overflow-hidden">
{sideBarOptions?.map(({ Icon, InverseIcon, display, code }, idx) => (
<div
key={idx}
className={classnames({
[classes.activeLink]: isSelected(code),
[classes.link]: true
'gap-4 p-4 cursor-pointer flex items-center': true,
'bg-comet2': isSelected(code)
})}
onClick={() => onClick(code)}>
<div className={classes.icon}>
{isSelected(code) ? <Icon /> : <InverseIcon />}
</div>
{display}
{isSelected(code) ? <Icon /> : <InverseIcon />}
<P
noMargin
className={classnames({
'text-comet2': true,
'text-white font-bold': isSelected(code)
})}>
{display}
</P>
</div>
))}
</div>

41
new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js
View file

@ -1,41 +0,0 @@
import typographyStyles from 'src/components/typography/styles'
import { zircon, offDarkColor, white } from 'src/styling/variables'
const { tl2, p } = typographyStyles
const sidebarColor = zircon
export default {
sidebar: {
display: 'flex',
backgroundColor: sidebarColor,
width: 219,
flexDirection: 'column',
borderRadius: 5
},
link: {
alignItems: 'center',
display: 'flex',
extend: p,
position: 'relative',
color: offDarkColor,
padding: 15,
cursor: 'pointer'
},
activeLink: {
display: 'flex',
alignItems: 'center',
extend: tl2,
color: white,
backgroundColor: offDarkColor,
'&:first-child': {
borderRadius: [[5, 5, 0, 0]]
},
'&:last-child': {
borderRadius: [[0, 0, 5, 5]]
}
},
icon: {
marginRight: 15
}
}

550
new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx
View file

@ -1,18 +1,13 @@
import CardContent from '@mui/material/CardContent'
import Card from '@mui/material/Card'
import Grid from '@mui/material/Grid'
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import { Form, Formik, Field as FormikField } from 'formik'
import * as R from 'ramda'
import { useState, React, useRef } from 'react'
// import { HelpTooltip } from 'src/components/Tooltip'
import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { MainStatus } from 'src/components/Status'
import { Label1, P, H3 } from 'src/components/typography'
import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
import DeleteReversedIcon from 'src/styling/icons/action/delete/white.svg?react'
import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
import EditReversedIcon from 'src/styling/icons/action/edit/white.svg?react'
import AuthorizeIcon from 'src/styling/icons/button/authorize/white.svg?react'
@ -25,84 +20,34 @@ import SaveReversedIcon from 'src/styling/icons/circle buttons/save/white.svg?re
import { ActionButton } from 'src/components/buttons'
import {
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED,
OVERRIDE_PENDING
} from 'src/pages/Customers/components/propertyCard'
import { comet } from 'src/styling/variables'
} from 'src/pages/Customers/components/consts'
import styles from './EditableCard.styles'
const useStyles = makeStyles(styles)
const fieldStyles = {
field: {
position: 'relative',
width: 280,
height: 48,
padding: [[0, 4, 4, 0]],
marginTop: 2
},
label: {
color: comet,
margin: [[0, 0, 0, 0]]
},
notEditing: {
display: 'flex',
flexDirection: 'column',
'& > p:first-child': {
height: 16,
lineHeight: '16px',
transformOrigin: 'left',
paddingLeft: 0,
margin: [[3, 0, 3, 0]]
},
'& > p:last-child': {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
margin: 0
}
},
editing: {
'& > div': {
'& > input': {
padding: 0,
fontSize: 14
}
}
},
readOnlyLabel: {
color: comet,
margin: [[3, 0, 3, 0]]
},
readOnlyValue: {
margin: 0
}
const ReadOnlyField = ({ field, value }) => {
return (
<div className="h-12">
<Label1 noMargin className="text-comet">
{field.label}
</Label1>
<P noMargin className="overflow-hidden whitespace-nowrap text-ellipsis">
{value}
</P>
</div>
)
}
const fieldUseStyles = makeStyles(fieldStyles)
const EditableField = ({ editing, field, value, size, ...props }) => {
const classes = fieldUseStyles()
const classNames = {
[classes.field]: true,
[classes.notEditing]: !editing
}
if (!editing) return <ReadOnlyField field={field} value={value} />
return (
<div className={classnames(classNames)}>
{!editing && (
<>
<Label1 className={classes.label}>{field.label}</Label1>
<P>{value}</P>
</>
)}
<div className="h-12">
{editing && (
<>
<Label1 className={classes.label}>{field.label}</Label1>
<Label1 noMargin className="text-comet">
{field.label}
</Label1>
<FormikField
className={classes.editing}
inputClasses="p-0 text-sm -mt-1"
id={field.name}
name={field.name}
component={field.component}
@ -116,23 +61,6 @@ const EditableField = ({ editing, field, value, size, ...props }) => {
)
}
const ReadOnlyField = ({ field, value, ...props }) => {
const classes = fieldUseStyles()
const classNames = {
[classes.field]: true,
[classes.notEditing]: true
}
return (
<>
<div className={classnames(classNames)}>
<Label1 className={classes.readOnlyLabel}>{field.label}</Label1>
<P className={classes.readOnlyValue}>{value}</P>
</div>
</>
)
}
const EditableCard = ({
fields,
save = () => {},
@ -152,8 +80,6 @@ const EditableCard = ({
editable,
checkAgainstSanctions
}) => {
const classes = useStyles()
const formRef = useRef()
const [editing, setEditing] = useState(false)
@ -162,12 +88,6 @@ const EditableCard = ({
const triggerInput = () => input.click()
const label1ClassNames = {
[classes.label1]: true,
[classes.label1Pending]: state === OVERRIDE_PENDING,
[classes.label1Rejected]: state === OVERRIDE_REJECTED,
[classes.label1Accepted]: state === OVERRIDE_AUTHORIZED
}
const authorized =
state === OVERRIDE_PENDING
? { label: 'Pending', type: 'neutral' }
@ -176,247 +96,211 @@ const EditableCard = ({
: { label: 'Accepted', type: 'success' }
return (
<div>
<Card className={classes.card}>
<CardContent>
<div className={classes.headerWrapper}>
<div className={classes.cardHeader}>
{titleIcon}
<H3 className={classes.cardTitle}>{title}</H3>
{
// TODO: Enable for next release
/* <HelpTooltip width={304}></HelpTooltip> */
}
</div>
{state && authorize && (
<div className={classnames(label1ClassNames)}>
<MainStatus statuses={[authorized]} />
</div>
)}
<Card className="rounded-xl">
<CardContent>
<div className="flex justify-between h-10">
<div className="flex mb-4 gap-4">
{titleIcon}
<H3 noMargin>{title}</H3>
</div>
{children(formRef.current?.values ?? {})}
<Formik
innerRef={formRef}
validateOnBlur={false}
validateOnChange={false}
enableReinitialize
validationSchema={validationSchema}
initialValues={initialValues}
onSubmit={values => {
save(values)
setEditing(false)
}}
onReset={() => {
setEditing(false)
setError(false)
}}>
{({ setFieldValue }) => (
<Form>
<PromptWhenDirty />
<div className={classes.row}>
<Grid container>
<Grid container direction="column" item xs={6}>
{!hasImage &&
fields?.map((field, idx) => {
return idx >= 0 && idx < 4 ? (
!field.editable ? (
<ReadOnlyField
field={field}
value={initialValues[field.name]}
/>
) : (
<EditableField
field={field}
value={initialValues[field.name]}
editing={editing}
size={180}
/>
)
) : null
})}
</Grid>
<Grid container direction="column" item xs={6}>
{!hasImage &&
fields?.map((field, idx) => {
return idx >= 4 ? (
!field.editable ? (
<ReadOnlyField
field={field}
value={initialValues[field.name]}
/>
) : (
<EditableField
field={field}
value={initialValues[field.name]}
editing={editing}
size={180}
/>
)
) : null
})}
</Grid>
</Grid>
{state && authorize && <MainStatus statuses={[authorized]} />}
</div>
{children(formRef.current?.values ?? {})}
<Formik
innerRef={formRef}
validateOnBlur={false}
validateOnChange={false}
enableReinitialize
validationSchema={validationSchema}
initialValues={initialValues}
onSubmit={values => {
save(values)
setEditing(false)
}}
onReset={() => {
setEditing(false)
setError(false)
}}>
{({ setFieldValue }) => (
<Form>
<PromptWhenDirty />
<div className="flex">
<div className="flex flex-col w-1/2">
{!hasImage &&
fields?.map((field, idx) => {
return idx >= 0 && idx < 4 ? (
!field.editable ? (
<ReadOnlyField
field={field}
value={initialValues[field.name]}
/>
) : (
<EditableField
field={field}
value={initialValues[field.name]}
editing={editing}
size={180}
/>
)
) : null
})}
</div>
<div className={classes.edit}>
{!editing && (
<div className={classes.editButton}>
<div className={classes.deleteButton}>
{/*{false && (*/}
{/* <ActionButton*/}
{/* color="primary"*/}
{/* type="button"*/}
{/* Icon={DeleteIcon}*/}
{/* InverseIcon={DeleteReversedIcon}*/}
{/* onClick={() => deleteEditedData()}>*/}
{/* Delete*/}
{/* </ActionButton>*/}
{/*)}*/}
{!hasAdditionalData && (
<ActionButton
color="primary"
type="button"
Icon={DataIcon}
InverseIcon={DataReversedIcon}
onClick={() => retrieveAdditionalData()}>
Retrieve API data
</ActionButton>
)}
{checkAgainstSanctions && (
<ActionButton
color="primary"
type="button"
Icon={DataIcon}
InverseIcon={DataReversedIcon}
onClick={() => checkAgainstSanctions()}>
Check against OFAC sanction list
</ActionButton>
)}
</div>
{editable && (
<div className="flex flex-col w-1/2">
{!hasImage &&
fields?.map((field, idx) => {
return idx >= 4 ? (
!field.editable ? (
<ReadOnlyField
field={field}
value={initialValues[field.name]}
/>
) : (
<EditableField
field={field}
value={initialValues[field.name]}
editing={editing}
size={180}
/>
)
) : null
})}
</div>
</div>
<div className="flex justify-end mt-5 gap-2">
{!editing && (
<>
{!hasAdditionalData && (
<ActionButton
color="primary"
type="button"
Icon={DataIcon}
InverseIcon={DataReversedIcon}
onClick={() => retrieveAdditionalData()}>
Retrieve API data
</ActionButton>
)}
{checkAgainstSanctions && (
<ActionButton
color="primary"
type="button"
Icon={DataIcon}
InverseIcon={DataReversedIcon}
onClick={() => checkAgainstSanctions()}>
Check against OFAC sanction list
</ActionButton>
)}
{editable && (
<ActionButton
color="primary"
Icon={EditIcon}
InverseIcon={EditReversedIcon}
onClick={() => setEditing(true)}>
Edit
</ActionButton>
)}
{!editable &&
authorize &&
authorized.label !== 'Accepted' && (
<ActionButton
color="primary"
Icon={EditIcon}
InverseIcon={EditReversedIcon}
onClick={() => setEditing(true)}>
Edit
color="spring"
type="button"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeIcon}
onClick={() => authorize()}>
Authorize
</ActionButton>
)}
{!editable &&
authorize &&
authorized.label !== 'Accepted' && (
<div className={classes.button}>
<ActionButton
color="spring"
type="button"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeIcon}
onClick={() => authorize()}>
Authorize
</ActionButton>
{!editable &&
authorize &&
authorized.label !== 'Rejected' && (
<ActionButton
color="tomato"
type="button"
Icon={BlockIcon}
InverseIcon={BlockIcon}
onClick={() => reject()}>
Reject
</ActionButton>
)}
</>
)}
{editing && (
<>
{hasImage && state !== OVERRIDE_PENDING && (
<ActionButton
color="secondary"
type="button"
Icon={ReplaceReversedIcon}
InverseIcon={ReplaceReversedIcon}
onClick={() => triggerInput()}>
{
<div>
<input
type="file"
alt=""
accept="image/*"
className="hidden"
ref={fileInput => setInput(fileInput)}
onChange={event => {
// need to store it locally if we want to display it even after saving to db
const file = R.head(event.target.files)
if (!file) return
setFieldValue(R.head(fields).name, file)
}}
/>
Replace
</div>
)}
{!editable &&
authorize &&
authorized.label !== 'Rejected' && (
<ActionButton
color="tomato"
type="button"
Icon={BlockIcon}
InverseIcon={BlockIcon}
onClick={() => reject()}>
Reject
</ActionButton>
)}
</div>
)}
{editing && (
<div className={classes.editingWrapper}>
<div className={classes.replace}>
{hasImage && state !== OVERRIDE_PENDING && (
<ActionButton
color="secondary"
type="button"
Icon={ReplaceReversedIcon}
InverseIcon={ReplaceReversedIcon}
onClick={() => triggerInput()}>
{
<div>
<input
type="file"
alt=""
accept="image/*"
className={classes.input}
ref={fileInput => setInput(fileInput)}
onChange={event => {
// need to store it locally if we want to display it even after saving to db
const file = R.head(event.target.files)
if (!file) return
setFieldValue(R.head(fields).name, file)
}}
/>
Replace
</div>
}
</ActionButton>
)}
</div>
<div className={classes.editingButtons}>
{fields && (
<div className={classes.button}>
<ActionButton
color="secondary"
Icon={SaveReversedIcon}
InverseIcon={SaveReversedIcon}
type="submit">
Save
</ActionButton>
</div>
)}
<div className={classes.button}>
<ActionButton
color="secondary"
Icon={CancelReversedIcon}
InverseIcon={CancelReversedIcon}
onClick={() => cancel()}
type="reset">
Cancel
</ActionButton>
</div>
{authorize && authorized.label !== 'Accepted' && (
<div className={classes.button}>
<ActionButton
color="spring"
type="button"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeIcon}
onClick={() => authorize()}>
Authorize
</ActionButton>
</div>
)}
{authorize && authorized.label !== 'Rejected' && (
<ActionButton
color="tomato"
type="button"
Icon={BlockIcon}
InverseIcon={BlockIcon}
onClick={() => reject()}>
Reject
</ActionButton>
)}
{error && (
<ErrorMessage>Failed to save changes</ErrorMessage>
)}
</div>
</div>
)}
</div>
</Form>
)}
</Formik>
</CardContent>
</Card>
</div>
}
</ActionButton>
)}
{fields && (
<ActionButton
color="secondary"
Icon={SaveReversedIcon}
InverseIcon={SaveReversedIcon}
type="submit">
Save
</ActionButton>
)}
<ActionButton
color="secondary"
Icon={CancelReversedIcon}
InverseIcon={CancelReversedIcon}
onClick={() => cancel()}
type="reset">
Cancel
</ActionButton>
{authorize && authorized.label !== 'Accepted' && (
<ActionButton
color="spring"
type="button"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeIcon}
onClick={() => authorize()}>
Authorize
</ActionButton>
)}
{authorize && authorized.label !== 'Rejected' && (
<ActionButton
color="tomato"
type="button"
Icon={BlockIcon}
InverseIcon={BlockIcon}
onClick={() => reject()}>
Reject
</ActionButton>
)}
{error && (
<ErrorMessage>Failed to save changes</ErrorMessage>
)}
</>
)}
</div>
</Form>
)}
</Formik>
</CardContent>
</Card>
)
}

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

@ -1,70 +0,0 @@
import { tomato, spring4, comet } from 'src/styling/variables'
export default {
label1: {
display: 'flex',
width: 85,
justifyContent: 'right'
},
label1Pending: {
color: comet
},
label1Rejected: {
color: tomato
},
label1Accepted: {
color: spring4
},
editButton: {
marginTop: 20,
display: 'flex',
justifyContent: 'right'
},
deleteButton: {
marginRight: 8
},
headerWrapper: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
height: 40
},
editingWrapper: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 20
},
replace: {
marginRight: 5
},
input: {
display: 'none'
},
button: {
marginRight: 5
},
editingButtons: {
display: 'flex',
justifyContent: 'right'
},
card: {
borderRadius: 10,
marginRight: 15,
marginBottom: 15
},
cardHeader: {
display: 'flex',
flexDirection: 'row',
marginBottom: 15
},
editIcon: {
marginTop: 5
},
cardIcon: {
marginTop: 7
},
cardTitle: {
margin: [[8, 15, 15, 15]]
}
}

38
new-lamassu-admin/src/pages/Customers/components/Field.jsx
View file

@ -1,38 +0,0 @@
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { memo } from 'react'
import { Info3, Label1 } from 'src/components/typography'
import { comet } from 'src/styling/variables'
const useStyles = makeStyles({
field: {
height: 46
},
label: {
color: comet,
margin: [[0, 3]]
},
value: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
margin: 0,
paddingLeft: 4
}
})
const Field = memo(({ label, display, size, className }) => {
const classes = useStyles()
return (
<div
className={classnames(classes.field, className)}
style={{ width: size }}>
<Label1 className={classes.label}>{label}</Label1>
<Info3 className={classes.value}>{display}</Info3>
</div>
)
})
export default Field

28
new-lamassu-admin/src/pages/Customers/components/FrontCameraPhoto.jsx
View file

@ -1,28 +0,0 @@
import Paper from '@mui/material/Paper'
import { makeStyles } from '@mui/styles'
import React, { memo } from 'react'
import CrossedCameraIcon from 'src/styling/icons/ID/photo/crossed-camera.svg?react'
import mainStyles from '../CustomersList.styles'
const useStyles = makeStyles(mainStyles)
const FrontCameraPhoto = memo(({ frontCameraPath }) => {
const classes = useStyles()
return (
<Paper className={classes.photo} elevation={0}>
{frontCameraPath ? (
<img
className={classes.img}
src={`/front-camera-photo/${frontCameraPath}`}
alt=""
/>
) : (
<CrossedCameraIcon />
)}
</Paper>
)
})
export default FrontCameraPhoto

52
new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx
View file

@ -1,52 +0,0 @@
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { memo } from 'react'
import CrossedCameraIcon from 'src/styling/icons/ID/photo/crossed-camera.svg?react'
import {
PropertyCard,
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED
} from 'src/pages/Customers/components/propertyCard'
const useStyles = makeStyles({
idCardPhotoCard: {
width: 325,
height: 240,
margin: [[32, 0, 0, 0]]
},
idCardPhoto: {
maxHeight: 130
},
field: {
marginLeft: 14
}
})
const IdCardPhotoCard = memo(({ customerData, updateCustomer }) => {
const classes = useStyles()
return (
<PropertyCard
title={'ID card image'}
state={R.path(['idCardPhotoOverride'])(customerData)}
authorize={() =>
updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED })
}
reject={() => updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED })}>
<div className="flex flex-1 justify-center items-center">
{customerData.idCardPhotoPath ? (
<img
className={classes.idCardPhoto}
src={`/id-card-photo/${R.path(['idCardPhotoPath'])(customerData)}`}
alt=""
/>
) : (
<CrossedCameraIcon />
)}
</div>
</PropertyCard>
)
})
export default IdCardPhotoCard

88
new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx
View file

@ -1,88 +0,0 @@
import { differenceInYears, format, parse } from 'date-fns/fp'
import * as R from 'ramda'
import React, { memo } from 'react'
import {
PropertyCard,
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED
} from 'src/pages/Customers/components/propertyCard'
import { ifNotNull } from 'src/utils/nullCheck'
import { getName } from '../helper'
import Field from './Field'
const IdDataCard = memo(({ customerData, updateCustomer }) => {
const idData = R.path(['idCardData'])(customerData)
const rawExpirationDate = R.path(['expirationDate'])(idData)
const country = R.path(['country'])(idData)
const rawDob = R.path(['dateOfBirth'])(idData)
const elements = [
{
header: 'Name',
display: `${getName(customerData)}`,
size: 190
},
{
header: 'ID number',
display: R.path(['documentNumber'])(idData),
size: 160
},
{
header: 'Birth date',
display:
(rawDob &&
format('yyyy-MM-dd')(parse(new Date(), 'yyyyMMdd', rawDob))) ??
'',
size: 110
},
{
header: 'Age',
display:
(rawDob &&
differenceInYears(
parse(new Date(), 'yyyyMMdd', rawDob),
new Date()
)) ??
'',
size: 50
},
{
header: 'Gender',
display: R.path(['gender'])(idData) ?? R.path(['sex'])(idData),
size: 80
},
{
header: country === 'Canada' ? 'Province' : 'State',
display: R.path(['state'])(idData),
size: 120
},
{
header: 'Expiration date',
display: ifNotNull(
rawExpirationDate,
format('yyyy-MM-dd', rawExpirationDate)
)
}
]
return (
<PropertyCard
title={'ID data'}
state={R.path(['idCardDataOverride'])(customerData)}
authorize={() =>
updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED })
}
reject={() => updateCustomer({ idCardDataOverride: OVERRIDE_REJECTED })}>
<div className="flex items-center">
{elements.map(({ header, display, size }, idx) => (
<Field key={idx} label={header} display={display} size={size} />
))}
</div>
</PropertyCard>
)
})
export default IdDataCard

36
new-lamassu-admin/src/pages/Customers/components/PhoneCard.jsx
View file

@ -1,36 +0,0 @@
import { parsePhoneNumberFromString } from 'libphonenumber-js'
import * as R from 'ramda'
import React, { memo } from 'react'
import {
PropertyCard,
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED
} from 'src/pages/Customers/components/propertyCard'
import Field from './Field'
const PhoneCard = memo(
({ className, customerData, updateCustomer, locale }) => (
<PropertyCard
className={className}
title={'Phone nº'}
state={R.path(['smsOverride'])(customerData)}
authorize={() => updateCustomer({ smsOverride: OVERRIDE_AUTHORIZED })}
reject={() => updateCustomer({ smsOverride: OVERRIDE_REJECTED })}>
<Field
label={'Phone'}
display={
customerData.phone && locale.country
? parsePhoneNumberFromString(
customerData.phone,
locale.country
).formatInternational()
: ''
}
/>
</PropertyCard>
)
)
export default PhoneCard

22
new-lamassu-admin/src/pages/Customers/components/PhotosCard.jsx
View file

@ -1,20 +1,14 @@
import ButtonBase from '@mui/material/ButtonBase'
import Paper from '@mui/material/Card'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { memo, useState } from 'react'
import { InformativeDialog } from 'src/components/InformativeDialog'
import { Info2 } from 'src/components/typography'
import CrossedCameraIcon from 'src/styling/icons/ID/photo/crossed-camera.svg?react'
import styles from './PhotosCard.styles'
import PhotosCarousel from './PhotosCarousel'
const useStyles = makeStyles(styles)
const PhotosCard = memo(({ photosData, timezone }) => {
const classes = useStyles()
const [photosDialog, setPhotosDialog] = useState(false)
const sortedPhotosData = R.sortWith(
@ -26,24 +20,24 @@ const PhotosCard = memo(({ photosData, timezone }) => {
return (
<>
<Paper className={classes.photo} elevation={0}>
<Paper
className="flex justify-center items-center bg-zircon rounded-lg h-34 w-34"
elevation={0}>
<ButtonBase
disabled={!singlePhoto}
className={classes.button}
onClick={() => {
setPhotosDialog(true)
}}>
{singlePhoto ? (
<div className={classes.container}>
<div>
<img
className={classes.img}
className="w-34 h-34 object-center object-cover block"
src={`/${singlePhoto.photoDir}/${singlePhoto.path}`}
alt=""
/>
<circle className={classes.circle}>
<div>
<Info2>{sortedPhotosData.length}</Info2>
</div>
<div className=""></div>
<circle className="absolute top-0 right-0 mr-1 mt-1 bg-ghost rounded-full w-6 h-6 flex items-center justify-center">
<Info2>{sortedPhotosData.length}</Info2>
</circle>
</div>
) : (

42
new-lamassu-admin/src/pages/Customers/components/PhotosCard.styles.js
View file

@ -1,42 +0,0 @@
import { zircon, backgroundColor } from 'src/styling/variables'
export default {
photo: {
width: 135,
height: 135,
borderRadius: 8,
backgroundColor: zircon,
margin: [[0, 28, 0, 0]],
alignItems: 'center',
justifyContent: 'center',
display: 'flex'
},
img: {
objectFit: 'cover',
objectPosition: 'center',
width: 135,
height: 135
},
container: {
position: 'relative',
'& > img': {
display: 'block'
},
'& > circle': {
position: 'absolute',
top: '0',
right: '0',
marginRight: 5,
marginTop: 5
}
},
circle: {
background: backgroundColor,
borderRadius: '50%',
width: 25,
height: 25,
alignItems: 'center',
justifyContent: 'center',
display: 'flex'
}
}

18
new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { memo, useState } from 'react'
import { Carousel } from 'src/components/Carousel'
@ -8,35 +7,34 @@ import { formatDate } from 'src/utils/timezones'
import CopyToClipboard from '../../Transactions/CopyToClipboard'
import styles from './PhotosCarousel.styles'
const useStyles = makeStyles(styles)
const PhotosCarousel = memo(({ photosData, timezone }) => {
const classes = useStyles()
const [currentIndex, setCurrentIndex] = useState(0)
const Label = ({ children }) => {
const classes = useStyles()
return <Label1 className={classes.label}>{children}</Label1>
return (
<Label1 noMargin className="mb-1 text-comet">
{children}
</Label1>
)
}
const isFaceCustomerPhoto = !R.has('id')(photosData[currentIndex])
const slidePhoto = index => setCurrentIndex(index)
// TODO hide copy to clipboard shit
return (
<>
<Carousel photosData={photosData} slidePhoto={slidePhoto} />
{!isFaceCustomerPhoto && (
<div className={classes.firstRow}>
<div className="flex flex-col p-2">
<Label>Session ID</Label>
<CopyToClipboard>
{photosData && photosData[currentIndex]?.id}
</CopyToClipboard>
</div>
)}
<div className={classes.secondRow}>
<div className="text-zodiac flex p-2 gap-8">
<div>
<>
<Label>Date</Label>

30
new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.styles.js
View file

@ -1,30 +0,0 @@
import typographyStyles from 'src/components/typography/styles'
import { offColor } from 'src/styling/variables'
const { p } = typographyStyles
export default {
label: {
color: offColor,
margin: [[0, 0, 6, 0]]
},
firstRow: {
padding: [[8]],
display: 'flex',
flexDirection: 'column'
},
secondRow: {
extend: p,
display: 'flex',
padding: [[8]],
'& > div': {
display: 'flex',
flexDirection: 'column',
'& > div': {
height: 37,
marginBottom: 15,
marginRight: 55
}
}
}
}

47
new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx
View file

@ -1,7 +1,5 @@
import { toUnit } from '@lamassu/coins/lightUtils'
import { makeStyles } from '@mui/styles'
import BigNumber from 'bignumber.js'
import classnames from 'classnames'
import * as R from 'ramda'
import React from 'react'
import DataTable from 'src/components/tables/DataTable'
@ -13,21 +11,13 @@ import { ifNotNull } from 'src/utils/nullCheck'
import { formatDate } from 'src/utils/timezones'
import CopyToClipboard from '../../Transactions/CopyToClipboard'
import mainStyles from '../CustomersList.styles'
const useStyles = makeStyles(mainStyles)
const TransactionsList = ({ customer, data, loading }) => {
const classes = useStyles()
const LastTxIcon = customer.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon
const hasData = !(R.isEmpty(data) || R.isNil(data))
const { lastUsedMachineName } = customer
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
const tableSpacingClasses = {
[classes.titleAndButtonsContainer]: loading || (!loading && !hasData),
[classes.txTableSpacing]: !loading && hasData
}
const summaryElements = [
{
@ -61,7 +51,7 @@ const TransactionsList = ({ customer, data, loading }) => {
value: ifNotNull(
customer.lastTxFiat,
<>
<LastTxIcon className={classes.icon} />
<LastTxIcon className="mr-3" />
{`${Number.parseFloat(customer.lastTxFiat)}
${customer.lastTxFiatCode}`}
</>
@ -80,9 +70,9 @@ const TransactionsList = ({ customer, data, loading }) => {
view: it => (
<>
{it.txClass === 'cashOut' ? (
<TxOutIcon className={classes.txClassIconLeft} />
<TxOutIcon className="mr-3" />
) : (
<TxInIcon className={classes.txClassIconLeft} />
<TxInIcon className="mr-3" />
)}
</>
)
@ -96,7 +86,9 @@ const TransactionsList = ({ customer, data, loading }) => {
header: 'Transaction ID',
width: 145,
view: it => (
<CopyToClipboard className={classes.txId}>{it.id}</CopyToClipboard>
<CopyToClipboard className="font-museo whitespace-nowrap overflow-hidden text-ellipsis">
{it.id}
</CopyToClipboard>
)
},
{
@ -144,7 +136,7 @@ const TransactionsList = ({ customer, data, loading }) => {
<Label1
noMargin
key={idx}
className={classes.txSummaryLabel}
className="text-comet mb-1 mr-6"
style={{ width: size }}>
{header}
</Label1>
@ -152,28 +144,21 @@ const TransactionsList = ({ customer, data, loading }) => {
</div>
<div className="flex">
{summaryElements.map(({ size, value }, idx) => (
<P
noMargin
key={idx}
className={classes.txSummaryValue}
style={{ width: size }}>
<P noMargin key={idx} className="h-4 mr-6" style={{ width: size }}>
{value}
</P>
))}
</div>
</div>
<div className={classes.titleWrapper}>
<div className={classnames(tableSpacingClasses)}>
{loading ? (
<H4>Loading</H4>
) : hasData ? (
''
) : (
<H4>No transactions so far</H4>
)}
</div>
<div className="flex mt-5">
{loading ? (
<H4>Loading</H4>
) : hasData ? (
<DataTable elements={tableElements} data={data} />
) : (
<H4>No transactions so far</H4>
)}
</div>
{hasData && <DataTable elements={tableElements} data={data} />}
</>
)
}

54
new-lamassu-admin/src/pages/Customers/components/Upload.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import { useFormikContext } from 'formik'
import * as R from 'ramda'
import React, { useState, useCallback } from 'react'
@ -7,42 +6,9 @@ import { Label3, H3 } from 'src/components/typography'
import UploadPhotoIcon from 'src/styling/icons/button/photo/zodiac-resized.svg?react'
import UploadFileIcon from 'src/styling/icons/button/upload-file/zodiac-resized.svg?react'
import { offColor, subheaderColor } from 'src/styling/variables'
const useStyles = makeStyles({
box: {
boxSizing: 'border-box',
width: 450,
height: 120,
borderStyle: 'dashed',
borderColor: offColor,
borderRadius: 4,
borderWidth: 1,
backgroundColor: subheaderColor,
display: 'flex',
justifyContent: 'center'
},
inputContent: {
marginTop: 35,
display: 'flex'
},
uploadContent: {
marginTop: 50,
display: 'flex'
},
board: {
marginTop: 40,
width: 450,
height: 120
},
icon: {
margin: [[14, 20, 0, 0]]
}
})
import classes from './Upload.module.css'
const Upload = ({ type }) => {
const classes = useStyles()
const [data, setData] = useState({})
const { setFieldValue } = useFormikContext()
@ -71,20 +37,14 @@ const Upload = ({ type }) => {
return (
<>
<div {...getRootProps()} className={classes.board}>
<div {...getRootProps()} className="mt-10 w-112 h-30">
{R.isEmpty(data) && (
<div className={classes.box}>
<input {...getInputProps()} />
<div className={classes.inputContent}>
{isImage ? (
<UploadPhotoIcon className={classes.icon}></UploadPhotoIcon>
) : (
<UploadFileIcon className={classes.icon}></UploadFileIcon>
)}
<Label3>{`Drag and drop ${
isImage ? 'an image' : 'a file'
} or click to open the explorer`}</Label3>
</div>
{isImage ? <UploadPhotoIcon /> : <UploadFileIcon />}
<Label3>{`Drag and drop ${
isImage ? 'an image' : 'a file'
} or click to open the explorer`}</Label3>
</div>
)}
{!R.isEmpty(data) && isImage && (
@ -94,7 +54,7 @@ const Upload = ({ type }) => {
)}
{!R.isEmpty(data) && !isImage && (
<div className={classes.box}>
<H3 className={classes.uploadContent}>{data.preview}</H3>
<H3 className="mt-12 flex">{data.preview}</H3>
</div>
)}
</div>

14
new-lamassu-admin/src/pages/Customers/components/Upload.module.css Normal file
View file

@ -0,0 +1,14 @@
.box {
box-sizing: border-box;
width: 450px;
height: 120px;
border-style: dashed;
border-color: var(--comet);
border-radius: 4px;
border-width: 1px;
background-color: var(--zircon);
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}

5
new-lamassu-admin/src/pages/Customers/components/consts.js Normal file
View file

@ -0,0 +1,5 @@
const OVERRIDE_PENDING = 'automatic'
const OVERRIDE_AUTHORIZED = 'verified'
const OVERRIDE_REJECTED = 'blocked'
export { OVERRIDE_PENDING, OVERRIDE_AUTHORIZED, OVERRIDE_REJECTED }

6
new-lamassu-admin/src/pages/Customers/components/index.js
View file

@ -3,19 +3,13 @@ import Wizard from '../Wizard'
import CustomerDetails from './CustomerDetails'
import CustomerSidebar from './CustomerSidebar'
import EditableCard from './EditableCard'
import Field from './Field'
import IdDataCard from './IdDataCard'
import PhotosCarousel from './PhotosCarousel'
import TransactionsList from './TransactionsList'
import Upload from './Upload'
export {
PhotosCarousel,
CustomerDetails,
IdDataCard,
TransactionsList,
CustomerSidebar,
Field,
EditableCard,
Wizard,
Upload

19
new-lamassu-admin/src/pages/Customers/components/notes/NewNoteCard.jsx
View file

@ -1,23 +1,16 @@
import Paper from '@mui/material/Paper'
import { makeStyles } from '@mui/styles'
import classNames from 'classnames'
import { React } from 'react'
import { P } from 'src/components/typography'
import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
import styles from './NoteCard.styles'
const useStyles = makeStyles(styles)
const NewNoteCard = ({ setOpenModal }) => {
const classes = useStyles()
return (
<div className={classes.noteCardWrapper} onClick={() => setOpenModal(true)}>
<Paper className={classNames(classes.noteCardChip, classes.newNoteCard)}>
<AddIcon width={20} height={20} />
<P>Add new</P>
</Paper>
</div>
<Paper
className="cursor-pointer bg-zircon flex flex-col justify-center items-center"
onClick={() => setOpenModal(true)}>
<AddIcon width={20} height={20} />
<P>Add new</P>
</Paper>
)
}

16
new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import { Form, Formik, Field } from 'formik'
import { React } from 'react'
import ErrorMessage from 'src/components/ErrorMessage'
@ -8,10 +7,6 @@ import * as Yup from 'yup'
import { Button } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik'
import styles from './NewNoteModal.styles'
const useStyles = makeStyles(styles)
const initialValues = {
title: '',
content: ''
@ -23,8 +18,6 @@ const validationSchema = Yup.object().shape({
})
const NewNoteModal = ({ showModal, onClose, onSubmit, errorMsg }) => {
const classes = useStyles()
return (
<>
<Modal
@ -42,7 +35,7 @@ const NewNoteModal = ({ showModal, onClose, onSubmit, errorMsg }) => {
onSubmit={({ title, content }) => {
onSubmit({ title, content })
}}>
<Form id="note-form" className={classes.form}>
<Form id="note-form" className="flex flex-col h-full gap-5">
<Field
name="title"
autofocus
@ -62,9 +55,12 @@ const NewNoteModal = ({ showModal, onClose, onSubmit, errorMsg }) => {
rows={11}
label="Note content"
/>
<div className={classes.footer}>
<div className="flex flex-row mt-auto mb-6">
{errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
<Button type="submit" form="note-form" className={classes.submit}>
<Button
type="submit"
form="note-form"
className="mt-auto ml-auto">
Add note
</Button>
</div>

25
new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.styles.js
View file

@ -1,25 +0,0 @@
import { spacer } from 'src/styling/variables'
const styles = {
form: {
display: 'flex',
flexDirection: 'column',
height: '100%',
'& > *': {
marginTop: 20
},
'& > *:last-child': {
marginTop: 'auto'
}
},
submit: {
margin: [['auto', 0, 0, 'auto']]
},
footer: {
display: 'flex',
flexDirection: 'row',
margin: [['auto', 0, spacer * 3, 0]]
}
}
export default styles

48
new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.jsx
View file

@ -1,5 +1,4 @@
import Paper from '@mui/material/Paper'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import { React } from 'react'
import { H3, P } from 'src/components/typography'
@ -7,10 +6,6 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
import { formatDate } from 'src/utils/timezones'
import styles from './NoteCard.styles'
const useStyles = makeStyles(styles)
const formatContent = content => {
const fragments = R.split(/\n/)(content)
return R.map((it, idx) => {
@ -25,31 +20,28 @@ const formatContent = content => {
}
const NoteCard = ({ note, deleteNote, handleClick, timezone }) => {
const classes = useStyles()
return (
<div className={classes.noteCardWrapper}>
<Paper className={classes.noteCardChip} onClick={() => handleClick(note)}>
<div className={classes.noteCardHeader}>
<div className={classes.noteCardTitle}>
<H3 noMargin>{note?.title}</H3>
<P noMargin>{formatDate(note?.created, timezone, 'yyyy-MM-dd')}</P>
</div>
<div>
<DeleteIcon
className={classes.deleteIcon}
onClick={e => {
e.stopPropagation()
deleteNote({ noteId: note.id })
}}
/>
</div>
<Paper
className="p-2 cursor-pointer overflow-hidden text-ellipsis"
onClick={() => handleClick(note)}>
<div className="flex flex-row justify-between w-full">
<div className="overflow-hidden whitespace-nowrap overflow-ellipsis">
<H3 noMargin>{note?.title}</H3>
<P noMargin>{formatDate(note?.created, timezone, 'yyyy-MM-dd')}</P>
</div>
<P noMargin className={classes.noteCardContent}>
{formatContent(note?.content)}
</P>
</Paper>
</div>
<div>
<DeleteIcon
onClick={e => {
e.stopPropagation()
deleteNote({ noteId: note.id })
}}
/>
</div>
</div>
<P noMargin className="mt-2 line-clamp-8">
{formatContent(note?.content)}
</P>
</Paper>
)
}

93
new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.styles.js
View file

@ -1,93 +0,0 @@
import { zircon } from 'src/styling/variables'
const styles = {
noteCardWrapper: {
flexGrow: 0,
flexShrink: 0,
flexBasis: `25%`,
minWidth: 0,
maxWidth: 500,
'&:nth-child(4n+1)': {
'& > div': {
margin: [[0, 10, 0, 0]]
}
},
'&:nth-child(4n)': {
'& > div': {
margin: [[0, 0, 0, 10]]
}
},
margin: [[10, 0]]
},
noteCardChip: {
height: 200,
margin: [[0, 10]],
padding: [[10, 10]],
cursor: 'pointer'
},
newNoteCard: {
backgroundColor: zircon,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
noteCardHeader: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%'
},
noteCardTitle: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
marginRight: 10
},
noteCardContent: {
display: 'box',
lineClamp: 7,
boxOrient: 'vertical',
margin: [[15, 0]],
overflow: 'hidden',
textOverflow: 'ellipsis',
wordWrap: 'break-word'
},
editCardChip: {
height: 325,
padding: 15
},
editCardHeader: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 15
},
editCardActions: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
'& > *': {
marginRight: 10
},
'& > *:last-child': {
marginRight: 0
}
},
editNotesContent: {
'& > div': {
'&:after': {
borderBottom: 'none'
},
'&:before': {
borderBottom: 'none'
},
'&:hover:not(.Mui-disabled)::before': {
borderBottom: 'none'
}
}
}
}
export default styles

14
new-lamassu-admin/src/pages/Customers/components/notes/NoteEdit.jsx
View file

@ -1,5 +1,4 @@
import Paper from '@mui/material/Paper'
import { makeStyles } from '@mui/styles'
import { formatDurationWithOptions, intervalToDuration } from 'date-fns/fp'
import { Form, Formik, Field } from 'formik'
import { React, useRef } from 'react'
@ -14,13 +13,8 @@ import { ActionButton } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik'
import { toTimezone } from 'src/utils/timezones'
import styles from './NoteCard.styles'
const useStyles = makeStyles(styles)
const NoteEdit = ({ note, cancel, edit, timezone }) => {
const formRef = useRef()
const classes = useStyles()
const validationSchema = Yup.object().shape({
content: Yup.string()
@ -31,8 +25,8 @@ const NoteEdit = ({ note, cancel, edit, timezone }) => {
}
return (
<Paper className={classes.editCardChip}>
<div className={classes.editCardHeader}>
<Paper className="p-4">
<div className="flex flex-row justify-between items-center mb-4">
<P noMargin>
{`Last edited `}
{formatDurationWithOptions(
@ -44,7 +38,7 @@ const NoteEdit = ({ note, cancel, edit, timezone }) => {
)}
{` ago`}
</P>
<div className={classes.editCardActions}>
<div className="flex flex-row items-center gap-2">
<ActionButton
color="primary"
type="button"
@ -88,7 +82,7 @@ const NoteEdit = ({ note, cancel, edit, timezone }) => {
<Field
name="content"
component={TextInput}
className={classes.editNotesContent}
InputProps={{ disableUnderline: true }}
size="sm"
autoComplete="off"
fullWidth

132
new-lamassu-admin/src/pages/Customers/components/propertyCard/PropertyCard.jsx
View file

@ -1,132 +0,0 @@
import Paper from '@mui/material/Paper'
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { memo } from 'react'
import { MainStatus } from 'src/components/Status'
import { H3 } from 'src/components/typography'
import AuthorizeReversedIcon from 'src/styling/icons/button/authorize/white.svg?react'
import AuthorizeIcon from 'src/styling/icons/button/authorize/zodiac.svg?react'
import RejectReversedIcon from 'src/styling/icons/button/cancel/white.svg?react'
import RejectIcon from 'src/styling/icons/button/cancel/zodiac.svg?react'
import EditReversedIcon from 'src/styling/icons/button/edit/white.svg?react'
import EditIcon from 'src/styling/icons/button/edit/zodiac.svg?react'
import { ActionButton } from 'src/components/buttons'
import { propertyCardStyles } from './PropertyCard.styles'
const useStyles = makeStyles(propertyCardStyles)
const OVERRIDE_PENDING = 'automatic'
const OVERRIDE_AUTHORIZED = 'verified'
const OVERRIDE_REJECTED = 'blocked'
const PropertyCard = memo(
({
className,
contentClassName,
title,
state,
authorize,
reject,
edit,
confirm,
isEditing,
formName,
children
}) => {
const classes = useStyles()
const label1ClassNames = {
[classes.label1]: true,
[classes.label1Pending]: state === OVERRIDE_PENDING,
[classes.label1Rejected]: state === OVERRIDE_REJECTED,
[classes.label1Accepted]: state === OVERRIDE_AUTHORIZED
}
const AuthorizeButton = () => (
<ActionButton
className={classes.cardActionButton}
color="secondary"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeReversedIcon}
onClick={() => authorize()}>
Authorize
</ActionButton>
)
const RejectButton = () => (
<ActionButton
className={classes.cardActionButton}
color="secondary"
Icon={RejectIcon}
InverseIcon={RejectReversedIcon}
onClick={() => reject()}>
Reject
</ActionButton>
)
const EditButton = () => (
<ActionButton
className={classes.cardActionButton}
color="secondary"
Icon={EditIcon}
InverseIcon={EditReversedIcon}
onClick={() => edit()}>
Edit
</ActionButton>
)
const ConfirmButton = () => (
<ActionButton
className={classes.cardActionButton}
type="submit"
form={formName}
color="secondary"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeReversedIcon}>
Confirm
</ActionButton>
)
const authorized =
state === OVERRIDE_PENDING
? { label: 'Pending', type: 'neutral' }
: state === OVERRIDE_REJECTED
? { label: 'Rejected', type: 'error' }
: { label: 'Accepted', type: 'success' }
return (
<Paper
className={classnames(classes.propertyCard, className)}
elevation={0}>
<H3 className={classes.propertyCardTopRow}>{title}</H3>
<div
className={classnames(
classes.propertyCardBottomRow,
contentClassName
)}>
{state && (
<div className={classnames(label1ClassNames)}>
<MainStatus statuses={[authorized]} />
</div>
)}
{children}
<div className={classes.buttonsWrapper}>
{authorize && state !== OVERRIDE_AUTHORIZED && AuthorizeButton()}
{reject && state !== OVERRIDE_REJECTED && RejectButton()}
{edit && !isEditing && EditButton()}
{confirm && isEditing && ConfirmButton()}
</div>
</div>
</Paper>
)
}
)
export {
PropertyCard,
OVERRIDE_PENDING,
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED
}

69
new-lamassu-admin/src/pages/Customers/components/propertyCard/PropertyCard.styles.js
View file

@ -1,69 +0,0 @@
import { white, tomato, spring4, comet } from 'src/styling/variables'
const propertyCardStyles = {
label1: {
display: 'flex',
marginBottom: 2,
marginTop: 'auto',
width: 85
},
label1Pending: {
color: comet
},
label1Rejected: {
color: tomato
},
label1Accepted: {
color: spring4
},
cardActionButton: {
display: 'flex',
height: 28,
marginRight: 'auto',
marginLeft: 12
},
propertyCardTopRow: {
display: 'flex',
margin: [[0, 10, 5, 0]]
},
propertyCardBottomRow: {
display: 'flex',
flexDirection: 'row',
height: 45
},
propertyCard: {
display: 'flex',
flexDirection: 'column',
borderRadius: 8,
width: '100%',
height: 100,
padding: [[20]],
boxSizing: 'border-box',
boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0.04)',
border: 'solid 0',
backgroundColor: white,
margin: [[20, 0, 0, 0]]
},
rowSpaceBetween: {
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
justifyContent: 'space-between'
},
columnSpaceBetween: {
display: 'flex',
flexFlow: 'column nowrap',
alignItems: 'center',
justifyContent: 'space-between',
width: 90
},
buttonsWrapper: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
marginLeft: 'auto',
marginTop: 'auto'
}
}
export { propertyCardStyles }

13
new-lamassu-admin/src/pages/Customers/components/propertyCard/index.js
View file

@ -1,13 +0,0 @@
import {
PropertyCard,
OVERRIDE_PENDING,
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED
} from './PropertyCard'
export {
PropertyCard,
OVERRIDE_PENDING,
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED
}

105
new-lamassu-admin/src/pages/Customers/helper.jsx
View file

@ -1,6 +1,4 @@
import React from 'react'
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import { parse, isValid, format } from 'date-fns/fp'
import { Field, useFormikContext } from 'formik'
import { parsePhoneNumberFromString } from 'libphonenumber-js'
@ -14,45 +12,10 @@ import {
TextInput,
Autocomplete
} from 'src/components/inputs/formik'
import { errorColor } from 'src/styling/variables'
import { MANUAL } from 'src/utils/constants'
import { Upload } from './components'
const useStyles = makeStyles({
radio: {
padding: 4,
margin: 4
},
radioGroup: {
flexDirection: 'row'
},
error: {
color: errorColor
},
specialLabel: {
height: 40,
padding: 0,
width: 250
},
label: {
height: 40,
padding: 0
},
specialGrid: {
display: 'grid',
gridTemplateColumns: [[182, 162, 141]]
},
picker: {
width: 150
},
field: {
'& > *:last-child': {
marginBottom: 24
}
}
})
const CUSTOMER_BLOCKED = 'blocked'
const CUSTOM = 'custom'
const REQUIREMENT = 'requirement'
@ -215,68 +178,50 @@ const updateRequirementOptions = it => [
]
const EntryType = ({ customInfoRequirementOptions }) => {
const classes = useStyles()
const { values } = useFormikContext()
const displayCustomOptions = values.entryType === CUSTOM
const displayRequirementOptions = values.entryType === REQUIREMENT
return (
<>
const Entry = ({ title, name, options, className }) => (
<div>
<div className="flex items-center">
<H4>Type of entry</H4>
<H4>{title}</H4>
</div>
<Field
component={RadioGroup}
name={name}
options={options}
radioClassName="p-1 m-1"
labelClassName={className}
className="grid grid-cols-[182px_162px_141px]"
/>
</div>
)
return (
<>
<Entry
title="Type of entry"
name="entryType"
options={entryOptions}
labelClassName={classes.specialLabel}
radioClassName={classes.radio}
className={classnames(classes.radioGroup, classes.specialGrid)}
className="w-62"
/>
{displayCustomOptions && (
<div>
<div className="flex items-center">
<H4>Type of data</H4>
</div>
<Field
component={RadioGroup}
name="dataType"
options={dataOptions}
labelClassName={classes.label}
radioClassName={classes.radio}
className={classnames(classes.radioGroup, classes.specialGrid)}
/>
</div>
<Entry title="Type of data" name="dataType" options={dataOptions} />
)}
{displayRequirementOptions && (
<div>
<div className="flex items-center">
<H4>Requirements</H4>
</div>
<Field
component={RadioGroup}
name="requirement"
options={
requirementOptions
// TODO: Enable once custom info requirement manual entry is finished
// !R.isEmpty(customInfoRequirementOptions)
// ? updateRequirementOptions(requirementOptions)
// : requirementOptions
}
labelClassName={classes.label}
radioClassName={classes.radio}
className={classnames(classes.radioGroup, classes.specialGrid)}
/>
</div>
<Entry
title="Requirements"
name="requirement"
options={requirementOptions}
/>
)}
</>
)
}
const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
const classes = useStyles()
const typeOfEntrySelected = selectedValues?.entryType
const dataTypeSelected = selectedValues?.dataType
const requirementSelected = selectedValues?.requirement
@ -316,14 +261,14 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
<Autocomplete
fullWidth
label={`Available requests`}
className={classes.picker}
className="w-37"
isOptionEqualToValue={R.eqProps('code')}
labelProp={'display'}
options={customInfoRequirementOptions}
onChange={(evt, it) => {}}
/>
)}
<div className={classes.field}>
<div className="mb-6">
{!upload &&
!isCustomInfoRequirement &&
elements.options.map(({ label, name }, idx) => (

3
new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx
View file

@ -16,6 +16,7 @@ const CopyToClipboard = ({
className,
buttonClassname,
children,
variant,
wrapperClassname,
removeSpace = true,
...props
@ -71,7 +72,7 @@ const CopyToClipboard = ({
</>
)}
</div>
);
)
}
export default CopyToClipboard

11
new-lamassu-admin/src/styling/global/global.css
View file

@ -27,6 +27,10 @@
--neon: #5a67ff;
--malachite: #00CD5A;
--orange-yellow: #ffcc00;
--mont: 'Mont';
--museo: 'MuseoSans';
--bpmono: 'BPmono';
}
@theme {
@ -44,6 +48,13 @@
--color-neon: var(--neon);
--color-malachite: var(--malachite);
--color-orange-yellow: var(--orange-yellow);
--font-mont: var(--mont);
--font-museo: var(--museo);
--font-bpmono: var(--bpmono);
}
@utility col-span-all {
column-span: all;
}
body {