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

Fix font in customer history login data (#3669)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-05-22 11:12:20 +02:00 committed by GitHub
parent 2f4b822acb
commit 1b278c170a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/customers/components/CustomerStats/CustomerStats.tsx
View file

@ -1,69 +1,54 @@
import CardTitle from "@dashboard/components/CardTitle";
import { DashboardCard } from "@dashboard/components/Card";
import { DateTime } from "@dashboard/components/Date";
import { Hr } from "@dashboard/components/Hr";
import RequirePermissions from "@dashboard/components/RequirePermissions";
import Skeleton from "@dashboard/components/Skeleton";
import { CustomerDetailsQuery, PermissionEnum } from "@dashboard/graphql";
import { Card, CardContent, Typography } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import { Divider, Text } from "@saleor/macaw-ui/next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
const useStyles = makeStyles(
theme => ({
label: {
marginBottom: theme.spacing(1),
},
value: {
fontSize: 24,
},
}),
{ name: "CustomerStats" },
);
export interface CustomerStatsProps {
customer: CustomerDetailsQuery["user"];
}
const CustomerStats: React.FC<CustomerStatsProps> = props => {
const { customer } = props;
const classes = useStyles(props);
const intl = useIntl();
return (
<Card>
<CardTitle
title={intl.formatMessage({
<DashboardCard>
<DashboardCard.Title>
{intl.formatMessage({
id: "e7Nyu7",
defaultMessage: "Customer History",
description: "section header",
})}
/>
<CardContent>
<Typography className={classes.label} variant="caption">
</DashboardCard.Title>
<DashboardCard.Content display="flex" flexDirection="column">
<Text variant="caption">
<FormattedMessage id="FNAZoh" defaultMessage="Last login" />
</Typography>
</Text>
{customer ? (
<Typography variant="h6" className={classes.value}>
<Text>
{customer.lastLogin === null ? (
"-"
) : (
<DateTime date={customer.lastLogin} plain />
)}
</Typography>
</Text>
) : (
<Skeleton />
)}
</CardContent>
</DashboardCard.Content>
<RequirePermissions requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}>
<Hr />
<CardContent>
<Typography className={classes.label} variant="caption">
<Divider />
<DashboardCard.Content display="flex" flexDirection="column">
<Text variant="caption">
<FormattedMessage id="HMD+ib" defaultMessage="Last order" />
</Typography>
</Text>
{customer && customer.lastPlacedOrder ? (
<Typography variant="h6" className={classes.value}>
<Text>
{customer.lastPlacedOrder.edges.length === 0 ? (
"-"
) : (
@ -72,13 +57,13 @@ const CustomerStats: React.FC<CustomerStatsProps> = props => {
plain
/>
)}
</Typography>
</Text>
) : (
<Skeleton />
)}
</CardContent>
</DashboardCard.Content>
</RequirePermissions>
</Card>
</DashboardCard>
);
};
CustomerStats.displayName = "CustomerStats";