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

Refactor translations in components (#133)

Browse source 
* Refactor translations in components

* Update pot file
This commit is contained in:
Dominik Żegleń 2019-08-26 23:54:03 +02:00 committed by dominik-zeglen
parent 1585a5ad28
commit 94c0833766
47 changed files with 1522 additions and 588 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

710
locale/messages.pot
View file

File diff suppressed because it is too large Load diff

57
src/components/ActionDialog/ActionDialog.tsx
View file

@ -11,8 +11,9 @@ import {
} from "@material-ui/core/styles";
import classNames from "classnames";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import i18n from "../../i18n";
import { buttonMessages } from "@saleor/intl";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "../ConfirmButton/ConfirmButton";
@ -50,31 +51,35 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
variant,
onConfirm,
onClose
}: ActionDialogProps) => (
<Dialog onClose={onClose} open={open}>
<DialogTitle>{title}</DialogTitle>
<DialogContent>{children}</DialogContent>
<DialogActions>
<Button onClick={onClose}>
{i18n.t("Cancel", { context: "button" })}
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
onClick={onConfirm}
className={classNames({
[classes.deleteButton]: variant === "delete"
})}
>
{confirmButtonLabel ||
(variant === "delete"
? i18n.t("Delete", { context: "button" })
: i18n.t("Confirm", { context: "button" }))}
</ConfirmButton>
</DialogActions>
</Dialog>
)
}: ActionDialogProps) => {
const intl = useIntl();
return (
<Dialog onClose={onClose} open={open}>
<DialogTitle>{title}</DialogTitle>
<DialogContent>{children}</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
onClick={onConfirm}
className={classNames({
[classes.deleteButton]: variant === "delete"
})}
>
{confirmButtonLabel ||
(variant === "delete"
? intl.formatMessage(buttonMessages.delete)
: intl.formatMessage(buttonMessages.confirm))}
</ConfirmButton>
</DialogActions>
</Dialog>
);
}
);
ActionDialog.displayName = "ActionDialog";
export default ActionDialog;

293
src/components/AddressEdit/AddressEdit.tsx
View file

@ -6,9 +6,10 @@ import {
} from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";
import { useIntl } from "react-intl";
import { AddressTypeInput } from "@saleor/customers/types";
import i18n from "@saleor/i18n";
import { commonMessages } from "@saleor/intl";
import { FormErrors } from "@saleor/types";
import FormSpacer from "../FormSpacer";
import SingleAutocompleteSelectField, {
@ -44,144 +45,164 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
errors,
onChange,
onCountryChange
}: AddressEditProps) => (
<>
<div className={classes.root}>
<div>
<TextField
disabled={disabled}
error={!!errors.firstName}
helperText={errors.firstName}
label={i18n.t("First name")}
name="firstName"
onChange={onChange}
value={data.firstName}
fullWidth
/>
</div>
<div>
<TextField
disabled={disabled}
error={!!errors.lastName}
helperText={errors.lastName}
label={i18n.t("Last name")}
name="lastName"
onChange={onChange}
value={data.lastName}
fullWidth
/>
</div>
</div>
<FormSpacer />
<div className={classes.root}>
<div>
<TextField
disabled={disabled}
error={!!errors.companyName}
helperText={errors.companyName}
label={i18n.t("Company")}
name="companyName"
onChange={onChange}
value={data.companyName}
fullWidth
/>
</div>
<div>
<TextField
disabled={disabled}
error={!!errors.phone}
fullWidth
helperText={errors.phone}
label={i18n.t("Phone")}
name="phone"
value={data.phone}
onChange={onChange}
/>
</div>
</div>
<FormSpacer />
<TextField
disabled={disabled}
error={!!errors.streetAddress1}
helperText={errors.streetAddress1}
label={i18n.t("Address line 1")}
name="streetAddress1"
onChange={onChange}
value={data.streetAddress1}
fullWidth
/>
<FormSpacer />
<TextField
disabled={disabled}
error={!!errors.streetAddress2}
helperText={errors.streetAddress2}
label={i18n.t("Address line 2")}
name="streetAddress2"
onChange={onChange}
value={data.streetAddress2}
fullWidth
/>
<FormSpacer />
<div className={classes.root}>
<div>
<TextField
disabled={disabled}
error={!!errors.city}
helperText={errors.city}
label={i18n.t("City")}
name="city"
onChange={onChange}
value={data.city}
fullWidth
/>
</div>
<div>
<TextField
disabled={disabled}
error={!!errors.postalCode}
helperText={errors.postalCode}
label={i18n.t("ZIP / Postal code")}
name="postalCode"
onChange={onChange}
value={data.postalCode}
fullWidth
/>
</div>
</div>
}: AddressEditProps) => {
const intl = useIntl();
<FormSpacer />
<div className={classes.root}>
<div>
<SingleAutocompleteSelectField
disabled={disabled}
displayValue={countryDisplayValue}
error={!!errors.country}
helperText={errors.country}
label={i18n.t("Country")}
name="country"
onChange={onCountryChange}
value={data.country}
choices={countries}
InputProps={{
autoComplete: "off"
}}
/>
return (
<>
<div className={classes.root}>
<div>
<TextField
disabled={disabled}
error={!!errors.firstName}
helperText={errors.firstName}
label={intl.formatMessage(commonMessages.firstName)}
name="firstName"
onChange={onChange}
value={data.firstName}
fullWidth
/>
</div>
<div>
<TextField
disabled={disabled}
error={!!errors.lastName}
helperText={errors.lastName}
label={intl.formatMessage(commonMessages.lastName)}
name="lastName"
onChange={onChange}
value={data.lastName}
fullWidth
/>
</div>
</div>
<div>
<TextField
disabled={disabled}
error={!!errors.countryArea}
helperText={errors.countryArea}
label={i18n.t("Country area")}
name="countryArea"
onChange={onChange}
value={data.countryArea}
fullWidth
/>
<FormSpacer />
<div className={classes.root}>
<div>
<TextField
disabled={disabled}
error={!!errors.companyName}
helperText={errors.companyName}
label={intl.formatMessage({
defaultMessage: "Company"
})}
name="companyName"
onChange={onChange}
value={data.companyName}
fullWidth
/>
</div>
<div>
<TextField
disabled={disabled}
error={!!errors.phone}
fullWidth
helperText={errors.phone}
label={intl.formatMessage({
defaultMessage: "Phone"
})}
name="phone"
value={data.phone}
onChange={onChange}
/>
</div>
</div>
</div>
</>
)
<FormSpacer />
<TextField
disabled={disabled}
error={!!errors.streetAddress1}
helperText={errors.streetAddress1}
label={intl.formatMessage({
defaultMessage: "Address line 1"
})}
name="streetAddress1"
onChange={onChange}
value={data.streetAddress1}
fullWidth
/>
<FormSpacer />
<TextField
disabled={disabled}
error={!!errors.streetAddress2}
helperText={errors.streetAddress2}
label={intl.formatMessage({
defaultMessage: "Address line 2"
})}
name="streetAddress2"
onChange={onChange}
value={data.streetAddress2}
fullWidth
/>
<FormSpacer />
<div className={classes.root}>
<div>
<TextField
disabled={disabled}
error={!!errors.city}
helperText={errors.city}
label={intl.formatMessage({
defaultMessage: "City"
})}
name="city"
onChange={onChange}
value={data.city}
fullWidth
/>
</div>
<div>
<TextField
disabled={disabled}
error={!!errors.postalCode}
helperText={errors.postalCode}
label={intl.formatMessage({
defaultMessage: "ZIP / Postal code"
})}
name="postalCode"
onChange={onChange}
value={data.postalCode}
fullWidth
/>
</div>
</div>
<FormSpacer />
<div className={classes.root}>
<div>
<SingleAutocompleteSelectField
disabled={disabled}
displayValue={countryDisplayValue}
error={!!errors.country}
helperText={errors.country}
label={intl.formatMessage({
defaultMessage: "Country"
})}
name="country"
onChange={onCountryChange}
value={data.country}
choices={countries}
InputProps={{
autoComplete: "off"
}}
/>
</div>
<div>
<TextField
disabled={disabled}
error={!!errors.countryArea}
helperText={errors.countryArea}
label={intl.formatMessage({
defaultMessage: "Country area"
})}
name="countryArea"
onChange={onChange}
value={data.countryArea}
fullWidth
/>
</div>
</div>
</>
);
}
);
AddressEdit.displayName = "AddressEdit";
export default AddressEdit;

9
src/components/AppLayout/AppLayout.tsx
View file

@ -17,6 +17,7 @@ import {
import classNames from "classnames";
import React from "react";
import SVG from "react-inlinesvg";
import { FormattedMessage } from "react-intl";
import { RouteComponentProps, withRouter } from "react-router";
import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
@ -27,7 +28,6 @@ import useLocalStorage from "@saleor/hooks/useLocalStorage";
import useNavigator from "@saleor/hooks/useNavigator";
import useTheme from "@saleor/hooks/useTheme";
import useUser from "@saleor/hooks/useUser";
import i18n from "@saleor/i18n";
import ArrowDropdown from "@saleor/icons/ArrowDropdown";
import Container from "../Container";
import AppActionContext from "./AppActionContext";
@ -430,9 +430,10 @@ const AppLayout = withStyles(styles, {
className={classes.userMenuItem}
onClick={handleLogout}
>
{i18n.t("Log out", {
context: "button"
})}
<FormattedMessage
defaultMessage="Log out"
description="button"
/>
</MenuItem>
</Menu>
</ClickAwayListener>

26
src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
View file

@ -11,14 +11,15 @@ import TableCell from "@material-ui/core/TableCell";
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
} from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { SearchCategories_categories_edges_node } from "../../containers/SearchCategories/types/SearchCategories";
import i18n from "../../i18n";
import Checkbox from "../Checkbox";
export interface FormData {
@ -85,6 +86,7 @@ const AssignCategoriesDialog = withStyles(styles, {
onFetch,
onSubmit
}: AssignCategoriesDialogProps) => {
const intl = useIntl();
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedCategories, setSelectedCategories] = React.useState<
SearchCategories_categories_edges_node[]
@ -100,17 +102,22 @@ const AssignCategoriesDialog = withStyles(styles, {
fullWidth
maxWidth="sm"
>
<DialogTitle>{i18n.t("Assign Categories")}</DialogTitle>
<DialogTitle>
<FormattedMessage
defaultMessage="Assign Categories"
description="dialog header"
/>
</DialogTitle>
<DialogContent className={classes.overflow}>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={i18n.t("Search Categories", {
context: "category search input label"
label={intl.formatMessage({
defaultMessage: "Search Categories"
})}
placeholder={i18n.t("Search by category name, etc...", {
context: "category search input placeholder"
placeholder={intl.formatMessage({
defaultMessage: "Search by category name, etc..."
})}
fullWidth
InputProps={{
@ -156,7 +163,7 @@ const AssignCategoriesDialog = withStyles(styles, {
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
{i18n.t("Cancel", { context: "button" })}
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
@ -165,7 +172,10 @@ const AssignCategoriesDialog = withStyles(styles, {
type="submit"
onClick={handleSubmit}
>
{i18n.t("Assign categories", { context: "button" })}
<FormattedMessage
defaultMessage="Assign categories"
description="button"
/>
</ConfirmButton>
</DialogActions>
</Dialog>

26
src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
View file

@ -11,9 +11,10 @@ import TableCell from "@material-ui/core/TableCell";
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 useSearchQuery from "@saleor/hooks/useSearchQuery";
import i18n from "@saleor/i18n";
import { buttonMessages } from "@saleor/intl";
import { SearchCollections_collections_edges_node } from "../../containers/SearchCollections/types/SearchCollections";
import Checkbox from "../Checkbox";
import ConfirmButton, {
@ -85,6 +86,7 @@ const AssignCollectionDialog = withStyles(styles, {
onFetch,
onSubmit
}: AssignCollectionDialogProps) => {
const intl = useIntl();
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedCollections, setSelectedCollections] = React.useState<
SearchCollections_collections_edges_node[]
@ -100,17 +102,22 @@ const AssignCollectionDialog = withStyles(styles, {
fullWidth
maxWidth="sm"
>
<DialogTitle>{i18n.t("Assign Collection")}</DialogTitle>
<DialogTitle>
<FormattedMessage
defaultMessage="Assign Collection"
description="dialog header"
/>
</DialogTitle>
<DialogContent className={classes.overflow}>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={i18n.t("Search Collection", {
context: "product search input label"
label={intl.formatMessage({
defaultMessage: "Search Collection"
})}
placeholder={i18n.t("Search by collection name, etc...", {
context: "product search input placeholder"
placeholder={intl.formatMessage({
defaultMessage: "Search by collection name, etc..."
})}
fullWidth
InputProps={{
@ -157,7 +164,7 @@ const AssignCollectionDialog = withStyles(styles, {
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
{i18n.t("Cancel", { context: "button" })}
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
@ -166,7 +173,10 @@ const AssignCollectionDialog = withStyles(styles, {
type="submit"
onClick={handleSubmit}
>
{i18n.t("Assign collections", { context: "button" })}
<FormattedMessage
defaultMessage="Assign collections"
description="button"
/>
</ConfirmButton>
</DialogActions>
</Dialog>

32
src/components/AssignProductDialog/AssignProductDialog.tsx
View file

@ -11,6 +11,7 @@ import TableCell from "@material-ui/core/TableCell";
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
@ -18,7 +19,7 @@ import ConfirmButton, {
import FormSpacer from "@saleor/components/FormSpacer";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import i18n from "@saleor/i18n";
import { buttonMessages } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { SearchProducts_products_edges_node } from "../../containers/SearchProducts/types/SearchProducts";
import Checkbox from "../Checkbox";
@ -88,6 +89,7 @@ const AssignProductDialog = withStyles(styles, {
onFetch,
onSubmit
}: AssignProductDialogProps & WithStyles<typeof styles>) => {
const intl = useIntl();
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedProducts, setSelectedProducts] = React.useState<
SearchProducts_products_edges_node[]
@ -103,21 +105,24 @@ const AssignProductDialog = withStyles(styles, {
fullWidth
maxWidth="sm"
>
<DialogTitle>{i18n.t("Assign Product")}</DialogTitle>
<DialogTitle>
<FormattedMessage
defaultMessage="Assign Product"
description="dialog header"
/>
</DialogTitle>
<DialogContent>
<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",
@ -168,7 +173,7 @@ const AssignProductDialog = withStyles(styles, {
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
{i18n.t("Cancel", { context: "button" })}
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
@ -177,7 +182,10 @@ const AssignProductDialog = withStyles(styles, {
type="submit"
onClick={handleSubmit}
>
{i18n.t("Assign products", { context: "button" })}
<FormattedMessage
defaultMessage="Assign products"
description="button"
/>
</ConfirmButton>
</DialogActions>
</Dialog>

7
src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
View file

@ -11,8 +11,9 @@ import TextField from "@material-ui/core/TextField";
import ArrowBack from "@material-ui/icons/ArrowBack";
import Downshift from "downshift";
import React from "react";
import { FormattedMessage } from "react-intl";
import i18n from "../../i18n";
import { buttonMessages } from "@saleor/intl";
import {
getMenuItemByPath,
IMenu,
@ -153,7 +154,7 @@ const AutocompleteSelectMenu = withStyles(styles, {
}
>
<ArrowBack className={classes.menuBack} />
{i18n.t("Back")}
<FormattedMessage {...buttonMessages.back} />
</MenuItem>
)}
{(menuPath.length
@ -176,7 +177,7 @@ const AutocompleteSelectMenu = withStyles(styles, {
</>
) : (
<MenuItem disabled component="div">
{i18n.t("No results")}
<FormattedMessage defaultMessage="No results" />
</MenuItem>
)}
</Paper>

10
src/components/ColumnPicker/ColumnPickerButton.tsx
View file

@ -5,8 +5,7 @@ import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import makeStyles from "@material-ui/styles/makeStyles";
import classNames from "classnames";
import React from "react";
import i18n from "@saleor/i18n";
import { FormattedMessage } from "react-intl";
interface ColumnPickerButtonProps {
active: boolean;
@ -51,9 +50,10 @@ const ColumnPickerButton: React.FC<ColumnPickerButtonProps> = props => {
onClick={onClick}
variant="outlined"
>
{i18n.t("Columns", {
context: "select visible columns button"
})}
<FormattedMessage
defaultMessage="Columns"
description="select visible columns button"
/>
<ArrowDropDownIcon
color="primary"
className={classNames(classes.icon, {

21
src/components/ColumnPicker/ColumnPickerContent.tsx
View file

@ -6,9 +6,10 @@ import Typography from "@material-ui/core/Typography";
import makeStyles from "@material-ui/styles/makeStyles";
import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
import useElementScroll from "@saleor/hooks/useElementScroll";
import i18n from "@saleor/i18n";
import { buttonMessages } from "@saleor/intl";
import { isSelected } from "@saleor/utils/lists";
import ControlledCheckbox from "../ControlledCheckbox";
import Hr from "../Hr";
@ -74,14 +75,14 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
<Card>
<CardContent>
<Typography color="textSecondary">
{i18n.t(
"{{ numberOfSelected }} columns selected out of {{ numberOfTotal }}",
{
context: "pick columns to display",
<FormattedMessage
defaultMessage="{numberOfSelected} columns selected out of {numberOfTotal}"
description="pick columns to display"
values={{
numberOfSelected: selectedColumns.length,
numberOfTotal: columns.length
}
)}
}}
/>
</Typography>
</CardContent>
<Hr />
@ -109,14 +110,14 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
>
<div className={classes.actionBar}>
<Button color="default" onClick={onReset}>
{i18n.t("Reset")}
<FormattedMessage defaultMessage="Reset" description="button" />
</Button>
<div>
<Button color="default" onClick={onCancel}>
{i18n.t("Cancel")}
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<Button color="primary" variant="contained" onClick={onSave}>
{i18n.t("Save")}
<FormattedMessage {...buttonMessages.save} />
</Button>
</div>
</div>

17
src/components/ConfirmButton/ConfirmButton.tsx
View file

@ -8,10 +8,10 @@ import {
WithStyles
} from "@material-ui/core/styles";
import CheckIcon from "@material-ui/icons/Check";
import { buttonMessages } from "@saleor/intl";
import classNames from "classnames";
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
export type ConfirmButtonTransitionState =
| "loading"
@ -170,14 +170,11 @@ const ConfirmButton = withStyles(styles)(
displayCompletedActionState
})}
>
{transitionState === "error" && displayCompletedActionState
? i18n.t("Error", {
context: "button"
})
: children ||
i18n.t("Confirm", {
context: "button"
})}
{transitionState === "error" && displayCompletedActionState ? (
<FormattedMessage defaultMessage="Error" description="button" />
) : (
children || <FormattedMessage {...buttonMessages.confirm} />
)}
</span>
</Button>
);

18
src/components/CountryList/CountryList.tsx
View file

@ -16,10 +16,10 @@ import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import DeleteIcon from "@material-ui/icons/Delete";
import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Skeleton from "@saleor/components/Skeleton";
import i18n from "../../i18n";
import { maybe, renderCollection } from "../../misc";
import { CountryFragment } from "../../taxes/types/CountryFragment";
@ -99,7 +99,10 @@ const CountryList = withStyles(styles, {
title={title}
toolbar={
<Button color="primary" onClick={onCountryAssign}>
{i18n.t("Assign countries")}
<FormattedMessage
defaultMessage="Assign countries"
description="button"
/>
</Button>
}
/>
@ -110,10 +113,13 @@ const CountryList = withStyles(styles, {
<TableCell
className={classNames(classes.wideColumn, classes.toLeft)}
>
{i18n.t("{{ number }} Countries", {
context: "number of countries",
number: maybe(() => countries.length.toString(), "...")
})}
<FormattedMessage
defaultMessage="{number} Countries"
description="number of countries"
values={{
number: maybe(() => countries.length.toString(), "...")
}}
/>
</TableCell>
<TableCell
className={classNames(classes.textRight, classes.iconCell)}

51
src/components/DeleteFilterTabDialog/DeleteFilterTabDialog.tsx
View file

@ -1,7 +1,7 @@
import DialogContentText from "@material-ui/core/DialogContentText";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import i18n from "../../i18n";
import ActionDialog from "../ActionDialog";
import { ConfirmButtonTransitionState } from "../ConfirmButton";
@ -19,28 +19,31 @@ const DeleteFilterTabDialog: React.FC<DeleteFilterTabDialogProps> = ({
onSubmit,
open,
tabName
}) => (
<ActionDialog
open={open}
confirmButtonState={confirmButtonState}
onClose={onClose}
onConfirm={onSubmit}
title={i18n.t("Delete Search", {
context: "modal title custom search delete"
})}
variant="delete"
>
<DialogContentText
dangerouslySetInnerHTML={{
__html: i18n.t(
"Are you sure you want to delete <strong>{{ name }}</strong> search tab?",
{
name: tabName
}
)
}}
/>
</ActionDialog>
);
}) => {
const intl = useIntl();
return (
<ActionDialog
open={open}
confirmButtonState={confirmButtonState}
onClose={onClose}
onConfirm={onSubmit}
title={intl.formatMessage({
defaultMessage: "Delete Search",
description: "custom search delete, dialog header"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {name} search tab?"
values={{
name: <strong>{tabName}</strong>
}}
/>
</DialogContentText>
</ActionDialog>
);
};
DeleteFilterTabDialog.displayName = "DeleteFilterTabDialog";
export default DeleteFilterTabDialog;

6
src/components/ErrorMessageCard/ErrorMessageCard.tsx
View file

@ -2,9 +2,7 @@ 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 i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
interface ErrorMessageCardProps {
message: string;
}
@ -15,7 +13,7 @@ const ErrorMessageCard: React.StatelessComponent<ErrorMessageCardProps> = ({
<Card>
<CardContent>
<Typography variant="h5" component="h2">
{i18n.t("Error", { context: "title" })}
<FormattedMessage defaultMessage="Error" description="header" />
</Typography>
<Typography variant="body2">{message}</Typography>
</CardContent>

17
src/components/ErrorPage/ErrorPage.tsx
View file

@ -8,9 +8,9 @@ import {
import Typography from "@material-ui/core/Typography";
import React from "react";
import SVG from "react-inlinesvg";
import { FormattedMessage } from "react-intl";
import notFoundImage from "@assets/images/what.svg";
import i18n from "../../i18n";
export interface ErrorPageProps extends WithStyles<typeof styles> {
onBack: () => void;
@ -68,14 +68,16 @@ const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
<div className={classes.innerContainer}>
<div>
<Typography className={classes.upperHeader} variant="h4">
{i18n.t("Ooops!...")}
<FormattedMessage defaultMessage="Ooops!..." />
</Typography>
<Typography className={classes.bottomHeader} variant="h3">
{i18n.t("Error")}
<FormattedMessage defaultMessage="Error" />
</Typography>
<Typography>{i18n.t("We've encountered a problem...")}</Typography>
<Typography>
{i18n.t("Don't worry, everything is gonna be fine")}
<FormattedMessage defaultMessage="We've encountered a problem..." />
</Typography>
<Typography>
<FormattedMessage defaultMessage="Don't worry, everything is gonna be fine" />
</Typography>
</div>
<div>
@ -85,7 +87,10 @@ const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
variant="contained"
onClick={onBack}
>
{i18n.t("Back to home", { context: "button" })}
<FormattedMessage
defaultMessage="Back to home"
description="button"
/>
</Button>
</div>
</div>

7
src/components/FileUpload/FileUpload.tsx
View file

@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
const styles = createStyles({
fileUploadField: {
@ -42,7 +42,10 @@ const FileUpload = withStyles(styles, { name: "FileUpload" })(
value={value}
/>
<Button disabled={disabled} onClick={() => this.upload.click()}>
{i18n.t("Upload")}
<FormattedMessage
defaultMessage="Upload"
description="upload file, button"
/>
</Button>
</div>
)

7
src/components/Filter/Filter.tsx
View file

@ -13,9 +13,9 @@ import Typography from "@material-ui/core/Typography";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
import { FilterContent } from ".";
import i18n from "../../i18n";
import { FilterContentSubmitData } from "./FilterContent";
import { IFilter } from "./types";
@ -103,7 +103,10 @@ const Filter = withStyles(styles, { name: "Filter" })(
onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
>
<Typography className={classes.addFilterText}>
{i18n.t("Add Filter")}
<FormattedMessage
defaultMessage="Add Filter"
description="button"
/>
</Typography>
<ArrowDropDownIcon
color="primary"

16
src/components/Filter/FilterContent.tsx
View file

@ -1,9 +1,9 @@
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { makeStyles } from "@material-ui/styles";
import i18n from "../../i18n";
import { getMenuItemByValue, isLeaf, walkToRoot } from "../../utils/menu";
import FormSpacer from "../FormSpacer";
import SingleSelectField from "../SingleSelectField";
@ -45,6 +45,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
filters,
onSubmit
}) => {
const intl = useIntl();
const [menuValue, setMenuValue] = React.useState<string>("");
const [filterValue, setFilterValue] = React.useState<string | string[]>("");
const classes = useStyles({});
@ -72,7 +73,9 @@ const FilterContent: React.FC<FilterContentProps> = ({
}
}}
value={menus ? menus[0].value : menuValue}
placeholder={i18n.t("Select Filter...")}
placeholder={intl.formatMessage({
defaultMessage: "Select Filter..."
})}
/>
{menus &&
menus.map(
@ -95,7 +98,9 @@ const FilterContent: React.FC<FilterContentProps> = ({
? menuValue
: menus[filterItemIndex - 1].label.toString()
}
placeholder={i18n.t("Select Filter...")}
placeholder={intl.formatMessage({
defaultMessage: "Select Filter..."
})}
/>
</React.Fragment>
)
@ -124,7 +129,10 @@ const FilterContent: React.FC<FilterContentProps> = ({
})
}
>
{i18n.t("Add filter")}
<FormattedMessage
defaultMessage="Add filter"
description="button"
/>
</Button>
</>
)}

31
src/components/Filter/FilterElement.tsx
View file

@ -2,8 +2,8 @@ import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import i18n from "../../i18n";
import Calendar from "../../icons/Calendar";
import FormSpacer from "../FormSpacer";
import PriceField from "../PriceField";
@ -41,6 +41,7 @@ const FilterElement: React.FC<FilterElementProps> = ({
onChange,
value
}) => {
const intl = useIntl();
const classes = useStyles({});
if (filter.data.type === FieldType.date) {
@ -62,7 +63,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
} else if (filter.data.type === FieldType.rangeDate) {
return (
<>
<Typography>{i18n.t("from")}</Typography>
<Typography>
<FormattedMessage defaultMessage="from" />
</Typography>
<TextField
className={className}
fullWidth
@ -77,7 +80,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
}}
/>
<FormSpacer />
<Typography>{i18n.t("to")}</Typography>
<Typography>
<FormattedMessage defaultMessage="to" />
</Typography>
<TextField
className={className}
fullWidth
@ -96,7 +101,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
} else if (filter.data.type === FieldType.range) {
return (
<>
<Typography>{i18n.t("from")}</Typography>
<Typography>
<FormattedMessage defaultMessage="from" />
</Typography>
<TextField
className={className}
fullWidth
@ -110,7 +117,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
}}
/>
<FormSpacer />
<Typography>{i18n.t("to")}</Typography>
<Typography>
<FormattedMessage defaultMessage="to" />
</Typography>
<TextField
className={className}
fullWidth
@ -128,7 +137,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
} else if (filter.data.type === FieldType.rangePrice) {
return (
<>
<Typography>{i18n.t("from")}</Typography>
<Typography>
<FormattedMessage defaultMessage="from" />
</Typography>
<PriceField
currencySymbol={currencySymbol}
className={className}
@ -141,7 +152,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
}}
/>
<FormSpacer />
<Typography>{i18n.t("to")}</Typography>
<Typography>
<FormattedMessage defaultMessage="to" />
</Typography>
<PriceField
currencySymbol={currencySymbol}
className={className}
@ -169,7 +182,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
}
}}
value={value as string}
placeholder={i18n.t("Select Filter...")}
placeholder={intl.formatMessage({
defaultMessage: "Select Filter..."
})}
onChange={event => onChange(event.target.value)}
/>
);

7
src/components/FilterBar/FilterBar.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { useIntl } from "react-intl";
import i18n from "../../i18n";
import { FilterProps } from "../../types";
import Debounce from "../Debounce";
import { IFilter } from "../Filter/types";
@ -28,6 +28,7 @@ const FilterBar: React.FC<FilterBarProps> = ({
onTabChange,
onFilterDelete
}) => {
const intl = useIntl();
const [search, setSearch] = React.useState(initialSearch);
React.useEffect(() => setSearch(initialSearch), [currentTab, initialSearch]);
@ -47,7 +48,9 @@ const FilterBar: React.FC<FilterBarProps> = ({
{isCustom && (
<FilterTab
onClick={() => undefined}
label={i18n.t("Custom Filter")}
label={intl.formatMessage({
defaultMessage: "Custom Filter"
})}
/>
)}
</FilterTabs>

39
src/components/FilterCard/FilterCard.tsx
View file

@ -4,8 +4,7 @@ import CardHeader from "@material-ui/core/CardHeader";
import IconButton from "@material-ui/core/IconButton";
import RefreshIcon from "@material-ui/icons/Refresh";
import React from "react";
import i18n from "../../i18n";
import { useIntl } from "react-intl";
export interface FilterCardProps {
handleClear();
@ -14,20 +13,26 @@ export interface FilterCardProps {
const FilterCard: React.StatelessComponent<FilterCardProps> = ({
children,
handleClear
}) => (
<Card>
<form>
<CardHeader
action={
<IconButton onClick={handleClear}>
<RefreshIcon />
</IconButton>
}
title={i18n.t("Filters")}
/>
<CardContent>{children}</CardContent>
</form>
</Card>
);
}) => {
const intl = useIntl();
return (
<Card>
<form>
<CardHeader
action={
<IconButton onClick={handleClear}>
<RefreshIcon />
</IconButton>
}
title={intl.formatMessage({
defaultMessage: "Filters"
})}
/>
<CardContent>{children}</CardContent>
</form>
</Card>
);
};
FilterCard.displayName = "FilterCard";
export default FilterCard;

10
src/components/ImageUpload/ImageUpload.tsx
View file

@ -8,8 +8,7 @@ import { fade } from "@material-ui/core/styles/colorManipulator";
import Typography from "@material-ui/core/Typography";
import classNames from "classnames";
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
import ImageIcon from "../../icons/Image";
import Dropzone from "../Dropzone";
@ -95,9 +94,10 @@ export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
<input {...getInputProps()} className={classes.fileField} />
<ImageIcon className={classes.photosIcon} />
<Typography className={classes.uploadText} variant="body1">
{i18n.t("Drop here to upload", {
context: "image upload"
})}
<FormattedMessage
defaultMessage="Drop here to upload"
description="image upload"
/>
</Typography>
</div>
</div>

15
src/components/LanguageSwitch/LanguageSwitch.tsx
View file

@ -15,8 +15,8 @@ import Typography from "@material-ui/core/Typography";
import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
import i18n from "../../i18n";
import { LanguageCodeEnum } from "../../types/globalTypes";
import { ShopInfo_shop_languages } from "../Shop/types/ShopInfo";
@ -110,11 +110,14 @@ const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })(
onLanguageChange(lang.code);
}}
>
{i18n.t("{{ languageName }} - {{ languageCode }}", {
context: "button",
languageCode: lang.code,
languageName: lang.language
})}
<FormattedMessage
defaultMessage="{languageName} - {languageCode}"
description="button"
values={{
languageCode: lang.code,
languageName: lang.language
}}
/>
</MenuItem>
</Menu>
))}

5
src/components/ListField/ListField.tsx
View file

@ -8,7 +8,8 @@ import {
} from "@material-ui/core/styles";
import TextField, { StandardTextFieldProps } from "@material-ui/core/TextField";
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
import Chip from "../Chip";
interface ListFieldState {
@ -105,7 +106,7 @@ const ListField = withStyles(styles)(
color="primary"
onClick={this.handleValueAdd}
>
{i18n.t("Add", { context: "button" })}
<FormattedMessage defaultMessage="Add" description="button" />
</Button>
)
}}

68
src/components/MoneyRange/MoneyRange.tsx
View file

@ -1,6 +1,5 @@
import React from "react";
import i18n from "../../i18n";
import { useIntl } from "react-intl";
import { LocaleConsumer } from "../Locale";
import IMoney from "../Money";
@ -18,29 +17,48 @@ const formatMoney = (money: IMoney, locale: string) =>
export const MoneyRange: React.StatelessComponent<MoneyRangeProps> = ({
from,
to
}) => (
<LocaleConsumer>
{locale =>
from && to
? i18n.t("{{ fromMoney }} - {{ toMoney }}", {
context: "money",
fromMoney: formatMoney(from, locale),
toMoney: formatMoney(to, locale)
})
: from && !to
? i18n.t("from {{ money }}", {
context: "money",
money: formatMoney(from, locale)
})
: !from && to
? i18n.t("to {{ money }}", {
context: "money",
money: formatMoney(to, locale)
})
: "-"
}
</LocaleConsumer>
);
}) => {
const intl = useIntl();
return (
<LocaleConsumer>
{locale =>
from && to
? intl.formatMessage(
{
defaultMessage: "{fromMoney} - {toMoney}",
description: "money"
},
{
fromMoney: formatMoney(from, locale),
toMoney: formatMoney(to, locale)
}
)
: from && !to
? intl.formatMessage(
{
defaultMessage: "from {money}",
description: "money"
},
{
money: formatMoney(from, locale)
}
)
: !from && to
? intl.formatMessage(
{
defaultMessage: "to {money}",
description: "money"
},
{
money: formatMoney(to, locale)
}
)
: "-"
}
</LocaleConsumer>
);
};
MoneyRange.displayName = "MoneyRange";
export default MoneyRange;

15
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -13,12 +13,12 @@ import Typography from "@material-ui/core/Typography";
import CloseIcon from "@material-ui/icons/Close";
import Downshift, { ControllerStateAndHelpers } from "downshift";
import React from "react";
import { FormattedMessage } from "react-intl";
import { compareTwoStrings } from "string-similarity";
import { fade } from "@material-ui/core/styles/colorManipulator";
import Checkbox from "@saleor/components/Checkbox";
import Debounce, { DebounceProps } from "@saleor/components/Debounce";
import i18n from "@saleor/i18n";
import ArrowDropdownIcon from "@saleor/icons/ArrowDropdown";
import Hr from "../Hr";
@ -244,10 +244,13 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
data-tc="multiautocomplete-select-option"
>
<span className={classes.menuItemLabel}>
{i18n.t("Add new value: {{ value }}", {
context: "add custom option",
value: inputValue
})}
<FormattedMessage
defaultMessage="Add new value: {value}"
description="add custom option to select input"
values={{
value: inputValue
}}
/>
</span>
</MenuItem>
)}
@ -259,7 +262,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
component="div"
data-tc="multiautocomplete-select-no-options"
>
{i18n.t("No results found")}
<FormattedMessage defaultMessage="No results found" />
</MenuItem>
)
)}

6
src/components/MultiSelectField/MultiSelectField.tsx
View file

@ -11,8 +11,8 @@ import {
WithStyles
} from "@material-ui/core/styles";
import React from "react";
import { FormattedMessage } from "react-intl";
import i18n from "../../i18n";
import Checkbox from "../Checkbox";
const styles = (theme: Theme) =>
@ -110,7 +110,9 @@ export const MultiSelectField = withStyles(styles, {
);
})
) : (
<MenuItem disabled={true}>{i18n.t("No results found")}</MenuItem>
<MenuItem disabled={true}>
<FormattedMessage defaultMessage="No results found" />
</MenuItem>
)}
</Select>
{hint && <FormHelperText>{hint}</FormHelperText>}

15
src/components/NotFoundPage/NotFoundPage.tsx
View file

@ -8,9 +8,9 @@ import {
import Typography from "@material-ui/core/Typography";
import React from "react";
import SVG from "react-inlinesvg";
import { FormattedMessage } from "react-intl";
import notFoundImage from "@assets/images/not-found-404.svg";
import i18n from "@saleor/i18n";
const styles = (theme: Theme) =>
createStyles({
@ -65,12 +65,14 @@ const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
<div className={classes.innerContainer}>
<div>
<Typography className={classes.header} variant="h3">
{i18n.t("Ooops!...")}
<FormattedMessage defaultMessage="Ooops!..." />
</Typography>
<Typography className={classes.header} variant="h4">
{i18n.t("Something's missing")}
<FormattedMessage defaultMessage="Something's missing" />
</Typography>
<Typography>
<FormattedMessage defaultMessage="Sorry, the page was not found" />
</Typography>
<Typography>{i18n.t("Sorry, the page was not found")}</Typography>
</div>
<div>
<Button
@ -79,7 +81,10 @@ const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
variant="contained"
onClick={onBack}
>
{i18n.t("Go back to dashboard", { context: "button" })}
<FormattedMessage
defaultMessage="Go back to dashboard"
description="button"
/>
</Button>
</div>
</div>

29
src/components/ProductList/ProductList.tsx
View file

@ -10,12 +10,12 @@ 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, useIntl } from "react-intl";
import TableCellAvatar, {
AVATAR_MARGIN
} from "@saleor/components/TableCellAvatar";
import { ProductListColumns } from "@saleor/config";
import i18n from "@saleor/i18n";
import { maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types";
import { isSelected } from "@saleor/utils/lists";
@ -97,6 +97,7 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
onUpdateListSettings,
onRowClick
}: ProductListProps) => {
const intl = useIntl();
const displayColumn = React.useCallback(
(column: ProductListColumns) =>
isSelected(column, settings.columns, (a, b) => a === b),
@ -124,22 +125,28 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
>
<TableCell className={classes.colName}>
<span className={classes.colNameHeader}>
{i18n.t("Name", { context: "object" })}
<FormattedMessage defaultMessage="Name" description="product" />
</span>
</TableCell>
{displayColumn("productType") && (
<TableCell className={classes.colType}>
{i18n.t("Type", { context: "object" })}
<FormattedMessage defaultMessage="Type" description="product" />
</TableCell>
)}
{displayColumn("isPublished") && (
<TableCell className={classes.colPublished}>
{i18n.t("Published", { context: "object" })}
<FormattedMessage
defaultMessage="Published"
description="product status"
/>
</TableCell>
)}
{displayColumn("price") && (
<TableCell className={classes.colPrice}>
{i18n.t("Price", { context: "object" })}
<FormattedMessage
defaultMessage="Price"
description="product"
/>
</TableCell>
)}
</TableHead>
@ -205,11 +212,13 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
<StatusLabel
label={
product.isAvailable
? i18n.t("Published", {
context: "product status"
? intl.formatMessage({
defaultMessage: "Published",
description: "product status"
})
: i18n.t("Not published", {
context: "product status"
: intl.formatMessage({
defaultMessage: "Not published",
description: "product status"
})
}
status={product.isAvailable ? "success" : "error"}
@ -237,7 +246,7 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
{i18n.t("No products found")}
<FormattedMessage defaultMessage="No products found" />
</TableCell>
</TableRow>
)

7
src/components/RadioGroupField/RadioGroupField.tsx
View file

@ -8,8 +8,7 @@ import RadioGroup from "@material-ui/core/RadioGroup";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import classNames from "classnames";
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
const styles = createStyles({
formControl: {
@ -83,7 +82,9 @@ export const RadioGroupField = withStyles(styles, {
/>
))
) : (
<MenuItem disabled={true}>{i18n.t("No results found")}</MenuItem>
<MenuItem disabled={true}>
<FormattedMessage defaultMessage="No results found" />
</MenuItem>
)}
</RadioGroup>
{hint && <FormHelperText>{hint}</FormHelperText>}

8
src/components/RichTextEditor/ImageEntity.tsx
View file

@ -13,8 +13,7 @@ import {
import DeleteIcon from "@material-ui/icons/Delete";
import { ContentState } from "draft-js";
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
interface ImageEntityProps {
children: React.ReactNode;
@ -88,7 +87,10 @@ const ImageEntity = withStyles(styles, {
}}
color="primary"
>
{i18n.t("Replace")}
<FormattedMessage
defaultMessage="Replace"
description="replace image, button"
/>
</Button>
<IconButton onClick={() => onRemove(entityKey)}>
<DeleteIcon color="primary" />

99
src/components/RichTextEditor/ImageSource.tsx
View file

@ -6,8 +6,9 @@ import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import { AtomicBlockUtils, EditorState, EntityInstance } from "draft-js";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import i18n from "../../i18n";
import { buttonMessages } from "@saleor/intl";
import Form from "../Form";
interface ImageSourceProps {
@ -21,16 +22,19 @@ interface ImageSourceProps {
onClose: () => void;
}
class ImageSource extends React.Component<ImageSourceProps> {
submit = (href: string) => {
const {
editorState,
entity,
entityKey,
entityType,
onComplete
} = this.props;
const ImageSource: React.FC<ImageSourceProps> = ({
editorState,
entity,
entityKey,
entityType,
onComplete,
onClose
}) => {
const intl = useIntl();
const initial = entity ? entity.getData().href : "";
const handleSubmit = (href: string) => {
if (href) {
const content = editorState.getCurrentContent();
if (entity) {
@ -60,41 +64,44 @@ class ImageSource extends React.Component<ImageSourceProps> {
}
};
render() {
const { entity, onClose } = this.props;
const initial = entity ? entity.getData().href : "";
return (
<Dialog onClose={onClose} open={true} fullWidth maxWidth="sm">
<Form
initial={{ href: initial }}
onSubmit={({ href }) => handleSubmit(href)}
>
{({ data, change, submit }) => (
<>
<DialogTitle>
<FormattedMessage
defaultMessage="Add Image Link"
description="dialog header"
/>
</DialogTitle>
<DialogContent>
<TextField
name="href"
fullWidth
label={intl.formatMessage({
defaultMessage: "Image URL"
})}
value={data.href}
onChange={change}
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<Button onClick={submit} color="primary" variant="contained">
<FormattedMessage {...buttonMessages.save} />
</Button>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
};
return (
<Dialog onClose={onClose} open={true} fullWidth maxWidth="sm">
<Form
initial={{ href: initial }}
onSubmit={({ href }) => this.submit(href)}
>
{({ data, change, submit }) => (
<>
<DialogTitle>{i18n.t("Add Image Link")}</DialogTitle>
<DialogContent>
<TextField
name="href"
fullWidth
label={i18n.t("Image URL")}
value={data.href}
onChange={change}
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
{i18n.t("Cancel", { context: "button" })}
</Button>
<Button onClick={submit} color="primary" variant="contained">
{i18n.t("Save", { context: "button" })}
</Button>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
}
}
export default ImageSource;

5
src/components/RichTextEditor/LinkEntity.tsx
View file

@ -14,8 +14,9 @@ import Typography from "@material-ui/core/Typography";
import DeleteIcon from "@material-ui/icons/Delete";
import { ContentState } from "draft-js";
import React from "react";
import { FormattedMessage } from "react-intl";
import i18n from "../../i18n";
import { buttonMessages } from "@saleor/intl";
import Link from "../Link";
interface LinkEntityProps {
@ -107,7 +108,7 @@ const LinkEntity = withStyles(styles, {
}}
color="primary"
>
{i18n.t("Edit")}
<FormattedMessage {...buttonMessages.edit} />
</Button>
<IconButton onClick={() => onRemove(entityKey)}>
<DeleteIcon color="primary" />

91
src/components/RichTextEditor/LinkSource.tsx
View file

@ -6,8 +6,9 @@ import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import { EditorState, EntityInstance, RichUtils } from "draft-js";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import i18n from "../../i18n";
import { buttonMessages } from "@saleor/intl";
import Form from "../Form";
interface LinkSourceProps {
@ -20,10 +21,17 @@ interface LinkSourceProps {
onClose: () => void;
}
class LinkSource extends React.Component<LinkSourceProps> {
submit = (url: string) => {
const { editorState, entityType, onComplete } = this.props;
const LinkSource: React.FC<LinkSourceProps> = ({
editorState,
entity,
entityType,
onComplete,
onClose
}) => {
const intl = useIntl();
const initial = entity ? entity.getData().url : "";
const handleSubmit = (url: string) => {
if (url) {
const content = editorState.getCurrentContent();
const contentWithEntity = content.createEntity(
@ -47,41 +55,44 @@ class LinkSource extends React.Component<LinkSourceProps> {
}
};
render() {
const { entity, onClose } = this.props;
const initial = entity ? entity.getData().url : "";
return (
<Dialog onClose={onClose} open={true} fullWidth maxWidth="sm">
<Form
initial={{ url: initial }}
onSubmit={({ url }) => handleSubmit(url)}
>
{({ data, change, submit }) => (
<>
<DialogTitle>
<FormattedMessage
defaultMessage="Add or Edit Link"
description="button"
/>
</DialogTitle>
<DialogContent>
<TextField
name="url"
fullWidth
label={intl.formatMessage({
defaultMessage: "URL Linked"
})}
value={data.url}
onChange={change}
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<Button onClick={submit} color="secondary" variant="contained">
<FormattedMessage {...buttonMessages.save} />
</Button>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
};
return (
<Dialog onClose={onClose} open={true} fullWidth maxWidth="sm">
<Form
initial={{ url: initial }}
onSubmit={({ url }) => this.submit(url)}
>
{({ data, change, submit }) => (
<>
<DialogTitle>{i18n.t("Add or Edit Link")}</DialogTitle>
<DialogContent>
<TextField
name="url"
fullWidth
label={i18n.t("URL Linked")}
value={data.url}
onChange={change}
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
{i18n.t("Cancel", { context: "button" })}
</Button>
<Button onClick={submit} color="secondary" variant="contained">
{i18n.t("Save", { context: "button" })}
</Button>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
}
}
export default LinkSource;

6
src/components/RowNumberSelect/RowNumberSelect.tsx
View file

@ -3,8 +3,8 @@ import Select from "@material-ui/core/Select";
import { Theme } from "@material-ui/core/styles";
import { createStyles, makeStyles, useTheme } from "@material-ui/styles";
import React from "react";
import { FormattedMessage } from "react-intl";
import i18n from "../../i18n";
import { ListSettings } from "../../types";
const useStyles = makeStyles(
@ -51,7 +51,9 @@ const RowNumberSelect: React.FC<RowNumberSelectProps> = ({
const classes = useStyles({ theme });
return (
<div className={className}>
<span className={classes.label}>{i18n.t("No of Rows:")}</span>
<span className={classes.label}>
<FormattedMessage defaultMessage="No of Rows:" />
</span>
<Select
className={classes.select}
value={settings.rowNumber}

14
src/components/SaveButtonBar/SaveButtonBar.tsx
View file

@ -8,9 +8,10 @@ import {
} from "@material-ui/core/styles";
import classNames from "classnames";
import React from "react";
import { useIntl } from "react-intl";
import useWindowScroll from "@saleor/hooks/useWindowScroll";
import i18n from "../../i18n";
import { buttonMessages } from "@saleor/intl";
import { maybe } from "../../misc";
import AppActionContext from "../AppLayout/AppActionContext";
import ConfirmButton, {
@ -82,6 +83,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
onSave,
...props
}: SaveButtonBarProps) => {
const intl = useIntl();
const scrollPosition = useWindowScroll();
const scrolledToBottom =
scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
@ -107,7 +109,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
>
{labels && labels.delete
? labels.delete
: i18n.t("Remove")}
: intl.formatMessage(buttonMessages.delete)}
</Button>
)}
<div className={classes.spacer} />
@ -119,9 +121,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
>
{maybe(
() => labels.cancel,
i18n.t("Cancel", {
context: "button"
})
intl.formatMessage(buttonMessages.cancel)
)}
</Button>
<ConfirmButton
@ -132,9 +132,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
>
{maybe(
() => labels.save,
i18n.t("Save", {
context: "button"
})
intl.formatMessage(buttonMessages.save)
)}
</ConfirmButton>
</Container>

20
src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
View file

@ -5,8 +5,9 @@ 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 i18n from "../../i18n";
import { buttonMessages } from "@saleor/intl";
import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton";
import Form from "../Form";
@ -31,6 +32,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
onSubmit,
open
}) => {
const intl = useIntl();
const [errors, setErrors] = React.useState(false);
const handleErrors = data => {
if (data.name.length) {
@ -44,9 +46,10 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
return (
<Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
<DialogTitle>
{i18n.t("Save Custom Search", {
context: "save filter tab"
})}
<FormattedMessage
defaultMessage="Save Custom Search"
description="save filter tab, header"
/>
</DialogTitle>
<Form initial={initialForm} onSubmit={handleErrors}>
{({ change, data, submit }) => (
@ -54,8 +57,9 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
<DialogContent>
<TextField
fullWidth
label={i18n.t("Search Name", {
context: "save search"
label={intl.formatMessage({
defaultMessage: "Search Name",
description: "save search tab"
})}
name={"name" as keyof SaveFilterTabDialogFormData}
value={data.name}
@ -66,7 +70,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
{i18n.t("Cancel", { context: "button" })}
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
@ -74,7 +78,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
variant="contained"
onClick={submit}
>
{i18n.t("Save")}
<FormattedMessage {...buttonMessages.save} />
</ConfirmButton>
</DialogActions>
</>

59
src/components/SeoForm/SeoForm.tsx
View file

@ -11,8 +11,8 @@ import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import classNames from "classnames";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import i18n from "../../i18n";
import CardTitle from "../CardTitle";
import FormSpacer from "../FormSpacer";
@ -88,16 +88,22 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
titlePlaceholder,
onChange
}: SeoFormProps) => {
const intl = useIntl();
const [expanded, setExpansionStatus] = React.useState(false);
const toggleExpansion = () => setExpansionStatus(!expanded);
return (
<Card>
<CardTitle
title={i18n.t("Search Engine Preview")}
title={intl.formatMessage({
defaultMessage: "Search Engine Preview"
})}
toolbar={
<Button color="primary" variant="text" onClick={toggleExpansion}>
{i18n.t("Edit website SEO")}
<FormattedMessage
defaultMessage="Edit website SEO"
description="button"
/>
</Button>
}
/>
@ -116,19 +122,24 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
label={
<div className={classes.labelContainer}>
<div className={classes.label}>
{i18n.t("Search engine title")}
<FormattedMessage defaultMessage="Search engine title" />
</div>
<span>
{i18n.t("{{ letters }} of {{ maxLetters }} characters", {
letters: title.length,
maxLetters: 70
})}
<FormattedMessage
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
description="character limit"
values={{
maxCharacters: 70,
numberOfCharacters: title.length
}}
/>
</span>
</div>
}
helperText={i18n.t(
"If empty, the preview shows what will be autogenerated."
)}
helperText={intl.formatMessage({
defaultMessage:
"If empty, the preview shows what will be autogenerated."
})}
value={title.slice(0, 69)}
disabled={loading || disabled}
placeholder={titlePlaceholder}
@ -141,19 +152,24 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
label={
<div className={classes.labelContainer}>
<div className={classes.label}>
{i18n.t("Search engine description")}
<FormattedMessage defaultMessage="Search engine description" />
</div>
<span>
{i18n.t("{{ letters }} of {{ maxLetters }} characters", {
letters: description.length,
maxLetters: 300
})}
<FormattedMessage
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
description="character limit"
values={{
maxCharacters: 300,
numberOfCharacters: description.length
}}
/>
</span>
</div>
}
helperText={i18n.t(
"If empty, the preview shows what will be autogenerated."
)}
helperText={intl.formatMessage({
defaultMessage:
"If empty, the preview shows what will be autogenerated."
})}
value={description ? description.slice(0, 299) : undefined}
onChange={onChange}
disabled={loading || disabled}
@ -170,9 +186,4 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
}
);
SeoForm.displayName = "SeoForm";
SeoForm.defaultProps = {
helperText: i18n.t(
"Add search engine title and description to make this product easier to find"
)
};
export default SeoForm;

17
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -13,10 +13,10 @@ import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import Downshift from "downshift";
import React from "react";
import { FormattedMessage } from "react-intl";
import { compareTwoStrings } from "string-similarity";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import i18n from "../../i18n";
import ArrowDropdownIcon from "../../icons/ArrowDropdown";
import Debounce, { DebounceProps } from "../Debounce";
@ -177,7 +177,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
data-tc="singleautocomplete-select-option"
>
<Typography color="textSecondary">
{i18n.t("None")}
<FormattedMessage defaultMessage="None" />
</Typography>
</MenuItem>
)}
@ -220,10 +220,13 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
})}
data-tc="singleautocomplete-select-option"
>
{i18n.t("Add new value: {{ value }}", {
context: "add custom option",
value: inputValue
})}
<FormattedMessage
defaultMessage="Add new value: {value}"
description="add custom select input option"
values={{
value: inputValue
}}
/>
</MenuItem>
)}
</>
@ -233,7 +236,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
component="div"
data-tc="singleautocomplete-select-no-options"
>
{i18n.t("No results found")}
<FormattedMessage defaultMessage="No results found" />
</MenuItem>
)}
</Paper>

7
src/components/SingleSelectField/SingleSelectField.tsx
View file

@ -7,8 +7,7 @@ import Select, { SelectProps } from "@material-ui/core/Select";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import classNames from "classnames";
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
const styles = createStyles({
formControl: {
@ -83,7 +82,9 @@ export const SingleSelectField = withStyles(styles, {
</MenuItem>
))
) : (
<MenuItem disabled={true}>{i18n.t("No results found")}</MenuItem>
<MenuItem disabled={true}>
<FormattedMessage defaultMessage="No results found" />
</MenuItem>
)}
</Select>
{hint && <FormHelperText>{hint}</FormHelperText>}

16
src/components/TableFilter/FilterChips.tsx
View file

@ -6,8 +6,8 @@ import Typography from "@material-ui/core/Typography";
import ClearIcon from "@material-ui/icons/Clear";
import { createStyles, makeStyles, useTheme } from "@material-ui/styles";
import React from "react";
import { FormattedMessage } from "react-intl";
import i18n from "../../i18n";
import Filter, { FilterContentSubmitData, IFilter } from "../Filter";
import Hr from "../Hr";
import Link from "../Link";
@ -163,9 +163,19 @@ export const FilterChips: React.FC<FilterChipProps> = ({
))}
</div>
{isCustomSearch ? (
<Link onClick={onFilterSave}>{i18n.t("Save Custom Search")}</Link>
<Link onClick={onFilterSave}>
<FormattedMessage
defaultMessage="Save Custom Search"
description="button"
/>
</Link>
) : (
<Link onClick={onFilterDelete}>{i18n.t("Delete Search")}</Link>
<Link onClick={onFilterDelete}>
<FormattedMessage
defaultMessage="Delete Search"
description="button"
/>
</Link>
)}
</div>
) : (

11
src/components/TableHead/TableHead.tsx
View file

@ -13,10 +13,10 @@ import TableRow from "@material-ui/core/TableRow";
import Typography from "@material-ui/core/Typography";
import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
import { Node } from "../../types";
import i18n from "../../i18n";
import Checkbox from "../Checkbox";
export interface TableHeadProps extends MuiTableHeadProps {
@ -129,9 +129,12 @@ const TableHead = withStyles(styles, {
<div className={classes.container}>
{selected && (
<Typography>
{i18n.t("Selected {{ number }} items", {
number: selected
})}
<FormattedMessage
defaultMessage="Selected {number} items"
values={{
number: selected
}}
/>
</Typography>
)}
<div className={classes.spacer} />

72
src/components/Timeline/Timeline.tsx
View file

@ -11,8 +11,7 @@ import {
import TextField from "@material-ui/core/TextField";
import PersonIcon from "@material-ui/icons/Person";
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage, useIntl } from "react-intl";
const styles = (theme: Theme) =>
createStyles({
@ -70,37 +69,44 @@ export const Timeline = withStyles(styles, { name: "Timeline" })(
);
export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => (
<div className={classes.noteRoot}>
<CardContent className={classes.noteTitle}>
<Avatar
style={{ background: deepPurple[500] }}
className={classes.avatar}
>
<PersonIcon />
</Avatar>
<TextField
className={classes.input}
placeholder={i18n.t("Leave your note here...")}
onChange={onChange}
value={message}
name="message"
fullWidth
multiline
InputProps={{
endAdornment: (
<Button color="primary" onClick={onSubmit}>
{i18n.t("Send", {
context: "add order note"
})}
</Button>
)
}}
variant="standard"
/>
</CardContent>
</div>
)
({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => {
const intl = useIntl();
return (
<div className={classes.noteRoot}>
<CardContent className={classes.noteTitle}>
<Avatar
style={{ background: deepPurple[500] }}
className={classes.avatar}
>
<PersonIcon />
</Avatar>
<TextField
className={classes.input}
placeholder={intl.formatMessage({
defaultMessage: "Leave your note here..."
})}
onChange={onChange}
value={message}
name="message"
fullWidth
multiline
InputProps={{
endAdornment: (
<Button color="primary" onClick={onSubmit}>
<FormattedMessage
defaultMessage="Send"
description="add order note, button"
/>
</Button>
)
}}
variant="standard"
/>
</CardContent>
</div>
);
}
);
Timeline.displayName = "Timeline";
export default Timeline;

45
src/components/VisibilityCard/VisibilityCard.tsx
View file

@ -8,12 +8,12 @@ import {
} from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";
import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch";
import { FormSpacer } from "@saleor/components/FormSpacer";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import i18n from "../../i18n";
import { DateContext } from "../Date/DateContext";
const styles = (theme: Theme) =>
@ -54,11 +54,17 @@ export const VisibilityCard = withStyles(styles, {
disabled,
onChange
}: VisibilityCardProps) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
const dateNow = React.useContext(DateContext);
return (
<Card>
<CardTitle title={i18n.t("Visibility")} />
<CardTitle
title={intl.formatMessage({
defaultMessage: "Visibility",
description: "section header"
})}
/>
<CardContent>
<div
className={
@ -69,18 +75,32 @@ export const VisibilityCard = withStyles(styles, {
>
<ControlledSwitch
name="isPublished"
label={i18n.t("Visible")}
uncheckedLabel={i18n.t("Hidden")}
label={intl.formatMessage({
defaultMessage: "Visible"
})}
uncheckedLabel={intl.formatMessage({
defaultMessage: "Hidden"
})}
secondLabel={
publicationDate
? isPublished
? i18n.t("since {{ date }}", {
date: localizeDate(publicationDate)
})
? intl.formatMessage(
{
defaultMessage: "since {date}"
},
{
date: localizeDate(publicationDate)
}
)
: Date.parse(publicationDate) > dateNow
? i18n.t("will be visible from {{ date }}", {
date: localizeDate(publicationDate)
})
? intl.formatMessage(
{
defaultMessage: "will be visible from {date}"
},
{
date: localizeDate(publicationDate)
}
)
: null
: null
}
@ -94,7 +114,10 @@ export const VisibilityCard = withStyles(styles, {
<TextField
error={!!errors.publicationDate}
disabled={disabled}
label={i18n.t("Publish on")}
label={intl.formatMessage({
defaultMessage: "Publish on",
description: "publish on date"
})}
name="publicationDate"
type="date"
fullWidth={true}

15
src/components/Weight/Weight.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import i18n from "../../i18n";
import { FormattedMessage } from "react-intl";
export interface Weight {
unit: string;
@ -9,10 +9,13 @@ export interface WeightProps {
weight: Weight;
}
const Weight: React.StatelessComponent<WeightProps> = ({ weight }) =>
i18n.t("{{ value }} {{ unit }}", {
context: "weight",
...weight
});
const Weight: React.StatelessComponent<WeightProps> = ({ weight }) => (
<FormattedMessage
defaultMessage="{value} {unit}"
description="weight"
values={weight}
/>
);
Weight.displayName = "Weight";
export default Weight;

44
src/components/WeightRange/WeightRange.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { FormattedMessage } from "react-intl";
import i18n from "../../i18n";
import { Weight } from "../Weight";
export interface WeightRangeProps {
@ -8,28 +8,32 @@ export interface WeightRangeProps {
to?: Weight;
}
const WeightRange: React.StatelessComponent<WeightRangeProps> = ({
from,
to
}) =>
from && to
? i18n.t("{{ fromValue }} {{ fromUnit }} - {{ toValue }} {{ toUnit }}", {
context: "weight",
const WeightRange: React.FC<WeightRangeProps> = ({ from, to }) =>
from && to ? (
<FormattedMessage
defaultMessage="{fromValue} {fromUnit} - {toValue} {toUnit}"
description="weight"
values={{
fromUnit: from.unit,
fromValue: from.value,
toUnit: to.unit,
toValue: to.value
})
: from && !to
? i18n.t("from {{ value }} {{ unit }}", {
context: "weight",
...from
})
: !from && to
? i18n.t("to {{ value }} {{ unit }}", {
context: "weight",
...to
})
: "-";
}}
/>
) : from && !to ? (
<FormattedMessage
defaultMessage="from {value} {unit}"
description="weight"
values={from}
/>
) : !from && to ? (
<FormattedMessage
defaultMessage="to {value} {unit}"
description="weight"
values={to}
/>
) : (
<span>-</span>
);
WeightRange.displayName = "WeightRange";
export default WeightRange;

4
src/intl.ts
View file

@ -66,6 +66,10 @@ export const buttonMessages = defineMessages({
defaultMessage: "Confirm",
description: "button"
},
delete: {
defaultMessage: "Delete",
description: "button"
},
edit: {
defaultMessage: "Edit",
description: "button"