116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
|
import Button from "@material-ui/core/Button";
|
||
|
|
import Card from "@material-ui/core/Card";
|
||
|
|
import CardActions from "@material-ui/core/CardActions";
|
||
|
|
import CardContent from "@material-ui/core/CardContent";
|
||
|
|
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
|
||
|
|
import Typography from "@material-ui/core/Typography";
|
||
|
|
import * as React from "react";
|
||
|
|
|
||
|
|
import AddressFormatter from "@saleor/components/AddressFormatter";
|
||
|
|
import CardMenu from "@saleor/components/CardMenu";
|
||
|
|
import CardTitle from "@saleor/components/CardTitle";
|
||
|
|
import Skeleton from "@saleor/components/Skeleton";
|
||
|
|
import i18n from "../../../i18n";
|
||
|
|
import { AddressTypeEnum } from "../../../types/globalTypes";
|
||
|
|
import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses";
|
||
|
|
|
||
|
|
export interface CustomerAddressProps {
|
||
|
|
address: CustomerAddresses_user_addresses;
|
||
|
|
disabled: boolean;
|
||
|
|
isDefaultBillingAddress: boolean;
|
||
|
|
isDefaultShippingAddress: boolean;
|
||
|
|
addressNumber: number;
|
||
|
|
onEdit: () => void;
|
||
|
|
onRemove: () => void;
|
||
|
|
onSetAsDefault: (type: AddressTypeEnum) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = createStyles({
|
||
|
|
actions: {
|
||
|
|
flexDirection: "row"
|
||
|
|
},
|
||
|
|
actionsContainer: {
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
height: "100%",
|
||
|
|
justifyContent: "flex-end"
|
||
|
|
},
|
||
|
|
card: {
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const CustomerAddress = withStyles(styles, { name: "CustomerAddress" })(
|
||
|
|
({
|
||
|
|
address,
|
||
|
|
addressNumber,
|
||
|
|
classes,
|
||
|
|
disabled,
|
||
|
|
isDefaultBillingAddress,
|
||
|
|
isDefaultShippingAddress,
|
||
|
|
onEdit,
|
||
|
|
onRemove,
|
||
|
|
onSetAsDefault
|
||
|
|
}: CustomerAddressProps & WithStyles<typeof styles>) => (
|
||
|
|
<Card className={classes.card}>
|
||
|
|
<CardTitle
|
||
|
|
title={
|
||
|
|
address ? (
|
||
|
|
<>
|
||
|
|
{i18n.t("Address {{ addressNumber }}", {
|
||
|
|
addressNumber
|
||
|
|
})}
|
||
|
|
<Typography variant="caption">
|
||
|
|
{isDefaultBillingAddress && isDefaultShippingAddress
|
||
|
|
? i18n.t("Default Address")
|
||
|
|
: isDefaultShippingAddress
|
||
|
|
? i18n.t("Default Shipping Address")
|
||
|
|
: isDefaultBillingAddress
|
||
|
|
? i18n.t("Default Billing Address")
|
||
|
|
: null}
|
||
|
|
</Typography>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<Skeleton />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
height="const"
|
||
|
|
toolbar={
|
||
|
|
<CardMenu
|
||
|
|
disabled={disabled}
|
||
|
|
menuItems={[
|
||
|
|
{
|
||
|
|
label: i18n.t("Set as default shipping address", {
|
||
|
|
context: "button"
|
||
|
|
}),
|
||
|
|
onSelect: () => onSetAsDefault(AddressTypeEnum.SHIPPING)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: i18n.t("Set as default billing address", {
|
||
|
|
context: "button"
|
||
|
|
}),
|
||
|
|
onSelect: () => onSetAsDefault(AddressTypeEnum.BILLING)
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<CardContent>
|
||
|
|
<AddressFormatter address={address} />
|
||
|
|
</CardContent>
|
||
|
|
<div className={classes.actionsContainer}>
|
||
|
|
<CardActions className={classes.actions}>
|
||
|
|
<Button color="primary" disabled={disabled} onClick={onEdit}>
|
||
|
|
{i18n.t("Edit")}
|
||
|
|
</Button>
|
||
|
|
<Button color="primary" disabled={disabled} onClick={onRemove}>
|
||
|
|
{i18n.t("Delete")}
|
||
|
|
</Button>
|
||
|
|
</CardActions>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
CustomerAddress.displayName = "CustomerAddress";
|
||
|
|
export default CustomerAddress;
|