diff --git a/locale/messages.pot b/locale/messages.pot index 75fd31a14..ec05ea23d 100644 --- a/locale/messages.pot +++ b/locale/messages.pot @@ -1,6 +1,6 @@ msgid "" msgstr "" -"POT-Creation-Date: 2019-08-16T19:32:53.076Z\n" +"POT-Creation-Date: 2019-08-20T12:12:53.399Z\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" "MIME-Version: 1.0\n" @@ -39,6 +39,22 @@ msgctxt "button" msgid "Add category" msgstr "" +#: build/locale/src/collections/components/CollectionCreatePage/CollectionCreatePage.json +#. [collectionCreatePageHeader] - page header +#. defaultMessage is: +#. Add collection +msgctxt "page header" +msgid "Add collection" +msgstr "" + +#: build/locale/src/collections/components/CollectionListPage/CollectionListPage.json +#. [collectionListPageAddCollectionButton] - button +#. defaultMessage is: +#. Add collection +msgctxt "button" +msgid "Add collection" +msgstr "" + #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json #. [categoryProductsAddProductButton] - button #. defaultMessage is: @@ -63,6 +79,18 @@ msgctxt "description" msgid "Add search engine title and description to make this category easier to find" msgstr "" +#: build/locale/src/collections/components/CollectionCreatePage/CollectionCreatePage.json +#. [collectionSeo] +#. defaultMessage is: +#. Add search engine title and description to make this collection easier to find +#: build/locale/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.json +#. [collectionSeo] +#. defaultMessage is: +#. Add search engine title and description to make this collection easier to find +msgctxt "description" +msgid "Add search engine title and description to make this collection easier to find" +msgstr "" + #: build/locale/src/categories/components/CategoryList/CategoryList.json #. [categoryListAddSubcategoryButton] - button #. defaultMessage is: @@ -87,6 +115,14 @@ msgctxt "added new attribute value" msgid "Added new value" msgstr "" +#: build/locale/src/collections/views/CollectionDetails.json +#. [collectionDetailsAddedProduct] +#. defaultMessage is: +#. Added product to collection +msgctxt "description" +msgid "Added product to collection" +msgstr "" + #: build/locale/src/attributes/components/AttributeValues/AttributeValues.json #. [attributeValuesSlugColumnHeader] - attribute values list: slug column header #. defaultMessage is: @@ -104,86 +140,142 @@ msgid "All Subcategories" msgstr "" #: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json -#. [attributeValueDeleteDialogContentWithoutAttributeName] - remove attribute value +#. [attributeValueDeleteDialogContentWithoutAttributeName] - delete attribute value #. defaultMessage is: -#. Are you sure you want to remove "{name}" value? -msgctxt "remove attribute value" -msgid "Are you sure you want to remove \"{name}\" value?" +#. Are you sure you want to delete "{name}" value? +msgctxt "delete attribute value" +msgid "Are you sure you want to delete \"{name}\" value?" msgstr "" #: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json #. [attributeValueDeleteDialogContentWithAttributeName] #. defaultMessage is: -#. Are you sure you want to remove "{name}" value? If you remove it you won’t be able to assign it to any of the products with "{attributeName}" attribute. +#. Are you sure you want to delete "{name}" value? If you delete it you won’t be able to assign it to any of the products with "{attributeName}" attribute. msgctxt "description" -msgid "Are you sure you want to remove \"{name}\" value? If you remove it you won’t be able to assign it to any of the products with \"{attributeName}\" attribute." -msgstr "" - -#: build/locale/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.json -#. [attributeBulkDeleteDialogContent] - dialog content -#. defaultMessage is: -#. Are you sure you want to remove {counter,plural,one{this attribute} other{{displayQuantity} attributes}}? -msgctxt "dialog content" -msgid "Are you sure you want to remove {counter,plural,one{this attribute} other{{displayQuantity} attributes}}?" +msgid "Are you sure you want to delete \"{name}\" value? If you delete it you won’t be able to assign it to any of the products with \"{attributeName}\" attribute." msgstr "" #: build/locale/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.json #. [attributeDeleteDialogContent] - dialog content #. defaultMessage is: -#. Are you sure you want to remove {name}? +#. Are you sure you want to delete {attributeName}? msgctxt "dialog content" -msgid "Are you sure you want to remove {name}?" +msgid "Are you sure you want to delete {attributeName}?" msgstr "" #: build/locale/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.json -#. [ ( -
- {({ change, data, errors: formErrors, hasChanged, submit }) => ( - - {i18n.t("Collections")} - - -
- - - - change({ - target: { - name: "backgroundImage", - value: { - url: null, - value: null - } - } - } as any) - } - onImageUpload={file => - change({ - target: { - name: "backgroundImage", - value: { - url: URL.createObjectURL(file), - value: file - } - } - } as any) - } - onChange={change} - data={data} - /> - - -
-
+}: CollectionCreatePageProps) => { + const intl = useIntl(); + + return ( + + {({ change, data, errors: formErrors, hasChanged, submit }) => ( + + + {intl.formatMessage(sectionNames.collections)} + + +
- - - - - - + + + + change({ + target: { + name: "backgroundImage", + value: { + url: null, + value: null + } + } + } as any) + } + onImageUpload={file => + change({ + target: { + name: "backgroundImage", + value: { + url: URL.createObjectURL(file), + value: file + } + } + } as any) + } + onChange={change} + data={data} + /> + +
-
- - - - )} -
-); +
+
+ + + + + + +
+
+ + + + )} + + ); +}; CollectionCreatePage.displayName = "CollectionCreatePage"; export default CollectionCreatePage; diff --git a/src/collections/components/CollectionDetails/CollectionDetails.tsx b/src/collections/components/CollectionDetails/CollectionDetails.tsx index db44e3ccb..6cad95595 100644 --- a/src/collections/components/CollectionDetails/CollectionDetails.tsx +++ b/src/collections/components/CollectionDetails/CollectionDetails.tsx @@ -4,13 +4,14 @@ import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import { RawDraftContentState } from "draft-js"; import React from "react"; +import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import FormSpacer from "@saleor/components/FormSpacer"; import RichTextEditor from "@saleor/components/RichTextEditor"; -import i18n from "../../../i18n"; -import { maybe } from "../../../misc"; -import { FormErrors } from "../../../types"; +import { commonMessages } from "@saleor/intl"; +import { maybe } from "@saleor/misc"; +import { FormErrors } from "@saleor/types"; import { CollectionDetails_collection } from "../../types/CollectionDetails"; const styles = createStyles({ @@ -38,33 +39,43 @@ const CollectionDetails = withStyles(styles, { name: "CollectionDetails" })( data, onChange, errors - }: CollectionDetailsProps) => ( - - - - { + const intl = useIntl(); + + return ( + + - - JSON.parse(collection.descriptionJson))} - label={i18n.t("Description")} - name="description" - disabled={disabled} - onChange={onChange} - /> - - - ) + + + + JSON.parse(collection.descriptionJson))} + label={intl.formatMessage(commonMessages.description)} + name="description" + disabled={disabled} + onChange={onChange} + /> + + + ); + } ); CollectionDetails.displayName = "CollectionDetails"; export default CollectionDetails; diff --git a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx index 9c97df6ea..3801965b7 100644 --- a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx +++ b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx @@ -1,5 +1,6 @@ import { RawDraftContentState } from "draft-js"; import React from "react"; +import { useIntl } from "react-intl"; import AppHeader from "@saleor/components/AppHeader"; import { CardSpacer } from "@saleor/components/CardSpacer"; @@ -12,7 +13,7 @@ import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SeoForm from "@saleor/components/SeoForm"; import VisibilityCard from "@saleor/components/VisibilityCard"; -import i18n from "../../../i18n"; +import { sectionNames } from "@saleor/intl"; import { maybe } from "../../../misc"; import { ListActions, PageListProps } from "../../../types"; import { CollectionDetails_collection } from "../../types/CollectionDetails"; @@ -57,6 +58,8 @@ const CollectionDetailsPage: React.StatelessComponent< onSubmit, ...collectionProductsProps }: CollectionDetailsPageProps) => { + const intl = useIntl(); + return (
{({ change, data, errors: formErrors, hasChanged, submit }) => ( - {i18n.t("Collections")} + + {intl.formatMessage(sectionNames.collections)} + collection.name)} />
@@ -104,12 +109,11 @@ const CollectionDetailsPage: React.StatelessComponent< description={data.seoDescription} disabled={disabled} descriptionPlaceholder="" - helperText={i18n.t( - "Add search engine title and description to make this collection easier to find", - { - context: "help text" - } - )} + helperText={intl.formatMessage({ + defaultMessage: + "Add search engine title and description to make this collection easier to find", + id: "collectionSeo" + })} title={data.seoTitle} titlePlaceholder={maybe(() => collection.name)} onChange={change} @@ -128,8 +132,10 @@ const CollectionDetailsPage: React.StatelessComponent< disabled={disabled} name="isFeatured" onChange={change} - label={i18n.t("Feature on Homepage", { - context: "button" + label={intl.formatMessage({ + defaultMessage: "Feature on Homepage", + description: "switch button", + id: "collectionDetailsPageFeatureInputLabel" })} /> diff --git a/src/collections/components/CollectionImage/CollectionImage.tsx b/src/collections/components/CollectionImage/CollectionImage.tsx index 05758727c..61cb42afe 100644 --- a/src/collections/components/CollectionImage/CollectionImage.tsx +++ b/src/collections/components/CollectionImage/CollectionImage.tsx @@ -6,6 +6,7 @@ import { } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; @@ -15,7 +16,7 @@ import Hr from "@saleor/components/Hr"; import ImageTile from "@saleor/components/ImageTile"; import ImageUpload from "@saleor/components/ImageUpload"; import Skeleton from "@saleor/components/Skeleton"; -import i18n from "../../../i18n"; +import { commonMessages } from "@saleor/intl"; import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails"; const styles = (theme: Theme) => @@ -51,7 +52,7 @@ const styles = (theme: Theme) => } }); -export interface CollectionImageProps extends WithStyles { +export interface CollectionImageProps { data: { backgroundImageAlt: string; }; @@ -62,80 +63,79 @@ export interface CollectionImageProps extends WithStyles { } export const CollectionImage = withStyles(styles)( - class CollectionImageComponent extends React.Component< - CollectionImageProps, - {} - > { - imgInputAnchor = React.createRef(); + ({ + classes, + data, + onImageUpload, + image, + onChange, + onImageDelete + }: CollectionImageProps & WithStyles) => { + const anchor = React.useRef(); + const intl = useIntl(); - clickImgInput = () => this.imgInputAnchor.current.click(); + const handleImageUploadButtonClick = () => anchor.current.click(); - render() { - const { - classes, - data, - onImageUpload, - image, - onChange, - onImageDelete - } = this.props; - return ( - - - - onImageUpload(event.target.files[0])} - type="file" - ref={this.imgInputAnchor} - /> - - } - /> - {image === undefined ? ( - -
-
- -
-
- - ) : image === null ? ( - - ) : ( - - - - )} - {image && ( + return ( + + -
- - - + + onImageUpload(event.target.files[0])} + type="file" + ref={anchor} + /> - )} - - ); - } + } + /> + {image === undefined ? ( + +
+
+ +
+
+ + ) : image === null ? ( + + ) : ( + + + + )} + {image && ( + <> +
+ + + + + )} + + ); } ); CollectionImage.displayName = "CollectionImage"; diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx index fd63f69a3..bf3808b0a 100644 --- a/src/collections/components/CollectionList/CollectionList.tsx +++ b/src/collections/components/CollectionList/CollectionList.tsx @@ -11,13 +11,13 @@ 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 Checkbox from "@saleor/components/Checkbox"; import Skeleton from "@saleor/components/Skeleton"; import StatusLabel from "@saleor/components/StatusLabel"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; -import i18n from "@saleor/i18n"; import { maybe, renderCollection } from "@saleor/misc"; import { ListActions, ListProps } from "@saleor/types"; import { CollectionList_collections_edges_node } from "../../types/CollectionList"; @@ -68,107 +68,136 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })( toggle, toggleAll, toolbar - }: CollectionListProps) => ( - - - - - {i18n.t("Category Name", { context: "table cell" })} - - - {i18n - .t("No. Products", { context: "table cell" }) - .replace(" ", "\xa0")} - - - {i18n.t("Availability", { context: "table cell" })} - - - - - - - - - {renderCollection( - collections, - collection => { - const isSelected = collection ? isChecked(collection.id) : false; - return ( - - - toggle(collection.id)} + }: CollectionListProps) => { + const intl = useIntl(); + + return ( + +
+ + + + + + + + + + + + + + + + + + {renderCollection( + collections, + collection => { + const isSelected = collection + ? isChecked(collection.id) + : false; + return ( + + + toggle(collection.id)} + /> + + + {maybe( + () => collection.name, + + )} + + + {maybe( + () => collection.products.totalCount, + + )} + + + {maybe( + () => ( + + ), + + )} + + + ); + }, + () => ( + + + - - {maybe( - () => collection.name, - - )} - - - {maybe( - () => collection.products.totalCount, - - )} - - - {maybe( - () => ( - - ), - - )} - - ); - }, - () => ( - - - {i18n.t("No collections found")} - - - ) - )} - -
- - ) + ) + )} + + + + ); + } ); CollectionList.displayName = "CollectionList"; export default CollectionList; diff --git a/src/collections/components/CollectionListPage/CollectionListPage.tsx b/src/collections/components/CollectionListPage/CollectionListPage.tsx index b115569fb..02901b1f9 100644 --- a/src/collections/components/CollectionListPage/CollectionListPage.tsx +++ b/src/collections/components/CollectionListPage/CollectionListPage.tsx @@ -1,10 +1,11 @@ import Button from "@material-ui/core/Button"; import AddIcon from "@material-ui/icons/Add"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import { Container } from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; -import i18n from "@saleor/i18n"; +import { sectionNames } from "@saleor/intl"; import { ListActions, PageListProps } from "@saleor/types"; import { CollectionList_collections_edges_node } from "../../types/CollectionList"; import CollectionList from "../CollectionList/CollectionList"; @@ -17,21 +18,29 @@ const CollectionListPage: React.StatelessComponent = ({ disabled, onAdd, ...listProps -}) => ( - - - - - - -); +}) => { + const intl = useIntl(); + + return ( + + + + + + + ); +}; CollectionListPage.displayName = "CollectionListPage"; export default CollectionListPage; diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index b957a489a..2423969e4 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx @@ -14,6 +14,7 @@ import TableFooter from "@material-ui/core/TableFooter"; import TableRow from "@material-ui/core/TableRow"; import DeleteIcon from "@material-ui/icons/Delete"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import Checkbox from "@saleor/components/Checkbox"; @@ -24,7 +25,6 @@ import TableCellAvatar, { } from "@saleor/components/TableCellAvatar"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; -import i18n from "../../../i18n"; import { maybe, renderCollection } from "../../../misc"; import { ListActions, PageListProps } from "../../../types"; import { CollectionDetails_collection } from "../../types/CollectionDetails"; @@ -83,137 +83,170 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })( toggle, toggleAll, toolbar - }: CollectionProductsProps) => ( - - - ) - } - toolbar={ - - } - /> - - collection.products.edges.map(edge => edge.node))} - toggleAll={toggleAll} - toolbar={toolbar} - > - - - {i18n.t("Name", { context: "table header" })} - - - - {i18n.t("Type", { context: "table header" })} - - - {i18n.t("Published", { context: "table header" })} - - - - - - pageInfo.hasNextPage)} - onNextPage={onNextPage} - hasPreviousPage={maybe(() => pageInfo.hasPreviousPage)} - onPreviousPage={onPreviousPage} - /> - - - - {renderCollection( - maybe(() => collection.products.edges.map(edge => edge.node)), - product => { - const isSelected = product ? isChecked(product.id) : false; + }: CollectionProductsProps) => { + const intl = useIntl(); - return ( - - - toggle(product.id)} + return ( + + + ) + } + toolbar={ + + } + /> +
+ + collection.products.edges.map(edge => edge.node) + )} + toggleAll={toggleAll} + toolbar={toolbar} + > + + + + + + + + + + + + + + + + pageInfo.hasNextPage)} + onNextPage={onNextPage} + hasPreviousPage={maybe(() => pageInfo.hasPreviousPage)} + onPreviousPage={onPreviousPage} + /> + + + + {renderCollection( + maybe(() => collection.products.edges.map(edge => edge.node)), + product => { + const isSelected = product ? isChecked(product.id) : false; + + return ( + + + toggle(product.id)} + /> + + product.thumbnail.url)} + > + {maybe(() => product.name, )} + + + {maybe( + () => product.productType.name, + + )} + + + {maybe( + () => ( + + ), + + )} + + + onProductUnassign(product.id, event)} + > + + + + + ); + }, + () => ( + + + + - product.thumbnail.url)} - > - {maybe(() => product.name, )} - - - {maybe( - () => product.productType.name, - - )} - - - {maybe( - () => ( - - ), - - )} - - - onProductUnassign(product.id, event)} - > - - - - ); - }, - () => ( - - - - {i18n.t("No products found")} - - - ) - )} - -
- - ) + ) + )} + + + + ); + } ); CollectionProducts.displayName = "CollectionProducts"; export default CollectionProducts; diff --git a/src/collections/index.tsx b/src/collections/index.tsx index 75a11dd04..a5f0fce6a 100644 --- a/src/collections/index.tsx +++ b/src/collections/index.tsx @@ -1,9 +1,10 @@ import { parse as parseQs } from "qs"; import React from "react"; +import { useIntl } from "react-intl"; import { Route, RouteComponentProps, Switch } from "react-router-dom"; +import { sectionNames } from "@saleor/intl"; import { WindowTitle } from "../components/WindowTitle"; -import i18n from "../i18n"; import { collectionAddPath, collectionListPath, @@ -39,14 +40,18 @@ const CollectionDetails: React.StatelessComponent< ); }; -const Component = () => ( - <> - - - - - - - -); +const Component = () => { + const intl = useIntl(); + + return ( + <> + + + + + + + + ); +}; export default Component; diff --git a/src/collections/views/CollectionCreate.tsx b/src/collections/views/CollectionCreate.tsx index 29c1de5c6..fae9a7dff 100644 --- a/src/collections/views/CollectionCreate.tsx +++ b/src/collections/views/CollectionCreate.tsx @@ -1,9 +1,9 @@ import React from "react"; +import { useIntl } from "react-intl"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import i18n from "../../i18n"; import { getMutationState, maybe } from "../../misc"; import { CollectionCreateInput } from "../../types/globalTypes"; import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage"; @@ -11,15 +11,17 @@ import { TypedCollectionCreateMutation } from "../mutations"; import { CreateCollection } from "../types/CreateCollection"; import { collectionListUrl, collectionUrl } from "../urls"; -export const CollectionCreate: React.StatelessComponent<{}> = () => { +export const CollectionCreate: React.FC = () => { const navigate = useNavigator(); const notify = useNotifier(); + const intl = useIntl(); const handleCollectionCreateSuccess = (data: CreateCollection) => { if (data.collectionCreate.errors.length === 0) { notify({ - text: i18n.t("Created collection", { - context: "notification" + text: intl.formatMessage({ + defaultMessage: "Created collection", + id: "collectionCreateCreatedCollection" }) }); navigate(collectionUrl(data.collectionCreate.collection.id)); @@ -45,7 +47,13 @@ export const CollectionCreate: React.StatelessComponent<{}> = () => { ); return ( <> - + data.collectionCreate.errors, [])} onBack={() => navigate(collectionListUrl())} diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx index bdabd01c1..1f1523de8 100644 --- a/src/collections/views/CollectionDetails.tsx +++ b/src/collections/views/CollectionDetails.tsx @@ -1,6 +1,7 @@ import Button from "@material-ui/core/Button"; import DialogContentText from "@material-ui/core/DialogContentText"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import ActionDialog from "@saleor/components/ActionDialog"; import AssignProductDialog from "@saleor/components/AssignProductDialog"; @@ -11,9 +12,9 @@ import useNotifier from "@saleor/hooks/useNotifier"; import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; +import { commonMessages } from "@saleor/intl"; import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config"; import SearchProducts from "../../containers/SearchProducts"; -import i18n from "../../i18n"; import { getMutationState, maybe } from "../../misc"; import { productUrl } from "../../products/urls"; import { CollectionInput } from "../../types/globalTypes"; @@ -47,6 +48,7 @@ export const CollectionDetails: React.StatelessComponent< params.ids ); const paginate = usePaginator(); + const intl = useIntl(); const closeModal = () => navigate( @@ -77,9 +79,7 @@ export const CollectionDetails: React.StatelessComponent< const handleCollectionUpdate = (data: CollectionUpdate) => { if (data.collectionUpdate.errors.length === 0) { notify({ - text: i18n.t("Updated collection", { - context: "notification" - }) + text: intl.formatMessage(commonMessages.savedChanges) }); navigate(collectionUrl(id)); } else { @@ -98,8 +98,9 @@ export const CollectionDetails: React.StatelessComponent< const handleProductAssign = (data: CollectionAssignProduct) => { if (data.collectionAddProducts.errors.length === 0) { notify({ - text: i18n.t("Added product to collection", { - context: "notification" + text: intl.formatMessage({ + defaultMessage: "Added product to collection", + id: "collectionDetailsAddedProduct" }) }); navigate(collectionUrl(id), true); @@ -109,8 +110,9 @@ export const CollectionDetails: React.StatelessComponent< const handleProductUnassign = (data: UnassignCollectionProduct) => { if (data.collectionRemoveProducts.errors.length === 0) { notify({ - text: i18n.t("Removed product from collection", { - context: "notification" + text: intl.formatMessage({ + defaultMessage: "Deleted product from collection", + id: "collectionDetailsDeletedProduct" }) }); reset(); @@ -121,8 +123,9 @@ export const CollectionDetails: React.StatelessComponent< const handleCollectionRemove = (data: RemoveCollection) => { if (data.collectionDelete.errors.length === 0) { notify({ - text: i18n.t("Removed collection", { - context: "notification" + text: intl.formatMessage({ + defaultMessage: "Deleted collection", + id: "collectionDetailsDeletedCollection" }) }); navigate(collectionListUrl()); @@ -272,7 +275,11 @@ export const CollectionDetails: React.StatelessComponent< ) } > - {i18n.t("Unassign")} + } isChecked={isSelected} @@ -308,25 +315,26 @@ export const CollectionDetails: React.StatelessComponent< onClose={closeModal} onConfirm={() => removeCollection.mutate({ id })} open={params.action === "remove"} - title={i18n.t("Remove collection", { - context: "modal title" + title={intl.formatMessage({ + defaultMessage: "Delete Collection", + description: "dialog title", + id: "collectionDetailsDeleteCollectionDialogTitle" })} variant="delete" > - {{ collectionName }}?", - { - collectionName: maybe( - () => data.collection.name, - "..." - ), - context: "modal" - } - ) - }} - /> + + + {maybe(() => data.collection.name, "...")} + + ) + }} + /> + - {{ number }} products?", - { - context: "modal", - number: maybe( - () => params.ids.length.toString(), - "..." - ) - } - ) - }} - /> + + {params.ids.length} + }} + /> + - {i18n.t( - "Are you sure you want to remove collection's image?" - )} + diff --git a/src/collections/views/CollectionList.tsx b/src/collections/views/CollectionList.tsx index 90a3f6686..acc735f9b 100644 --- a/src/collections/views/CollectionList.tsx +++ b/src/collections/views/CollectionList.tsx @@ -3,6 +3,7 @@ import DialogContentText from "@material-ui/core/DialogContentText"; import IconButton from "@material-ui/core/IconButton"; import DeleteIcon from "@material-ui/icons/Delete"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import ActionDialog from "@saleor/components/ActionDialog"; import useBulkActions from "@saleor/hooks/useBulkActions"; @@ -12,7 +13,7 @@ import useNotifier from "@saleor/hooks/useNotifier"; import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; -import i18n from "@saleor/i18n"; +import { commonMessages } from "@saleor/intl"; import { getMutationState, maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import CollectionListPage from "../components/CollectionListPage/CollectionListPage"; @@ -47,6 +48,7 @@ export const CollectionList: React.StatelessComponent = ({ const { updateListSettings, settings } = useListSettings( ListViews.COLLECTION_LIST ); + const intl = useIntl(); const closeModal = () => navigate( @@ -79,7 +81,7 @@ export const CollectionList: React.StatelessComponent = ({ const handleCollectionBulkDelete = (data: CollectionBulkDelete) => { if (data.collectionBulkDelete.errors.length === 0) { notify({ - text: i18n.t("Removed collections") + text: intl.formatMessage(commonMessages.savedChanges) }); refetch(); reset(); @@ -90,7 +92,7 @@ export const CollectionList: React.StatelessComponent = ({ const handleCollectionBulkPublish = (data: CollectionBulkPublish) => { if (data.collectionBulkPublish.errors.length === 0) { notify({ - text: i18n.t("Changed publication status") + text: intl.formatMessage(commonMessages.savedChanges) }); refetch(); reset(); @@ -147,13 +149,21 @@ export const CollectionList: React.StatelessComponent = ({ openModal("unpublish", listElements) } > - {i18n.t("Unpublish")} + = ({ toggleAll={toggleAll} /> params.ids.length > 0) + } onClose={closeModal} confirmButtonState={bulkPublishTransitionState} onConfirm={() => @@ -181,24 +194,30 @@ export const CollectionList: React.StatelessComponent = ({ }) } variant="default" - title={i18n.t("Publish collections")} + title={intl.formatMessage({ + defaultMessage: "Publish collections", + description: "dialog title", + id: "collectionListPublishCollectionsDialogTitle" + })} > - {{ number }} collections?", - { - number: maybe( - () => params.ids.length.toString(), - "..." - ) - } - ) - }} - /> + + + params.ids.length > 0) + } onClose={closeModal} confirmButtonState={bulkPublishTransitionState} onConfirm={() => @@ -210,24 +229,30 @@ export const CollectionList: React.StatelessComponent = ({ }) } variant="default" - title={i18n.t("Unpublish collections")} + title={intl.formatMessage({ + defaultMessage: "Unpublish collections", + description: "dialog title", + id: "collectionListUnpublishCollectionsDialogTitle" + })} > - {{ number }} collections?", - { - number: maybe( - () => params.ids.length.toString(), - "..." - ) - } - ) - }} - /> + + + params.ids.length > 0) + } onClose={closeModal} confirmButtonState={bulkDeleteTransitionState} onConfirm={() => @@ -238,21 +263,24 @@ export const CollectionList: React.StatelessComponent = ({ }) } variant="delete" - title={i18n.t("Remove collections")} + title={intl.formatMessage({ + defaultMessage: "Delete collections", + description: "dialog title", + id: "collectionListDeleteCollectionsDialogTitle" + })} > - {{ number }} collections?", - { - number: maybe( - () => params.ids.length.toString(), - "..." - ) - } - ) - }} - /> + + + ); diff --git a/src/intl.ts b/src/intl.ts index 29d8f55b3..4f33dfa1d 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -1,6 +1,10 @@ import { defineMessages } from "react-intl"; export const commonMessages = defineMessages({ + availability: { + defaultMessage: "Availability", + id: "availability" + }, cancel: { defaultMessage: "Cancel", id: "cancel" @@ -51,5 +55,10 @@ export const sectionNames = defineMessages({ defaultMessage: "Categories", description: "categories section name", id: "categories" + }, + collections: { + defaultMessage: "Collections", + description: "collections section name", + id: "collections" } });