diff --git a/new-lamassu-admin/src/components/buttons/FeatureButton.js b/new-lamassu-admin/src/components/buttons/FeatureButton.js index 3fe97cd7..86a06c5e 100644 --- a/new-lamassu-admin/src/components/buttons/FeatureButton.js +++ b/new-lamassu-admin/src/components/buttons/FeatureButton.js @@ -32,8 +32,8 @@ const styles = { const useStyles = makeStyles(styles) const FeatureButton = memo( - ({ className, Icon, InverseIcon, children, ...props }) => { - const classes = useStyles() + ({ className, Icon, InverseIcon, children, active, ...props }) => { + const classes = useStyles({ active }) const classNames = { [classes.featureButton]: true, diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js index 931bbb31..efc19626 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js @@ -1,4 +1,4 @@ -import { Box, CardContent, Card } from '@material-ui/core' +import { CardContent, Card } from '@material-ui/core' import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' import moment from 'moment' @@ -6,17 +6,20 @@ import * as R from 'ramda' import { useState, React } from 'react' import { Tooltip } from 'src/components/Tooltip' -import { SubpageButton } from 'src/components/buttons' +import { FeatureButton } from 'src/components/buttons' +import { TextInput } from 'src/components/inputs/formik' import { H3 } from 'src/components/typography' import { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg' import { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg' -import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/disabled.svg' -import { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg' -import { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg' +import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/comet.svg' +import { ReactComponent as CustomerListViewReversedIcon } from 'src/styling/icons/circle buttons/customer-list-view/white.svg' +import { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg' +import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg' +import { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg' import { ifNotNull } from 'src/utils/nullCheck' import styles from './CustomerData.styles.js' -import { Field } from './components' +import { EditableCard } from './components' import { getName } from './helper.js' const useStyles = makeStyles(styles) @@ -31,49 +34,62 @@ const CustomerData = ({ customer, updateCustomer }) => { const nameElements = [ { - header: 'Name', - display: `${getName(customer)}`, + name: 'name', + label: 'Name', + value: `${getName(customer)}` ?? '', + component: TextInput, size: 190 } ] - const idScanElementsFirstRow = [ + const idScanElements = [ { - header: 'Name', - display: `${getName(customer)}`, + name: 'name', + label: 'Name', + value: `${getName(customer)}`, + component: TextInput, size: 190 }, { - header: 'ID number', - display: R.path(['documentNumber'])(idData), + name: 'ID number', + label: 'ID number', + value: R.path(['documentNumber'])(idData), + component: TextInput, size: 160 }, { - header: 'Age', - display: ifNotNull( + name: 'age', + label: 'Age', + value: ifNotNull( rawDob, moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-DD'), 'years') ), + component: TextInput, size: 50 - } - ] - const idScanElementsSecondRow = [ + }, { - header: 'Gender', - display: R.path(['gender'])(idData), + name: 'gender', + label: 'Gender', + value: R.path(['gender'])(idData), + component: TextInput, size: 80 }, { - header: country === 'Canada' ? 'Province' : 'State', - display: R.path(['state'])(idData), + name: country === 'Canada' ? 'province' : 'state', + label: country === 'Canada' ? 'Province' : 'State', + value: R.path(['state'])(idData), + component: TextInput, size: 120 }, { - header: 'Expiration Date', - display: ifNotNull( + name: 'expiration date', + label: 'Expiration Date', + value: ifNotNull( rawExpirationDate, moment.utc(rawExpirationDate).format('YYYY-MM-DD') - ) + ), + component: TextInput, + size: 120 } ] @@ -83,11 +99,20 @@ const CustomerData = ({ customer, updateCustomer }) => {

{'Customer data'}

- + setListView(false)} + variant="contained" + /> + setListView(true)}>
{listView &&

{''}

} @@ -101,16 +126,9 @@ const CustomerData = ({ customer, updateCustomer }) => {

{'Name'}

- - {nameElements.map(({ header, display, size }, idx) => ( - - ))} - + {}}> @@ -120,30 +138,9 @@ const CustomerData = ({ customer, updateCustomer }) => {

{'ID Scan'}

- - {idScanElementsFirstRow.map( - ({ header, display, size }, idx) => ( - - ) - )} - - - {idScanElementsSecondRow.map( - ({ header, display, size }, idx) => ( - - ) - )} - + {}}> diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js index dfc21176..47793122 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js @@ -6,7 +6,7 @@ export default { }, title: { marginTop: 7, - marginRight: 20 + marginRight: 24 }, leftSideCard: { borderRadius: 10, @@ -30,5 +30,8 @@ export default { }, cardTitle: { margin: [[8, 15, 15, 15]] + }, + viewIcons: { + marginRight: 12 } } diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js index dba6f870..1c2d6fe3 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js @@ -1,7 +1,6 @@ import { useQuery, useMutation } from '@apollo/react-hooks' import { makeStyles, Breadcrumbs, Box } from '@material-ui/core' import NavigateNextIcon from '@material-ui/icons/NavigateNext' -// import classnames from 'classnames' import gql from 'graphql-tag' import * as R from 'ramda' import React, { memo, useState } from 'react' @@ -17,6 +16,8 @@ import { ReactComponent as AuthorizeReversedIcon } from 'src/styling/icons/butto import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/zodiac.svg' import { ReactComponent as BlockReversedIcon } from 'src/styling/icons/button/block/white.svg' import { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/zodiac.svg' +import { ReactComponent as DiscountReversedIcon } from 'src/styling/icons/button/discount/white.svg' +import { ReactComponent as Discount } from 'src/styling/icons/button/discount/zodiac.svg' import { fromNamespace, namespaces } from 'src/utils/config' import CustomerData from './CustomerData' @@ -109,7 +110,6 @@ const SET_CUSTOMER = gql` ` const CustomerProfile = memo(() => { - const classes = useStyles() const history = useHistory() const [showCompliance, setShowCompliance] = useState(false) const [clickedItem, setClickedItem] = useState('overview') @@ -134,7 +134,7 @@ const CustomerProfile = memo(() => { } }) - const onClickSidebarItem = e => setClickedItem(e.code) + const onClickSidebarItem = code => setClickedItem(code) const configData = R.path(['config'])(customerResponse) ?? [] const locale = configData && fromNamespace(namespaces.LOCALE, configData) @@ -151,6 +151,8 @@ const CustomerProfile = memo(() => { const isCustomerData = clickedItem === 'customerData' const isOverview = clickedItem === 'overview' + const classes = useStyles({ blocked }) + return ( <> {
it.code === clickedItem} + isSelected={code => code === clickedItem} onClick={onClickSidebarItem} />
Actions +
+ {}}> + {`Add individual discount`} + +
{isSuspended && ( { {`Retrieve information`}
-
- {}}> - {`Add individual discount`} - -
)} diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js index 0bce506c..69094460 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js @@ -15,17 +15,17 @@ export default { customerDetails: { marginBottom: 18 }, - customerBlock: { - display: 'flex', - flexDirection: 'row', - margin: [[8, 0, 4, 0]], - padding: [[0, 35, 0]] - }, - customerDiscount: { + customerBlock: props => ({ display: 'flex', flexDirection: 'row', margin: [[0, 0, 4, 0]], - padding: [[0, 34, 0]] + padding: [[0, props.blocked ? 35 : 48, 0]] + }), + customerDiscount: { + display: 'flex', + flexDirection: 'row', + margin: [[8, 0, 4, 0]], + padding: [[0, 24, 0]] }, panels: { display: 'flex' diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.js b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.js index 87403d16..57c430ff 100644 --- a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.js +++ b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.js @@ -2,6 +2,11 @@ import { makeStyles } from '@material-ui/core/styles' import classnames from 'classnames' import React from 'react' +import { ReactComponent as CustomerDataReversedIcon } from 'src/styling/icons/customer-nav/data/comet.svg' +import { ReactComponent as CustomerDataIcon } from 'src/styling/icons/customer-nav/data/white.svg' +import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/customer-nav/overview/comet.svg' +import { ReactComponent as OverviewIcon } from 'src/styling/icons/customer-nav/overview/white.svg' + import styles from './CustomerSidebar.styles.js' const useStyles = makeStyles(styles) @@ -11,24 +16,31 @@ const CustomerSidebar = ({ isSelected, onClick }) => { const sideBarOptions = [ { code: 'overview', - display: 'Overview' + display: 'Overview', + Icon: OverviewIcon, + InverseIcon: OverviewReversedIcon }, { code: 'customerData', - display: 'Customer Data' + display: 'Customer Data', + Icon: CustomerDataIcon, + InverseIcon: CustomerDataReversedIcon } ] return (
- {sideBarOptions?.map(it => ( + {sideBarOptions?.map(({ Icon, InverseIcon, display, code }) => (
onClick(it)}> - {it.display} + onClick={() => onClick(code)}> +
+ {isSelected(code) ? : } +
+ {display}
))}
diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js index aa16e91a..f40f871a 100644 --- a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js +++ b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js @@ -15,6 +15,8 @@ export default { marginBottom: 50 }, link: { + alignItems: 'center', + display: 'flex', extend: p, position: 'relative', color: offDarkColor, @@ -22,6 +24,8 @@ export default { cursor: 'pointer' }, activeLink: { + display: 'flex', + alignItems: 'center', extend: tl2, color: white, backgroundColor: offDarkColor, @@ -31,5 +35,8 @@ export default { '&:last-child': { borderRadius: '0px 0px 5px 5px' } + }, + icon: { + marginRight: 15 } } diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js new file mode 100644 index 00000000..44959e17 --- /dev/null +++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js @@ -0,0 +1,159 @@ +import { makeStyles } from '@material-ui/core/styles' +import classnames from 'classnames' +import { Form, Formik, Field as FormikField } from 'formik' +import { useState, React } from 'react' + +import ErrorMessage from 'src/components/ErrorMessage' +import PromptWhenDirty from 'src/components/PromptWhenDirty' +import { ActionButton } from 'src/components/buttons' +import { Label1, Info3 } from 'src/components/typography' +import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg' +import { ReactComponent as EditReversedIcon } from 'src/styling/icons/action/edit/white.svg' +import { ReactComponent as AuthorizeReversedIcon } from 'src/styling/icons/button/authorize/white.svg' +import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/zodiac.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 { comet } from 'src/styling/variables' + +import styles from './EditableCard.styles.js' + +const useStyles = makeStyles(styles) + +const fieldStyles = { + field: { + position: 'relative', + width: 280, + height: 48, + padding: [[0, 4, 4, 0]] + }, + label: { + color: comet, + margin: [[0, 3]] + }, + 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: { + '& > input': { + padding: 0 + } + } +} + +const fieldUseStyles = makeStyles(fieldStyles) + +const EditableField = ({ editing, field, size, ...props }) => { + const classes = fieldUseStyles() + + const classNames = { + [classes.field]: true, + [classes.notEditing]: !editing + } + + return ( +
+ {!editing && ( + <> + {field.label} + {field.value} + + )} + {editing && ( + <> + {field.label} + + + )} +
+ ) +} + +const EditableCard = ({ data, save }) => { + const classes = useStyles() + + const [editing, setEditing] = useState(false) + const [error, setError] = useState(null) + + return ( +
+ save(values)} + onReset={() => { + setEditing(false) + setError(false) + }}> +
+ +
+ {data.map((field, idx) => ( + + ))} +
+
+ {!editing && ( +
+ setEditing(true)}> + {`Edit`} + +
+ )} + {editing && ( +
+
+ + Save + +
+ + Cancel + + {error && Failed to save changes} +
+ )} +
+ +
+
+ ) +} + +export default EditableCard diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js new file mode 100644 index 00000000..a59797a4 --- /dev/null +++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js @@ -0,0 +1,13 @@ +export default { + editButton: { + display: 'flex', + justifyContent: 'right' + }, + saveButton: { + marginRight: 12 + }, + editingButtons: { + display: 'flex', + justifyContent: 'right' + } +} diff --git a/new-lamassu-admin/src/pages/Customers/components/index.js b/new-lamassu-admin/src/pages/Customers/components/index.js index 82827400..65a03ca2 100644 --- a/new-lamassu-admin/src/pages/Customers/components/index.js +++ b/new-lamassu-admin/src/pages/Customers/components/index.js @@ -1,6 +1,7 @@ import ComplianceDetails from './ComplianceDetails' import CustomerDetails from './CustomerDetails' import CustomerSidebar from './CustomerSidebar' +import EditableCard from './EditableCard' import Field from './Field' import IdDataCard from './IdDataCard' import TransactionsList from './TransactionsList' @@ -11,5 +12,6 @@ export { TransactionsList, ComplianceDetails, CustomerSidebar, - Field + Field, + EditableCard } diff --git a/new-lamassu-admin/src/styling/icons/action/edit/comet.svg b/new-lamassu-admin/src/styling/icons/action/edit/comet.svg new file mode 100644 index 00000000..8b77414e --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/action/edit/comet.svg @@ -0,0 +1,9 @@ + + + + Created with Sketch. + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/discount/comet.svg b/new-lamassu-admin/src/styling/icons/button/discount/comet.svg new file mode 100644 index 00000000..ac2ab03c --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/discount/comet.svg @@ -0,0 +1,8 @@ + + + icon/button/loyalty/comet + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/discount/white.svg b/new-lamassu-admin/src/styling/icons/button/discount/white.svg new file mode 100644 index 00000000..538dc4f6 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/discount/white.svg @@ -0,0 +1,8 @@ + + + icon/button/loyalty/white + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/discount/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/discount/zodiac.svg new file mode 100644 index 00000000..e7a46dc3 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/discount/zodiac.svg @@ -0,0 +1,8 @@ + + + icon/button/loyalty/zodiac + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/white.svg b/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/white.svg new file mode 100644 index 00000000..f9188caa --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/white.svg @@ -0,0 +1,10 @@ + + + icon/sf-small/listing/white + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/zodiac.svg b/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/zodiac.svg new file mode 100644 index 00000000..b8aa5902 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/zodiac.svg @@ -0,0 +1,10 @@ + + + icon/sf-small/listing/zodiac + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/overview/comet.svg b/new-lamassu-admin/src/styling/icons/circle buttons/overview/comet.svg new file mode 100644 index 00000000..46a0342c --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/circle buttons/overview/comet.svg @@ -0,0 +1,10 @@ + + + icon/sf-small/overview/comet + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/overview/white.svg b/new-lamassu-admin/src/styling/icons/circle buttons/overview/white.svg new file mode 100644 index 00000000..3af8ca54 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/circle buttons/overview/white.svg @@ -0,0 +1,10 @@ + + + icon/sf-small/overview/white + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/overview/zodiac.svg b/new-lamassu-admin/src/styling/icons/circle buttons/overview/zodiac.svg new file mode 100644 index 00000000..112c8d25 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/circle buttons/overview/zodiac.svg @@ -0,0 +1,10 @@ + + + icon/sf-small/overview/zodiac + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/data/comet.svg b/new-lamassu-admin/src/styling/icons/customer-nav/data/comet.svg new file mode 100644 index 00000000..471c383b --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/customer-nav/data/comet.svg @@ -0,0 +1,9 @@ + + + icon/customer-nav/data/comet + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/data/white.svg b/new-lamassu-admin/src/styling/icons/customer-nav/data/white.svg new file mode 100644 index 00000000..20cf2885 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/customer-nav/data/white.svg @@ -0,0 +1,9 @@ + + + icon/customer-nav/data/white + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/data/zodiac.svg b/new-lamassu-admin/src/styling/icons/customer-nav/data/zodiac.svg new file mode 100644 index 00000000..ffc069f2 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/customer-nav/data/zodiac.svg @@ -0,0 +1,9 @@ + + + icon/customer-nav/data/zodiac + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/overview/comet.svg b/new-lamassu-admin/src/styling/icons/customer-nav/overview/comet.svg new file mode 100644 index 00000000..c0ef3b45 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/customer-nav/overview/comet.svg @@ -0,0 +1,10 @@ + + + icon/customer-nav/overview/comet + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/overview/white.svg b/new-lamassu-admin/src/styling/icons/customer-nav/overview/white.svg new file mode 100644 index 00000000..87c8dc82 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/customer-nav/overview/white.svg @@ -0,0 +1,10 @@ + + + icon/customer-nav/overview/white + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/overview/zodiac.svg b/new-lamassu-admin/src/styling/icons/customer-nav/overview/zodiac.svg new file mode 100644 index 00000000..9e2819a5 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/customer-nav/overview/zodiac.svg @@ -0,0 +1,10 @@ + + + icon/customer-nav/overview/zodiac + + + + + + + \ No newline at end of file