djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update customer note design

Browse source
This commit is contained in:
dominik-zeglen 2019-11-12 13:21:37 +01:00
parent 8170f9e14e
commit 4ab886a7ca
7 changed files with 171 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/CardTitle/CardTitle.tsx
View file

@ -23,6 +23,7 @@ const useStyles = makeStyles(theme => ({
}),
title: {
flex: 1,
fontWeight: 500,
lineHeight: 1
},
toolbar: {

5
src/components/ControlledCheckbox.tsx
View file

@ -4,6 +4,7 @@ import React from "react";
import Checkbox from "./Checkbox";
interface ControlledCheckboxProps {
className?: string;
name: string;
label?: React.ReactNode;
checked: boolean;
@ -16,7 +17,8 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
disabled,
name,
label,
onChange
onChange,
...props
}) => (
<FormControlLabel
disabled={disabled}
@ -29,6 +31,7 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
/>
}
label={label}
{...props}
/>
);
ControlledCheckbox.displayName = "ControlledCheckbox";

80
src/customers/components/CustomerDetails/CustomerDetails.tsx
View file

@ -9,39 +9,34 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
import { FormSpacer } from "@saleor/components/FormSpacer";
import Skeleton from "@saleor/components/Skeleton";
import { commonMessages } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { FormErrors } from "@saleor/types";
import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({
cardTitle: {
height: 64
height: 72
},
root: {
display: "grid" as "grid",
gridColumnGap: theme.spacing(2),
gridRowGap: theme.spacing(3),
gridTemplateColumns: "1fr 1fr"
checkbox: {
marginBottom: theme.spacing()
},
content: {
paddingTop: theme.spacing()
},
subtitle: {
marginTop: theme.spacing()
}
}));
export interface CustomerDetailsProps {
customer: CustomerDetails_user;
data: {
firstName: string;
lastName: string;
email: string;
isActive: boolean;
note: string;
};
disabled: boolean;
errors: {
firstName?: string;
lastName?: string;
email?: string;
note?: string;
};
errors: FormErrors<"isActive" | "note">;
onChange: (event: React.ChangeEvent<any>) => void;
}
@ -57,11 +52,15 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
className={classes.cardTitle}
title={
<>
<FormattedMessage {...commonMessages.generalInformations} />
{maybe<React.ReactNode>(() => customer.email, <Skeleton />)}
{customer && customer.dateJoined ? (
<Typography variant="caption" component="div">
<Typography
className={classes.subtitle}
variant="caption"
component="div"
>
<FormattedMessage
defaultMessage="Customer since: {date}"
defaultMessage="Active member since {date}"
description="section subheader"
values={{
date: moment(customer.dateJoined).format("MMM YYYY")
@ -74,9 +73,10 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
</>
}
/>
<CardContent>
<CardContent className={classes.content}>
<ControlledCheckbox
checked={data.isActive}
className={classes.checkbox}
disabled={disabled}
label={intl.formatMessage({
defaultMessage: "User account active",
@ -85,44 +85,6 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
name="isActive"
onChange={onChange}
/>
<FormSpacer />
<div className={classes.root}>
<TextField
disabled={disabled}
error={!!errors.firstName}
fullWidth
helperText={errors.firstName}
name="firstName"
type="text"
label={intl.formatMessage(commonMessages.firstName)}
value={data.firstName}
onChange={onChange}
/>
<TextField
disabled={disabled}
error={!!errors.lastName}
fullWidth
helperText={errors.lastName}
name="lastName"
type="text"
label={intl.formatMessage(commonMessages.lastName)}
value={data.lastName}
onChange={onChange}
/>
</div>
<FormSpacer />
<TextField
disabled={disabled}
error={!!errors.email}
fullWidth
helperText={errors.email}
name="email"
type="email"
label={intl.formatMessage(commonMessages.email)}
value={data.email}
onChange={onChange}
/>
<FormSpacer />
<TextField
disabled={disabled}
error={!!errors.note}

17
src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
View file

@ -13,10 +13,11 @@ import { sectionNames } from "@saleor/intl";
import { getUserName, maybe } from "../../../misc";
import { UserError } from "../../../types";
import { CustomerDetails_user } from "../../types/CustomerDetails";
import CustomerAddresses from "../CustomerAddresses/CustomerAddresses";
import CustomerDetails from "../CustomerDetails/CustomerDetails";
import CustomerOrders from "../CustomerOrders/CustomerOrders";
import CustomerStats from "../CustomerStats/CustomerStats";
import CustomerAddresses from "../CustomerAddresses";
import CustomerDetails from "../CustomerDetails";
import CustomerInfo from "../CustomerInfo";
import CustomerOrders from "../CustomerOrders";
import CustomerStats from "../CustomerStats";
export interface CustomerDetailsPageFormData {
firstName: string;
@ -82,6 +83,14 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
onChange={change}
/>
<CardSpacer />
<CustomerInfo
customer={customer}
data={data}
disabled={disabled}
errors={formErrors}
onChange={change}
/>
<CardSpacer />
<CustomerOrders
orders={maybe(() =>
customer.orders.edges.map(edge => edge.node)

128
src/customers/components/CustomerInfo/CustomerInfo.tsx Normal file
View file

@ -0,0 +1,128 @@
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import moment from "moment-timezone";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Grid from "@saleor/components/Grid";
import Hr from "@saleor/components/Hr";
import Skeleton from "@saleor/components/Skeleton";
import { commonMessages } from "@saleor/intl";
import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({
cardTitle: {
height: 64
},
content: {
paddingTop: theme.spacing(2)
},
hr: {
margin: theme.spacing(3, 0)
},
sectionHeader: {
marginBottom: theme.spacing()
}
}));
export interface CustomerDetailsProps {
customer: CustomerDetails_user;
data: {
firstName: string;
lastName: string;
email: string;
};
disabled: boolean;
errors: {
firstName?: string;
lastName?: string;
email?: string;
};
onChange: (event: React.ChangeEvent<any>) => void;
}
const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
const { customer, data, disabled, errors, onChange } = props;
const classes = useStyles(props);
const intl = useIntl();
return (
<Card>
<CardTitle
className={classes.cardTitle}
title={
<>
<FormattedMessage {...commonMessages.generalInformations} />
{customer && customer.dateJoined ? (
<Typography variant="caption" component="div">
<FormattedMessage
defaultMessage="Customer since: {date}"
description="section subheader"
values={{
date: moment(customer.dateJoined).format("MMM YYYY")
}}
/>
</Typography>
) : (
<Skeleton style={{ width: "10rem" }} />
)}
</>
}
/>
<CardContent className={classes.content}>
<Typography className={classes.sectionHeader}>
<FormattedMessage {...commonMessages.generalInformations} />
</Typography>
<Grid variant="uniform">
<TextField
disabled={disabled}
error={!!errors.firstName}
fullWidth
helperText={errors.firstName}
name="firstName"
type="text"
label={intl.formatMessage(commonMessages.firstName)}
value={data.firstName}
onChange={onChange}
/>
<TextField
disabled={disabled}
error={!!errors.lastName}
fullWidth
helperText={errors.lastName}
name="lastName"
type="text"
label={intl.formatMessage(commonMessages.lastName)}
value={data.lastName}
onChange={onChange}
/>
</Grid>
<Hr className={classes.hr} />
<Typography className={classes.sectionHeader}>
<FormattedMessage
defaultMessage="Contact Informations"
description="customer contact section, header"
/>
</Typography>
<TextField
disabled={disabled}
error={!!errors.email}
fullWidth
helperText={errors.email}
name="email"
type="email"
label={intl.formatMessage(commonMessages.email)}
value={data.email}
onChange={onChange}
/>
</CardContent>
</Card>
);
};
CustomerDetails.displayName = "CustomerDetails";
export default CustomerDetails;

2
src/customers/components/CustomerInfo/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./CustomerInfo";
export * from "./CustomerInfo";

4
src/theme.ts
View file

@ -397,12 +397,12 @@ export default (colors: IThemeColors): Theme =>
},
MuiTableCell: {
body: {
fontSize: ".875rem",
fontSize: "1rem",
paddingBottom: 8,
paddingTop: 8
},
head: {
fontSize: ".875rem"
fontSize: "1rem"
},
paddingCheckbox: {
"&:first-child": {