- {plugin[index].type === ConfigurationTypeFieldEnum.STRING && (
+ {fields[index].type === ConfigurationTypeFieldEnum.STRING && (
)}
- {plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
+ {fields[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
= ({
: configuration.value
}
disabled={disabled}
- label={plugin[index].label}
+ label={fields[index].label}
name={configuration.name}
onChange={onChange}
/>
diff --git a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
index 11c3c854e..c1f3cc8c4 100644
--- a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
+++ b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
@@ -6,12 +6,13 @@ 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 { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { UserError } from "@saleor/types";
import { ConfigurationItemInput } from "@saleor/types/globalTypes";
import React from "react";
+import { useIntl } from "react-intl";
-import i18n from "../../../i18n";
import { Plugin_plugin } from "../../types/Plugin";
import PluginInfo from "../PluginInfo";
import PluginSettings from "../PluginSettings";
@@ -38,6 +39,7 @@ const PluginsDetailsPage: React.StatelessComponent = ({
onBack,
onSubmit
}) => {
+ const intl = useIntl();
const initialForm: FormData = {
active: maybe(() => plugin.active, false),
configuration: maybe(() => plugin.configuration, [])
@@ -67,19 +69,29 @@ const PluginsDetailsPage: React.StatelessComponent = ({
};
return (
- {i18n.t("Plugins")}
+
+ {intl.formatMessage(sectionNames.plugins)}
+
plugin.name, "")} ${i18n.t("Details")}`}
+ title={`${maybe(() => plugin.name, "")} ${intl.formatMessage({
+ defaultMessage: "Details",
+ description: "plugin page title"
+ })}`}
/>
- {i18n.t("Plugin Information and Status")}
+ {intl.formatMessage({
+ defaultMessage: "Plugin Information and Status",
+ description: "plugin section title"
+ })}
- {i18n.t(
- "These are general information about your store. They define what is the URL of your store and what is shown in brow sers taskbar."
- )}
+ {intl.formatMessage({
+ defaultMessage:
+ "These are general information about your store. They define what is the URL of your store and what is shown in brow sers taskbar.",
+ description: "plugin section description"
+ })}
= ({
<>
- {i18n.t("Plugin Settings")}
+ {intl.formatMessage({
+ defaultMessage: "Plugin Settings",
+ description: "plugin section title"
+ })}
- {i18n.t(
- "This adress will be used to generate invoices and calculate shipping rates. Email adress you provide here will be used as a contact adress for your customers."
- )}
+ {intl.formatMessage({
+ defaultMessage:
+ "This adress will be used to generate invoices and calculate shipping rates. Email adress you provide here will be used as a contact adress for your customers.",
+ description: "plugin section description"
+ })}
plugin.configuration, [])}
+ fields={maybe(() => plugin.configuration, [])}
errors={errors}
disabled={disabled}
onChange={onChange}
diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx
index 71cb0e4e5..a3b6c9714 100644
--- a/src/plugins/components/PluginsList/PluginsList.tsx
+++ b/src/plugins/components/PluginsList/PluginsList.tsx
@@ -12,15 +12,15 @@ import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow";
import EditIcon from "@material-ui/icons/Edit";
import React from "react";
+import { useIntl } from "react-intl";
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 { translateBoolean } from "@saleor/intl";
import { maybe, renderCollection } from "@saleor/misc";
import { ListProps } from "@saleor/types";
-import { translateBoolean } from "@saleor/utils/i18n";
import { Plugins_plugins_edges_node } from "../../types/Plugins";
export interface PluginListProps extends ListProps {
@@ -61,6 +61,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
onUpdateListSettings,
onPreviousPage
}: PluginListProps & WithStyles) => {
+ const intl = useIntl();
return (
@@ -70,13 +71,22 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
items={plugins}
>
- {i18n.t("Name", { context: "table header" })}
+ {intl.formatMessage({
+ defaultMessage: "Name",
+ description: "plugin list table header"
+ })}
- {i18n.t("Active", { context: "table header" })}
+ {intl.formatMessage({
+ defaultMessage: "Active",
+ description: "plugin list table header"
+ })}
- {i18n.t("Action", { context: "table header" })}
+ {intl.formatMessage({
+ defaultMessage: "Action",
+ description: "plugin list table header"
+ })}
@@ -114,7 +124,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
{maybe(
() => (
),
@@ -132,7 +142,10 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
() => (
- {i18n.t("No plugins found")}
+ {intl.formatMessage({
+ defaultMessage: "No plugins found",
+ description: "plugin no found"
+ })}
)
diff --git a/src/plugins/components/PluginsListPage/PluginsListPage.tsx b/src/plugins/components/PluginsListPage/PluginsListPage.tsx
index 22cbc7f02..7ff0735ad 100644
--- a/src/plugins/components/PluginsListPage/PluginsListPage.tsx
+++ b/src/plugins/components/PluginsListPage/PluginsListPage.tsx
@@ -1,9 +1,10 @@
import React from "react";
+import { useIntl } from "react-intl";
import AppHeader from "@saleor/components/AppHeader";
import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader";
-import i18n from "@saleor/i18n";
+import { sectionNames } from "@saleor/intl";
import { PageListProps } from "@saleor/types";
import { Plugins_plugins_edges_node } from "../../types/Plugins";
import PluginsList from "../PluginsList/PluginsList";
@@ -23,21 +24,29 @@ const PluginsListPage: React.StatelessComponent = ({
onUpdateListSettings,
pageInfo,
plugins
-}) => (
-
- {i18n.t("Configuration")}
-
-
-
-);
+}) => {
+ const intl = useIntl();
+ return (
+
+
+ {intl.formatMessage({
+ defaultMessage: "Configuration",
+ description: "plugin back button"
+ })}
+
+
+
+
+ );
+};
PluginsListPage.displayName = "PluginsListPage";
export default PluginsListPage;
diff --git a/src/plugins/index.tsx b/src/plugins/index.tsx
index a518872e6..4f2276264 100644
--- a/src/plugins/index.tsx
+++ b/src/plugins/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 {
pluginsListPath,
PluginsListUrlQueryParams,
@@ -34,14 +35,17 @@ const PageDetails: React.StatelessComponent> = ({
);
};
-const Component = () => (
- <>
-
-
-
-
-
-
-);
+const Component = () => {
+ const intl = useIntl();
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
export default Component;
diff --git a/src/plugins/views/PluginsDetails.tsx b/src/plugins/views/PluginsDetails.tsx
index cc858095a..69e136351 100644
--- a/src/plugins/views/PluginsDetails.tsx
+++ b/src/plugins/views/PluginsDetails.tsx
@@ -1,8 +1,9 @@
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
-import i18n from "@saleor/i18n";
import React from "react";
+import { useIntl } from "react-intl";
+
import { getMutationState, maybe } from "../../misc";
import PluginsDetailsPage from "../components/PluginsDetailsPage";
import { TypedPluginUpdate } from "../mutations";
@@ -19,6 +20,7 @@ export const PluginsDetails: React.StatelessComponent = ({
}) => {
const navigate = useNavigator();
const notify = useNotifier();
+ const intl = useIntl();
return (
@@ -45,7 +47,10 @@ export const PluginsDetails: React.StatelessComponent = ({
} else {
if (pluginUpdateOpts.data) {
notify({
- text: i18n.t("Succesfully updated plugin settings")
+ text: intl.formatMessage({
+ defaultMessage: "Succesfully updated plugin settings",
+ description: "plugin success message"
+ })
});
}
}
diff --git a/src/plugins/views/PluginsList.tsx b/src/plugins/views/PluginsList.tsx
index 8d0c00694..848904d5a 100644
--- a/src/plugins/views/PluginsList.tsx
+++ b/src/plugins/views/PluginsList.tsx
@@ -7,6 +7,7 @@ import usePaginator, {
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import React from "react";
+
import PluginsListPage from "../components/PluginsListPage/PluginsListPage";
import { TypedPluginsListQuery } from "../queries";
import { PluginsListUrlQueryParams, pluginsUrl } from "../urls";