diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx
index a3c67c56a..eeefb9f97 100644
--- a/src/staff/components/StaffList/StaffList.tsx
+++ b/src/staff/components/StaffList/StaffList.tsx
@@ -14,10 +14,10 @@ import TableRow from "@material-ui/core/TableRow";
import Typography from "@material-ui/core/Typography";
import classNames from "classnames";
import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
import Skeleton from "@saleor/components/Skeleton";
import TablePagination from "@saleor/components/TablePagination";
-import i18n from "@saleor/i18n";
import {
getUserInitials,
getUserName,
@@ -80,97 +80,114 @@ const StaffList = withStyles(styles, { name: "StaffList" })(
onRowClick,
pageInfo,
staffMembers
- }: StaffListProps) => (
-
-
-
-
-
- {i18n.t("Name", { context: "object" })}
-
-
- {i18n.t("Email Address", { context: "object" })}
-
-
-
-
-
-
-
-
-
- {renderCollection(
- staffMembers,
- staffMember => (
-
-
-
- {maybe(() => staffMember.avatar.url) ? (
-
)
staffMember.avatar.url)}
- />
- ) : (
-
- {getUserInitials(staffMember)}
-
- )}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderCollection(
+ staffMembers,
+ staffMember => (
+
+
+
+ {maybe(() => staffMember.avatar.url) ? (
+
staffMember.avatar.url)}
+ />
+ ) : (
+
+
+ {getUserInitials(staffMember)}
+
+
+ )}
+
-
- )
+
+
+ ),
+ () => (
+
+
+
+
+
+ )
+ )}
+
+
+
+ );
+ }
);
StaffList.displayName = "StaffList";
export default StaffList;
diff --git a/src/staff/components/StaffListPage/StaffListPage.tsx b/src/staff/components/StaffListPage/StaffListPage.tsx
index 73ebd20e0..04e251d8b 100644
--- a/src/staff/components/StaffListPage/StaffListPage.tsx
+++ b/src/staff/components/StaffListPage/StaffListPage.tsx
@@ -1,11 +1,12 @@
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 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 { ListProps } from "@saleor/types";
import { StaffList_staffUsers_edges_node } from "../../types/StaffList";
import StaffList from "../StaffList/StaffList";
@@ -21,22 +22,31 @@ const StaffListPage: React.StatelessComponent
= ({
onAdd,
onBack,
...listProps
-}) => (
-
- {i18n.t("Configuration")}
-
-
-
-
-
-);
+}) => {
+ const intl = useIntl();
+
+ return (
+
+
+ {intl.formatMessage(sectionNames.configuration)}
+
+
+
+
+
+
+ );
+};
StaffListPage.displayName = "StaffListPage";
export default StaffListPage;
diff --git a/src/staff/components/StaffPermissions/StaffPermissions.tsx b/src/staff/components/StaffPermissions/StaffPermissions.tsx
index aea41e7bb..0db9cb39e 100644
--- a/src/staff/components/StaffPermissions/StaffPermissions.tsx
+++ b/src/staff/components/StaffPermissions/StaffPermissions.tsx
@@ -8,11 +8,11 @@ import {
} from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
import { StaffMemberDetails_shop_permissions } from "../../types/StaffMemberDetails";
const styles = (theme: Theme) =>
@@ -47,6 +47,8 @@ const StaffPermissions = withStyles(styles, { name: "StaffPermissions" })(
permissions,
onChange
}: StaffPermissionsProps) => {
+ const intl = useIntl();
+
const handleFullAccessChange = (event: React.ChangeEvent) =>
onChange(event, () =>
onChange({
@@ -68,19 +70,23 @@ const StaffPermissions = withStyles(styles, { name: "StaffPermissions" })(
};
return (
-
+
- {i18n.t(
- "Expand or restrict user's permissions to access certain part of saleor system."
- )}
+
{
+ const intl = useIntl();
const imgInputAnchor = React.createRef();
+
const clickImgInput = () => imgInputAnchor.current.click();
+
return (
-
+
@@ -143,10 +152,16 @@ const StaffProperties = withStyles(styles, { name: "StaffProperties" })(
- {i18n.t("Change photo")}
+
- {i18n.t("Delete photo")}
+
= ({
data,
disabled,
onChange
-}) => (
-
-
-
-
- {i18n.t("If you want to disable this account uncheck the box below")}
-
- {
+ const intl = useIntl();
+
+ return (
+
+
-
-
-);
+
+
+
+
+
+
+
+ );
+};
StaffStatus.displayName = "StaffStatus";
export default StaffStatus;
diff --git a/src/staff/index.tsx b/src/staff/index.tsx
index 66dea74b0..84470608f 100644
--- a/src/staff/index.tsx
+++ b/src/staff/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 {
staffListPath,
StaffListUrlQueryParams,
@@ -38,14 +39,18 @@ const StaffDetails: React.StatelessComponent<
);
};
-const Component = () => (
- <>
-
-
-
-
-
-
-);
+const Component = () => {
+ const intl = useIntl();
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
export default Component;
diff --git a/src/staff/views/StaffDetails.tsx b/src/staff/views/StaffDetails.tsx
index e71e67f9a..2ae48ba1b 100644
--- a/src/staff/views/StaffDetails.tsx
+++ b/src/staff/views/StaffDetails.tsx
@@ -1,12 +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 { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useUser from "@saleor/hooks/useUser";
-import i18n from "../../i18n";
+import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import StaffDetailsPage from "../components/StaffDetailsPage/StaffDetailsPage";
import {
@@ -38,6 +39,7 @@ export const StaffDetails: React.StatelessComponent = ({
const navigate = useNavigator();
const notify = useNotifier();
const user = useUser();
+ const intl = useIntl();
return (
= ({
const handleStaffMemberUpdate = (data: StaffMemberUpdate) => {
if (!maybe(() => data.staffUpdate.errors.length !== 0)) {
notify({
- text: i18n.t("Succesfully updated staff member account")
+ text: intl.formatMessage(commonMessages.savedChanges)
});
}
};
const handleStaffMemberDelete = (data: StaffMemberDelete) => {
if (!maybe(() => data.staffDelete.errors.length !== 0)) {
notify({
- text: i18n.t("Succesfully removed staff member")
+ text: intl.formatMessage(commonMessages.savedChanges)
});
navigate(staffListUrl());
}
@@ -64,14 +66,14 @@ export const StaffDetails: React.StatelessComponent = ({
const handleStaffMemberAvatarUpdate = (data: StaffAvatarUpdate) => {
if (!maybe(() => data.userAvatarUpdate.errors.length !== 0)) {
notify({
- text: i18n.t("Succesfully updated staff member avatar")
+ text: intl.formatMessage(commonMessages.savedChanges)
});
}
};
const handleStaffMemberAvatarDelete = (data: StaffAvatarDelete) => {
if (!maybe(() => data.userAvatarDelete.errors.length !== 0)) {
notify({
- text: i18n.t("Succesfully removed staff member avatar")
+ text: intl.formatMessage(commonMessages.savedChanges)
});
navigate(staffMemberDetailsUrl(id));
}
@@ -167,7 +169,10 @@ export const StaffDetails: React.StatelessComponent = ({
/>
@@ -175,20 +180,21 @@ export const StaffDetails: React.StatelessComponent = ({
}
onConfirm={deleteStaffMember}
>
- {{ email }} from staff members?",
- {
- email: maybe(() => data.user.email)
- }
- )
- }}
- />
+
+ data.user.email, "...")
+ }}
+ />
+
@@ -196,16 +202,18 @@ export const StaffDetails: React.StatelessComponent = ({
}
onConfirm={deleteStaffAvatar}
>
- {{ email }} avatar?",
- {
- email: maybe(() => data.user.email)
- }
- )
- }}
- />
+
+
+ {maybe(() => data.user.email, "...")}
+
+ )
+ }}
+ />
+
);
diff --git a/src/staff/views/StaffList.tsx b/src/staff/views/StaffList.tsx
index a730d8695..0cc4ad33e 100644
--- a/src/staff/views/StaffList.tsx
+++ b/src/staff/views/StaffList.tsx
@@ -6,9 +6,10 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
+import { useIntl } from "react-intl";
import { configurationMenuUrl } from "@saleor/configuration";
-import i18n from "@saleor/i18n";
+import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import StaffAddMemberDialog, {
@@ -37,6 +38,7 @@ export const StaffList: React.StatelessComponent = ({
const { updateListSettings, settings } = useListSettings(
ListViews.STAFF_MEMBERS_LIST
);
+ const intl = useIntl();
const closeModal = () =>
navigate(
@@ -55,7 +57,7 @@ export const StaffList: React.StatelessComponent = ({
const handleStaffMemberAddSuccess = (data: StaffMemberAdd) => {
if (data.staffCreate.errors.length === 0) {
notify({
- text: i18n.t("Succesfully added staff member")
+ text: intl.formatMessage(commonMessages.savedChanges)
});
navigate(staffMemberDetailsUrl(data.staffCreate.user.id));
}