Fix header

This commit is contained in:
dominik-zeglen 2019-11-12 13:27:40 +01:00
parent 4ab886a7ca
commit 0dfe0de548

View file

@ -3,21 +3,15 @@ import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import moment from "moment-timezone";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import Grid from "@saleor/components/Grid"; import Grid from "@saleor/components/Grid";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import Skeleton from "@saleor/components/Skeleton";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { CustomerDetails_user } from "../../types/CustomerDetails";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
cardTitle: {
height: 64
},
content: { content: {
paddingTop: theme.spacing(2) paddingTop: theme.spacing(2)
}, },
@ -29,8 +23,7 @@ const useStyles = makeStyles(theme => ({
} }
})); }));
export interface CustomerDetailsProps { export interface CustomerInfoProps {
customer: CustomerDetails_user;
data: { data: {
firstName: string; firstName: string;
lastName: string; lastName: string;
@ -45,8 +38,8 @@ export interface CustomerDetailsProps {
onChange: (event: React.ChangeEvent<any>) => void; onChange: (event: React.ChangeEvent<any>) => void;
} }
const CustomerDetails: React.FC<CustomerDetailsProps> = props => { const CustomerInfo: React.FC<CustomerInfoProps> = props => {
const { customer, data, disabled, errors, onChange } = props; const { data, disabled, errors, onChange } = props;
const classes = useStyles(props); const classes = useStyles(props);
const intl = useIntl(); const intl = useIntl();
@ -54,24 +47,11 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
return ( return (
<Card> <Card>
<CardTitle <CardTitle
className={classes.cardTitle}
title={ title={
<> <FormattedMessage
<FormattedMessage {...commonMessages.generalInformations} /> defaultMessage="Personal Informations"
{customer && customer.dateJoined ? ( description="customer informations, header"
<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}> <CardContent className={classes.content}>
@ -124,5 +104,5 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
</Card> </Card>
); );
}; };
CustomerDetails.displayName = "CustomerDetails"; CustomerInfo.displayName = "CustomerInfo";
export default CustomerDetails; export default CustomerInfo;