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