Refactor order section translations (#123)
* Refactor translations in order section * Ensure ID uniqueness * Update pot file
This commit is contained in:
Dominik Żegleń
dominik-zeglen
parent
f78e5aea31
commit
3d2d56e227
36 changed files with 3045 additions and 1001 deletions
1546
locale/messages.pot
1546
locale/messages.pot
File diff suppressed because it is too large
Load diff
36
src/intl.ts
36
src/intl.ts
|
|
@ -50,45 +50,41 @@ export const commonMessages = defineMessages({
|
|||
});
|
||||
|
||||
export const buttonMessages = defineMessages({
|
||||
back: {
|
||||
defaultMessage: "Back",
|
||||
description: "button"
|
||||
},
|
||||
cancel: {
|
||||
defaultMessage: "Cancel",
|
||||
description: "button",
|
||||
id: "cancel"
|
||||
description: "button"
|
||||
},
|
||||
confirm: {
|
||||
defaultMessage: "Confirm",
|
||||
description: "button",
|
||||
id: "confirm"
|
||||
description: "button"
|
||||
},
|
||||
edit: {
|
||||
defaultMessage: "Edit",
|
||||
description: "button",
|
||||
id: "edit"
|
||||
description: "button"
|
||||
},
|
||||
manage: {
|
||||
defaultMessage: "Manage",
|
||||
description: "button",
|
||||
id: "manage"
|
||||
description: "button"
|
||||
},
|
||||
remove: {
|
||||
defaultMessage: "Remove",
|
||||
description: "button",
|
||||
id: "remove"
|
||||
description: "button"
|
||||
},
|
||||
save: {
|
||||
defaultMessage: "Save",
|
||||
description: "button",
|
||||
id: "save"
|
||||
description: "button"
|
||||
},
|
||||
show: {
|
||||
defaultMessage: "Show",
|
||||
description: "button",
|
||||
id: "show"
|
||||
description: "button"
|
||||
},
|
||||
undo: {
|
||||
defaultMessage: "Undo",
|
||||
description: "button",
|
||||
id: "undo"
|
||||
description: "button"
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -113,10 +109,18 @@ export const sectionNames = defineMessages({
|
|||
defaultMessage: "Customers",
|
||||
description: "customers section name"
|
||||
},
|
||||
draftOrders: {
|
||||
defaultMessage: "Draft Orders",
|
||||
description: "draft orders section name"
|
||||
},
|
||||
navigation: {
|
||||
defaultMessage: "Navigation",
|
||||
description: "navigation section name"
|
||||
},
|
||||
orders: {
|
||||
defaultMessage: "Orders",
|
||||
description: "orders section name"
|
||||
},
|
||||
pages: {
|
||||
defaultMessage: "Pages",
|
||||
description: "pages section name"
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import DialogContent from "@material-ui/core/DialogContent";
|
|||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import AddressEdit from "@saleor/components/AddressEdit";
|
||||
import ConfirmButton, {
|
||||
|
|
@ -12,10 +13,10 @@ import ConfirmButton, {
|
|||
} from "@saleor/components/ConfirmButton";
|
||||
import Form from "@saleor/components/Form";
|
||||
import useStateFromProps from "@saleor/hooks/useStateFromProps";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import { maybe } from "@saleor/misc";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import { AddressTypeInput } from "../../../customers/types";
|
||||
import i18n from "../../../i18n";
|
||||
import { UserError } from "../../../types";
|
||||
|
||||
const styles = createStyles({
|
||||
|
|
@ -52,6 +53,7 @@ const OrderAddressEditDialog = withStyles(styles, {
|
|||
onClose,
|
||||
onConfirm
|
||||
}: OrderAddressEditDialogProps) => {
|
||||
const intl = useIntl();
|
||||
const [countryDisplayName, setCountryDisplayName] = useStateFromProps(
|
||||
maybe(
|
||||
() => countries.find(country => address.country === country.code).label
|
||||
|
|
@ -80,8 +82,14 @@ const OrderAddressEditDialog = withStyles(styles, {
|
|||
<>
|
||||
<DialogTitle>
|
||||
{variant === "billing"
|
||||
? i18n.t("Edit billing address", { context: "title" })
|
||||
: i18n.t("Edit shipping address", { context: "title" })}
|
||||
? intl.formatMessage({
|
||||
defaultMessage: "Edit billing address",
|
||||
description: "dialog header"
|
||||
})
|
||||
: intl.formatMessage({
|
||||
defaultMessage: "Edit shipping address",
|
||||
description: "dialog header"
|
||||
})}
|
||||
</DialogTitle>
|
||||
<DialogContent className={classes.overflow}>
|
||||
<AddressEdit
|
||||
|
|
@ -95,7 +103,7 @@ const OrderAddressEditDialog = withStyles(styles, {
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Cancel", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.cancel} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -104,7 +112,7 @@ const OrderAddressEditDialog = withStyles(styles, {
|
|||
onClick={submit}
|
||||
type="submit"
|
||||
>
|
||||
{i18n.t("Confirm", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.confirm} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import DialogContentText from "@material-ui/core/DialogContentText";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ActionDialog from "@saleor/components/ActionDialog";
|
||||
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
|
||||
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
|
||||
import i18n from "../../../i18n";
|
||||
|
||||
export interface OrderBulkCancelDialogProps {
|
||||
confirmButtonState: ConfirmButtonTransitionState;
|
||||
|
|
@ -17,6 +17,7 @@ export interface OrderBulkCancelDialogProps {
|
|||
const OrderBulkCancelDialog: React.StatelessComponent<
|
||||
OrderBulkCancelDialogProps
|
||||
> = ({ confirmButtonState, numberOfOrders, open, onClose, onConfirm }) => {
|
||||
const intl = useIntl();
|
||||
const [restock, setRestock] = React.useState(true);
|
||||
|
||||
return (
|
||||
|
|
@ -24,23 +25,31 @@ const OrderBulkCancelDialog: React.StatelessComponent<
|
|||
confirmButtonState={confirmButtonState}
|
||||
open={open}
|
||||
variant="delete"
|
||||
title={i18n.t("Cancel Orders")}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Cancel Orders",
|
||||
description: "dialog header"
|
||||
})}
|
||||
onClose={onClose}
|
||||
onConfirm={() => onConfirm(restock)}
|
||||
>
|
||||
<DialogContentText
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: i18n.t(
|
||||
"Are you sure you want to cancel <strong>{{ number }}</strong> orders?",
|
||||
{
|
||||
number: numberOfOrders
|
||||
}
|
||||
)
|
||||
<DialogContentText>
|
||||
<FormattedMessage
|
||||
defaultMessage="Are you sure you want to cancel {counter, plural,
|
||||
one {this order}
|
||||
other {{displayQuantity} orders}
|
||||
}?"
|
||||
values={{
|
||||
counter: numberOfOrders,
|
||||
displayQuantity: <strong>{numberOfOrders}</strong>
|
||||
}}
|
||||
/>
|
||||
</DialogContentText>
|
||||
<ControlledCheckbox
|
||||
checked={restock}
|
||||
label={i18n.t("Release all stock allocated to these orders")}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Release all stock allocated to these orders",
|
||||
description: "switch button"
|
||||
})}
|
||||
name="restock"
|
||||
onChange={event => setRestock(event.target.value)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,14 @@ import {
|
|||
WithStyles
|
||||
} from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
|
||||
import Form from "@saleor/components/Form";
|
||||
import i18n from "../../../i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
|
||||
export interface FormData {
|
||||
restock: boolean;
|
||||
|
|
@ -50,7 +51,10 @@ const OrderCancelDialog = withStyles(styles, { name: "OrderCancelDialog" })(
|
|||
open,
|
||||
onSubmit,
|
||||
onClose
|
||||
}: OrderCancelDialogProps) => (
|
||||
}: OrderCancelDialogProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open}>
|
||||
<Form
|
||||
initial={{
|
||||
|
|
@ -62,27 +66,34 @@ const OrderCancelDialog = withStyles(styles, { name: "OrderCancelDialog" })(
|
|||
return (
|
||||
<>
|
||||
<DialogTitle>
|
||||
{i18n.t("Cancel order", { context: "title" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Cancel order"
|
||||
description="dialog header"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: i18n.t(
|
||||
"Are you sure you want to cancel order <strong>{{ orderNumber }}</strong>?",
|
||||
{ orderNumber }
|
||||
)
|
||||
<DialogContentText>
|
||||
<FormattedMessage
|
||||
defaultMessage="Are you sure you want to cancel order #{orderNumber}?"
|
||||
values={{
|
||||
orderNumber
|
||||
}}
|
||||
/>
|
||||
<ControlledCheckbox
|
||||
checked={data.restock}
|
||||
label={i18n.t("Release all stock allocated to this order")}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Release all stock allocated to this order",
|
||||
description: "switch button"
|
||||
})}
|
||||
name="restock"
|
||||
onChange={change}
|
||||
/>
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Back", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.back} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -90,7 +101,7 @@ const OrderCancelDialog = withStyles(styles, { name: "OrderCancelDialog" })(
|
|||
variant="contained"
|
||||
type="submit"
|
||||
>
|
||||
{i18n.t("Cancel order", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.cancel} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
|
|
@ -98,7 +109,8 @@ const OrderCancelDialog = withStyles(styles, { name: "OrderCancelDialog" })(
|
|||
}}
|
||||
</Form>
|
||||
</Dialog>
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
OrderCancelDialog.displayName = "OrderCancelDialog";
|
||||
export default OrderCancelDialog;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
} from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import CardTitle from "@saleor/components/CardTitle";
|
||||
import ExternalLink from "@saleor/components/ExternalLink";
|
||||
|
|
@ -18,10 +19,10 @@ import Link from "@saleor/components/Link";
|
|||
import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import useStateFromProps from "@saleor/hooks/useStateFromProps";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import { SearchCustomers_customers_edges_node } from "../../../containers/SearchCustomers/types/SearchCustomers";
|
||||
import { customerUrl } from "../../../customers/urls";
|
||||
import i18n from "../../../i18n";
|
||||
import { createHref, maybe } from "../../../misc";
|
||||
import { OrderDetails_order } from "../../types/OrderDetails";
|
||||
|
||||
|
|
@ -74,6 +75,8 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
onProfileView,
|
||||
onShippingAddressEdit
|
||||
}: OrderCustomerProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const user = maybe(() => order.user);
|
||||
|
||||
const [userDisplayName, setUserDisplayName] = useStateFromProps(
|
||||
|
|
@ -88,7 +91,10 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
return (
|
||||
<Card>
|
||||
<CardTitle
|
||||
title={i18n.t("Customer")}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Customer",
|
||||
description: "section header"
|
||||
})}
|
||||
toolbar={
|
||||
!!canEditCustomer && (
|
||||
<Button
|
||||
|
|
@ -97,7 +103,7 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
disabled={!onCustomerEdit}
|
||||
onClick={toggleEditMode}
|
||||
>
|
||||
{i18n.t("Edit")}
|
||||
{intl.formatMessage(buttonMessages.edit)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
|
@ -133,7 +139,9 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
displayValue={userDisplayName}
|
||||
fetchChoices={fetchUsers}
|
||||
loading={loading}
|
||||
placeholder={i18n.t("Search Customers")}
|
||||
placeholder={intl.formatMessage({
|
||||
defaultMessage: "Search Customers"
|
||||
})}
|
||||
onChange={handleUserChange}
|
||||
name="query"
|
||||
value={data.query}
|
||||
|
|
@ -142,7 +150,9 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
}}
|
||||
</Form>
|
||||
) : user === null ? (
|
||||
<Typography>{i18n.t("Anonymous user")}</Typography>
|
||||
<Typography>
|
||||
<FormattedMessage defaultMessage="Anonymous user" />
|
||||
</Typography>
|
||||
) : (
|
||||
<>
|
||||
<Typography className={classes.userEmail}>
|
||||
|
|
@ -154,13 +164,20 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
href={createHref(customerUrl(user.id))}
|
||||
onClick={onProfileView}
|
||||
>
|
||||
{i18n.t("View Profile")}
|
||||
<FormattedMessage
|
||||
defaultMessage="View Profile"
|
||||
description="link"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
{/* TODO: Uncomment it after adding ability to filter
|
||||
orders by customer */}
|
||||
{/* <div>
|
||||
<Link underline={false} href={}>{i18n.t("View Orders")}</Link>
|
||||
<Link underline={false} href={}>
|
||||
<FormattedMessage defaultMessage="View Orders"
|
||||
description="link"
|
||||
/>
|
||||
</Link>
|
||||
</div> */}
|
||||
</>
|
||||
)}
|
||||
|
|
@ -169,14 +186,23 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
<CardContent>
|
||||
<div className={classes.sectionHeader}>
|
||||
<Typography className={classes.sectionHeaderTitle}>
|
||||
{i18n.t("Contact information")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Contact information"
|
||||
description="subheader"
|
||||
/>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{maybe(() => order.userEmail) === undefined ? (
|
||||
<Skeleton />
|
||||
) : order.userEmail === null ? (
|
||||
<Typography>{i18n.t("Not set")}</Typography>
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="Not set"
|
||||
description="customer is not set in draft order"
|
||||
id="orderCustomerCustomerNotSet"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<ExternalLink
|
||||
href={`mailto:${maybe(() => order.userEmail)}`}
|
||||
|
|
@ -190,7 +216,7 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
<CardContent>
|
||||
<div className={classes.sectionHeader}>
|
||||
<Typography className={classes.sectionHeaderTitle}>
|
||||
{i18n.t("Shipping Address")}
|
||||
<FormattedMessage defaultMessage="Shipping Address" />
|
||||
</Typography>
|
||||
{canEditAddresses && (
|
||||
<div className={classes.sectionHeaderToolbar}>
|
||||
|
|
@ -200,7 +226,7 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
onClick={onShippingAddressEdit}
|
||||
disabled={!onShippingAddressEdit && user === undefined}
|
||||
>
|
||||
{i18n.t("Edit")}
|
||||
<FormattedMessage {...buttonMessages.edit} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -208,7 +234,13 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
{shippingAddress === undefined ? (
|
||||
<Skeleton />
|
||||
) : shippingAddress === null ? (
|
||||
<Typography>{i18n.t("Not set")}</Typography>
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="Not set"
|
||||
description="shipping address is not set in draft order"
|
||||
id="orderCustomerShippingAddressNotSet"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<>
|
||||
{shippingAddress.companyName && (
|
||||
|
|
@ -243,7 +275,7 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
<CardContent>
|
||||
<div className={classes.sectionHeader}>
|
||||
<Typography className={classes.sectionHeaderTitle}>
|
||||
{i18n.t("Billing Address")}
|
||||
<FormattedMessage defaultMessage="Billing Address" />
|
||||
</Typography>
|
||||
{canEditAddresses && (
|
||||
<div className={classes.sectionHeaderToolbar}>
|
||||
|
|
@ -253,7 +285,7 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
onClick={onBillingAddressEdit}
|
||||
disabled={!onBillingAddressEdit && user === undefined}
|
||||
>
|
||||
{i18n.t("Edit")}
|
||||
<FormattedMessage {...buttonMessages.edit} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -261,9 +293,20 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })(
|
|||
{billingAddress === undefined ? (
|
||||
<Skeleton />
|
||||
) : billingAddress === null ? (
|
||||
<Typography>{i18n.t("Not set")}</Typography>
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="Not set"
|
||||
description="no address is set in draft order"
|
||||
id="orderCustomerBillingAddressNotSet"
|
||||
/>
|
||||
</Typography>
|
||||
) : maybe(() => shippingAddress.id) === billingAddress.id ? (
|
||||
<Typography>{i18n.t("Same as shipping address")}</Typography>
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="Same as shipping address"
|
||||
description="billing address"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<>
|
||||
{billingAddress.companyName && (
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@ import {
|
|||
WithStyles
|
||||
} from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import { SingleAutocompleteSelectField } from "@saleor/components/SingleAutocompleteSelectField";
|
||||
import i18n from "../../../i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
|
|
@ -76,7 +77,12 @@ const OrderCustomerEditDialog = withStyles(styles, {
|
|||
: [];
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open} classes={{ paper: classes.dialog }}>
|
||||
<DialogTitle>{i18n.t("Edit customer details")}</DialogTitle>
|
||||
<DialogTitle>
|
||||
<FormattedMessage
|
||||
defaultMessage="Edit customer details"
|
||||
description="dialog header"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<DialogContent className={classes.root}>
|
||||
<SingleAutocompleteSelectField
|
||||
choices={choices}
|
||||
|
|
@ -91,7 +97,7 @@ const OrderCustomerEditDialog = withStyles(styles, {
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Cancel", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.cancel} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -99,7 +105,7 @@ const OrderCustomerEditDialog = withStyles(styles, {
|
|||
variant="contained"
|
||||
onClick={onConfirm}
|
||||
>
|
||||
{i18n.t("Confirm", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.confirm} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import Card from "@material-ui/core/Card";
|
|||
import CardContent from "@material-ui/core/CardContent";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import CardTitle from "@saleor/components/CardTitle";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import i18n from "../../../i18n";
|
||||
|
||||
interface OrderCustomerNoteProps {
|
||||
note: string;
|
||||
|
|
@ -13,11 +13,15 @@ interface OrderCustomerNoteProps {
|
|||
|
||||
export const OrderCustomerNote: React.StatelessComponent<
|
||||
OrderCustomerNoteProps
|
||||
> = ({ note }) => (
|
||||
> = ({ note }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardTitle
|
||||
title={i18n.t("Notes", {
|
||||
context: "customer notes"
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Notes",
|
||||
description: "notes about customer, header"
|
||||
})}
|
||||
/>
|
||||
<CardContent>
|
||||
|
|
@ -25,7 +29,7 @@ export const OrderCustomerNote: React.StatelessComponent<
|
|||
<Skeleton />
|
||||
) : note === "" ? (
|
||||
<Typography color="textSecondary">
|
||||
{i18n.t("No notes from customer")}
|
||||
<FormattedMessage defaultMessage="No notes from customer" />
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography>{note}</Typography>
|
||||
|
|
@ -33,4 +37,5 @@ export const OrderCustomerNote: React.StatelessComponent<
|
|||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
export default OrderCustomerNote;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
} from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import AppHeader from "@saleor/components/AppHeader";
|
||||
import CardMenu from "@saleor/components/CardMenu";
|
||||
|
|
@ -15,7 +16,7 @@ import { DateTime } from "@saleor/components/Date";
|
|||
import Grid from "@saleor/components/Grid";
|
||||
import PageHeader from "@saleor/components/PageHeader";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import i18n from "../../../i18n";
|
||||
import { sectionNames } from "@saleor/intl";
|
||||
import { maybe, renderCollection } from "../../../misc";
|
||||
import { OrderStatus } from "../../../types/globalTypes";
|
||||
import { OrderDetails_order } from "../../types/OrderDetails";
|
||||
|
|
@ -81,6 +82,8 @@ const OrderDetailsPage = withStyles(styles, { name: "OrderDetailsPage" })(
|
|||
onShippingAddressEdit,
|
||||
onProfileView
|
||||
}: OrderDetailsPageProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const canCancel = maybe(() => order.status) !== OrderStatus.CANCELED;
|
||||
const canEditAddresses = maybe(() => order.status) !== OrderStatus.CANCELED;
|
||||
const canFulfill = maybe(() => order.status) !== OrderStatus.CANCELED;
|
||||
|
|
@ -90,7 +93,9 @@ const OrderDetailsPage = withStyles(styles, { name: "OrderDetailsPage" })(
|
|||
|
||||
return (
|
||||
<Container>
|
||||
<AppHeader onBack={onBack}>{i18n.t("Orders")}</AppHeader>
|
||||
<AppHeader onBack={onBack}>
|
||||
{intl.formatMessage(sectionNames.orders)}
|
||||
</AppHeader>
|
||||
<PageHeader
|
||||
className={classes.header}
|
||||
title={maybe(() => order.number) ? "#" + order.number : undefined}
|
||||
|
|
@ -99,7 +104,10 @@ const OrderDetailsPage = withStyles(styles, { name: "OrderDetailsPage" })(
|
|||
<CardMenu
|
||||
menuItems={[
|
||||
{
|
||||
label: i18n.t("Cancel order", { context: "button" }),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Cancel order",
|
||||
description: "button"
|
||||
}),
|
||||
onSelect: onOrderCancel
|
||||
}
|
||||
]}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import DialogContentText from "@material-ui/core/DialogContentText";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ActionDialog from "@saleor/components/ActionDialog";
|
||||
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
|
||||
import i18n from "../../../i18n";
|
||||
|
||||
export interface OrderDraftCancelDialogProps {
|
||||
confirmButtonState: ConfirmButtonTransitionState;
|
||||
|
|
@ -15,29 +15,31 @@ export interface OrderDraftCancelDialogProps {
|
|||
|
||||
const OrderDraftCancelDialog: React.StatelessComponent<
|
||||
OrderDraftCancelDialogProps
|
||||
> = ({ confirmButtonState, onClose, onConfirm, open, orderNumber }) => (
|
||||
> = ({ confirmButtonState, onClose, onConfirm, open, orderNumber }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<ActionDialog
|
||||
confirmButtonState={confirmButtonState}
|
||||
onClose={onClose}
|
||||
onConfirm={onConfirm}
|
||||
open={open}
|
||||
title={i18n.t("Remove draft order", {
|
||||
context: "modal title"
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Remove draft order",
|
||||
description: "dialog header"
|
||||
})}
|
||||
variant="delete"
|
||||
>
|
||||
<DialogContentText
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: i18n.t(
|
||||
"Are you sure you want to remove draft <strong>#{{ number }}</strong>?",
|
||||
{
|
||||
context: "modal",
|
||||
number: orderNumber
|
||||
}
|
||||
)
|
||||
<DialogContentText>
|
||||
<FormattedMessage
|
||||
defaultMessage="Are you sure you want to remove draft #{number}?"
|
||||
values={{
|
||||
orderNumber
|
||||
}}
|
||||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
);
|
||||
};
|
||||
OrderDraftCancelDialog.displayName = "OrderDraftCancelDialog";
|
||||
export default OrderDraftCancelDialog;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import Button from "@material-ui/core/Button";
|
|||
import Card from "@material-ui/core/Card";
|
||||
import CardContent from "@material-ui/core/CardContent";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import CardTitle from "@saleor/components/CardTitle";
|
||||
import i18n from "../../../i18n";
|
||||
import { maybe } from "../../../misc";
|
||||
import { OrderDetails_order } from "../../types/OrderDetails";
|
||||
import OrderDraftDetailsProducts, {
|
||||
|
|
@ -29,17 +29,22 @@ const OrderDraftDetails: React.StatelessComponent<OrderDraftDetailsProps> = ({
|
|||
onOrderLineChange,
|
||||
onOrderLineRemove,
|
||||
onShippingMethodEdit
|
||||
}) => (
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardTitle
|
||||
title={i18n.t("Order details", {
|
||||
context: "card title"
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Order Details",
|
||||
description: "section header"
|
||||
})}
|
||||
toolbar={
|
||||
<Button color="primary" variant="text" onClick={onOrderLineAdd}>
|
||||
{i18n.t("Add products", {
|
||||
context: "button"
|
||||
})}
|
||||
<FormattedMessage
|
||||
defaultMessage="Add products"
|
||||
description="button"
|
||||
/>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
|
@ -58,5 +63,6 @@ const OrderDraftDetails: React.StatelessComponent<OrderDraftDetailsProps> = ({
|
|||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
OrderDraftDetails.displayName = "OrderDraftDetails";
|
||||
export default OrderDraftDetails;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import TextField from "@material-ui/core/TextField";
|
|||
import Typography from "@material-ui/core/Typography";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import { DebounceForm } from "@saleor/components/DebounceForm";
|
||||
import Form from "@saleor/components/Form";
|
||||
|
|
@ -22,7 +23,6 @@ import Skeleton from "@saleor/components/Skeleton";
|
|||
import TableCellAvatar, {
|
||||
AVATAR_MARGIN
|
||||
} from "@saleor/components/TableCellAvatar";
|
||||
import i18n from "../../../i18n";
|
||||
import { maybe, renderCollection } from "../../../misc";
|
||||
import { OrderDetails_order_lines } from "../../types/OrderDetails";
|
||||
|
||||
|
|
@ -89,17 +89,26 @@ const OrderDraftDetailsProducts = withStyles(styles, {
|
|||
<TableRow>
|
||||
<TableCell className={classes.colName}>
|
||||
<span className={classes.colNameLabel}>
|
||||
{i18n.t("Product", { context: "table header" })}
|
||||
<FormattedMessage defaultMessage="Product" />
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colQuantity}>
|
||||
{i18n.t("Quantity", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Quantity"
|
||||
description="quantity of ordered products"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colPrice}>
|
||||
{i18n.t("Price", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Price"
|
||||
description="price or ordered products"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colTotal}>
|
||||
{i18n.t("Total", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Total"
|
||||
description="total price of ordered products"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colAction} />
|
||||
</TableRow>
|
||||
|
|
@ -109,7 +118,7 @@ const OrderDraftDetailsProducts = withStyles(styles, {
|
|||
{maybe(() => lines.length) === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5}>
|
||||
{i18n.t("No Products added to Order")}
|
||||
<FormattedMessage defaultMessage="No Products added to Order" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ import {
|
|||
WithStyles
|
||||
} from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import Link from "@saleor/components/Link";
|
||||
import Money from "@saleor/components/Money";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import i18n from "../../../i18n";
|
||||
import { maybe } from "../../../misc";
|
||||
import { OrderDetails_order } from "../../types/OrderDetails";
|
||||
|
||||
|
|
@ -39,7 +39,12 @@ const OrderDraftDetailsSummary = withStyles(styles, {
|
|||
<tr>
|
||||
{maybe(() => order.subtotal) ? (
|
||||
<>
|
||||
<td>{i18n.t("Subtotal")}</td>
|
||||
<td>
|
||||
<FormattedMessage
|
||||
defaultMessage="Subtotal"
|
||||
description="subtotal price or an order"
|
||||
/>
|
||||
</td>
|
||||
<td className={classes.textRight}>
|
||||
<Money money={order.subtotal.gross} />
|
||||
</td>
|
||||
|
|
@ -59,11 +64,16 @@ const OrderDraftDetailsSummary = withStyles(styles, {
|
|||
order.availableShippingMethods.length > 0 ? (
|
||||
<td>
|
||||
<Link onClick={onShippingMethodEdit}>
|
||||
{i18n.t("Add shipping carrier")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Add shipping carrier"
|
||||
description="button"
|
||||
/>
|
||||
</Link>
|
||||
</td>
|
||||
) : (
|
||||
<td>{i18n.t("No applicable shipping carriers")}</td>
|
||||
<td>
|
||||
<FormattedMessage defaultMessage="No applicable shipping carriers" />
|
||||
</td>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
|
|
@ -90,7 +100,9 @@ const OrderDraftDetailsSummary = withStyles(styles, {
|
|||
<tr>
|
||||
{maybe(() => order.total.tax) !== undefined ? (
|
||||
<>
|
||||
<td>{i18n.t("Taxes (VAT included)")}</td>
|
||||
<td>
|
||||
<FormattedMessage defaultMessage="Taxes (VAT included)" />
|
||||
</td>
|
||||
<td className={classes.textRight}>
|
||||
<Money money={order.total.tax} />
|
||||
</td>
|
||||
|
|
@ -104,7 +116,12 @@ const OrderDraftDetailsSummary = withStyles(styles, {
|
|||
<tr>
|
||||
{maybe(() => order.total.gross) !== undefined ? (
|
||||
<>
|
||||
<td>{i18n.t("Total")}</td>
|
||||
<td>
|
||||
<FormattedMessage
|
||||
defaultMessage="Total"
|
||||
description="total price of an order"
|
||||
/>
|
||||
</td>
|
||||
<td className={classes.textRight}>
|
||||
<Money money={order.total.gross} />
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import DialogContentText from "@material-ui/core/DialogContentText";
|
||||
import React from "react";
|
||||
import { FormattedMessage, IntlShape, useIntl } from "react-intl";
|
||||
|
||||
import ActionDialog from "@saleor/components/ActionDialog";
|
||||
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
|
||||
import i18n from "../../../i18n";
|
||||
|
||||
export type OrderDraftFinalizeWarning =
|
||||
| "no-shipping"
|
||||
|
|
@ -21,18 +21,28 @@ export interface OrderDraftFinalizeDialogProps {
|
|||
onConfirm: () => void;
|
||||
}
|
||||
|
||||
const warningToText = (warning: OrderDraftFinalizeWarning) => {
|
||||
const warningToText = (warning: OrderDraftFinalizeWarning, intl: IntlShape) => {
|
||||
switch (warning) {
|
||||
case "no-shipping":
|
||||
return i18n.t("No shipping address");
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "No shipping address"
|
||||
});
|
||||
case "no-billing":
|
||||
return i18n.t("No billing address");
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "No billing address"
|
||||
});
|
||||
case "no-user":
|
||||
return i18n.t("No user information");
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "No user information"
|
||||
});
|
||||
case "no-shipping-method":
|
||||
return i18n.t("Some products require shipping, but no method provided");
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Some products require shipping, but no method provided"
|
||||
});
|
||||
case "unnecessary-shipping-method":
|
||||
return i18n.t("Shipping method provided, but no product requires it");
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Shipping method provided, but no product requires it"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -45,16 +55,28 @@ const OrderDraftFinalizeDialog: React.StatelessComponent<
|
|||
onClose,
|
||||
onConfirm,
|
||||
orderNumber
|
||||
}) => (
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<ActionDialog
|
||||
onClose={onClose}
|
||||
onConfirm={onConfirm}
|
||||
open={open}
|
||||
title={i18n.t("Finalize draft order", {
|
||||
context: "modal title"
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Finalize draft order",
|
||||
description: "dialog header"
|
||||
})}
|
||||
confirmButtonLabel={
|
||||
warnings.length > 0 ? i18n.t("Finalize anyway") : i18n.t("Finalize")
|
||||
warnings.length > 0
|
||||
? intl.formatMessage({
|
||||
defaultMessage: "Finalize anyway",
|
||||
description: "button"
|
||||
})
|
||||
: intl.formatMessage({
|
||||
defaultMessage: "Finalize",
|
||||
description: "button"
|
||||
})
|
||||
}
|
||||
confirmButtonState={confirmButtonState}
|
||||
variant={warnings.length > 0 ? "delete" : "default"}
|
||||
|
|
@ -63,30 +85,24 @@ const OrderDraftFinalizeDialog: React.StatelessComponent<
|
|||
{warnings.length > 0 && (
|
||||
<>
|
||||
<p>
|
||||
{i18n.t(
|
||||
"There are missing or incorrect informations about this order:"
|
||||
)}
|
||||
<FormattedMessage defaultMessage="There are missing or incorrect informations about this order:" />
|
||||
</p>
|
||||
<ul>
|
||||
{warnings.map(warning => (
|
||||
<li key={warning}>{warningToText(warning)}</li>
|
||||
<li key={warning}>{warningToText(warning, intl)}</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: i18n.t(
|
||||
"Are you sure you want to finalize draft <strong>#{{ number }}</strong>?",
|
||||
{
|
||||
context: "modal",
|
||||
number: orderNumber
|
||||
}
|
||||
)
|
||||
<FormattedMessage
|
||||
defaultMessage="Are you sure you want to finalize draft #{number}?"
|
||||
values={{
|
||||
orderNumber
|
||||
}}
|
||||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
);
|
||||
};
|
||||
OrderDraftFinalizeDialog.displayName = "OrderDraftFinalize";
|
||||
export default OrderDraftFinalizeDialog;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import TableCell from "@material-ui/core/TableCell";
|
|||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import Checkbox from "@saleor/components/Checkbox";
|
||||
import { DateTime } from "@saleor/components/Date";
|
||||
|
|
@ -17,7 +18,6 @@ import Money from "@saleor/components/Money";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import i18n from "@saleor/i18n";
|
||||
import {
|
||||
maybe,
|
||||
renderCollection,
|
||||
|
|
@ -85,6 +85,7 @@ export const OrderDraftList = withStyles(styles, { name: "OrderDraftList" })(
|
|||
status: transformOrderStatus(order.status)
|
||||
}))
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<Table>
|
||||
<TableHead
|
||||
|
|
@ -96,16 +97,22 @@ export const OrderDraftList = withStyles(styles, { name: "OrderDraftList" })(
|
|||
toolbar={toolbar}
|
||||
>
|
||||
<TableCell padding="dense" className={classes.colNumber}>
|
||||
{i18n.t("No. of Order", { context: "table header" })}
|
||||
<FormattedMessage defaultMessage="No. of Order" />
|
||||
</TableCell>
|
||||
<TableCell padding="dense" className={classes.colDate}>
|
||||
{i18n.t("Date", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Date"
|
||||
description="order draft creation date"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell padding="dense" className={classes.colCustomer}>
|
||||
{i18n.t("Customer", { context: "table header" })}
|
||||
<FormattedMessage defaultMessage="Customer" />
|
||||
</TableCell>
|
||||
<TableCell className={classes.colTotal} padding="dense">
|
||||
{i18n.t("Total", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Total"
|
||||
description="order draft total price"
|
||||
/>
|
||||
</TableCell>
|
||||
</TableHead>
|
||||
<TableFooter>
|
||||
|
|
@ -185,7 +192,7 @@ export const OrderDraftList = withStyles(styles, { name: "OrderDraftList" })(
|
|||
() => (
|
||||
<TableRow>
|
||||
<TableCell colSpan={numberOfColumns}>
|
||||
{i18n.t("No orders found")}
|
||||
<FormattedMessage defaultMessage="No draft orders found" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@ import Button from "@material-ui/core/Button";
|
|||
import Card from "@material-ui/core/Card";
|
||||
import AddIcon from "@material-ui/icons/Add";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import Container from "@saleor/components/Container";
|
||||
import PageHeader from "@saleor/components/PageHeader";
|
||||
import i18n from "@saleor/i18n";
|
||||
import { sectionNames } from "@saleor/intl";
|
||||
import { ListActions, PageListProps } from "@saleor/types";
|
||||
import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList";
|
||||
import OrderDraftList from "../OrderDraftList";
|
||||
|
|
@ -18,16 +19,23 @@ const OrderDraftListPage: React.StatelessComponent<OrderDraftListPageProps> = ({
|
|||
disabled,
|
||||
onAdd,
|
||||
...listProps
|
||||
}) => (
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<PageHeader title={i18n.t("Draft Orders")}>
|
||||
<PageHeader title={intl.formatMessage(sectionNames.draftOrders)}>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
disabled={disabled}
|
||||
onClick={onAdd}
|
||||
>
|
||||
{i18n.t("Create order", { context: "button" })} <AddIcon />
|
||||
<FormattedMessage
|
||||
defaultMessage="Create order"
|
||||
description="button"
|
||||
/>
|
||||
<AddIcon />
|
||||
</Button>
|
||||
</PageHeader>
|
||||
<Card>
|
||||
|
|
@ -35,5 +43,6 @@ const OrderDraftListPage: React.StatelessComponent<OrderDraftListPageProps> = ({
|
|||
</Card>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
OrderDraftListPage.displayName = "OrderDraftListPage";
|
||||
export default OrderDraftListPage;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
} from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import AppHeader from "@saleor/components/AppHeader";
|
||||
import CardMenu from "@saleor/components/CardMenu";
|
||||
|
|
@ -16,8 +17,8 @@ import Grid from "@saleor/components/Grid";
|
|||
import PageHeader from "@saleor/components/PageHeader";
|
||||
import SaveButtonBar from "@saleor/components/SaveButtonBar";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import { sectionNames } from "@saleor/intl";
|
||||
import { SearchCustomers_customers_edges_node } from "../../../containers/SearchCustomers/types/SearchCustomers";
|
||||
import i18n from "../../../i18n";
|
||||
import { maybe } from "../../../misc";
|
||||
import { DraftOrderInput } from "../../../types/globalTypes";
|
||||
import { OrderDetails_order } from "../../types/OrderDetails";
|
||||
|
|
@ -87,9 +88,14 @@ const OrderDraftPage = withStyles(styles, { name: "OrderDraftPage" })(
|
|||
order,
|
||||
users,
|
||||
usersLoading
|
||||
}: OrderDraftPageProps) => (
|
||||
}: OrderDraftPageProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<AppHeader onBack={onBack}>{i18n.t("Orders")}</AppHeader>
|
||||
<AppHeader onBack={onBack}>
|
||||
{intl.formatMessage(sectionNames.draftOrders)}
|
||||
</AppHeader>
|
||||
<PageHeader
|
||||
className={classes.header}
|
||||
title={maybe(() => order.number) ? "#" + order.number : undefined}
|
||||
|
|
@ -97,7 +103,10 @@ const OrderDraftPage = withStyles(styles, { name: "OrderDraftPage" })(
|
|||
<CardMenu
|
||||
menuItems={[
|
||||
{
|
||||
label: i18n.t("Cancel order", { context: "button" }),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Cancel order",
|
||||
description: "button"
|
||||
}),
|
||||
onSelect: onDraftRemove
|
||||
}
|
||||
]}
|
||||
|
|
@ -146,10 +155,16 @@ const OrderDraftPage = withStyles(styles, { name: "OrderDraftPage" })(
|
|||
disabled={disabled || !maybe(() => order.canFinalize)}
|
||||
onCancel={onBack}
|
||||
onSave={onDraftFinalize}
|
||||
labels={{ save: i18n.t("Finalize", { context: "button" }) }}
|
||||
labels={{
|
||||
save: intl.formatMessage({
|
||||
defaultMessage: "Finalize",
|
||||
description: "button"
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</Container>
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
OrderDraftPage.displayName = "OrderDraftPage";
|
||||
export default OrderDraftPage;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import TableHead from "@material-ui/core/TableHead";
|
|||
import TableRow from "@material-ui/core/TableRow";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import CardMenu from "@saleor/components/CardMenu";
|
||||
import CardTitle from "@saleor/components/CardTitle";
|
||||
|
|
@ -23,7 +24,6 @@ import StatusLabel from "@saleor/components/StatusLabel";
|
|||
import TableCellAvatar, {
|
||||
AVATAR_MARGIN
|
||||
} from "@saleor/components/TableCellAvatar";
|
||||
import i18n from "../../../i18n";
|
||||
import { maybe, renderCollection } from "../../../misc";
|
||||
import { FulfillmentStatus } from "../../../types/globalTypes";
|
||||
import { OrderDetails_order_fulfillments } from "../../types/OrderDetails";
|
||||
|
|
@ -81,8 +81,14 @@ const OrderFulfillment = withStyles(styles, { name: "OrderFulfillment" })(
|
|||
onOrderFulfillmentCancel,
|
||||
onTrackingCodeAdd
|
||||
}: OrderFulfillmentProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const lines = maybe(() => fulfillment.lines);
|
||||
const status = maybe(() => fulfillment.status);
|
||||
const quantity = lines
|
||||
.map(line => line.quantity)
|
||||
.reduce((prev, curr) => prev + curr, 0);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardTitle
|
||||
|
|
@ -92,16 +98,24 @@ const OrderFulfillment = withStyles(styles, { name: "OrderFulfillment" })(
|
|||
label={
|
||||
<>
|
||||
{status === FulfillmentStatus.FULFILLED
|
||||
? i18n.t("Fulfilled ({{ quantity }})", {
|
||||
quantity: lines
|
||||
.map(line => line.quantity)
|
||||
.reduce((prev, curr) => prev + curr, 0)
|
||||
})
|
||||
: i18n.t("Cancelled ({{ quantity }})", {
|
||||
quantity: lines
|
||||
.map(line => line.quantity)
|
||||
.reduce((prev, curr) => prev + curr, 0)
|
||||
})}
|
||||
? intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Fulfilled ({quantity})",
|
||||
description: "section header"
|
||||
},
|
||||
{
|
||||
quantity
|
||||
}
|
||||
)
|
||||
: intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Fulfilled ({quantity})",
|
||||
description: "section header"
|
||||
},
|
||||
{
|
||||
quantity
|
||||
}
|
||||
)}
|
||||
<Typography className={classes.orderNumber} variant="body2">
|
||||
{maybe(
|
||||
() => `#${orderNumber}-${fulfillment.fulfillmentOrder}`
|
||||
|
|
@ -122,8 +136,9 @@ const OrderFulfillment = withStyles(styles, { name: "OrderFulfillment" })(
|
|||
<CardMenu
|
||||
menuItems={[
|
||||
{
|
||||
label: i18n.t("Cancel shipment", {
|
||||
context: "button"
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Cancel shipment",
|
||||
description: "button"
|
||||
}),
|
||||
onSelect: onOrderFulfillmentCancel
|
||||
}
|
||||
|
|
@ -137,17 +152,29 @@ const OrderFulfillment = withStyles(styles, { name: "OrderFulfillment" })(
|
|||
<TableRow>
|
||||
<TableCell className={classes.colName}>
|
||||
<span className={classes.colNameLabel}>
|
||||
{i18n.t("Product")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Product"
|
||||
description="product name"
|
||||
/>
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colQuantity}>
|
||||
{i18n.t("Quantity")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Quantity"
|
||||
description="ordered product quantity"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colPrice}>
|
||||
{i18n.t("Price")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Price"
|
||||
description="product price"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colTotal}>
|
||||
{i18n.t("Total")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Total"
|
||||
description="order line total price"
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
@ -194,9 +221,12 @@ const OrderFulfillment = withStyles(styles, { name: "OrderFulfillment" })(
|
|||
{maybe(() => fulfillment.trackingNumber) && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={numberOfColumns}>
|
||||
{i18n.t("Tracking Number: {{ trackingNumber }}", {
|
||||
<FormattedMessage
|
||||
defaultMessage="Tracking Number: {trackingNumber}"
|
||||
values={{
|
||||
trackingNumber: fulfillment.trackingNumber
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
|
|
@ -205,7 +235,10 @@ const OrderFulfillment = withStyles(styles, { name: "OrderFulfillment" })(
|
|||
{status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && (
|
||||
<CardActions>
|
||||
<Button color="primary" onClick={onTrackingCodeAdd}>
|
||||
{i18n.t("Add tracking")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Add tracking"
|
||||
description="fulfillment group tracking number"
|
||||
/>
|
||||
</Button>
|
||||
</CardActions>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,14 @@ import {
|
|||
WithStyles
|
||||
} from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
|
||||
import Form from "@saleor/components/Form";
|
||||
import i18n from "../../../i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
|
||||
export interface FormData {
|
||||
restock: boolean;
|
||||
|
|
@ -50,28 +51,37 @@ const OrderFulfillmentCancelDialog = withStyles(styles, {
|
|||
open,
|
||||
onConfirm,
|
||||
onClose
|
||||
}: OrderFulfillmentCancelDialogProps) => (
|
||||
}: OrderFulfillmentCancelDialogProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open}>
|
||||
<Form initial={{ restock: true }} onSubmit={onConfirm}>
|
||||
{({ change, data, submit }) => (
|
||||
<>
|
||||
<DialogTitle>
|
||||
{i18n.t("Cancel fulfillment", { context: "title" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Cancel Fulfillment"
|
||||
description="dialog header"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
{i18n.t("Are you sure you want to cancel this fulfillment?")}
|
||||
<FormattedMessage defaultMessage="Are you sure you want to cancel this fulfillment?" />
|
||||
</DialogContentText>
|
||||
<ControlledCheckbox
|
||||
checked={data.restock}
|
||||
label={i18n.t("Restock items?")}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Restock items?",
|
||||
description: "switch button"
|
||||
})}
|
||||
name="restock"
|
||||
onChange={change}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Back", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.back} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -79,14 +89,18 @@ const OrderFulfillmentCancelDialog = withStyles(styles, {
|
|||
variant="contained"
|
||||
onClick={submit}
|
||||
>
|
||||
{i18n.t("Cancel fulfillment", { context: "button" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Cancel fulfillment"
|
||||
description="button"
|
||||
/>
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
</Dialog>
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
OrderFulfillmentCancelDialog.displayName = "OrderFulfillmentCancelDialog";
|
||||
export default OrderFulfillmentCancelDialog;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import TableHead from "@material-ui/core/TableHead";
|
|||
import TableRow from "@material-ui/core/TableRow";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
|
|
@ -25,7 +26,7 @@ import { FormSpacer } from "@saleor/components/FormSpacer";
|
|||
import TableCellAvatar, {
|
||||
AVATAR_MARGIN
|
||||
} from "@saleor/components/TableCellAvatar";
|
||||
import i18n from "../../../i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import { maybe } from "../../../misc";
|
||||
import { OrderDetails_order_lines } from "../../types/OrderDetails";
|
||||
|
||||
|
|
@ -83,7 +84,10 @@ const OrderFulfillmentDialog = withStyles(styles, {
|
|||
lines,
|
||||
onClose,
|
||||
onSubmit
|
||||
}: OrderFulfillmentDialogProps) => (
|
||||
}: OrderFulfillmentDialogProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open}>
|
||||
<Form
|
||||
initial={{
|
||||
|
|
@ -114,20 +118,31 @@ const OrderFulfillmentDialog = withStyles(styles, {
|
|||
};
|
||||
return (
|
||||
<>
|
||||
<DialogTitle>{i18n.t("Fulfill products")}</DialogTitle>
|
||||
<DialogTitle>
|
||||
<FormattedMessage
|
||||
defaultMessage="Fulfill products"
|
||||
description="dialog header"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<Table className={classes.table}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell className={classes.colName}>
|
||||
<span className={classes.colNameLabel}>
|
||||
{i18n.t("Product name")}
|
||||
<FormattedMessage defaultMessage="Product name" />
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colSku}>
|
||||
{i18n.t("SKU")}
|
||||
<FormattedMessage
|
||||
defaultMessage="SKU"
|
||||
description="product's sku"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colQuantity}>
|
||||
{i18n.t("Quantity")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Quantity"
|
||||
description="quantity of fulfilled products"
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
@ -177,7 +192,10 @@ const OrderFulfillmentDialog = withStyles(styles, {
|
|||
<FormSpacer />
|
||||
<TextField
|
||||
fullWidth
|
||||
label={i18n.t("Tracking number")}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Tracking number",
|
||||
description: "fulfillment group"
|
||||
})}
|
||||
name="trackingNumber"
|
||||
value={data.trackingNumber}
|
||||
onChange={change}
|
||||
|
|
@ -185,7 +203,7 @@ const OrderFulfillmentDialog = withStyles(styles, {
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Cancel", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.cancel} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -193,7 +211,7 @@ const OrderFulfillmentDialog = withStyles(styles, {
|
|||
variant="contained"
|
||||
type="submit"
|
||||
>
|
||||
{i18n.t("Confirm", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.confirm} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
|
|
@ -201,7 +219,8 @@ const OrderFulfillmentDialog = withStyles(styles, {
|
|||
}}
|
||||
</Form>
|
||||
</Dialog>
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
OrderFulfillmentDialog.displayName = "OrderFulfillmentDialog";
|
||||
export default OrderFulfillmentDialog;
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@ import DialogContent from "@material-ui/core/DialogContent";
|
|||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import Form from "@saleor/components/Form";
|
||||
import i18n from "../../../i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
|
||||
export interface FormData {
|
||||
trackingNumber: string;
|
||||
|
|
@ -26,17 +27,25 @@ interface OrderFulfillmentTrackingDialogProps {
|
|||
|
||||
const OrderFulfillmentTrackingDialog: React.StatelessComponent<
|
||||
OrderFulfillmentTrackingDialogProps
|
||||
> = ({ confirmButtonState, open, trackingNumber, onConfirm, onClose }) => (
|
||||
> = ({ confirmButtonState, open, trackingNumber, onConfirm, onClose }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open}>
|
||||
<Form initial={{ trackingNumber }} onSubmit={onConfirm}>
|
||||
{({ change, data, submit }) => (
|
||||
<>
|
||||
<DialogTitle>
|
||||
{i18n.t("Add tracking code", { context: "title" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Add tracking code"
|
||||
description="dialog header"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
label={i18n.t("Tracking number")}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Tracking number"
|
||||
})}
|
||||
name="trackingNumber"
|
||||
onChange={change}
|
||||
value={data.trackingNumber}
|
||||
|
|
@ -45,7 +54,7 @@ const OrderFulfillmentTrackingDialog: React.StatelessComponent<
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Cancel", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.cancel} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -53,7 +62,7 @@ const OrderFulfillmentTrackingDialog: React.StatelessComponent<
|
|||
variant="contained"
|
||||
onClick={submit}
|
||||
>
|
||||
{i18n.t("Confirm", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.confirm} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
|
|
@ -61,5 +70,6 @@ const OrderFulfillmentTrackingDialog: React.StatelessComponent<
|
|||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
OrderFulfillmentTrackingDialog.displayName = "OrderFulfillmentTrackingDialog";
|
||||
export default OrderFulfillmentTrackingDialog;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
} from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import React from "react";
|
||||
import { FormattedMessage, IntlShape, useIntl } from "react-intl";
|
||||
|
||||
import Form from "@saleor/components/Form";
|
||||
import Hr from "@saleor/components/Hr";
|
||||
|
|
@ -16,7 +17,6 @@ import {
|
|||
TimelineEvent,
|
||||
TimelineNote
|
||||
} from "@saleor/components/Timeline";
|
||||
import i18n from "../../../i18n";
|
||||
import {
|
||||
OrderEventsEmailsEnum,
|
||||
OrderEventsEnum
|
||||
|
|
@ -27,115 +27,152 @@ export interface FormData {
|
|||
message: string;
|
||||
}
|
||||
|
||||
const getEventMessage = (event: OrderDetails_order_events) => {
|
||||
const getEventMessage = (event: OrderDetails_order_events, intl: IntlShape) => {
|
||||
switch (event.type) {
|
||||
case OrderEventsEnum.CANCELED:
|
||||
return i18n.t("Order was cancelled", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Order was cancelled",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.DRAFT_ADDED_PRODUCTS:
|
||||
return i18n.t("Products were added to draft order", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Products were added to draft order",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.DRAFT_CREATED:
|
||||
return i18n.t("Draft order was created", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Draft order was created",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.DRAFT_REMOVED_PRODUCTS:
|
||||
return i18n.t("Products were removed from draft order", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Products were removed from draft order",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.EMAIL_SENT:
|
||||
switch (event.emailType) {
|
||||
case OrderEventsEmailsEnum.DIGITAL_LINKS:
|
||||
return i18n.t("Links to the order's digital goods were sent", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Links to the order's digital goods were sent",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEmailsEnum.FULFILLMENT_CONFIRMATION:
|
||||
return i18n.t("Fulfillment confirmation was sent to customer", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Fulfillment confirmation was sent to customer",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEmailsEnum.ORDER_CONFIRMATION:
|
||||
return i18n.t("Order confirmation was sent to customer", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Order confirmation was sent to customer",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEmailsEnum.PAYMENT_CONFIRMATION:
|
||||
return i18n.t("Payment confirmation was sent to customer", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Payment confirmation was sent to customer",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEmailsEnum.SHIPPING_CONFIRMATION:
|
||||
return i18n.t("Shipping details was sent to customer", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Shipping details was sent to customer",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEmailsEnum.TRACKING_UPDATED:
|
||||
return i18n.t("Shipping tracking number was sent to customer", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Shipping tracking number was sent to customer",
|
||||
description: "order history message"
|
||||
});
|
||||
}
|
||||
case OrderEventsEnum.FULFILLMENT_CANCELED:
|
||||
return i18n.t("Fulfillment was cancelled", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Fulfillment was cancelled",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.FULFILLMENT_FULFILLED_ITEMS:
|
||||
return i18n.t("Fulfilled {{ quantity }} items", {
|
||||
context: "order history message",
|
||||
return intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Fulfilled {quantity} items",
|
||||
description: "order history message"
|
||||
},
|
||||
{
|
||||
quantity: event.quantity
|
||||
});
|
||||
}
|
||||
);
|
||||
case OrderEventsEnum.FULFILLMENT_RESTOCKED_ITEMS:
|
||||
return i18n.t("Restocked {{ quantity }} items", {
|
||||
context: "order history message",
|
||||
return intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Restocked {quantity} items",
|
||||
description: "order history message"
|
||||
},
|
||||
{
|
||||
quantity: event.quantity
|
||||
});
|
||||
}
|
||||
);
|
||||
case OrderEventsEnum.NOTE_ADDED:
|
||||
return i18n.t("Note was added to the order", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Note was added to the order",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.ORDER_FULLY_PAID:
|
||||
return i18n.t("Order was fully paid", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Order was fully paid",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.ORDER_MARKED_AS_PAID:
|
||||
return i18n.t("Marked order as paid", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Marked order as paid",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.OTHER:
|
||||
return event.message;
|
||||
case OrderEventsEnum.OVERSOLD_ITEMS:
|
||||
return i18n.t("Oversold {{ quantity }} items", {
|
||||
context: "order history message",
|
||||
return intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Oversold {quantity} items",
|
||||
description: "order history message"
|
||||
},
|
||||
{
|
||||
quantity: event.quantity
|
||||
});
|
||||
}
|
||||
);
|
||||
case OrderEventsEnum.PAYMENT_CAPTURED:
|
||||
return i18n.t("Payment was captured", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Payment was captured",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.PAYMENT_FAILED:
|
||||
return i18n.t("Payment failed", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Payment failed",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.PAYMENT_REFUNDED:
|
||||
return i18n.t("Payment was refunded", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Payment was refunded",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.PAYMENT_VOIDED:
|
||||
return i18n.t("Payment was voided", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Payment was voided",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.PLACED:
|
||||
return i18n.t("Order was placed", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Order was placed",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.PLACED_FROM_DRAFT:
|
||||
return i18n.t("Order was created from draft", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Order was created from draft",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.TRACKING_UPDATED:
|
||||
return i18n.t("Updated fulfillment group's tracking number", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Updated fulfillment group's tracking number",
|
||||
description: "order history message"
|
||||
});
|
||||
case OrderEventsEnum.UPDATED_ADDRESS:
|
||||
return i18n.t("Order address was updated", {
|
||||
context: "order history message"
|
||||
return intl.formatMessage({
|
||||
defaultMessage: "Order address was updated",
|
||||
description: "order history message"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -158,10 +195,13 @@ interface OrderHistoryProps extends WithStyles<typeof styles> {
|
|||
}
|
||||
|
||||
const OrderHistory = withStyles(styles, { name: "OrderHistory" })(
|
||||
({ classes, history, onNoteAdd }: OrderHistoryProps) => (
|
||||
({ classes, history, onNoteAdd }: OrderHistoryProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Typography className={classes.header} color="textSecondary">
|
||||
{i18n.t("Order History")}
|
||||
<FormattedMessage defaultMessage="Order History" />
|
||||
</Typography>
|
||||
<Hr />
|
||||
{history ? (
|
||||
|
|
@ -192,7 +232,7 @@ const OrderHistory = withStyles(styles, { name: "OrderHistory" })(
|
|||
return (
|
||||
<TimelineEvent
|
||||
date={event.date}
|
||||
title={getEventMessage(event)}
|
||||
title={getEventMessage(event, intl)}
|
||||
key={event.id}
|
||||
/>
|
||||
);
|
||||
|
|
@ -202,7 +242,8 @@ const OrderHistory = withStyles(styles, { name: "OrderHistory" })(
|
|||
<Skeleton />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
OrderHistory.displayName = "OrderHistory";
|
||||
export default OrderHistory;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import TableCell from "@material-ui/core/TableCell";
|
|||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import Checkbox from "@saleor/components/Checkbox";
|
||||
import { DateTime } from "@saleor/components/Date";
|
||||
|
|
@ -18,7 +19,6 @@ import Skeleton from "@saleor/components/Skeleton";
|
|||
import StatusLabel from "@saleor/components/StatusLabel";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import i18n from "@saleor/i18n";
|
||||
import {
|
||||
maybe,
|
||||
renderCollection,
|
||||
|
|
@ -103,22 +103,34 @@ export const OrderList = withStyles(styles, { name: "OrderList" })(
|
|||
toolbar={toolbar}
|
||||
>
|
||||
<TableCell padding="dense" className={classes.colNumber}>
|
||||
{i18n.t("No. of Order", { context: "table header" })}
|
||||
<FormattedMessage defaultMessage="No. of Order" />
|
||||
</TableCell>
|
||||
<TableCell padding="dense" className={classes.colDate}>
|
||||
{i18n.t("Date", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Date"
|
||||
description="date when order was placed"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell padding="dense" className={classes.colCustomer}>
|
||||
{i18n.t("Customer", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Customer"
|
||||
description="e-mail or full name"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell padding="dense" className={classes.colPayment}>
|
||||
{i18n.t("Payment", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Payment"
|
||||
description="payment status"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell padding="dense" className={classes.colFulfillment}>
|
||||
{i18n.t("Fulfillment status", { context: "table header" })}
|
||||
<FormattedMessage defaultMessage="Fulfillment status" />
|
||||
</TableCell>
|
||||
<TableCell className={classes.colTotal} padding="dense">
|
||||
{i18n.t("Total", { context: "table header" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Total"
|
||||
description="total order price"
|
||||
/>
|
||||
</TableCell>
|
||||
</TableHead>
|
||||
<TableFooter>
|
||||
|
|
@ -220,7 +232,7 @@ export const OrderList = withStyles(styles, { name: "OrderList" })(
|
|||
() => (
|
||||
<TableRow>
|
||||
<TableCell colSpan={numberOfColumns}>
|
||||
{i18n.t("No orders found")}
|
||||
<FormattedMessage defaultMessage="No orders found" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import moment from "moment-timezone";
|
||||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import { DateContext } from "@saleor/components/Date/DateContext";
|
||||
import { FieldType, IFilter } from "@saleor/components/Filter";
|
||||
import FilterBar from "@saleor/components/FilterBar";
|
||||
import TimezoneContext from "@saleor/components/Timezone";
|
||||
import i18n from "../../../i18n";
|
||||
import { FilterProps } from "../../../types";
|
||||
import { OrderStatusFilter } from "../../../types/globalTypes";
|
||||
import { OrderListUrlFilters } from "../../urls";
|
||||
|
|
@ -26,6 +26,7 @@ export enum OrderFilterKeys {
|
|||
const OrderListFilter: React.FC<OrderListFilterProps> = props => {
|
||||
const date = React.useContext(DateContext);
|
||||
const tz = React.useContext(TimezoneContext);
|
||||
const intl = useIntl();
|
||||
|
||||
const filterMenu: IFilter = [
|
||||
{
|
||||
|
|
@ -40,7 +41,9 @@ const OrderListFilter: React.FC<OrderListFilterProps> = props => {
|
|||
.toISOString()
|
||||
.split("T")[0] // Remove timezone
|
||||
},
|
||||
label: i18n.t("Last 7 Days"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Last 7 Days"
|
||||
}),
|
||||
value: OrderFilterKeys.dateLastWeek.toString()
|
||||
},
|
||||
{
|
||||
|
|
@ -53,7 +56,9 @@ const OrderListFilter: React.FC<OrderListFilterProps> = props => {
|
|||
.toISOString()
|
||||
.split("T")[0] // Remove timezone
|
||||
},
|
||||
label: i18n.t("Last 30 Days"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Last 30 Days"
|
||||
}),
|
||||
value: OrderFilterKeys.dateLastMonth.toString()
|
||||
},
|
||||
{
|
||||
|
|
@ -66,58 +71,90 @@ const OrderListFilter: React.FC<OrderListFilterProps> = props => {
|
|||
.toISOString()
|
||||
.split("T")[0] // Remove timezone
|
||||
},
|
||||
label: i18n.t("Last Year"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Last Year"
|
||||
}),
|
||||
value: OrderFilterKeys.dateLastYear.toString()
|
||||
},
|
||||
{
|
||||
children: [],
|
||||
data: {
|
||||
additionalText: i18n.t("equals"),
|
||||
additionalText: intl.formatMessage({
|
||||
defaultMessage: "equals"
|
||||
}),
|
||||
fieldLabel: null,
|
||||
type: FieldType.date
|
||||
},
|
||||
label: i18n.t("Specific Date"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Specific Date"
|
||||
}),
|
||||
value: OrderFilterKeys.dateEqual.toString()
|
||||
},
|
||||
{
|
||||
children: [],
|
||||
data: {
|
||||
fieldLabel: i18n.t("Range"),
|
||||
fieldLabel: intl.formatMessage({
|
||||
defaultMessage: "Range"
|
||||
}),
|
||||
type: FieldType.rangeDate
|
||||
},
|
||||
label: i18n.t("Range"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Range"
|
||||
}),
|
||||
value: OrderFilterKeys.dateRange.toString()
|
||||
}
|
||||
],
|
||||
data: {
|
||||
fieldLabel: i18n.t("Date"),
|
||||
fieldLabel: intl.formatMessage({
|
||||
defaultMessage: "Date"
|
||||
}),
|
||||
type: FieldType.select
|
||||
},
|
||||
label: i18n.t("Date"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Date"
|
||||
}),
|
||||
value: OrderFilterKeys.date.toString()
|
||||
},
|
||||
{
|
||||
children: [],
|
||||
data: {
|
||||
additionalText: i18n.t("is set as"),
|
||||
fieldLabel: i18n.t("Status"),
|
||||
additionalText: intl.formatMessage({
|
||||
defaultMessage: "is set as",
|
||||
description: "date is set as"
|
||||
}),
|
||||
fieldLabel: intl.formatMessage({
|
||||
defaultMessage: "Status",
|
||||
description: "order fulfillment status"
|
||||
}),
|
||||
options: [
|
||||
{
|
||||
label: i18n.t("Fulfilled"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Fulfilled",
|
||||
description: "order fulfillment status"
|
||||
}),
|
||||
value: OrderStatusFilter.FULFILLED.toString()
|
||||
},
|
||||
{
|
||||
label: i18n.t("Partially Fulfilled"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Partially Fulfilled",
|
||||
description: "order fulfillment status"
|
||||
}),
|
||||
value: OrderStatusFilter.PARTIALLY_FULFILLED.toString()
|
||||
},
|
||||
{
|
||||
label: i18n.t("Unfulfilled"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Unfulfilled",
|
||||
description: "order fulfillment status"
|
||||
}),
|
||||
value: OrderStatusFilter.UNFULFILLED.toString()
|
||||
}
|
||||
],
|
||||
type: FieldType.select
|
||||
},
|
||||
label: i18n.t("Fulfillment Status"),
|
||||
label: intl.formatMessage({
|
||||
defaultMessage: "Fulfillment Status",
|
||||
description: "order"
|
||||
}),
|
||||
value: OrderFilterKeys.fulfillment.toString()
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@ import Button from "@material-ui/core/Button";
|
|||
import Card from "@material-ui/core/Card";
|
||||
import AddIcon from "@material-ui/icons/Add";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import Container from "@saleor/components/Container";
|
||||
import PageHeader from "@saleor/components/PageHeader";
|
||||
import i18n from "@saleor/i18n";
|
||||
import { sectionNames } from "@saleor/intl";
|
||||
import { FilterPageProps, ListActions, PageListProps } from "@saleor/types";
|
||||
import { OrderList_orders_edges_node } from "../../types/OrderList";
|
||||
import { OrderListUrlFilters } from "../../urls";
|
||||
|
|
@ -33,23 +34,37 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
|
|||
onTabChange,
|
||||
onFilterDelete,
|
||||
...listProps
|
||||
}) => (
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<PageHeader title={i18n.t("Orders")}>
|
||||
<PageHeader title={intl.formatMessage(sectionNames.orders)}>
|
||||
<Button color="primary" variant="contained" onClick={onAdd}>
|
||||
{i18n.t("Create order", { context: "button" })} <AddIcon />
|
||||
<FormattedMessage
|
||||
defaultMessage="Create order"
|
||||
description="button"
|
||||
/>
|
||||
<AddIcon />
|
||||
</Button>
|
||||
</PageHeader>
|
||||
<Card>
|
||||
<OrderListFilter
|
||||
allTabLabel={i18n.t("All Orders")}
|
||||
allTabLabel={intl.formatMessage({
|
||||
defaultMessage: "All Orders",
|
||||
description: "tab name"
|
||||
})}
|
||||
currencySymbol={currencySymbol}
|
||||
currentTab={currentTab}
|
||||
filterLabel={i18n.t("Select all orders where:")}
|
||||
filterLabel={intl.formatMessage({
|
||||
defaultMessage: "Select all orders where:"
|
||||
})}
|
||||
filterTabs={filterTabs}
|
||||
filtersList={filtersList}
|
||||
initialSearch={initialSearch}
|
||||
searchPlaceholder={i18n.t("Search Orders...")}
|
||||
searchPlaceholder={intl.formatMessage({
|
||||
defaultMessage: "Search Orders..."
|
||||
})}
|
||||
onAll={onAll}
|
||||
onSearchChange={onSearchChange}
|
||||
onFilterAdd={onFilterAdd}
|
||||
|
|
@ -61,5 +76,6 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
|
|||
</Card>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
OrderListPage.displayName = "OrderListPage";
|
||||
export default OrderListPage;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import DialogContentText from "@material-ui/core/DialogContentText";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ActionDialog from "@saleor/components/ActionDialog";
|
||||
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
|
||||
import i18n from "../../../i18n";
|
||||
|
||||
export interface OrderMarkAsPaidDialogProps {
|
||||
confirmButtonState: ConfirmButtonTransitionState;
|
||||
|
|
@ -14,20 +14,25 @@ export interface OrderMarkAsPaidDialogProps {
|
|||
|
||||
const OrderMarkAsPaidDialog: React.StatelessComponent<
|
||||
OrderMarkAsPaidDialogProps
|
||||
> = ({ confirmButtonState, onClose, onConfirm, open }) => (
|
||||
> = ({ confirmButtonState, onClose, onConfirm, open }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<ActionDialog
|
||||
confirmButtonState={confirmButtonState}
|
||||
open={open}
|
||||
title={i18n.t("Mark order as paid")}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Mark Order as Paid",
|
||||
description: "dialog header"
|
||||
})}
|
||||
onClose={onClose}
|
||||
onConfirm={onConfirm}
|
||||
>
|
||||
<DialogContentText>
|
||||
{i18n.t("Are you sure you want to mark this order as paid?", {
|
||||
context: "modal content"
|
||||
})}
|
||||
<FormattedMessage defaultMessage="Are you sure you want to mark this order as paid?" />
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
);
|
||||
};
|
||||
OrderMarkAsPaidDialog.displayName = "OrderMarkAsPaidDialog";
|
||||
export default OrderMarkAsPaidDialog;
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ import {
|
|||
WithStyles
|
||||
} from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import CardTitle from "@saleor/components/CardTitle";
|
||||
import { Hr } from "@saleor/components/Hr";
|
||||
import Money, { subtractMoney } from "@saleor/components/Money";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import StatusLabel from "@saleor/components/StatusLabel";
|
||||
import i18n from "../../../i18n";
|
||||
import { maybe, transformPaymentStatus } from "../../../misc";
|
||||
import { OrderAction, OrderStatus } from "../../../types/globalTypes";
|
||||
import { OrderDetails_order } from "../../types/OrderDetails";
|
||||
|
|
@ -52,6 +52,8 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
onRefund,
|
||||
onVoid
|
||||
}: OrderPaymentProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const canCapture = maybe(() => order.actions, []).includes(
|
||||
OrderAction.CAPTURE
|
||||
);
|
||||
|
|
@ -78,16 +80,25 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
<table className={classes.root}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{i18n.t("Subtotal")}</td>
|
||||
<td>
|
||||
<FormattedMessage
|
||||
defaultMessage="Subtotal"
|
||||
description="order subtotal price"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
{maybe(() => order.lines) === undefined ? (
|
||||
<Skeleton />
|
||||
) : (
|
||||
i18n.t("{{ quantity }} items", {
|
||||
<FormattedMessage
|
||||
defaultMessage="{quantity} items"
|
||||
description="ordered products"
|
||||
values={{
|
||||
quantity: order.lines
|
||||
.map(line => line.quantity)
|
||||
.reduce((curr, prev) => prev + curr, 0)
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
<td className={classes.textRight}>
|
||||
|
|
@ -99,14 +110,23 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{i18n.t("Taxes")}</td>
|
||||
<td>
|
||||
<FormattedMessage defaultMessage="Taxes" />
|
||||
</td>
|
||||
<td>
|
||||
{maybe(() => order.total.tax) === undefined ? (
|
||||
<Skeleton />
|
||||
) : order.total.tax.amount > 0 ? (
|
||||
i18n.t("VAT included")
|
||||
intl.formatMessage({
|
||||
defaultMessage: "VAT included",
|
||||
description: "vat included in order price"
|
||||
})
|
||||
) : (
|
||||
i18n.t("does not apply")
|
||||
intl.formatMessage({
|
||||
defaultMessage: "does not apply",
|
||||
description: "vat not included in order price",
|
||||
id: "orderPaymentVATDoesNotApply"
|
||||
})
|
||||
)}
|
||||
</td>
|
||||
<td className={classes.textRight}>
|
||||
|
|
@ -118,13 +138,22 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{i18n.t("Shipping")}</td>
|
||||
<td>
|
||||
<FormattedMessage
|
||||
defaultMessage="Shipping"
|
||||
description="order shipping method name"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
{maybe(() => order.shippingMethodName) === undefined &&
|
||||
maybe(() => order.shippingPrice) === undefined ? (
|
||||
<Skeleton />
|
||||
) : order.shippingMethodName === null ? (
|
||||
i18n.t("does not apply")
|
||||
intl.formatMessage({
|
||||
defaultMessage: "does not apply",
|
||||
description: "order does not require shipping",
|
||||
id: "orderPaymentShippingDoesNotApply"
|
||||
})
|
||||
) : (
|
||||
order.shippingMethodName
|
||||
)}
|
||||
|
|
@ -138,7 +167,12 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
</td>
|
||||
</tr>
|
||||
<tr className={classes.totalRow}>
|
||||
<td>{i18n.t("Total")}</td>
|
||||
<td>
|
||||
<FormattedMessage
|
||||
defaultMessage="Total"
|
||||
description="order total price"
|
||||
/>
|
||||
</td>
|
||||
<td />
|
||||
<td className={classes.textRight}>
|
||||
{maybe(() => order.total.gross) === undefined ? (
|
||||
|
|
@ -156,7 +190,12 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
<table className={classes.root}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{i18n.t("Preauthorized amount")}</td>
|
||||
<td>
|
||||
<FormattedMessage
|
||||
defaultMessage="Preauthorized amount"
|
||||
description="order payment"
|
||||
/>
|
||||
</td>
|
||||
<td className={classes.textRight}>
|
||||
{maybe(() => order.totalAuthorized.amount) === undefined ? (
|
||||
<Skeleton />
|
||||
|
|
@ -166,7 +205,12 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{i18n.t("Captured amount")}</td>
|
||||
<td>
|
||||
<FormattedMessage
|
||||
defaultMessage="Captured amount"
|
||||
description="order payment"
|
||||
/>
|
||||
</td>
|
||||
<td className={classes.textRight}>
|
||||
{maybe(() => order.totalCaptured.amount) === undefined ? (
|
||||
<Skeleton />
|
||||
|
|
@ -176,7 +220,12 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
</td>
|
||||
</tr>
|
||||
<tr className={classes.totalRow}>
|
||||
<td>{i18n.t("Outstanding Balance")}</td>
|
||||
<td>
|
||||
<FormattedMessage
|
||||
defaultMessage="Outstanding Balance"
|
||||
description="order payment"
|
||||
/>
|
||||
</td>
|
||||
<td className={classes.textRight}>
|
||||
{maybe(
|
||||
() => order.total.gross.amount && order.totalCaptured.amount
|
||||
|
|
@ -202,22 +251,34 @@ const OrderPayment = withStyles(styles, { name: "OrderPayment" })(
|
|||
<CardActions>
|
||||
{canCapture && (
|
||||
<Button color="primary" variant="text" onClick={onCapture}>
|
||||
{i18n.t("Capture", { context: "button" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Capture"
|
||||
description="capture payment, button"
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
{canRefund && (
|
||||
<Button color="primary" variant="text" onClick={onRefund}>
|
||||
{i18n.t("Refund", { context: "button" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Refund"
|
||||
description="button"
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
{canVoid && (
|
||||
<Button color="primary" variant="text" onClick={onVoid}>
|
||||
{i18n.t("Void", { context: "button" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Void"
|
||||
description="void payment, button"
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
{canMarkAsPaid && (
|
||||
<Button color="primary" variant="text" onClick={onMarkAsPaid}>
|
||||
{i18n.t("Mark as paid", { context: "button" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Mark as paid"
|
||||
description="order, button"
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
</CardActions>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@ import DialogContent from "@material-ui/core/DialogContent";
|
|||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import Form from "@saleor/components/Form";
|
||||
import i18n from "../../../i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
|
||||
export interface FormData {
|
||||
amount: number;
|
||||
|
|
@ -32,7 +33,10 @@ const OrderPaymentDialog: React.StatelessComponent<OrderPaymentDialogProps> = ({
|
|||
variant,
|
||||
onClose,
|
||||
onSubmit
|
||||
}) => (
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open}>
|
||||
<Form
|
||||
initial={{
|
||||
|
|
@ -47,14 +51,23 @@ const OrderPaymentDialog: React.StatelessComponent<OrderPaymentDialogProps> = ({
|
|||
<>
|
||||
<DialogTitle>
|
||||
{variant === "capture"
|
||||
? i18n.t("Capture payment", { context: "title" })
|
||||
: i18n.t("Refund payment", { context: "title" })}
|
||||
? intl.formatMessage({
|
||||
defaultMessage: "Capture Payment",
|
||||
description: "dialog header"
|
||||
})
|
||||
: intl.formatMessage({
|
||||
defaultMessage: "Refund Payment",
|
||||
description: "dialog header"
|
||||
})}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={i18n.t("Amount")}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Amount",
|
||||
description: "amount of refunded money"
|
||||
})}
|
||||
name="amount"
|
||||
onChange={change}
|
||||
inputProps={{
|
||||
|
|
@ -66,7 +79,7 @@ const OrderPaymentDialog: React.StatelessComponent<OrderPaymentDialogProps> = ({
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Cancel", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.cancel} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -77,7 +90,7 @@ const OrderPaymentDialog: React.StatelessComponent<OrderPaymentDialogProps> = ({
|
|||
submit();
|
||||
}}
|
||||
>
|
||||
{i18n.t("Confirm", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.confirm} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
|
|
@ -85,5 +98,6 @@ const OrderPaymentDialog: React.StatelessComponent<OrderPaymentDialogProps> = ({
|
|||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
OrderPaymentDialog.displayName = "OrderPaymentDialog";
|
||||
export default OrderPaymentDialog;
|
||||
|
|
|
|||
|
|
@ -5,11 +5,12 @@ import DialogContent from "@material-ui/core/DialogContent";
|
|||
import DialogContentText from "@material-ui/core/DialogContentText";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import i18n from "../../../i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
|
||||
interface OrderPaymentVoidDialogProps {
|
||||
confirmButtonState: ConfirmButtonTransitionState;
|
||||
|
|
@ -22,21 +23,28 @@ const OrderPaymentVoidDialog: React.StatelessComponent<
|
|||
OrderPaymentVoidDialogProps
|
||||
> = ({ confirmButtonState, open, onConfirm, onClose }) => (
|
||||
<Dialog onClose={onClose} open={open}>
|
||||
<DialogTitle>{i18n.t("Void payment", { context: "title" })}</DialogTitle>
|
||||
<DialogTitle>
|
||||
<FormattedMessage
|
||||
defaultMessage="Void Payment"
|
||||
description="dialog header"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
{i18n.t("Are you sure you want to void this payment?")}
|
||||
<FormattedMessage defaultMessage="Are you sure you want to void this payment?" />
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>{i18n.t("Back", { context: "button" })}</Button>
|
||||
<Button onClick={onClose}>
|
||||
<FormattedMessage {...buttonMessages.back} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={onConfirm}
|
||||
>
|
||||
{i18n.t("Confirm", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.confirm} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import TableRow from "@material-ui/core/TableRow";
|
|||
import TextField from "@material-ui/core/TextField";
|
||||
import React from "react";
|
||||
import InfiniteScroll from "react-infinite-scroller";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import Checkbox from "@saleor/components/Checkbox";
|
||||
import ConfirmButton, {
|
||||
|
|
@ -25,7 +26,7 @@ import ConfirmButton, {
|
|||
import Money from "@saleor/components/Money";
|
||||
import TableCellAvatar from "@saleor/components/TableCellAvatar";
|
||||
import useSearchQuery from "@saleor/hooks/useSearchQuery";
|
||||
import i18n from "@saleor/i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import { maybe, renderCollection } from "@saleor/misc";
|
||||
import { FetchMoreProps } from "@saleor/types";
|
||||
import {
|
||||
|
|
@ -161,6 +162,7 @@ const OrderProductAddDialog = withStyles(styles, {
|
|||
onClose,
|
||||
onSubmit
|
||||
}: OrderProductAddDialogProps & WithStyles<typeof styles>) => {
|
||||
const intl = useIntl();
|
||||
const [query, onQueryChange] = useSearchQuery(onFetch);
|
||||
const [variants, setVariants] = React.useState<
|
||||
SearchOrderVariant_products_edges_node_variants[]
|
||||
|
|
@ -187,21 +189,24 @@ const OrderProductAddDialog = withStyles(styles, {
|
|||
fullWidth
|
||||
maxWidth="sm"
|
||||
>
|
||||
<DialogTitle>{i18n.t("Add product")}</DialogTitle>
|
||||
<DialogTitle>
|
||||
<FormattedMessage
|
||||
defaultMessage="Add Product"
|
||||
description="dialog header"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<DialogContent className={classes.overflow}>
|
||||
<TextField
|
||||
name="query"
|
||||
value={query}
|
||||
onChange={onQueryChange}
|
||||
label={i18n.t("Search Products", {
|
||||
context: "product search input label"
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Search Products"
|
||||
})}
|
||||
placeholder={intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Search by product name, attribute, product type etc..."
|
||||
})}
|
||||
placeholder={i18n.t(
|
||||
"Search by product name, attribute, product type etc...",
|
||||
{
|
||||
context: "product search input placeholder"
|
||||
}
|
||||
)}
|
||||
fullWidth
|
||||
InputProps={{
|
||||
autoComplete: "off",
|
||||
|
|
@ -285,9 +290,13 @@ const OrderProductAddDialog = withStyles(styles, {
|
|||
<TableCell>
|
||||
<div>{variant.name}</div>
|
||||
<div className={classes.grayText}>
|
||||
{i18n.t("SKU {{ sku }}", {
|
||||
<FormattedMessage
|
||||
defaultMessage="SKU {sku}"
|
||||
description="variant sku"
|
||||
values={{
|
||||
sku: variant.sku
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={classes.textRight}>
|
||||
|
|
@ -301,7 +310,7 @@ const OrderProductAddDialog = withStyles(styles, {
|
|||
() => (
|
||||
<TableRow>
|
||||
<TableCell colSpan={4}>
|
||||
{i18n.t("No products matching given query")}
|
||||
<FormattedMessage defaultMessage="No products matching given query" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
|
|
@ -312,7 +321,7 @@ const OrderProductAddDialog = withStyles(styles, {
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Cancel", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.cancel} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -321,7 +330,7 @@ const OrderProductAddDialog = withStyles(styles, {
|
|||
type="submit"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{i18n.t("Confirm", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.confirm} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
WithStyles
|
||||
} from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
|
|
@ -17,7 +18,7 @@ import ConfirmButton, {
|
|||
import Form from "@saleor/components/Form";
|
||||
import Money from "@saleor/components/Money";
|
||||
import { SingleSelectField } from "@saleor/components/SingleSelectField";
|
||||
import i18n from "../../../i18n";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import { OrderDetails_order_availableShippingMethods } from "../../types/OrderDetails";
|
||||
|
||||
export interface FormData {
|
||||
|
|
@ -85,7 +86,10 @@ const OrderShippingMethodEditDialog = withStyles(styles, {
|
|||
return (
|
||||
<Dialog onClose={onClose} open={open} classes={{ paper: classes.dialog }}>
|
||||
<DialogTitle>
|
||||
{i18n.t("Edit shipping method", { context: "title" })}
|
||||
<FormattedMessage
|
||||
defaultMessage="Edit Shipping Method"
|
||||
description="dialog header"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<Form initial={initialForm} onSubmit={onSubmit}>
|
||||
{({ change, data }) => (
|
||||
|
|
@ -100,7 +104,7 @@ const OrderShippingMethodEditDialog = withStyles(styles, {
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>
|
||||
{i18n.t("Cancel", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.cancel} />
|
||||
</Button>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
|
|
@ -108,7 +112,7 @@ const OrderShippingMethodEditDialog = withStyles(styles, {
|
|||
variant="contained"
|
||||
type="submit"
|
||||
>
|
||||
{i18n.t("Confirm", { context: "button" })}
|
||||
<FormattedMessage {...buttonMessages.confirm} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import TableCell from "@material-ui/core/TableCell";
|
|||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import CardTitle from "@saleor/components/CardTitle";
|
||||
import Money from "@saleor/components/Money";
|
||||
|
|
@ -16,7 +17,6 @@ import StatusLabel from "@saleor/components/StatusLabel";
|
|||
import TableCellAvatar, {
|
||||
AVATAR_MARGIN
|
||||
} from "@saleor/components/TableCellAvatar";
|
||||
import i18n from "../../../i18n";
|
||||
import { maybe } from "../../../misc";
|
||||
import { OrderDetails_order_lines } from "../../types/OrderDetails";
|
||||
|
||||
|
|
@ -58,16 +58,25 @@ interface OrderUnfulfilledItemsProps extends WithStyles<typeof styles> {
|
|||
|
||||
const OrderUnfulfilledItems = withStyles(styles, {
|
||||
name: "OrderUnfulfilledItems"
|
||||
})(({ canFulfill, classes, lines, onFulfill }: OrderUnfulfilledItemsProps) => (
|
||||
})(({ canFulfill, classes, lines, onFulfill }: OrderUnfulfilledItemsProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardTitle
|
||||
title={
|
||||
<StatusLabel
|
||||
label={i18n.t("Unfulfilled ({{ quantity }})", {
|
||||
label={intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Unfulfilled ({quantity})",
|
||||
description: "section header"
|
||||
},
|
||||
{
|
||||
quantity: lines
|
||||
.map(line => line.quantity - line.quantityFulfilled)
|
||||
.reduce((prev, curr) => prev + curr, 0)
|
||||
})}
|
||||
}
|
||||
)}
|
||||
status="error"
|
||||
/>
|
||||
}
|
||||
|
|
@ -76,13 +85,31 @@ const OrderUnfulfilledItems = withStyles(styles, {
|
|||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell className={classes.colName}>
|
||||
<span className={classes.colNameLabel}>{i18n.t("Product")}</span>
|
||||
<span className={classes.colNameLabel}>
|
||||
<FormattedMessage
|
||||
defaultMessage="Product"
|
||||
description="product name"
|
||||
/>
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colQuantity}>
|
||||
{i18n.t("Quantity")}
|
||||
<FormattedMessage
|
||||
defaultMessage="Quantity"
|
||||
description="ordered products"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colPrice}>
|
||||
<FormattedMessage
|
||||
defaultMessage="Price"
|
||||
description="product unit price"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colTotal}>
|
||||
<FormattedMessage
|
||||
defaultMessage="Total"
|
||||
description="order line total price"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={classes.colPrice}>{i18n.t("Price")}</TableCell>
|
||||
<TableCell className={classes.colTotal}>{i18n.t("Total")}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
@ -135,13 +162,12 @@ const OrderUnfulfilledItems = withStyles(styles, {
|
|||
{canFulfill && (
|
||||
<CardActions>
|
||||
<Button variant="text" color="primary" onClick={onFulfill}>
|
||||
{i18n.t("Fulfill", {
|
||||
context: "button"
|
||||
})}
|
||||
<FormattedMessage defaultMessage="Fulfill" description="button" />
|
||||
</Button>
|
||||
</CardActions>
|
||||
)}
|
||||
</Card>
|
||||
));
|
||||
);
|
||||
});
|
||||
OrderUnfulfilledItems.displayName = "OrderUnfulfilledItems";
|
||||
export default OrderUnfulfilledItems;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { parse as parseQs } from "qs";
|
||||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
import { Route, RouteComponentProps, Switch } from "react-router-dom";
|
||||
|
||||
import { sectionNames } from "@saleor/intl";
|
||||
import { WindowTitle } from "../components/WindowTitle";
|
||||
import i18n from "../i18n";
|
||||
import {
|
||||
orderDraftListPath,
|
||||
OrderDraftListUrlQueryParams,
|
||||
|
|
@ -46,9 +47,12 @@ const OrderDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
|
|||
);
|
||||
};
|
||||
|
||||
const Component = () => (
|
||||
const Component = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<>
|
||||
<WindowTitle title={i18n.t("Orders")} />
|
||||
<WindowTitle title={intl.formatMessage(sectionNames.orders)} />
|
||||
<Switch>
|
||||
<Route exact path={orderDraftListPath} component={OrderDraftList} />
|
||||
<Route exact path={orderListPath} component={OrderList} />
|
||||
|
|
@ -56,5 +60,6 @@ const Component = () => (
|
|||
</Switch>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Component;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import i18n from "../../../i18n";
|
||||
import { maybe } from "../../../misc";
|
||||
import { OrderAddNote } from "../../types/OrderAddNote";
|
||||
import { OrderCancel } from "../../types/OrderCancel";
|
||||
|
|
@ -52,55 +52,65 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
> = ({ children }) => {
|
||||
const navigate = useNavigator();
|
||||
const pushMessage = useNotifier();
|
||||
const intl = useIntl();
|
||||
|
||||
const handlePaymentCapture = (data: OrderCapture) => {
|
||||
if (!maybe(() => data.orderCapture.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Payment successfully captured", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Payment successfully captured"
|
||||
})
|
||||
});
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Payment not captured: {{ errorMessage }}", {
|
||||
context: "notification",
|
||||
errorMessage: data.orderCapture.errors.filter(
|
||||
text: intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Payment not captured: {errorMessage}"
|
||||
},
|
||||
{
|
||||
errorMessage: data.orderCapture.errors.find(
|
||||
error => error.field === "payment"
|
||||
)[0].message
|
||||
})
|
||||
).message
|
||||
}
|
||||
)
|
||||
});
|
||||
}
|
||||
};
|
||||
const handlePaymentRefund = (data: OrderRefund) => {
|
||||
if (!maybe(() => data.orderRefund.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Payment successfully refunded", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Payment successfully refunded"
|
||||
})
|
||||
});
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Payment not refunded: {{ errorMessage }}", {
|
||||
context: "notification",
|
||||
errorMessage: data.orderRefund.errors.filter(
|
||||
text: intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Payment not refunded: {errorMessage}",
|
||||
description: "notification"
|
||||
},
|
||||
{
|
||||
errorMessage: data.orderRefund.errors.find(
|
||||
error => error.field === "payment"
|
||||
)[0].message
|
||||
})
|
||||
).message
|
||||
}
|
||||
)
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleOrderFulfillmentCreate = (data: OrderCreateFulfillment) => {
|
||||
if (!maybe(() => data.orderFulfillmentCreate.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Items successfully fulfilled", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Items successfully fulfilled"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.orderFulfillmentCreate.order.id), true);
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not fulfill items", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not fulfill items"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -108,53 +118,53 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleOrderMarkAsPaid = (data: OrderMarkAsPaid) => {
|
||||
if (!maybe(() => data.orderMarkAsPaid.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Order marked as paid", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order marked as paid"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.orderMarkAsPaid.order.id), true);
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not mark order as paid", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not mark order as paid"
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleOrderCancel = (data: OrderCancel) => {
|
||||
pushMessage({
|
||||
text: i18n.t("Order successfully cancelled", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order successfully cancelled"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.orderCancel.order.id), true);
|
||||
};
|
||||
const handleDraftCancel = () => {
|
||||
pushMessage({
|
||||
text: i18n.t("Order successfully cancelled", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order successfully cancelled"
|
||||
})
|
||||
});
|
||||
navigate(orderListUrl(), true);
|
||||
};
|
||||
const handleOrderVoid = () => {
|
||||
pushMessage({
|
||||
text: i18n.t("Order payment successfully voided", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order payment successfully voided"
|
||||
})
|
||||
});
|
||||
};
|
||||
const handleNoteAdd = (data: OrderAddNote) => {
|
||||
if (!maybe(() => data.orderAddNote.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Note successfully added", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Note successfully added"
|
||||
})
|
||||
});
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not add note", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not add note"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -162,8 +172,8 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleUpdate = (data: OrderUpdate) => {
|
||||
if (!maybe(() => data.orderUpdate.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Order successfully updated", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order successfully updated"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.orderUpdate.order.id), true);
|
||||
|
|
@ -172,8 +182,8 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleDraftUpdate = (data: OrderDraftUpdate) => {
|
||||
if (!maybe(() => data.draftOrderUpdate.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Order successfully updated", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order successfully updated"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.draftOrderUpdate.order.id), true);
|
||||
|
|
@ -182,14 +192,14 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleShippingMethodUpdate = (data: OrderShippingMethodUpdate) => {
|
||||
if (!maybe(() => data.orderUpdateShipping.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Shipping method successfully updated", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Shipping method successfully updated"
|
||||
})
|
||||
});
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not update shipping method", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not update shipping method"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -198,14 +208,14 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleOrderLineDelete = (data: OrderLineDelete) => {
|
||||
if (!maybe(() => data.draftOrderLineDelete.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Order line deleted", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order line deleted"
|
||||
})
|
||||
});
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not delete order line", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not delete order line"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -213,15 +223,15 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleOrderLinesAdd = (data: OrderLinesAdd) => {
|
||||
if (!maybe(() => data.draftOrderLinesCreate.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Order line added", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order line added"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.draftOrderLinesCreate.order.id), true);
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not create order line", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not create order line"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -229,14 +239,14 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleOrderLineUpdate = (data: OrderLineUpdate) => {
|
||||
if (!maybe(() => data.draftOrderLineUpdate.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Order line updated", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order line updated"
|
||||
})
|
||||
});
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not update order line", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not update order line"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -244,15 +254,15 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleOrderFulfillmentCancel = (data: OrderFulfillmentCancel) => {
|
||||
if (!maybe(() => data.orderFulfillmentCancel.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Fulfillment successfully cancelled", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Fulfillment successfully cancelled"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.orderFulfillmentCancel.order.id), true);
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not cancel fulfillment", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not cancel fulfillment"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -262,15 +272,15 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
) => {
|
||||
if (!maybe(() => data.orderFulfillmentUpdateTracking.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Fulfillment successfully updated", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Fulfillment successfully updated"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.orderFulfillmentUpdateTracking.order.id), true);
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not update fulfillment", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not update fulfillment"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -278,15 +288,15 @@ export const OrderDetailsMessages: React.StatelessComponent<
|
|||
const handleDraftFinalize = (data: OrderDraftFinalize) => {
|
||||
if (!maybe(() => data.draftOrderComplete.errors.length)) {
|
||||
pushMessage({
|
||||
text: i18n.t("Draft order successfully finalized", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Draft order successfully finalized"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.draftOrderComplete.order.id), true);
|
||||
} else {
|
||||
pushMessage({
|
||||
text: i18n.t("Could not finalize draft", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Could not finalize draft"
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import DialogContentText from "@material-ui/core/DialogContentText";
|
|||
import IconButton from "@material-ui/core/IconButton";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import ActionDialog from "@saleor/components/ActionDialog";
|
||||
import useBulkActions from "@saleor/hooks/useBulkActions";
|
||||
|
|
@ -11,7 +12,6 @@ import useNotifier from "@saleor/hooks/useNotifier";
|
|||
import usePaginator, {
|
||||
createPaginationState
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import i18n from "@saleor/i18n";
|
||||
import { getMutationState, maybe } from "@saleor/misc";
|
||||
import { ListViews } from "@saleor/types";
|
||||
import OrderDraftListPage from "../components/OrderDraftListPage";
|
||||
|
|
@ -44,6 +44,7 @@ export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
|
|||
const { updateListSettings, settings } = useListSettings(
|
||||
ListViews.DRAFT_LIST
|
||||
);
|
||||
const intl = useIntl();
|
||||
|
||||
const closeModal = () =>
|
||||
navigate(
|
||||
|
|
@ -56,7 +57,9 @@ export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
|
|||
|
||||
const handleCreateOrderCreateSuccess = (data: OrderDraftCreate) => {
|
||||
notify({
|
||||
text: i18n.t("Order draft succesfully created")
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order draft succesfully created"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.draftOrderCreate.order.id));
|
||||
};
|
||||
|
|
@ -77,7 +80,9 @@ export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
|
|||
const handleOrderDraftBulkCancel = (data: OrderDraftBulkCancel) => {
|
||||
if (data.draftOrderBulkDelete.errors.length === 0) {
|
||||
notify({
|
||||
text: i18n.t("Removed draft orders")
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Removed draft orders"
|
||||
})
|
||||
});
|
||||
refetch();
|
||||
reset();
|
||||
|
|
@ -145,22 +150,29 @@ export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
|
|||
onClose={closeModal}
|
||||
onConfirm={onOrderDraftBulkDelete}
|
||||
open={params.action === "remove"}
|
||||
title={i18n.t("Remove Order Drafts")}
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Delete Order Drafts",
|
||||
description: "dialog header"
|
||||
})}
|
||||
variant="delete"
|
||||
>
|
||||
<DialogContentText
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: i18n.t(
|
||||
"Are you sure you want to remove <strong>{{ number }}</strong> order drafts?",
|
||||
{
|
||||
number: maybe(
|
||||
() => params.ids.length.toString(),
|
||||
"..."
|
||||
)
|
||||
}
|
||||
<DialogContentText>
|
||||
<FormattedMessage
|
||||
defaultMessage="Are you sure you want to delete {counter, plural,
|
||||
one {this order draft}
|
||||
other {{displayQuantity} orderDrafts}
|
||||
}?"
|
||||
description="dialog content"
|
||||
values={{
|
||||
counter: maybe(() => params.ids.length),
|
||||
displayQuantity: (
|
||||
<strong>
|
||||
{maybe(() => params.ids.length)}
|
||||
</strong>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Button from "@material-ui/core/Button";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
|
||||
import SaveFilterTabDialog, {
|
||||
|
|
@ -14,7 +15,6 @@ import usePaginator, {
|
|||
createPaginationState
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import useShop from "@saleor/hooks/useShop";
|
||||
import i18n from "@saleor/i18n";
|
||||
import { getMutationState, maybe } from "@saleor/misc";
|
||||
import { ListViews } from "@saleor/types";
|
||||
import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog";
|
||||
|
|
@ -62,6 +62,7 @@ export const OrderList: React.StatelessComponent<OrderListProps> = ({
|
|||
const { updateListSettings, settings } = useListSettings(
|
||||
ListViews.ORDER_LIST
|
||||
);
|
||||
const intl = useIntl();
|
||||
|
||||
const tabs = getFilterTabs();
|
||||
|
||||
|
|
@ -133,7 +134,9 @@ export const OrderList: React.StatelessComponent<OrderListProps> = ({
|
|||
|
||||
const handleCreateOrderCreateSuccess = (data: OrderDraftCreate) => {
|
||||
notify({
|
||||
text: i18n.t("Order draft succesfully created")
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Order draft succesfully created"
|
||||
})
|
||||
});
|
||||
navigate(orderUrl(data.draftOrderCreate.order.id));
|
||||
};
|
||||
|
|
@ -160,8 +163,8 @@ export const OrderList: React.StatelessComponent<OrderListProps> = ({
|
|||
const handleOrderBulkCancel = (data: OrderBulkCancel) => {
|
||||
if (data.orderBulkCancel.errors.length === 0) {
|
||||
notify({
|
||||
text: i18n.t("Orders cancelled", {
|
||||
context: "notification"
|
||||
text: intl.formatMessage({
|
||||
defaultMessage: "Orders cancelled"
|
||||
})
|
||||
});
|
||||
reset();
|
||||
|
|
@ -218,9 +221,10 @@ export const OrderList: React.StatelessComponent<OrderListProps> = ({
|
|||
color="primary"
|
||||
onClick={() => openModal("cancel", listElements)}
|
||||
>
|
||||
{i18n.t("Cancel", {
|
||||
context: "cancel orders"
|
||||
})}
|
||||
<FormattedMessage
|
||||
defaultMessage="Cancel"
|
||||
description="cancel orders, button"
|
||||
/>
|
||||
</Button>
|
||||
}
|
||||
onSearchChange={email => changeFilterField({ email })}
|
||||
|
|
|
|||
Loading…
Reference in a new issue