48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { OrderDetailsFragment } from "@dashboard/graphql";
|
|
import { transformOrderStatus } from "@dashboard/misc";
|
|
import { makeStyles, Pill } from "@saleor/macaw-ui";
|
|
import React from "react";
|
|
import { useIntl } from "react-intl";
|
|
|
|
export interface TitleProps {
|
|
order?: OrderDetailsFragment;
|
|
}
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
container: {
|
|
alignItems: "center",
|
|
display: "flex",
|
|
},
|
|
statusContainer: {
|
|
marginLeft: theme.spacing(2),
|
|
},
|
|
}),
|
|
{ name: "OrderDetailsTitle" },
|
|
);
|
|
|
|
const Title: React.FC<TitleProps> = props => {
|
|
const intl = useIntl();
|
|
const classes = useStyles(props);
|
|
const { order } = props;
|
|
|
|
if (!order) {
|
|
return null;
|
|
}
|
|
|
|
const { localized, status } = transformOrderStatus(order.status, intl);
|
|
|
|
return (
|
|
<div className={classes.container}>
|
|
{intl.formatMessage(
|
|
{ id: "AqXzM2", defaultMessage: "Order #{orderNumber}" },
|
|
{ orderNumber: order?.number },
|
|
)}
|
|
<div className={classes.statusContainer}>
|
|
<Pill label={localized} color={status} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Title;
|