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 = ({