diff --git a/package-lock.json b/package-lock.json index 694d3d59c..aa2e19c3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9397,7 +9397,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -9415,11 +9416,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9432,15 +9435,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -9543,7 +9549,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -9553,6 +9560,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -9565,17 +9573,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -9592,6 +9603,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -9664,7 +9676,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -9674,6 +9687,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -9749,7 +9763,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -9779,6 +9794,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9796,6 +9812,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9834,11 +9851,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, diff --git a/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx b/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx index bd40e2c51..859f913e7 100644 --- a/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx +++ b/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx @@ -1,13 +1,13 @@ import DialogContentText from "@material-ui/core/DialogContentText"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import ActionDialog from "@saleor/components/ActionDialog"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; -import i18n from "../../../i18n"; export interface AttributeBulkDeleteDialogProps { confirmButtonState: ConfirmButtonTransitionState; - quantity: string; + quantity: number; open: boolean; onConfirm: () => void; onClose: () => void; @@ -15,26 +15,38 @@ export interface AttributeBulkDeleteDialogProps { const AttributeBulkDeleteDialog: React.StatelessComponent< AttributeBulkDeleteDialogProps -> = ({ confirmButtonState, quantity, onClose, onConfirm, open }) => ( - - {{ quantity }} attributes?", - { - quantity - } - ) - }} - /> - -); +> = ({ confirmButtonState, quantity, onClose, onConfirm, open }) => { + const intl = useIntl(); + + return ( + + + {quantity} + }} + /> + + + ); +}; AttributeBulkDeleteDialog.displayName = "AttributeBulkDeleteDialog"; export default AttributeBulkDeleteDialog; diff --git a/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx b/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx index b6e577d88..44668b6d2 100644 --- a/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx +++ b/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx @@ -1,9 +1,9 @@ import DialogContentText from "@material-ui/core/DialogContentText"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import ActionDialog from "@saleor/components/ActionDialog"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; -import i18n from "@saleor/i18n"; export interface AttributeDeleteDialogProps { confirmButtonState: ConfirmButtonTransitionState; @@ -19,27 +19,35 @@ const AttributeDeleteDialog: React.FC = ({ onClose, onConfirm, open -}) => ( - - {{ name }}?", - { - name - } - ) - }} - /> - -); +}) => { + const intl = useIntl(); + + return ( + + + {name} + }} + /> + + + ); +}; AttributeDeleteDialog.displayName = "AttributeDeleteDialog"; export default AttributeDeleteDialog; diff --git a/src/attributes/components/AttributeDetails/AttributeDetails.tsx b/src/attributes/components/AttributeDetails/AttributeDetails.tsx index 038f0fa65..a2ab264a4 100644 --- a/src/attributes/components/AttributeDetails/AttributeDetails.tsx +++ b/src/attributes/components/AttributeDetails/AttributeDetails.tsx @@ -2,13 +2,14 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import TextField from "@material-ui/core/TextField"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import slugify from "slugify"; import CardTitle from "@saleor/components/CardTitle"; import ControlledSwitch from "@saleor/components/ControlledSwitch"; import FormSpacer from "@saleor/components/FormSpacer"; import SingleSelectField from "@saleor/components/SingleSelectField"; -import i18n from "@saleor/i18n"; +import { commonMessages } from "@saleor/intl"; import { FormErrors } from "@saleor/types"; import { AttributeInputTypeEnum } from "@saleor/types/globalTypes"; import { AttributePageFormData } from "../AttributePage"; @@ -21,78 +22,108 @@ export interface AttributeDetailsProps { onChange: (event: React.ChangeEvent) => void; } -const inputTypeChoices = [ - { - label: i18n.t("Dropdown"), - value: AttributeInputTypeEnum.DROPDOWN - }, - { - label: i18n.t("Multiple Select"), - value: AttributeInputTypeEnum.MULTISELECT - } -]; - const AttributeDetails: React.FC = ({ canChangeType, data, disabled, errors, onChange -}) => ( - - - - - - { + const intl = useIntl(); + const inputTypeChoices = [ + { + label: intl.formatMessage({ + defaultMessage: "Dropdown", + description: "attribute editor component type", + id: "attributeDetailsInputTypeDropdown" + }), + value: AttributeInputTypeEnum.DROPDOWN + }, + { + label: intl.formatMessage({ + defaultMessage: "Multiple Select", + description: "attribute editor component type", + id: "attributeDetailsInputTypeMultiselect" + }), + value: AttributeInputTypeEnum.MULTISELECT + } + ]; + + return ( + + - - - - - - -); + + + + + + + + + + + ); +}; AttributeDetails.displayName = "AttributeDetails"; export default AttributeDetails; diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx index 95dfc7cc4..c86b16104 100644 --- a/src/attributes/components/AttributeList/AttributeList.tsx +++ b/src/attributes/components/AttributeList/AttributeList.tsx @@ -6,12 +6,12 @@ import TableFooter from "@material-ui/core/TableFooter"; import TableRow from "@material-ui/core/TableRow"; import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; +import { FormattedMessage } from "react-intl"; import Checkbox from "@saleor/components/Checkbox"; import Skeleton from "@saleor/components/Skeleton"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; -import i18n from "@saleor/i18n"; import { renderCollection } from "@saleor/misc"; import { ListActions, ListProps } from "@saleor/types"; import { translateBoolean } from "@saleor/utils/i18n"; @@ -83,23 +83,39 @@ const AttributeList: React.StatelessComponent = ({ toolbar={toolbar} > - {i18n.t("Attribute Code", { context: "attribute slug" })} + - {i18n.t("Default Label", { context: "attribute name" })} + - {i18n.t("Visible", { context: "attribute visibility" })} + - {i18n.t("Searchable", { - context: "attribute can be searched in dashboard" - })} + - {i18n.t("Use in faceted search", { - context: "attribute can be searched in storefront" - })} + @@ -170,7 +186,11 @@ const AttributeList: React.StatelessComponent = ({ () => ( - {i18n.t("No attributes found")} + ) diff --git a/src/attributes/components/AttributeListPage/AttributeListPage.tsx b/src/attributes/components/AttributeListPage/AttributeListPage.tsx index 4daa73528..94f561400 100644 --- a/src/attributes/components/AttributeListPage/AttributeListPage.tsx +++ b/src/attributes/components/AttributeListPage/AttributeListPage.tsx @@ -2,10 +2,11 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import AddIcon from "@material-ui/icons/Add"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; +import { sectionNames } from "@saleor/intl"; import Container from "../../../components/Container"; import PageHeader from "../../../components/PageHeader"; -import i18n from "../../../i18n"; import { ListActions, PageListProps } from "../../../types"; import { AttributeList_attributes_edges_node } from "../../types/AttributeList"; import AttributeList from "../AttributeList/AttributeList"; @@ -17,17 +18,28 @@ export interface AttributeListPageProps extends PageListProps, ListActions { const AttributeListPage: React.FC = ({ onAdd, ...listProps -}) => ( - - - - - - - - -); +}) => { + const intl = useIntl(); + + return ( + + + + + + + + + ); +}; AttributeListPage.displayName = "AttributeListPage"; export default AttributeListPage; diff --git a/src/attributes/components/AttributePage/AttributePage.tsx b/src/attributes/components/AttributePage/AttributePage.tsx index 209397676..120a05b1a 100644 --- a/src/attributes/components/AttributePage/AttributePage.tsx +++ b/src/attributes/components/AttributePage/AttributePage.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { useIntl } from "react-intl"; import slugify from "slugify"; import AppHeader from "@saleor/components/AppHeader"; @@ -9,7 +10,7 @@ import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; -import i18n from "@saleor/i18n"; +import { sectionNames } from "@saleor/intl"; import { maybe } from "@saleor/misc"; import { ReorderAction, UserError } from "@saleor/types"; import { AttributeInputTypeEnum } from "@saleor/types/globalTypes"; @@ -62,6 +63,7 @@ const AttributePage: React.FC = ({ onValueReorder, onValueUpdate }) => { + const intl = useIntl(); const initialForm: AttributePageFormData = attribute === null ? { @@ -109,12 +111,16 @@ const AttributePage: React.FC = ({
{({ change, errors: formErrors, data, submit }) => ( - {i18n.t("Attributes")} + + {intl.formatMessage(sectionNames.attributes)} + attribute.name) } diff --git a/src/attributes/components/AttributeProperties/AttributeProperties.tsx b/src/attributes/components/AttributeProperties/AttributeProperties.tsx index e61df33be..fa68d860e 100644 --- a/src/attributes/components/AttributeProperties/AttributeProperties.tsx +++ b/src/attributes/components/AttributeProperties/AttributeProperties.tsx @@ -3,13 +3,14 @@ import CardContent from "@material-ui/core/CardContent"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import ControlledSwitch from "@saleor/components/ControlledSwitch"; import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; -import i18n from "@saleor/i18n"; +import { commonMessages } from "@saleor/intl"; import { FormErrors } from "@saleor/types"; import { AttributePageFormData } from "../AttributePage"; @@ -25,103 +26,136 @@ const AttributeProperties: React.FC = ({ errors, disabled, onChange -}) => ( - - - - {/* - {i18n.t("General Properties")} - -
- - - {i18n.t("Variant Attribute")} - - {i18n.t( - "If enabled, you'll be able to use this attribute to create product variants" - )} - - - } - onChange={onChange} - /> */} +}) => { + const intl = useIntl(); - - {i18n.t("Storefront Properties")} - -
- - {data.filterableInStorefront && ( - + + + {/* + + +
+ + + + + + + + } + onChange={onChange} + /> */} + + + + +
+ - )} - - - - - - {i18n.t("Dashboard Properties")} - -
- - - {i18n.t( - "If enabled, you’ll be able to use this attribute to filter products in product list." - )} - - } - onChange={onChange} - /> - - - {i18n.t( - "If enable this attribute can be used as a column in product table." - )} - - } - onChange={onChange} - /> -
-
-); + {data.filterableInStorefront && ( + + )} + + + + + + +
+ + + + + } + onChange={onChange} + /> + + + + + } + onChange={onChange} + /> + + + ); +}; AttributeProperties.displayName = "AttributeProperties"; export default AttributeProperties; diff --git a/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.tsx b/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.tsx index 3edd078ee..dfa1e9d76 100644 --- a/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.tsx +++ b/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.tsx @@ -1,9 +1,9 @@ import DialogContentText from "@material-ui/core/DialogContentText"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import ActionDialog from "@saleor/components/ActionDialog"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; -import i18n from "@saleor/i18n"; export interface AttributeValueDeleteDialogProps { attributeName: string; @@ -23,30 +23,46 @@ const AttributeValueDeleteDialog: React.FC = ({ onClose, onConfirm, open -}) => ( - - - {useName - ? i18n.t( - '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.', - { +}) => { + const intl = useIntl(); + + return ( + + + {useName ? ( + - -); + }} + /> + ) : ( + + )} + + + ); +}; AttributeValueDeleteDialog.displayName = "AttributeValueDeleteDialog"; export default AttributeValueDeleteDialog; diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx index 7bb83ca00..0af49e188 100644 --- a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx +++ b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx @@ -5,13 +5,14 @@ import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; import TextField from "@material-ui/core/TextField"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; -import i18n from "@saleor/i18n"; +import { commonMessages } from "@saleor/intl"; import { maybe } from "@saleor/misc"; import { UserError } from "@saleor/types"; import { AttributeDetails_attribute_values } from "../../types/AttributeDetails"; @@ -40,6 +41,7 @@ const AttributeValueEditDialog: React.StatelessComponent< onSubmit, open }) => { + const intl = useIntl(); const initialForm: AttributeValueEditDialogFormData = { name: maybe(() => attributeValue.name, "") }; @@ -48,13 +50,19 @@ const AttributeValueEditDialog: React.StatelessComponent< return ( - {attributeValue === null - ? i18n.t("Add Value", { - context: "add attribute value" - }) - : i18n.t("Edit Value", { - context: "edit attribute value" - })} + {attributeValue === null ? ( + + ) : ( + + )} {({ change, data, errors: formErrors, submit }) => ( @@ -67,8 +75,10 @@ const AttributeValueEditDialog: React.StatelessComponent< fullWidth helperText={formErrors.name} name={"name" as keyof AttributeValueEditDialogFormData} - label={i18n.t("Name", { - context: "attribute name" + label={intl.formatMessage({ + defaultMessage: "Name", + description: "attribute name", + id: "attributeValueEditDialogNameField" })} value={data.name} onChange={change} @@ -76,7 +86,7 @@ const AttributeValueEditDialog: React.StatelessComponent< - {i18n.t("Save")} + diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx index 4d6f3c444..a0b392b71 100644 --- a/src/attributes/components/AttributeValues/AttributeValues.tsx +++ b/src/attributes/components/AttributeValues/AttributeValues.tsx @@ -9,6 +9,7 @@ import TableRow from "@material-ui/core/TableRow"; import DeleteIcon from "@material-ui/icons/Delete"; import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; @@ -16,7 +17,6 @@ import { SortableTableBody, SortableTableRow } from "@saleor/components/SortableTable"; -import i18n from "@saleor/i18n"; import { maybe, renderCollection, stopPropagation } from "@saleor/misc"; import { ReorderAction } from "@saleor/types"; import { AttributeDetailsFragment_values } from "../../types/AttributeDetailsFragment"; @@ -63,14 +63,23 @@ const AttributeValues: React.FC = ({ values }) => { const classes = useStyles({}); + const intl = useIntl(); return ( - {i18n.t("Add value", { context: "button" })} + } /> @@ -79,10 +88,18 @@ const AttributeValues: React.FC = ({ - {i18n.t("Admin")} + - {i18n.t("Default Store View")} + @@ -116,7 +133,13 @@ const AttributeValues: React.FC = ({ ), () => ( - {i18n.t("No values found")} + + + ) )} diff --git a/src/attributes/index.tsx b/src/attributes/index.tsx index b98ce72ab..a21d82435 100644 --- a/src/attributes/index.tsx +++ b/src/attributes/index.tsx @@ -2,8 +2,9 @@ import { parse as parseQs } from "qs"; import React from "react"; import { Route, RouteComponentProps, Switch } from "react-router-dom"; +import { sectionNames } from "@saleor/intl"; +import { useIntl } from "react-intl"; import { WindowTitle } from "../components/WindowTitle"; -import i18n from "../i18n"; import { attributeAddPath, AttributeAddUrlQueryParams, @@ -42,14 +43,18 @@ const AttributeDetails: React.FC> = ({ ); }; -export const AttributeSection: React.FC = () => ( - <> - - - - - - - -); +export const AttributeSection: React.FC = () => { + const intl = useIntl(); + + return ( + <> + + + + + + + + ); +}; export default AttributeSection; diff --git a/src/attributes/views/AttributeCreate/AttributeCreate.tsx b/src/attributes/views/AttributeCreate/AttributeCreate.tsx index eac1dad27..3c94d9c03 100644 --- a/src/attributes/views/AttributeCreate/AttributeCreate.tsx +++ b/src/attributes/views/AttributeCreate/AttributeCreate.tsx @@ -1,9 +1,9 @@ import React from "react"; +import { useIntl } from "react-intl"; import slugify from "slugify"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import i18n from "@saleor/i18n"; import { getMutationState, maybe } from "@saleor/misc"; import { ReorderEvent, UserError } from "@saleor/types"; import { @@ -42,6 +42,7 @@ function areValuesEqual( const AttributeDetails: React.FC = ({ params }) => { const navigate = useNavigator(); const notify = useNotifier(); + const intl = useIntl(); const [values, setValues] = React.useState< AttributeValueEditDialogFormData[] @@ -75,7 +76,12 @@ const AttributeDetails: React.FC = ({ params }) => { }; const handleCreate = (data: AttributeCreate) => { if (data.attributeCreate.errors.length === 0) { - notify({ text: i18n.t("Successfully created attribute") }); + notify({ + text: intl.formatMessage({ + defaultMessage: "Successfully created attribute", + id: "attributeCreateAttributeCreateSuccess" + }) + }); navigate(attributeUrl(data.attributeCreate.attribute.id)); } }; @@ -84,10 +90,16 @@ const AttributeDetails: React.FC = ({ params }) => { setValueErrors([ { field: "name", - message: i18n.t("A value named {{ name }} already exists", { - context: "value edit error", - name: input.name - }) + message: intl.formatMessage( + { + defaultMessage: "A value named { name } already exists", + description: "attribute value edit error", + id: "attributeCreateErrorExists" + }, + { + name: input.name + } + ) } ]); } else { @@ -100,10 +112,16 @@ const AttributeDetails: React.FC = ({ params }) => { setValueErrors([ { field: "name", - message: i18n.t("A value named {{ name }} already exists", { - context: "value edit error", - name: input.name - }) + message: intl.formatMessage( + { + defaultMessage: "A value named { name } already exists", + description: "attribute value edit error", + id: "attributeCreateErrorExists" + }, + { + name: input.name + } + ) } ]); } else { diff --git a/src/attributes/views/AttributeDetails/AttributeDetails.tsx b/src/attributes/views/AttributeDetails/AttributeDetails.tsx index c5a04e2ff..2f0eff1eb 100644 --- a/src/attributes/views/AttributeDetails/AttributeDetails.tsx +++ b/src/attributes/views/AttributeDetails/AttributeDetails.tsx @@ -1,8 +1,9 @@ import React from "react"; +import { useIntl } from "react-intl"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import i18n from "@saleor/i18n"; +import { commonMessages } from "@saleor/intl"; import { getMutationState, maybe } from "@saleor/misc"; import { ReorderEvent } from "@saleor/types"; import { move } from "@saleor/utils/lists"; @@ -40,6 +41,7 @@ interface AttributeDetailsProps { const AttributeDetails: React.FC = ({ id, params }) => { const navigate = useNavigator(); const notify = useNotifier(); + const intl = useIntl(); const closeModal = () => navigate( @@ -63,39 +65,54 @@ const AttributeDetails: React.FC = ({ id, params }) => { const handleDelete = (data: AttributeDelete) => { if (data.attributeDelete.errors.length === 0) { - notify({ text: i18n.t("Attribute removed") }); + notify({ + text: intl.formatMessage({ + defaultMessage: "Attribute removed", + id: "attributeDetailsAttributeRemoveSuccess" + }) + }); navigate(attributeListUrl()); } }; const handleValueDelete = (data: AttributeValueDelete) => { if (data.attributeValueDelete.errors.length === 0) { - notify({ text: i18n.t("Value removed") }); + notify({ + text: intl.formatMessage({ + defaultMessage: "Value removed", + description: "attribute value removed", + id: "attributeDetailsAttributeValueRemoveSuccess" + }) + }); closeModal(); } }; const handleUpdate = (data: AttributeUpdate) => { if (data.attributeUpdate.errors.length === 0) { - notify({ text: i18n.t("Saved changes") }); + notify({ text: intl.formatMessage(commonMessages.savedChanges) }); } }; const handleValueUpdate = (data: AttributeValueUpdate) => { if (data.attributeValueUpdate.errors.length === 0) { - notify({ text: i18n.t("Saved changes") }); + notify({ text: intl.formatMessage(commonMessages.savedChanges) }); closeModal(); } }; const handleValueCreate = (data: AttributeValueCreate) => { if (data.attributeValueCreate.errors.length === 0) { - notify({ text: i18n.t("Added new value") }); + notify({ + text: intl.formatMessage({ + defaultMessage: "Added new value", + description: "added new attribute value", + id: "attributeDetailsAttributeValueCreateSuccess" + }) + }); closeModal(); } }; const handleValueReorderMutation = (data: AttributeValueReorder) => { if (data.attributeReorderValues.errors.length !== 0) { notify({ - text: i18n.t("Error: {{ errorMessage }}", { - errorMessage: data.attributeReorderValues.errors[0].message - }) + text: data.attributeReorderValues.errors[0].message }); } }; diff --git a/src/attributes/views/AttributeList/AttributeList.tsx b/src/attributes/views/AttributeList/AttributeList.tsx index 6e311cfab..408459ac2 100644 --- a/src/attributes/views/AttributeList/AttributeList.tsx +++ b/src/attributes/views/AttributeList/AttributeList.tsx @@ -1,6 +1,7 @@ import IconButton from "@material-ui/core/IconButton"; import DeleteIcon from "@material-ui/icons/Delete"; import React from "react"; +import { useIntl } from "react-intl"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; @@ -9,7 +10,6 @@ import usePaginator, { } from "@saleor/hooks/usePaginator"; import { PAGINATE_BY } from "../../../config"; import useBulkActions from "../../../hooks/useBulkActions"; -import i18n from "../../../i18n"; import { getMutationState, maybe } from "../../../misc"; import AttributeBulkDeleteDialog from "../../components/AttributeBulkDeleteDialog"; import AttributeListPage from "../../components/AttributeListPage"; @@ -35,6 +35,7 @@ const AttributeList: React.FC = ({ params }) => { const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions( params.ids ); + const intl = useIntl(); const closeModal = () => navigate( @@ -71,7 +72,11 @@ const AttributeList: React.FC = ({ params }) => { if (data.attributeBulkDelete.errors.length === 0) { closeModal(); notify({ - text: i18n.t("Attributes removed") + text: intl.formatMessage({ + defaultMessage: "Attributes successfully removed", + description: "remove multiple attributes", + id: "attributeListAttributesRemoved" + }) }); reset(); refetch(); @@ -116,12 +121,15 @@ const AttributeList: React.FC = ({ params }) => { /> params.ids.length > 0) + } onConfirm={() => attributeBulkDelete({ variables: { ids: params.ids } }) } onClose={closeModal} - quantity={maybe(() => params.ids.length.toString(), "...")} + quantity={maybe(() => params.ids.length)} /> );