Refactor navigation section translations (#117)

* Refactor navigation section translations

* Add missing id

* Update pot file
This commit is contained in:
Dominik Żegleń 2019-08-26 16:51:47 +02:00 committed by dominik-zeglen
parent 290f6ca396
commit f78e5aea31
11 changed files with 506 additions and 179 deletions

View file

@ -1,6 +1,6 @@
msgid "" msgid ""
msgstr "" msgstr ""
"POT-Creation-Date: 2019-08-26T14:18:06.591Z\n" "POT-Creation-Date: 2019-08-26T14:24:42.452Z\n"
"Content-Type: text/plain; charset=UTF-8\n" "Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n" "Content-Transfer-Encoding: 8bit\n"
"MIME-Version: 1.0\n" "MIME-Version: 1.0\n"
@ -51,6 +51,30 @@ msgctxt "dialog title"
msgid "Add Address" msgid "Add Address"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuItemDialog/MenuItemDialog.json
#. [menuItemDialogAddItem] - create new menu item, header
#. defaultMessage is:
#. Add Item
msgctxt "create new menu item, header"
msgid "Add Item"
msgstr ""
#: build/locale/src/navigation/components/MenuCreateDialog/MenuCreateDialog.json
#. [menuCreateDialogHeader] - dialog header
#. defaultMessage is:
#. Add Menu
msgctxt "dialog header"
msgid "Add Menu"
msgstr ""
#: build/locale/src/navigation/components/MenuListPage/MenuListPage.json
#. [menuListPageAddMenu] - button
#. defaultMessage is:
#. Add Menu
msgctxt "button"
msgid "Add Menu"
msgstr ""
#: build/locale/src/discounts/components/SaleListPage/SaleListPage.json #: build/locale/src/discounts/components/SaleListPage/SaleListPage.json
#. [src.discounts.components.SaleListPage.1742771332] - button #. [src.discounts.components.SaleListPage.1742771332] - button
#. defaultMessage is: #. defaultMessage is:
@ -123,6 +147,22 @@ msgctxt "button"
msgid "Add customer" msgid "Add customer"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuItems/MenuItems.json
#. [menuItemsAddItem] - add new menu item
#. defaultMessage is:
#. Add new item
msgctxt "add new menu item"
msgid "Add new item"
msgstr ""
#: build/locale/src/navigation/components/MenuItems/MenuItems.json
#. [menuItemsPlaceholder]
#. defaultMessage is:
#. Add new menu item to begin creating menu
msgctxt "description"
msgid "Add new menu item to begin creating menu"
msgstr ""
#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
#. [src.categories.components.CategoryProducts.3554578821] - button #. [src.categories.components.CategoryProducts.3554578821] - button
#. defaultMessage is: #. defaultMessage is:
@ -271,6 +311,14 @@ msgctxt "description"
msgid "Are you sure you want to delete collection's image?" msgid "Are you sure you want to delete collection's image?"
msgstr "" msgstr ""
#: build/locale/src/navigation/views/MenuDetails/index.json
#. [menuDetailsDeleteMenuContent]
#. defaultMessage is:
#. Are you sure you want to delete menu {menuName}?
msgctxt "description"
msgid "Are you sure you want to delete menu {menuName}?"
msgstr ""
#: build/locale/src/customers/views/CustomerAddresses.json #: build/locale/src/customers/views/CustomerAddresses.json
#. [src.customers.views.3689332763] #. [src.customers.views.3689332763]
#. defaultMessage is: #. defaultMessage is:
@ -355,6 +403,14 @@ msgctxt "description"
msgid "Are you sure you want to delete {counter,plural,one{this customer} other{{displayQuantity} customers}}?" msgid "Are you sure you want to delete {counter,plural,one{this customer} other{{displayQuantity} customers}}?"
msgstr "" msgstr ""
#: build/locale/src/navigation/views/MenuList.json
#. [menuListDeleteMenusContent]
#. defaultMessage is:
#. Are you sure you want to delete {counter,plural,one{this menu} other{{displayQuantity} menus}}?
msgctxt "description"
msgid "Are you sure you want to delete {counter,plural,one{this menu} other{{displayQuantity} menus}}?"
msgstr ""
#: build/locale/src/discounts/views/SaleList.json #: build/locale/src/discounts/views/SaleList.json
#. [src.discounts.views.2516361175] - dialog content #. [src.discounts.views.2516361175] - dialog content
#. defaultMessage is: #. defaultMessage is:
@ -379,6 +435,14 @@ msgctxt "delete customer, dialog content"
msgid "Are you sure you want to delete {email}?" msgid "Are you sure you want to delete {email}?"
msgstr "" msgstr ""
#: build/locale/src/navigation/views/MenuList.json
#. [menuListDeleteMenuContent]
#. defaultMessage is:
#. Are you sure you want to delete {menuName}?
msgctxt "description"
msgid "Are you sure you want to delete {menuName}?"
msgstr ""
#: build/locale/src/discounts/views/SaleDetails.json #: build/locale/src/discounts/views/SaleDetails.json
#. [src.discounts.views.1457489953] - dialog content #. [src.discounts.views.1457489953] - dialog content
#. defaultMessage is: #. defaultMessage is:
@ -588,7 +652,7 @@ msgid "Billing address"
msgstr "" msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.cancel] - button #. [cancel] - button
#. defaultMessage is: #. defaultMessage is:
#. Cancel #. Cancel
msgctxt "button" msgctxt "button"
@ -728,7 +792,7 @@ msgid "Configuration"
msgstr "" msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.confirm] - button #. [confirm] - button
#. defaultMessage is: #. defaultMessage is:
#. Confirm #. Confirm
msgctxt "button" msgctxt "button"
@ -815,6 +879,22 @@ msgctxt "description"
msgid "Created collection" msgid "Created collection"
msgstr "" msgstr ""
#: build/locale/src/navigation/views/MenuList.json
#. [menuListCreatedMenu]
#. defaultMessage is:
#. Created menu
msgctxt "description"
msgid "Created menu"
msgstr ""
#: build/locale/src/navigation/components/MenuDetailsPage/MenuDetailsPage.json
#. [menuDetailsPageHelperText]
#. defaultMessage is:
#. Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
msgctxt "description"
msgid "Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy"
msgstr ""
#: build/locale/src/customers/components/CustomerList/CustomerList.json #: build/locale/src/customers/components/CustomerList/CustomerList.json
#. [src.customers.components.CustomerList.2339105195] #. [src.customers.components.CustomerList.2339105195]
#. defaultMessage is: #. defaultMessage is:
@ -1095,6 +1175,26 @@ msgctxt "dialog title"
msgid "Delete image" msgid "Delete image"
msgstr "" msgstr ""
#: build/locale/src/navigation/views/MenuDetails/index.json
#. [menuDetailsDeleteMenuHeader] - dialog header
#. defaultMessage is:
#. Delete menu
#: build/locale/src/navigation/views/MenuList.json
#. [menuListDeleteMenuHeader] - dialog header
#. defaultMessage is:
#. Delete menu
msgctxt "dialog header"
msgid "Delete menu"
msgstr ""
#: build/locale/src/navigation/views/MenuList.json
#. [menuListDeleteMenusHeader] - dialog header
#. defaultMessage is:
#. Delete menus
msgctxt "dialog header"
msgid "Delete menus"
msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/categories/views/CategoryDetails.json
#. [src.categories.views.2507763081] - dialog title #. [src.categories.views.2507763081] - dialog title
#. defaultMessage is: #. defaultMessage is:
@ -1111,6 +1211,14 @@ msgctxt "description"
msgid "Deleted collection" msgid "Deleted collection"
msgstr "" msgstr ""
#: build/locale/src/navigation/views/MenuList.json
#. [menuListDeletedMenu]
#. defaultMessage is:
#. Deleted menu
msgctxt "description"
msgid "Deleted menu"
msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json #: build/locale/src/collections/views/CollectionDetails.json
#. [src.collections.views.3482612628] #. [src.collections.views.3482612628]
#. defaultMessage is: #. defaultMessage is:
@ -1204,7 +1312,7 @@ msgid "E-mail Address"
msgstr "" msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.edit] - button #. [edit] - button
#. defaultMessage is: #. defaultMessage is:
#. Edit #. Edit
msgctxt "button" msgctxt "button"
@ -1219,6 +1327,14 @@ msgctxt "dialog title"
msgid "Edit Address" msgid "Edit Address"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuItemDialog/MenuItemDialog.json
#. [menuItemDialogEditItem] - edit menu item, header
#. defaultMessage is:
#. Edit Item
msgctxt "edit menu item, header"
msgid "Edit Item"
msgstr ""
#: build/locale/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.json #: build/locale/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.json
#. [src.attributes.components.AttributeValueEditDialog.1395607402] - edit attribute value #. [src.attributes.components.AttributeValueEditDialog.1395607402] - edit attribute value
#. defaultMessage is: #. defaultMessage is:
@ -1383,6 +1499,14 @@ msgctxt "description"
msgid "If this option is disabled, discount will be counted for every eligible product" msgid "If this option is disabled, discount will be counted for every eligible product"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuList/MenuList.json
#. [menuListItems] - number of menu items
#. defaultMessage is:
#. Items
msgctxt "number of menu items"
msgid "Items"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.lastName] #. [src.lastName]
#. defaultMessage is: #. defaultMessage is:
@ -1431,8 +1555,24 @@ msgctxt "limit voucher"
msgid "Limit to one use per customer" msgid "Limit to one use per customer"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuItemDialog/MenuItemDialog.json
#. [menuItemDialogLinkLabel] - label
#. defaultMessage is:
#. Link
msgctxt "label"
msgid "Link"
msgstr ""
#: build/locale/src/navigation/components/MenuItemDialog/MenuItemDialog.json
#. [menuItemDialogAddLink] - add link to navigation
#. defaultMessage is:
#. Link to: {url}
msgctxt "add link to navigation"
msgid "Link to: {url}"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.manage] - button #. [manage] - button
#. defaultMessage is: #. defaultMessage is:
#. Manage #. Manage
msgctxt "button" msgctxt "button"
@ -1471,6 +1611,30 @@ msgctxt "description"
msgid "Manage your employees and their permissions" msgid "Manage your employees and their permissions"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuItems/MenuItems.json
#. [menuItemsHeader] - header
#. defaultMessage is:
#. Menu Items
msgctxt "header"
msgid "Menu Items"
msgstr ""
#: build/locale/src/navigation/components/MenuCreateDialog/MenuCreateDialog.json
#. [menuCreateDialogMenuTitleLabel]
#. defaultMessage is:
#. Menu Title
#: build/locale/src/navigation/components/MenuList/MenuList.json
#. [menuListMenutitle]
#. defaultMessage is:
#. Menu Title
#: build/locale/src/navigation/components/MenuProperties/MenuProperties.json
#. [menuPropertiesMenuTitle]
#. defaultMessage is:
#. Menu Title
msgctxt "description"
msgid "Menu Title"
msgstr ""
#: build/locale/src/discounts/components/VoucherSummary/VoucherSummary.json #: build/locale/src/discounts/components/VoucherSummary/VoucherSummary.json
#. [src.discounts.components.VoucherSummary.1836123577] - voucher value requirement #. [src.discounts.components.VoucherSummary.1836123577] - voucher value requirement
#. defaultMessage is: #. defaultMessage is:
@ -1563,6 +1727,14 @@ msgctxt "sale name"
msgid "Name" msgid "Name"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuItemDialog/MenuItemDialog.json
#. [menuItemDialogNameLabel] - menu item name
#. defaultMessage is:
#. Name
msgctxt "menu item name"
msgid "Name"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.navigation] - navigation section name #. [src.navigation] - navigation section name
#. defaultMessage is: #. defaultMessage is:
@ -1619,6 +1791,14 @@ msgctxt "description"
msgid "No customers found" msgid "No customers found"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuList/MenuList.json
#. [menuListNoMenus]
#. defaultMessage is:
#. No menus found
msgctxt "description"
msgid "No menus found"
msgstr ""
#: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json #: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
#. [src.customers.components.CustomerOrders.898333473] #. [src.customers.components.CustomerOrders.898333473]
#. defaultMessage is: #. defaultMessage is:
@ -1976,7 +2156,7 @@ msgid "Remember this will also delete all products assigned to this category."
msgstr "" msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.remove] - button #. [remove] - button
#. defaultMessage is: #. defaultMessage is:
#. Remove #. Remove
msgctxt "button" msgctxt "button"
@ -2000,7 +2180,7 @@ msgid "Sales"
msgstr "" msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.save] - button #. [save] - button
#. defaultMessage is: #. defaultMessage is:
#. Save #. Save
msgctxt "button" msgctxt "button"
@ -2071,6 +2251,14 @@ msgctxt "subsection header"
msgid "Shipping address" msgid "Shipping address"
msgstr "" msgstr ""
#: build/locale/src/intl.json
#. [show] - button
#. defaultMessage is:
#. Show
msgctxt "button"
msgid "Show"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [src.siteSettings] - site settings section name #. [src.siteSettings] - site settings section name
#. defaultMessage is: #. defaultMessage is:
@ -2103,6 +2291,14 @@ msgctxt "description"
msgid "Start Hour" msgid "Start Hour"
msgstr "" msgstr ""
#: build/locale/src/navigation/components/MenuItemDialog/MenuItemDialog.json
#. [menuItemDialogLinkPlaceholder]
#. defaultMessage is:
#. Start typing to begin search...
msgctxt "description"
msgid "Start typing to begin search..."
msgstr ""
#: build/locale/src/discounts/components/SaleList/SaleList.json #: build/locale/src/discounts/components/SaleList/SaleList.json
#. [src.discounts.components.SaleList.47059407] - sale start date #. [src.discounts.components.SaleList.47059407] - sale start date
#. defaultMessage is: #. defaultMessage is:
@ -2403,6 +2599,14 @@ msgctxt "dialog title"
msgid "Unassign products from collection" msgid "Unassign products from collection"
msgstr "" msgstr ""
#: build/locale/src/intl.json
#. [undo] - button
#. defaultMessage is:
#. Undo
msgctxt "button"
msgid "Undo"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json #: build/locale/src/collections/views/CollectionList.json
#. [src.collections.views.2237014112] - unpublish collections #. [src.collections.views.2237014112] - unpublish collections
#. defaultMessage is: #. defaultMessage is:

View file

@ -52,27 +52,43 @@ export const commonMessages = defineMessages({
export const buttonMessages = defineMessages({ export const buttonMessages = defineMessages({
cancel: { cancel: {
defaultMessage: "Cancel", defaultMessage: "Cancel",
description: "button" description: "button",
id: "cancel"
}, },
confirm: { confirm: {
defaultMessage: "Confirm", defaultMessage: "Confirm",
description: "button" description: "button",
id: "confirm"
}, },
edit: { edit: {
defaultMessage: "Edit", defaultMessage: "Edit",
description: "button" description: "button",
id: "edit"
}, },
manage: { manage: {
defaultMessage: "Manage", defaultMessage: "Manage",
description: "button" description: "button",
id: "manage"
}, },
remove: { remove: {
defaultMessage: "Remove", defaultMessage: "Remove",
description: "button" description: "button",
id: "remove"
}, },
save: { save: {
defaultMessage: "Save", defaultMessage: "Save",
description: "button" description: "button",
id: "save"
},
show: {
defaultMessage: "Show",
description: "button",
id: "show"
},
undo: {
defaultMessage: "Undo",
description: "button",
id: "undo"
} }
}); });

View file

@ -5,12 +5,13 @@ import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle"; import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ConfirmButton, { import ConfirmButton, {
ConfirmButtonTransitionState ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton"; } from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form"; import Form from "@saleor/components/Form";
import i18n from "../../../i18n"; import { buttonMessages } from "@saleor/intl";
export interface MenuCreateDialogFormData { export interface MenuCreateDialogFormData {
name: string; name: string;
@ -34,46 +35,55 @@ const MenuCreateDialog: React.FC<MenuCreateDialogProps> = ({
onClose, onClose,
onConfirm, onConfirm,
open open
}) => ( }) => {
<Dialog onClose={onClose} maxWidth="sm" fullWidth open={open}> const intl = useIntl();
<DialogTitle>
{i18n.t("Add Menu", { return (
context: "create menu modal window title" <Dialog onClose={onClose} maxWidth="sm" fullWidth open={open}>
})} <DialogTitle>
</DialogTitle> <FormattedMessage
<Form initial={initialForm} onSubmit={onConfirm}> defaultMessage="Add Menu"
{({ change, data, errors: formErrors, submit }) => ( description="dialog header"
<> id="menuCreateDialogHeader"
<DialogContent> />
<TextField </DialogTitle>
disabled={disabled} <Form initial={initialForm} onSubmit={onConfirm}>
error={!!formErrors.name} {({ change, data, errors: formErrors, submit }) => (
fullWidth <>
helperText={formErrors.name} <DialogContent>
label={i18n.t("Menu Title")} <TextField
name={"name" as keyof MenuCreateDialogFormData} disabled={disabled}
value={data.name} error={!!formErrors.name}
onChange={change} fullWidth
/> helperText={formErrors.name}
</DialogContent> label={intl.formatMessage({
<DialogActions> defaultMessage: "Menu Title",
<Button onClick={onClose}> id: "menuCreateDialogMenuTitleLabel"
{i18n.t("Cancel", { context: "button" })} })}
</Button> name={"name" as keyof MenuCreateDialogFormData}
<ConfirmButton value={data.name}
transitionState={confirmButtonState} onChange={change}
color="primary" />
variant="contained" </DialogContent>
onClick={submit} <DialogActions>
> <Button onClick={onClose}>
{i18n.t("Create")} <FormattedMessage {...buttonMessages.cancel} />
</ConfirmButton> </Button>
</DialogActions> <ConfirmButton
</> transitionState={confirmButtonState}
)} color="primary"
</Form> variant="contained"
</Dialog> onClick={submit}
); >
<FormattedMessage {...buttonMessages.save} />
</ConfirmButton>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
};
MenuCreateDialog.displayName = "MenuCreateDialog"; MenuCreateDialog.displayName = "MenuCreateDialog";
export default MenuCreateDialog; export default MenuCreateDialog;

View file

@ -1,5 +1,6 @@
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import AppHeader from "@saleor/components/AppHeader"; import AppHeader from "@saleor/components/AppHeader";
import CardSpacer from "@saleor/components/CardSpacer"; import CardSpacer from "@saleor/components/CardSpacer";
@ -8,7 +9,7 @@ import Container from "@saleor/components/Container";
import Form from "@saleor/components/Form"; import Form from "@saleor/components/Form";
import Grid from "@saleor/components/Grid"; import Grid from "@saleor/components/Grid";
import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SaveButtonBar from "@saleor/components/SaveButtonBar";
import i18n from "../../../i18n"; import { sectionNames } from "@saleor/intl";
import { maybe } from "../../../misc"; import { maybe } from "../../../misc";
import { MenuDetails_menu } from "../../types/MenuDetails"; import { MenuDetails_menu } from "../../types/MenuDetails";
import { MenuItemType } from "../MenuItemDialog"; import { MenuItemType } from "../MenuItemDialog";
@ -47,6 +48,8 @@ const MenuDetailsPage: React.StatelessComponent<MenuDetailsPageProps> = ({
onItemEdit, onItemEdit,
onSubmit onSubmit
}) => { }) => {
const intl = useIntl();
const initialForm: MenuDetailsFormData = { const initialForm: MenuDetailsFormData = {
name: maybe(() => menu.name, "") name: maybe(() => menu.name, "")
}; };
@ -76,14 +79,19 @@ const MenuDetailsPage: React.StatelessComponent<MenuDetailsPageProps> = ({
<Form initial={initialForm} onSubmit={handleSubmit}> <Form initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, hasChanged, submit }) => ( {({ change, data, hasChanged, submit }) => (
<Container> <Container>
<AppHeader onBack={onBack}>{i18n.t("Navigation")}</AppHeader> <AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.navigation)}
</AppHeader>
<Grid variant="inverted"> <Grid variant="inverted">
<div> <div>
<Typography variant="h5">{i18n.t("Navigation")}</Typography> <Typography variant="h5">
{intl.formatMessage(sectionNames.navigation)}
</Typography>
<Typography> <Typography>
{i18n.t( <FormattedMessage
"Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy" defaultMessage="Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy"
)} id="menuDetailsPageHelperText"
/>
</Typography> </Typography>
</div> </div>
<div> <div>

View file

@ -7,6 +7,7 @@ import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import isUrl from "is-url"; import isUrl from "is-url";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import AutocompleteSelectMenu from "@saleor/components/AutocompleteSelectMenu"; import AutocompleteSelectMenu from "@saleor/components/AutocompleteSelectMenu";
import ConfirmButton, { import ConfirmButton, {
@ -18,7 +19,7 @@ import { SearchCollections_collections_edges_node } from "@saleor/containers/Sea
import { SearchPages_pages_edges_node } from "@saleor/containers/SearchPages/types/SearchPages"; import { SearchPages_pages_edges_node } from "@saleor/containers/SearchPages/types/SearchPages";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import useStateFromProps from "@saleor/hooks/useStateFromProps"; import useStateFromProps from "@saleor/hooks/useStateFromProps";
import i18n from "@saleor/i18n"; import { buttonMessages, sectionNames } from "@saleor/intl";
import { UserError } from "@saleor/types"; import { UserError } from "@saleor/types";
import { getErrors, getFieldError } from "@saleor/utils/errors"; import { getErrors, getFieldError } from "@saleor/utils/errors";
import { getMenuItemByValue, IMenu } from "@saleor/utils/menu"; import { getMenuItemByValue, IMenu } from "@saleor/utils/menu";
@ -86,6 +87,7 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
collections, collections,
pages pages
}) => { }) => {
const intl = useIntl();
const errors = useModalDialogErrors(apiErrors, open); const errors = useModalDialogErrors(apiErrors, open);
const [displayValue, setDisplayValue] = React.useState( const [displayValue, setDisplayValue] = React.useState(
initialDisplayValue || "" initialDisplayValue || ""
@ -121,7 +123,7 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
value: "category:" + category.id value: "category:" + category.id
})), })),
data: {}, data: {},
label: i18n.t("Categories") label: intl.formatMessage(sectionNames.categories)
} }
]; ];
} }
@ -137,7 +139,7 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
value: "collection:" + collection.id value: "collection:" + collection.id
})), })),
data: {}, data: {},
label: i18n.t("Collections") label: intl.formatMessage(sectionNames.collections)
} }
]; ];
} }
@ -153,7 +155,7 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
value: "page:" + page.id value: "page:" + page.id
})), })),
data: {}, data: {},
label: i18n.t("Pages") label: intl.formatMessage(sectionNames.pages)
} }
]; ];
} }
@ -164,12 +166,12 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
children: [], children: [],
data: {}, data: {},
label: ( label: (
<div <FormattedMessage
dangerouslySetInnerHTML={{ defaultMessage="Link to: {url}"
__html: i18n.t("Link to: <strong>{{ url }}</strong>", { description="add link to navigation"
context: "add link to navigation", id="menuItemDialogAddLink"
url values={{
}) url: <strong>{url}</strong>
}} }}
/> />
), ),
@ -218,17 +220,25 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
> >
<DialogTitle> <DialogTitle>
{!!initial {!!initial
? i18n.t("Edit Item", { ? intl.formatMessage({
context: "edit menu item" defaultMessage: "Edit Item",
description: "edit menu item, header",
id: "menuItemDialogEditItem"
}) })
: i18n.t("Add Item", { : intl.formatMessage({
context: "create new menu item" defaultMessage: "Add Item",
description: "create new menu item, header",
id: "menuItemDialogAddItem"
})} })}
</DialogTitle> </DialogTitle>
<DialogContent style={{ overflowY: "visible" }}> <DialogContent style={{ overflowY: "visible" }}>
<TextField <TextField
disabled={disabled} disabled={disabled}
label={i18n.t("Name")} label={intl.formatMessage({
defaultMessage: "Name",
description: "menu item name",
id: "menuItemDialogNameLabel"
})}
fullWidth fullWidth
value={data.name} value={data.name}
onChange={event => onChange={event =>
@ -246,13 +256,20 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
disabled={disabled} disabled={disabled}
onChange={handleSelectChange} onChange={handleSelectChange}
name="id" name="id"
label={i18n.t("Link")} label={intl.formatMessage({
defaultMessage: "Link",
description: "label",
id: "menuItemDialogLinkLabel"
})}
displayValue={displayValue} displayValue={displayValue}
loading={loading} loading={loading}
options={options} options={options}
error={!!idError} error={!!idError}
helperText={idError} helperText={idError}
placeholder={i18n.t("Start typing to begin search...")} placeholder={intl.formatMessage({
defaultMessage: "Start typing to begin search...",
id: "menuItemDialogLinkPlaceholder"
})}
onInputChange={handleQueryChange} onInputChange={handleQueryChange}
/> />
{mutationErrors.length > 0 && ( {mutationErrors.length > 0 && (
@ -268,7 +285,7 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={onClose}> <Button onClick={onClose}>
{i18n.t("Cancel", { context: "button" })} <FormattedMessage {...buttonMessages.cancel} />
</Button> </Button>
<ConfirmButton <ConfirmButton
transitionState={confirmButtonState} transitionState={confirmButtonState}
@ -276,7 +293,7 @@ const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
variant="contained" variant="contained"
onClick={handleSubmit} onClick={handleSubmit}
> >
{i18n.t("Submit", { context: "button" })} <FormattedMessage {...buttonMessages.confirm} />
</ConfirmButton> </ConfirmButton>
</DialogActions> </DialogActions>
</Dialog> </Dialog>

View file

@ -14,12 +14,13 @@ import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit"; import EditIcon from "@material-ui/icons/Edit";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import SortableTree, { NodeRendererProps, TreeItem } from "react-sortable-tree"; import SortableTree, { NodeRendererProps, TreeItem } from "react-sortable-tree";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import useTheme from "@saleor/hooks/useTheme"; import useTheme from "@saleor/hooks/useTheme";
import i18n from "../../../i18n"; import { buttonMessages } from "@saleor/intl";
import Draggable from "../../../icons/Draggable"; import Draggable from "../../../icons/Draggable";
import { MenuDetails_menu_items } from "../../types/MenuDetails"; import { MenuDetails_menu_items } from "../../types/MenuDetails";
import { MenuItemType } from "../MenuItemDialog"; import { MenuItemType } from "../MenuItemDialog";
@ -121,7 +122,10 @@ const Placeholder = withStyles(styles, {
})(({ classes }: WithStyles<typeof styles>) => ( })(({ classes }: WithStyles<typeof styles>) => (
<Paper className={classes.row} elevation={0}> <Paper className={classes.row} elevation={0}>
<Typography> <Typography>
{i18n.t("Add new menu item to begin creating menu")} <FormattedMessage
defaultMessage="Add new menu item to begin creating menu"
id="menuItemsPlaceholder"
/>
</Typography> </Typography>
</Paper> </Paper>
)); ));
@ -175,7 +179,7 @@ const Node = withStyles(styles, {
</Typography> </Typography>
<div className={classes.spacer} /> <div className={classes.spacer} />
<Button color="primary" onClick={node.onClick}> <Button color="primary" onClick={node.onClick}>
{i18n.t("Show")} <FormattedMessage {...buttonMessages.show} />
</Button> </Button>
<IconButton color="primary" onClick={node.onEdit}> <IconButton color="primary" onClick={node.onEdit}>
<EditIcon /> <EditIcon />
@ -209,15 +213,20 @@ const MenuItems = withStyles(styles, { name: "MenuItems" })(
onItemEdit, onItemEdit,
onUndo onUndo
}: MenuItemsProps & WithStyles<typeof styles>) => { }: MenuItemsProps & WithStyles<typeof styles>) => {
const intl = useIntl();
const { isDark } = useTheme(); const { isDark } = useTheme();
return ( return (
<Card> <Card>
<CardTitle <CardTitle
title={i18n.t("Menu Items")} title={intl.formatMessage({
defaultMessage: "Menu Items",
description: "header",
id: "menuItemsHeader"
})}
toolbar={ toolbar={
<Button color="primary" disabled={!canUndo} onClick={onUndo}> <Button color="primary" disabled={!canUndo} onClick={onUndo}>
{i18n.t("Undo")} <FormattedMessage {...buttonMessages.undo} />
</Button> </Button>
} }
/> />
@ -266,9 +275,11 @@ const MenuItems = withStyles(styles, { name: "MenuItems" })(
</div> </div>
<CardActions className={classes.actions}> <CardActions className={classes.actions}>
<Button color="primary" onClick={onItemAdd}> <Button color="primary" onClick={onItemAdd}>
{i18n.t("Add new item", { <FormattedMessage
context: "add menu item" defaultMessage="Add new item"
})} description="add new menu item"
id="menuItemsAddItem"
/>
</Button> </Button>
</CardActions> </CardActions>
</Card> </Card>

View file

@ -12,13 +12,13 @@ import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import IconButtonTableCell from "@saleor/components/IconButtonTableCell"; import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination"; import TablePagination from "@saleor/components/TablePagination";
import i18n from "@saleor/i18n";
import { maybe, renderCollection } from "@saleor/misc"; import { maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types"; import { ListActions, ListProps } from "@saleor/types";
import { MenuList_menus_edges_node } from "../../types/MenuList"; import { MenuList_menus_edges_node } from "../../types/MenuList";
@ -76,10 +76,17 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
toolbar={toolbar} toolbar={toolbar}
> >
<TableCell className={classes.colTitle}> <TableCell className={classes.colTitle}>
{i18n.t("Menu Title", { context: "object" })} <FormattedMessage
defaultMessage="Menu Title"
id="menuListMenutitle"
/>
</TableCell> </TableCell>
<TableCell className={classes.colItems}> <TableCell className={classes.colItems}>
{i18n.t("Items", { context: "number of menu items" })} <FormattedMessage
defaultMessage="Items"
description="number of menu items"
id="menuListItems"
/>
</TableCell> </TableCell>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
@ -140,7 +147,10 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
() => ( () => (
<TableRow> <TableRow>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
{i18n.t("No menus found")} <FormattedMessage
defaultMessage="No menus found"
id="menuListNoMenus"
/>
</TableCell> </TableCell>
</TableRow> </TableRow>
) )

View file

@ -1,11 +1,12 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add"; import AddIcon from "@material-ui/icons/Add";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import AppHeader from "@saleor/components/AppHeader"; import AppHeader from "@saleor/components/AppHeader";
import Container from "@saleor/components/Container"; import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader"; import PageHeader from "@saleor/components/PageHeader";
import i18n from "@saleor/i18n"; import { sectionNames } from "@saleor/intl";
import { ListActions, PageListProps } from "@saleor/types"; import { ListActions, PageListProps } from "@saleor/types";
import { MenuList_menus_edges_node } from "../../types/MenuList"; import { MenuList_menus_edges_node } from "../../types/MenuList";
import MenuList from "../MenuList"; import MenuList from "../MenuList";
@ -21,21 +22,31 @@ const MenuListPage: React.StatelessComponent<MenuListPageProps> = ({
onAdd, onAdd,
onBack, onBack,
...listProps ...listProps
}) => ( }) => {
<Container> const intl = useIntl();
<AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader> return (
<PageHeader title={i18n.t("Navigation")}> <Container>
<Button <AppHeader onBack={onBack}>
color="primary" {intl.formatMessage(sectionNames.configuration)}
disabled={disabled} </AppHeader>
variant="contained" <PageHeader title={intl.formatMessage(sectionNames.navigation)}>
onClick={onAdd} <Button
> color="primary"
{i18n.t("Add Menu")} <AddIcon /> disabled={disabled}
</Button> variant="contained"
</PageHeader> onClick={onAdd}
<MenuList disabled={disabled} {...listProps} /> >
</Container> <FormattedMessage
); defaultMessage="Add Menu"
description="button"
id="menuListPageAddMenu"
/>
<AddIcon />
</Button>
</PageHeader>
<MenuList disabled={disabled} {...listProps} />
</Container>
);
};
MenuListPage.displayName = "MenuListPage"; MenuListPage.displayName = "MenuListPage";
export default MenuListPage; export default MenuListPage;

View file

@ -2,9 +2,10 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import React from "react"; import React from "react";
import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import i18n from "../../../i18n"; import { commonMessages } from "@saleor/intl";
import { MenuDetailsFormData } from "../MenuDetailsPage"; import { MenuDetailsFormData } from "../MenuDetailsPage";
export interface MenuPropertiesProps { export interface MenuPropertiesProps {
@ -17,20 +18,29 @@ const MenuProperties: React.StatelessComponent<MenuPropertiesProps> = ({
data, data,
disabled, disabled,
onChange onChange
}) => ( }) => {
<Card> const intl = useIntl();
<CardTitle title={i18n.t("General Information")} />
<CardContent> return (
<TextField <Card>
disabled={disabled} <CardTitle
name={"name" as keyof MenuDetailsFormData} title={intl.formatMessage(commonMessages.generalInformations)}
fullWidth
label={i18n.t("Menu Title")}
value={data.name}
onChange={onChange}
/> />
</CardContent> <CardContent>
</Card> <TextField
); disabled={disabled}
name={"name" as keyof MenuDetailsFormData}
fullWidth
label={intl.formatMessage({
defaultMessage: "Menu Title",
id: "menuPropertiesMenuTitle"
})}
value={data.name}
onChange={onChange}
/>
</CardContent>
</Card>
);
};
MenuProperties.displayName = "MenuProperties"; MenuProperties.displayName = "MenuProperties";
export default MenuProperties; export default MenuProperties;

View file

@ -1,5 +1,6 @@
import DialogContentText from "@material-ui/core/DialogContentText"; import DialogContentText from "@material-ui/core/DialogContentText";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog"; import ActionDialog from "@saleor/components/ActionDialog";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
@ -10,7 +11,6 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
import SearchCategories from "../../../containers/SearchCategories"; import SearchCategories from "../../../containers/SearchCategories";
import SearchCollections from "../../../containers/SearchCollections"; import SearchCollections from "../../../containers/SearchCollections";
import SearchPages from "../../../containers/SearchPages"; import SearchPages from "../../../containers/SearchPages";
import i18n from "../../../i18n";
import { getMutationState, maybe } from "../../../misc"; import { getMutationState, maybe } from "../../../misc";
import { pageUrl } from "../../../pages/urls"; import { pageUrl } from "../../../pages/urls";
import MenuDetailsPage, { import MenuDetailsPage, {
@ -58,6 +58,7 @@ interface MenuDetailsProps {
const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => { const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
const navigate = useNavigator(); const navigate = useNavigator();
const notify = useNotifier(); const notify = useNotifier();
const intl = useIntl();
const closeModal = () => const closeModal = () =>
navigate( navigate(
@ -236,21 +237,28 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
menuDelete({ variables: { id } }) menuDelete({ variables: { id } })
} }
variant="delete" variant="delete"
title={i18n.t("Remove menu")} title={intl.formatMessage({
defaultMessage: "Delete menu",
description: "dialog header",
id: "menuDetailsDeleteMenuHeader"
})}
> >
<DialogContentText <DialogContentText>
dangerouslySetInnerHTML={{ <FormattedMessage
__html: i18n.t( defaultMessage="Are you sure you want to delete menu {menuName}?"
"Are you sure you want to remove menu <strong>{{ name }}</strong>?", id="menuDetailsDeleteMenuContent"
{ values={{
name: maybe( menuName: (
() => data.menu.name, <strong>
"..." {maybe(
) () => data.menu.name,
} "..."
) )}
}} </strong>
/> )
}}
/>
</DialogContentText>
</ActionDialog> </ActionDialog>
<MenuItemCreateMutation <MenuItemCreateMutation

View file

@ -1,6 +1,7 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import DialogContentText from "@material-ui/core/DialogContentText"; import DialogContentText from "@material-ui/core/DialogContentText";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog"; import ActionDialog from "@saleor/components/ActionDialog";
import { configurationMenuUrl } from "@saleor/configuration"; import { configurationMenuUrl } from "@saleor/configuration";
@ -11,7 +12,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, { import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import i18n from "@saleor/i18n"; import { buttonMessages, commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { getMutationState, maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import MenuCreateDialog from "../components/MenuCreateDialog"; import MenuCreateDialog from "../components/MenuCreateDialog";
@ -40,6 +41,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
const { updateListSettings, settings } = useListSettings( const { updateListSettings, settings } = useListSettings(
ListViews.NAVIGATION_LIST ListViews.NAVIGATION_LIST
); );
const intl = useIntl();
const closeModal = () => const closeModal = () =>
navigate( navigate(
@ -66,8 +68,9 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
const handleCreate = (data: MenuCreate) => { const handleCreate = (data: MenuCreate) => {
if (data.menuCreate.errors.length === 0) { if (data.menuCreate.errors.length === 0) {
notify({ notify({
text: i18n.t("Created menu", { text: intl.formatMessage({
context: "notification" defaultMessage: "Created menu",
id: "menuListCreatedMenu"
}) })
}); });
navigate(menuUrl(data.menuCreate.menu.id)); navigate(menuUrl(data.menuCreate.menu.id));
@ -77,9 +80,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
const handleBulkDelete = (data: MenuBulkDelete) => { const handleBulkDelete = (data: MenuBulkDelete) => {
if (data.menuBulkDelete.errors.length === 0) { if (data.menuBulkDelete.errors.length === 0) {
notify({ notify({
text: i18n.t("Removed menus", { text: intl.formatMessage(commonMessages.savedChanges)
context: "notification"
})
}); });
closeModal(); closeModal();
reset(); reset();
@ -90,8 +91,9 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
const handleDelete = (data: MenuDelete) => { const handleDelete = (data: MenuDelete) => {
if (data.menuDelete.errors.length === 0) { if (data.menuDelete.errors.length === 0) {
notify({ notify({
text: i18n.t("Removed menu", { text: intl.formatMessage({
context: "notification" defaultMessage: "Deleted menu",
id: "menuListDeletedMenu"
}) })
}); });
closeModal(); closeModal();
@ -172,7 +174,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
) )
} }
> >
{i18n.t("Remove")} <FormattedMessage {...buttonMessages.remove} />
</Button> </Button>
} }
/> />
@ -199,27 +201,33 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
}) })
} }
variant="delete" variant="delete"
title={i18n.t("Remove menu")} title={intl.formatMessage({
defaultMessage: "Delete menu",
description: "dialog header",
id: "menuListDeleteMenuHeader"
})}
> >
<DialogContentText <DialogContentText>
dangerouslySetInnerHTML={{ <FormattedMessage
__html: i18n.t( defaultMessage="Are you sure you want to delete {menuName}?"
"Are you sure you want to remove <strong>{{ name }}</strong>?", id="menuListDeleteMenuContent"
{ values={{
name: maybe( menuName: maybe(
() => () =>
data.menus.edges.find( data.menus.edges.find(
edge => edge.node.id === params.id edge => edge.node.id === params.id
).node.name, ).node.name,
"..." "..."
) )
} }}
) />
}} </DialogContentText>
/>
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
open={params.action === "remove-many"} open={
params.action === "remove-many" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal} onClose={closeModal}
confirmButtonState={bulkDeleteTransitionState} confirmButtonState={bulkDeleteTransitionState}
onConfirm={() => onConfirm={() =>
@ -230,21 +238,35 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
}) })
} }
variant="delete" variant="delete"
title={i18n.t("Remove menus")} title={intl.formatMessage({
defaultMessage: "Delete menus",
description: "dialog header",
id: "menuListDeleteMenusHeader"
})}
> >
<DialogContentText <DialogContentText>
dangerouslySetInnerHTML={{ <FormattedMessage
__html: i18n.t( defaultMessage="Are you sure you want to delete {counter, plural,
"Are you sure you want to remove <strong>{{ number }}</strong> menus?", one {this menu}
{ other {{displayQuantity} menus}
number: maybe( }?"
() => params.ids.length.toString(), id="menuListDeleteMenusContent"
"..." values={{
) counter: maybe(
} () => params.ids.length.toString(),
) "..."
}} ),
/> displayQuantity: (
<strong>
{maybe(
() => params.ids.length.toString(),
"..."
)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog> </ActionDialog>
</> </>
); );