Refactor staff section translations (#128)

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-08-26T21:32:40.783Z\n"
+"POT-Creation-Date: 2019-08-26T21:41:35.304Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -35,6 +35,22 @@ msgctxt "attribute value edit error"
 msgid "A value named {name} already exists"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffStatus/StaffStatus.json
+#. [src.staff.components.StaffStatus.2183517419] - section header
+#. defaultMessage is:
+#. Account Status
+msgctxt "section header"
+msgid "Account Status"
+msgstr ""
+
+#: build/locale/src/staff/components/StaffList/StaffList.json
+#. [src.staff.components.StaffList.3247064221] - staff member status
+#. defaultMessage is:
+#. Active
+msgctxt "staff member status"
+msgid "Active"
+msgstr ""
+
 #: build/locale/src/discounts/components/VoucherDates/VoucherDates.json
 #. [src.discounts.components.VoucherDates.1662220323] - time during voucher is active, header
 #. defaultMessage is:
@@ -131,6 +147,14 @@ msgctxt "button"
 msgid "Add Sale"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.json
+#. [src.staff.components.StaffAddMemberDialog.3490059488] - dialog header
+#. defaultMessage is:
+#. Add Staff Member
+msgctxt "dialog header"
+msgid "Add Staff Member"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.json
 #. [src.attributes.components.AttributeValueEditDialog.1841790893] - add attribute value
 #. defaultMessage is:
@@ -343,6 +367,14 @@ msgctxt "button"
 msgid "Add shipping zone"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffListPage/StaffListPage.json
+#. [src.staff.components.StaffListPage.802625341] - button
+#. defaultMessage is:
+#. Add staff member
+msgctxt "button"
+msgid "Add staff member"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryList/CategoryList.json
 #. [src.categories.components.CategoryList.435697837] - button
 #. defaultMessage is:
@@ -895,6 +927,22 @@ msgctxt "unassign country"
 msgid "Are you sure you want to remove {countryName} from this shipping zone?"
 msgstr ""
 
+#: build/locale/src/staff/views/StaffDetails.json
+#. [src.staff.views.3945766678]
+#. defaultMessage is:
+#. Are you sure you want to remove {email} avatar?
+msgctxt "description"
+msgid "Are you sure you want to remove {email} avatar?"
+msgstr ""
+
+#: build/locale/src/staff/views/StaffDetails.json
+#. [src.staff.views.2728048444]
+#. defaultMessage is:
+#. Are you sure you want to remove {email} from staff members?
+msgctxt "description"
+msgid "Are you sure you want to remove {email} from staff members?"
+msgstr ""
+
 #: build/locale/src/productTypes/components/ProductTypeAttributeUnassignDialog/ProductTypeAttributeUnassignDialog.json
 #. [src.productTypes.components.ProductTypeAttributeUnassignDialog.722498450]
 #. defaultMessage is:
@@ -1423,6 +1471,14 @@ msgctxt "description"
 msgid "Category name"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffProperties/StaffProperties.json
+#. [src.staff.components.StaffProperties.2771097267] - button
+#. defaultMessage is:
+#. Change photo
+msgctxt "button"
+msgid "Change photo"
+msgstr ""
+
 #: build/locale/src/products/views/ProductList/ProductList.json
 #. [src.products.views.ProductList.224127438] - product status update notification
 #. defaultMessage is:
@@ -2219,6 +2275,14 @@ msgctxt "dialog header"
 msgid "Delete Shipping Zones"
 msgstr ""
 
+#: build/locale/src/staff/views/StaffDetails.json
+#. [src.staff.views.701332676] - dialog header
+#. defaultMessage is:
+#. Delete Staff User Avatar
+msgctxt "dialog header"
+msgid "Delete Staff User Avatar"
+msgstr ""
+
 #: build/locale/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.json
 #. [src.products.components.ProductVariantCreatePage.3726089650] - button
 #. defaultMessage is:
@@ -2351,6 +2415,14 @@ msgctxt "dialog header"
 msgid "Delete menus"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffProperties/StaffProperties.json
+#. [src.staff.components.StaffProperties.457748370] - button
+#. defaultMessage is:
+#. Delete photo
+msgctxt "button"
+msgid "Delete photo"
+msgstr ""
+
 #: build/locale/src/categories/views/CategoryDetails.json
 #. [src.categories.views.2507763081] - dialog title
 #. defaultMessage is:
@@ -2627,6 +2699,14 @@ msgctxt "section header"
 msgid "Eligible Products"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffList/StaffList.json
+#. [src.staff.components.StaffList.1789607185]
+#. defaultMessage is:
+#. Email Address
+msgctxt "description"
+msgid "Email Address"
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.endDate]
 #. defaultMessage is:
@@ -2667,6 +2747,22 @@ msgctxt "description"
 msgid "Enter any extra infotmation regarding this customer."
 msgstr ""
 
+#: build/locale/src/staff/components/StaffPermissions/StaffPermissions.json
+#. [src.staff.components.StaffPermissions.3639008725]
+#. defaultMessage is:
+#. Expand or restrict user's permissions to access certain part of saleor system.
+msgctxt "description"
+msgid "Expand or restrict user's permissions to access certain part of saleor system."
+msgstr ""
+
+#: build/locale/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.json
+#. [src.staff.components.StaffAddMemberDialog.351138560]
+#. defaultMessage is:
+#. Expand or restrict user’s permissions to access certain part of saleor system.
+msgctxt "description"
+msgid "Expand or restrict user’s permissions to access certain part of saleor system."
+msgstr ""
+
 #: build/locale/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.json
 #. [src.collections.components.CollectionDetailsPage.2906897537] - switch button
 #. defaultMessage is:
@@ -2899,6 +2995,14 @@ msgctxt "description"
 msgid "If this option is disabled, discount will be counted for every eligible product"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffStatus/StaffStatus.json
+#. [src.staff.components.StaffStatus.2683780981]
+#. defaultMessage is:
+#. If you want to disable this account uncheck the box below
+msgctxt "description"
+msgid "If you want to disable this account uncheck the box below"
+msgstr ""
+
 #: build/locale/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.json
 #. [src.products.components.ProductVariantImageSelectDialog.3196043669] - dialog header
 #. defaultMessage is:
@@ -2919,6 +3023,14 @@ msgctxt "section header"
 msgid "Images"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffList/StaffList.json
+#. [src.staff.components.StaffList.1004218338] - staff member status
+#. defaultMessage is:
+#. Inactive
+msgctxt "staff member status"
+msgid "Inactive"
+msgstr ""
+
 #: build/locale/src/products/components/ProductStock/ProductStock.json
 #. [productStockHeader] - product stock, section header
 #. defaultMessage is:
@@ -3323,6 +3435,14 @@ msgctxt "shipping zone"
 msgid "Name"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffList/StaffList.json
+#. [src.staff.components.StaffList.636461959] - staff member full name
+#. defaultMessage is:
+#. Name
+msgctxt "staff member full name"
+msgid "Name"
+msgstr ""
+
 #: build/locale/src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.json
 #. [src.siteSettings.components.SiteSettingsDetails.2286355060]
 #. defaultMessage is:
@@ -3591,6 +3711,14 @@ msgctxt "description"
 msgid "No shipping zones found"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffList/StaffList.json
+#. [src.staff.components.StaffList.480166346]
+#. defaultMessage is:
+#. No staff members found
+msgctxt "description"
+msgid "No staff members found"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryList/CategoryList.json
 #. [src.categories.components.CategoryList.2155313053]
 #. defaultMessage is:
@@ -4103,6 +4231,22 @@ msgctxt "voucher discount type"
 msgid "Percentage"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.json
+#. [src.staff.components.StaffAddMemberDialog.2690176844]
+#. defaultMessage is:
+#. Permissions
+msgctxt "description"
+msgid "Permissions"
+msgstr ""
+
+#: build/locale/src/staff/components/StaffPermissions/StaffPermissions.json
+#. [src.staff.components.StaffPermissions.2690176844] - dialog header
+#. defaultMessage is:
+#. Permissions
+msgctxt "dialog header"
+msgid "Permissions"
+msgstr ""
+
 #: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
 #. [src.siteSettings.components.SiteSettingsAddress.1271289966]
 #. defaultMessage is:
@@ -4947,6 +5091,14 @@ msgctxt "description"
 msgid "Selling price override"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.json
+#. [src.staff.components.StaffAddMemberDialog.449055697] - button
+#. defaultMessage is:
+#. Send invite
+msgctxt "button"
+msgid "Send invite"
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerAddress/CustomerAddress.json
 #. [src.customers.components.CustomerAddress.3096438859] - button
 #. defaultMessage is:
@@ -5159,6 +5311,14 @@ msgctxt "description"
 msgid "Specific Price"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffProperties/StaffProperties.json
+#. [src.staff.components.StaffProperties.2650522200] - section header
+#. defaultMessage is:
+#. Staff Member Information
+msgctxt "section header"
+msgid "Staff Member Information"
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.staff] - staff section name
 #. defaultMessage is:
@@ -6035,6 +6195,30 @@ msgctxt "check to mark this account as active"
 msgid "User account active"
 msgstr ""
 
+#: build/locale/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.json
+#. [src.staff.components.StaffAddMemberDialog.1570990296]
+#. defaultMessage is:
+#. User has full access
+msgctxt "description"
+msgid "User has full access"
+msgstr ""
+
+#: build/locale/src/staff/components/StaffPermissions/StaffPermissions.json
+#. [src.staff.components.StaffPermissions.1848599267] - checkbox label
+#. defaultMessage is:
+#. User has full access to the store
+msgctxt "checkbox label"
+msgid "User has full access to the store"
+msgstr ""
+
+#: build/locale/src/staff/components/StaffStatus/StaffStatus.json
+#. [src.staff.components.StaffStatus.881953347] - checkbox label
+#. defaultMessage is:
+#. User is active
+msgctxt "checkbox label"
+msgid "User is active"
+msgstr ""
+
 #: build/locale/src/discounts/components/VoucherList/VoucherList.json
 #. [src.discounts.components.VoucherList.3917820600] - voucher uses
 #. defaultMessage is:
@@ -6351,6 +6535,14 @@ msgctxt "product status is set as"
 msgid "is set as"
 msgstr ""
 
+#: build/locale/src/staff/views/StaffDetails.json
+#. [src.staff.views.2240444792] - dialog header
+#. defaultMessage is:
+#. remove Staff User
+msgctxt "dialog header"
+msgid "remove Staff User"
+msgstr ""
+
 #: build/locale/src/home/components/HomeProductListCard/HomeProductListCard.json
 #. [homeProductListCardOrders] - number of ordered products
 #. defaultMessage is:

src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx

@@ -12,6 +12,7 @@ import {
 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 ConfirmButton, {
   ConfirmButtonTransitionState
@@ -19,7 +20,7 @@ import ConfirmButton, {
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
-import i18n from "../../../i18n";
+import { buttonMessages, commonMessages } from "@saleor/intl";
 import { UserError } from "../../../types";
 
 export interface FormData {
@@ -74,18 +75,26 @@ const StaffAddMemberDialog = withStyles(styles, {
     open,
     onClose,
     onConfirm
-  }: StaffAddMemberDialogProps) => (
+  }: StaffAddMemberDialogProps) => {
+    const intl = useIntl();
+
+    return (
       <Dialog onClose={onClose} open={open}>
         <Form errors={errors} initial={initialForm} onSubmit={onConfirm}>
           {({ change, data, errors: formErrors, hasChanged }) => (
             <>
-            <DialogTitle>{i18n.t("Add Staff Member")}</DialogTitle>
+              <DialogTitle>
+                <FormattedMessage
+                  defaultMessage="Add Staff Member"
+                  description="dialog header"
+                />
+              </DialogTitle>
               <DialogContent>
                 <div className={classes.textFieldGrid}>
                   <TextField
                     error={!!formErrors.firstName}
                     helperText={formErrors.firstName}
-                  label={i18n.t("First Name")}
+                    label={intl.formatMessage(commonMessages.firstName)}
                     name="firstName"
                     type="text"
                     value={data.firstName}
@@ -94,7 +103,7 @@ const StaffAddMemberDialog = withStyles(styles, {
                   <TextField
                     error={!!formErrors.lastName}
                     helperText={formErrors.lastName}
-                  label={i18n.t("Last Name")}
+                    label={intl.formatMessage(commonMessages.lastName)}
                     name="lastName"
                     type="text"
                     value={data.lastName}
@@ -106,7 +115,7 @@ const StaffAddMemberDialog = withStyles(styles, {
                   error={!!formErrors.email}
                   fullWidth
                   helperText={formErrors.email}
-                label={i18n.t("Email address")}
+                  label={intl.formatMessage(commonMessages.email)}
                   name="email"
                   type="email"
                   value={data.email}
@@ -116,23 +125,23 @@ const StaffAddMemberDialog = withStyles(styles, {
               <hr className={classes.hr} />
               <DialogContent>
                 <Typography className={classes.sectionTitle}>
-                {i18n.t("Permissions")}
+                  <FormattedMessage defaultMessage="Permissions" />
                 </Typography>
                 <Typography>
-                {i18n.t(
+                  <FormattedMessage defaultMessage="Expand or restrict user’s permissions to access certain part of saleor system." />
-                  "Expand or restrict user’s permissions to access certain part of saleor system."
-                )}
                 </Typography>
                 <ControlledCheckbox
                   checked={data.fullAccess}
-                label={i18n.t("User has full access")}
+                  label={intl.formatMessage({
+                    defaultMessage: "User has full access"
+                  })}
                   name="fullAccess"
                   onChange={change}
                 />
               </DialogContent>
               <DialogActions>
                 <Button onClick={onClose}>
-                {i18n.t("Cancel", { context: "button" })}
+                  <FormattedMessage {...buttonMessages.cancel} />
                 </Button>
                 <ConfirmButton
                   color="primary"
@@ -141,14 +150,18 @@ const StaffAddMemberDialog = withStyles(styles, {
                   type="submit"
                   transitionState={confirmButtonState}
                 >
-                {i18n.t("Send invite", { context: "button" })}
+                  <FormattedMessage
+                    defaultMessage="Send invite"
+                    description="button"
+                  />
                 </ConfirmButton>
               </DialogActions>
             </>
           )}
         </Form>
       </Dialog>
-  )
+    );
+  }
 );
 StaffAddMemberDialog.displayName = "StaffAddMemberDialog";
 export default StaffAddMemberDialog;

src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
@@ -8,7 +9,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 "../../../i18n";
+import { sectionNames } from "@saleor/intl";
 import { getUserName, maybe } from "../../../misc";
 import { PermissionEnum } from "../../../types/globalTypes";
 import {
@@ -57,6 +58,8 @@ const StaffDetailsPage: React.StatelessComponent<StaffDetailsPageProps> = ({
   onImageUpload,
   onSubmit
 }: StaffDetailsPageProps) => {
+  const intl = useIntl();
+
   const initialForm: FormData = {
     email: maybe(() => staffMember.email, ""),
     firstName: maybe(() => staffMember.firstName, ""),
@@ -78,7 +81,9 @@ const StaffDetailsPage: React.StatelessComponent<StaffDetailsPageProps> = ({
     <Form initial={initialForm} onSubmit={onSubmit} confirmLeave>
       {({ data, change, hasChanged, submit }) => (
         <Container>
-          <AppHeader onBack={onBack}>{i18n.t("Staff Members")}</AppHeader>
+          <AppHeader onBack={onBack}>
+            {intl.formatMessage(sectionNames.staff)}
+          </AppHeader>
           <PageHeader title={getUserName(staffMember)} />
           <Grid>
             <div>

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,16 +80,22 @@ const StaffList = withStyles(styles, { name: "StaffList" })(
     onRowClick,
     pageInfo,
     staffMembers
-  }: StaffListProps) => (
+  }: StaffListProps) => {
+    const intl = useIntl();
+
+    return (
       <Card>
         <Table>
           <TableHead>
             <TableRow>
               <TableCell className={classes.wideColumn}>
-              {i18n.t("Name", { context: "object" })}
+                <FormattedMessage
+                  defaultMessage="Name"
+                  description="staff member full name"
+                />
               </TableCell>
               <TableCell>
-              {i18n.t("Email Address", { context: "object" })}
+                <FormattedMessage defaultMessage="Email Address" />
               </TableCell>
             </TableRow>
           </TableHead>
@@ -119,7 +125,9 @@ const StaffList = withStyles(styles, { name: "StaffList" })(
                     [classes.tableRow]: !!staffMember
                   })}
                   hover={!!staffMember}
-                onClick={!!staffMember ? onRowClick(staffMember.id) : undefined}
+                  onClick={
+                    !!staffMember ? onRowClick(staffMember.id) : undefined
+                  }
                   key={staffMember ? staffMember.id : "skeleton"}
                 >
                   <TableCell>
@@ -131,7 +139,9 @@ const StaffList = withStyles(styles, { name: "StaffList" })(
                         />
                       ) : (
                         <div className={classes.avatarDefault}>
-                        <Typography>{getUserInitials(staffMember)}</Typography>
+                          <Typography>
+                            {getUserInitials(staffMember)}
+                          </Typography>
                         </div>
                       )}
                     </div>
@@ -145,8 +155,14 @@ const StaffList = withStyles(styles, { name: "StaffList" })(
                       {maybe<React.ReactNode>(
                         () =>
                           staffMember.isActive
-                          ? i18n.t("Active", { context: "status" })
+                            ? intl.formatMessage({
-                          : i18n.t("Inactive", { context: "status" }),
+                                defaultMessage: "Active",
+                                description: "staff member status"
+                              })
+                            : intl.formatMessage({
+                                defaultMessage: "Inactive",
+                                description: "staff member status"
+                              }),
                         <Skeleton />
                       )}
                     </Typography>
@@ -162,7 +178,7 @@ const StaffList = withStyles(styles, { name: "StaffList" })(
               () => (
                 <TableRow>
                   <TableCell colSpan={3}>
-                  {i18n.t("No staff members found")}
+                    <FormattedMessage defaultMessage="No staff members found" />
                   </TableCell>
                 </TableRow>
               )
@@ -170,7 +186,8 @@ const StaffList = withStyles(styles, { name: "StaffList" })(
           </TableBody>
         </Table>
       </Card>
-  )
+    );
+  }
 );
 StaffList.displayName = "StaffList";
 export default StaffList;

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<StaffListPageProps> = ({
   onAdd,
   onBack,
   ...listProps
-}) => (
+}) => {
+  const intl = useIntl();
+
+  return (
     <Container>
-    <AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
+      <AppHeader onBack={onBack}>
-    <PageHeader title={i18n.t("Staff members", { context: "page title" })}>
+        {intl.formatMessage(sectionNames.configuration)}
+      </AppHeader>
+      <PageHeader title={intl.formatMessage(sectionNames.staff)}>
         <Button
           color="primary"
           disabled={disabled}
           variant="contained"
           onClick={onAdd}
         >
-        {i18n.t("Add staff member", { context: "button" })}
+          <FormattedMessage
+            defaultMessage="Add staff member"
+            description="button"
+          />
           <AddIcon />
         </Button>
       </PageHeader>
       <StaffList disabled={disabled} {...listProps} />
     </Container>
-);
+  );
+};
 StaffListPage.displayName = "StaffListPage";
 export default StaffListPage;

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<any>) =>
       onChange(event, () =>
         onChange({
@@ -68,19 +70,23 @@ const StaffPermissions = withStyles(styles, { name: "StaffPermissions" })(
     };
     return (
       <Card>
-        <CardTitle title={i18n.t("Permissions")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Permissions",
+            description: "dialog header"
+          })}
+        />
         <CardContent>
           <Typography>
-            {i18n.t(
+            <FormattedMessage defaultMessage="Expand or restrict user's permissions to access certain part of saleor system." />
-              "Expand or restrict user's permissions to access certain part of saleor system."
-            )}
           </Typography>
           <div className={classes.checkboxContainer}>
             <ControlledCheckbox
               checked={data.hasFullAccess}
               disabled={disabled}
-              label={i18n.t("User has full access to the store", {
+              label={intl.formatMessage({
-                context: "checkbox label"
+                defaultMessage: "User has full access to the store",
+                description: "checkbox label"
               })}
               name="hasFullAccess"
               onChange={handleFullAccessChange}

src/staff/components/StaffProperties/StaffProperties.tsx

@@ -10,10 +10,11 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import SVG from "react-inlinesvg";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import photoIcon from "@assets/images/photo-icon.svg";
 import CardTitle from "@saleor/components/CardTitle";
-import i18n from "../../../i18n";
+import { commonMessages } from "@saleor/intl";
 import { getUserInitials, maybe } from "../../../misc";
 import { StaffMemberDetails_user } from "../../types/StaffMemberDetails";
 
@@ -120,11 +121,19 @@ const StaffProperties = withStyles(styles, { name: "StaffProperties" })(
     onImageDelete,
     onImageUpload
   }: StaffPropertiesProps) => {
+    const intl = useIntl();
     const imgInputAnchor = React.createRef<HTMLInputElement>();
+
     const clickImgInput = () => imgInputAnchor.current.click();
+
     return (
       <Card className={className}>
-        <CardTitle title={i18n.t("Staff Member Information")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Staff Member Information",
+            description: "section header"
+          })}
+        />
         <CardContent>
           <div className={classes.root}>
             <div>
@@ -143,10 +152,16 @@ const StaffProperties = withStyles(styles, { name: "StaffProperties" })(
                   <div className={classes.avatarHover}>
                     <SVG src={photoIcon} />
                     <Typography onClick={clickImgInput}>
-                      {i18n.t("Change photo")}
+                      <FormattedMessage
+                        defaultMessage="Change photo"
+                        description="button"
+                      />
                     </Typography>
                     <Typography onClick={onImageDelete}>
-                      {i18n.t("Delete photo")}
+                      <FormattedMessage
+                        defaultMessage="Delete photo"
+                        description="button"
+                      />
                     </Typography>
                     <input
                       className={classes.fileField}
@@ -163,7 +178,7 @@ const StaffProperties = withStyles(styles, { name: "StaffProperties" })(
               <div className={classes.propGrid}>
                 <div className={classes.prop}>
                   <TextField
-                    label={i18n.t("First Name")}
+                    label={intl.formatMessage(commonMessages.firstName)}
                     value={data.firstName}
                     name="firstName"
                     onChange={onChange}
@@ -172,7 +187,7 @@ const StaffProperties = withStyles(styles, { name: "StaffProperties" })(
                 </div>
                 <div className={classes.prop}>
                   <TextField
-                    label={i18n.t("Last Name")}
+                    label={intl.formatMessage(commonMessages.lastName)}
                     value={data.lastName}
                     name="lastName"
                     onChange={onChange}
@@ -181,7 +196,7 @@ const StaffProperties = withStyles(styles, { name: "StaffProperties" })(
                 </div>
                 <div className={classes.prop}>
                   <TextField
-                    label={i18n.t("E-mail")}
+                    label={intl.formatMessage(commonMessages.email)}
                     value={data.email}
                     name="email"
                     onChange={onChange}

src/staff/components/StaffStatus/StaffStatus.tsx

@@ -2,10 +2,10 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 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 i18n from "../../../i18n";
 
 interface StaffStatusProps {
   data: {
@@ -19,22 +19,34 @@ const StaffStatus: React.StatelessComponent<StaffStatusProps> = ({
   data,
   disabled,
   onChange
-}) => (
+}) => {
+  const intl = useIntl();
+
+  return (
     <Card>
-    <CardTitle title={i18n.t("Account Status")} />
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Account Status",
+          description: "section header"
+        })}
+      />
       <CardContent>
         <Typography>
-        {i18n.t("If you want to disable this account uncheck the box below")}
+          <FormattedMessage defaultMessage="If you want to disable this account uncheck the box below" />
         </Typography>
         <ControlledCheckbox
           checked={data.isActive}
           disabled={disabled}
-        label={i18n.t("User is active", { context: "checkbox label" })}
+          label={intl.formatMessage({
+            defaultMessage: "User is active",
+            description: "checkbox label"
+          })}
           name="isActive"
           onChange={onChange}
         />
       </CardContent>
     </Card>
-);
+  );
+};
 StaffStatus.displayName = "StaffStatus";
 export default StaffStatus;

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 (
     <>
-    <WindowTitle title={i18n.t("Staff")} />
+      <WindowTitle title={intl.formatMessage(sectionNames.staff)} />
       <Switch>
         <Route exact path={staffListPath} component={StaffList} />
         <Route path={staffMemberDetailsPath(":id")} component={StaffDetails} />
       </Switch>
     </>
-);
+  );
+};
 
 export default Component;

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<OrderListProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const user = useUser();
+  const intl = useIntl();
 
   return (
     <TypedStaffMemberDetailsQuery
@@ -49,14 +51,14 @@ export const StaffDetails: React.StatelessComponent<OrderListProps> = ({
         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<OrderListProps> = ({
         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<OrderListProps> = ({
                               />
                               <ActionDialog
                                 open={params.action === "remove"}
-                                title={i18n.t("Remove staff user")}
+                                title={intl.formatMessage({
+                                  defaultMessage: "remove Staff User",
+                                  description: "dialog header"
+                                })}
                                 confirmButtonState={deleteTransitionState}
                                 variant="delete"
                                 onClose={() =>
@@ -175,20 +180,21 @@ export const StaffDetails: React.StatelessComponent<OrderListProps> = ({
                                 }
                                 onConfirm={deleteStaffMember}
                               >
-                                <DialogContentText
+                                <DialogContentText>
-                                  dangerouslySetInnerHTML={{
+                                  <FormattedMessage
-                                    __html: i18n.t(
+                                    defaultMessage="Are you sure you want to remove {email} from staff members?"
-                                      "Are you sure you want to remove <strong>{{ email }}</strong> from staff members?",
+                                    values={{
-                                      {
+                                      email: maybe(() => data.user.email, "...")
-                                        email: maybe(() => data.user.email)
-                                      }
-                                    )
                                     }}
                                   />
+                                </DialogContentText>
                               </ActionDialog>
                               <ActionDialog
                                 open={params.action === "remove-avatar"}
-                                title={i18n.t("Remove staff user avatar")}
+                                title={intl.formatMessage({
+                                  defaultMessage: "Delete Staff User Avatar",
+                                  description: "dialog header"
+                                })}
                                 confirmButtonState={deleteAvatarTransitionState}
                                 variant="delete"
                                 onClose={() =>
@@ -196,16 +202,18 @@ export const StaffDetails: React.StatelessComponent<OrderListProps> = ({
                                 }
                                 onConfirm={deleteStaffAvatar}
                               >
-                                <DialogContentText
+                                <DialogContentText>
-                                  dangerouslySetInnerHTML={{
+                                  <FormattedMessage
-                                    __html: i18n.t(
+                                    defaultMessage="Are you sure you want to remove {email} avatar?"
-                                      "Are you sure you want to remove <strong>{{ email }}</strong> avatar?",
+                                    values={{
-                                      {
+                                      email: (
-                                        email: maybe(() => data.user.email)
+                                        <strong>
-                                      }
+                                          {maybe(() => data.user.email, "...")}
+                                        </strong>
                                       )
                                     }}
                                   />
+                                </DialogContentText>
                               </ActionDialog>
                             </>
                           );

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<StaffListProps> = ({
   const { updateListSettings, settings } = useListSettings(
     ListViews.STAFF_MEMBERS_LIST
   );
+  const intl = useIntl();
 
   const closeModal = () =>
     navigate(
@@ -55,7 +57,7 @@ export const StaffList: React.StatelessComponent<StaffListProps> = ({
         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));
           }