Refactor translations in customer section (#110)

* Refactor translations in customer section

* Update pot file

* Improve descriptions

* Rebase fixes

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-08-22T16:11:26.423Z\n"
+"POT-Creation-Date: 2019-08-23T12:11:14.694Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -15,6 +15,14 @@ msgctxt "attribute value edit error"
 msgid "A value named {name} already exists"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.json
+#. [customerAddressDialogAddAddress] - dialog title
+#. defaultMessage is:
+#. Add Address
+msgctxt "dialog title"
+msgid "Add Address"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.json
 #. [src.attributes.components.AttributeValueEditDialog.1841790893] - add attribute value
 #. defaultMessage is:
@@ -23,6 +31,14 @@ msgctxt "add attribute value"
 msgid "Add Value"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.json
+#. [customerAddressListPageAddAddress] - button
+#. defaultMessage is:
+#. Add address
+msgctxt "button"
+msgid "Add address"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeListPage/AttributeListPage.json
 #. [src.attributes.components.AttributeListPage.350498821] - button
 #. defaultMessage is:
@@ -55,6 +71,22 @@ msgctxt "button"
 msgid "Add collection"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerCreatePage/CustomerCreatePage.json
+#. [customerCreatePageHeader] - page header
+#. defaultMessage is:
+#. Add customer
+msgctxt "page header"
+msgid "Add customer"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerListPage/CustomerListPage.json
+#. [customerListPageAddCustomer] - button
+#. defaultMessage is:
+#. Add customer
+msgctxt "button"
+msgid "Add customer"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
 #. [src.categories.components.CategoryProducts.3554578821] - button
 #. defaultMessage is:
@@ -123,6 +155,30 @@ msgctxt "description"
 msgid "Added product to collection"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerAddresses/CustomerAddresses.json
+#. [customerAddressesAddressSectionHeader] - subsection header
+#. defaultMessage is:
+#. Address
+msgctxt "subsection header"
+msgid "Address"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddresses/CustomerAddresses.json
+#. [customerAddressesHeader] - header
+#. defaultMessage is:
+#. Address Information
+msgctxt "header"
+msgid "Address Information"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddress/CustomerAddress.json
+#. [customerAddressHeader] - addres card header
+#. defaultMessage is:
+#. Address {addressNumber}
+msgctxt "addres card header"
+msgid "Address {addressNumber}"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeValues/AttributeValues.json
 #. [src.attributes.components.AttributeValues.1565474525] - attribute values list: slug column header
 #. defaultMessage is:
@@ -239,6 +295,30 @@ msgctxt "description"
 msgid "Are you sure you want to publish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
 msgstr ""
 
+#: build/locale/src/customers/views/CustomerAddresses.json
+#. [customerAddressesRemoveAddressDialogContent]
+#. defaultMessage is:
+#. Are you sure you want to remove this address from users address book?
+msgctxt "description"
+msgid "Are you sure you want to remove this address from users address book?"
+msgstr ""
+
+#: build/locale/src/customers/views/CustomerDetails.json
+#. [customerDetailsRemoveCustomerDialogContent] - remove customer dialog content
+#. defaultMessage is:
+#. Are you sure you want to remove {email}?
+msgctxt "remove customer dialog content"
+msgid "Are you sure you want to remove {email}?"
+msgstr ""
+
+#: build/locale/src/customers/views/CustomerList.json
+#. [customerListRemoveCustomersDialogContent]
+#. defaultMessage is:
+#. Are you sure you want to remove {number} customers?
+msgctxt "description"
+msgid "Are you sure you want to remove {number} customers?"
+msgstr ""
+
 #: build/locale/src/collections/views/CollectionDetails.json
 #. [src.collections.views.1908998638]
 #. defaultMessage is:
@@ -339,11 +419,19 @@ msgctxt "section header"
 msgid "Background image (optional)"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerAddresses/CustomerAddresses.json
+#. [customerAddressesBillingAddressSectionHeader] - subsection header
+#. defaultMessage is:
+#. Billing address
+msgctxt "subsection header"
+msgid "Billing address"
+msgstr ""
+
 #: build/locale/src/intl.json
-#. [src.cancel]
+#. [src.cancel] - button
 #. defaultMessage is:
 #. Cancel
-msgctxt "description"
+msgctxt "button"
 msgid "Cancel"
 msgstr ""
 
@@ -412,10 +500,18 @@ msgid "Collections"
 msgstr ""
 
 #: build/locale/src/intl.json
-#. [src.confirm]
+#. [src.configuration] - configuration section name
+#. defaultMessage is:
+#. Configuration
+msgctxt "configuration section name"
+msgid "Configuration"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.confirm] - button
 #. defaultMessage is:
 #. Confirm
-msgctxt "description"
+msgctxt "button"
 msgid "Confirm"
 msgstr ""
 
@@ -451,6 +547,14 @@ msgctxt "window title"
 msgid "Create collection"
 msgstr ""
 
+#: build/locale/src/customers/views/CustomerCreate.json
+#. [customerCreateWindowTitle] - window title
+#. defaultMessage is:
+#. Create customer
+msgctxt "window title"
+msgid "Create customer"
+msgstr ""
+
 #: build/locale/src/collections/views/CollectionCreate.json
 #. [src.collections.views.1597339737]
 #. defaultMessage is:
@@ -459,6 +563,86 @@ msgctxt "description"
 msgid "Created collection"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerList/CustomerList.json
+#. [customerListCustomerEmailColumnHeader] - customer list: column header
+#. defaultMessage is:
+#. Customer Email
+msgctxt "customer list: column header"
+msgid "Customer Email"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerStats/CustomerStats.json
+#. [customerStatsHeader] - section header
+#. defaultMessage is:
+#. Customer History
+msgctxt "section header"
+msgid "Customer History"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerList/CustomerList.json
+#. [customerListCustomerNameColumnHeader] - customer list: column header
+#. defaultMessage is:
+#. Customer Name
+msgctxt "customer list: column header"
+msgid "Customer Name"
+msgstr ""
+
+#: build/locale/src/customers/views/CustomerDetails.json
+#. [customerDetailsRemoveCustomerSuccess]
+#. defaultMessage is:
+#. Customer Removed
+msgctxt "description"
+msgid "Customer Removed"
+msgstr ""
+
+#: build/locale/src/customers/views/CustomerCreate.json
+#. [customerCreateSuccess]
+#. defaultMessage is:
+#. Customer created
+msgctxt "description"
+msgid "Customer created"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.json
+#. [customerCreateDetailsHeader] - header
+#. defaultMessage is:
+#. Customer overview
+msgctxt "header"
+msgid "Customer overview"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerDetails/CustomerDetails.json
+#. [customerDetailsSubheader] - section subheader
+#. defaultMessage is:
+#. Customer since: {date}
+msgctxt "section subheader"
+msgid "Customer since: {date}"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.customers] - customers section name
+#. defaultMessage is:
+#. Customers
+msgctxt "customers section name"
+msgid "Customers"
+msgstr ""
+
+#: build/locale/src/customers/views/CustomerList.json
+#. [customerListRemovedCustomers]
+#. defaultMessage is:
+#. Customers removed
+msgctxt "description"
+msgid "Customers removed"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.dashboard]
+#. defaultMessage is:
+#. Dashboard
+msgctxt "description"
+msgid "Dashboard"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
 #. [src.attributes.components.AttributeProperties.26409543] - attribute properties regarding dashboard
 #. defaultMessage is:
@@ -467,6 +651,30 @@ msgctxt "attribute properties regarding dashboard"
 msgid "Dashboard Properties"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
+#. [customerOrdersDateColumnHeader] - customer's order list: order date column header
+#. defaultMessage is:
+#. Date
+msgctxt "customer's order list: order date column header"
+msgid "Date"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddress/CustomerAddress.json
+#. [customerAddressSubheaderDefaultAddress]
+#. defaultMessage is:
+#. Default Address
+msgctxt "description"
+msgid "Default Address"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddress/CustomerAddress.json
+#. [customerAddressSubheaderDefaultBillingAddress]
+#. defaultMessage is:
+#. Default Billing Address
+msgctxt "description"
+msgid "Default Billing Address"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
 #. [src.attributes.components.AttributeDetails.691600601] - attribute's label
 #. defaultMessage is:
@@ -483,6 +691,14 @@ msgctxt "attribute's label'"
 msgid "Default Label"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerAddress/CustomerAddress.json
+#. [customerAddressSubheaderDefaultShippingAddress]
+#. defaultMessage is:
+#. Default Shipping Address
+msgctxt "description"
+msgid "Default Shipping Address"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeValues/AttributeValues.json
 #. [src.attributes.components.AttributeValues.1397696159] - attribute values list: name column header
 #. defaultMessage is:
@@ -603,6 +819,30 @@ msgctxt "product attribute type"
 msgid "Dropdown"
 msgstr ""
 
+#: build/locale/src/intl.json
+#. [src.email]
+#. defaultMessage is:
+#. E-mail Address
+msgctxt "description"
+msgid "E-mail Address"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.edit] - button
+#. defaultMessage is:
+#. Edit
+msgctxt "button"
+msgid "Edit"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.json
+#. [customerAddressDialogEditAddress] - dialog title
+#. defaultMessage is:
+#. Edit Address
+msgctxt "dialog title"
+msgid "Edit Address"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.json
 #. [src.attributes.components.AttributeValueEditDialog.1395607402] - edit attribute value
 #. defaultMessage is:
@@ -611,6 +851,14 @@ msgctxt "edit attribute value"
 msgid "Edit Value"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerCreateNote/CustomerCreateNote.json
+#. [customerCreateNoteContent]
+#. defaultMessage is:
+#. Enter any extra infotmation regarding this customer.
+msgctxt "description"
+msgid "Enter any extra infotmation regarding this customer."
+msgstr ""
+
 #: build/locale/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.json
 #. [src.collections.components.CollectionDetailsPage.2906897537] - switch button
 #. defaultMessage is:
@@ -619,6 +867,14 @@ msgctxt "switch button"
 msgid "Feature on Homepage"
 msgstr ""
 
+#: build/locale/src/intl.json
+#. [src.firstName]
+#. defaultMessage is:
+#. First Name
+msgctxt "description"
+msgid "First Name"
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.generalInformations]
 #. defaultMessage is:
@@ -635,6 +891,38 @@ msgctxt "description"
 msgid "If enabled, you’ll be able to use this attribute to filter products in product list."
 msgstr ""
 
+#: build/locale/src/intl.json
+#. [src.lastName]
+#. defaultMessage is:
+#. Last Name
+msgctxt "description"
+msgid "Last Name"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerStats/CustomerStats.json
+#. [customerStatsLastLogin]
+#. defaultMessage is:
+#. Last login
+msgctxt "description"
+msgid "Last login"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerStats/CustomerStats.json
+#. [customerStatsLastOrder]
+#. defaultMessage is:
+#. Last order
+msgctxt "description"
+msgid "Last order"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.manage] - button
+#. defaultMessage is:
+#. Manage
+msgctxt "button"
+msgid "Manage"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
 #. [src.attributes.components.AttributeDetails.3334509011] - product attribute type
 #. defaultMessage is:
@@ -671,6 +959,14 @@ msgctxt "collection name"
 msgid "Name"
 msgstr ""
 
+#: build/locale/src/intl.json
+#. [src.navigation] - navigation section name
+#. defaultMessage is:
+#. Navigation
+msgctxt "navigation section name"
+msgid "Navigation"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeList/AttributeList.json
 #. [src.attributes.components.AttributeList.1192828581]
 #. defaultMessage is:
@@ -695,6 +991,22 @@ msgctxt "description"
 msgid "No collections found"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerList/CustomerList.json
+#. [customerListNoCustomers]
+#. defaultMessage is:
+#. No customers found
+msgctxt "description"
+msgid "No customers found"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
+#. [customerOrdersNoOrders]
+#. defaultMessage is:
+#. No orders found
+msgctxt "description"
+msgid "No orders found"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
 #. [src.categories.components.CategoryProducts.1657559629]
 #. defaultMessage is:
@@ -723,6 +1035,22 @@ msgctxt "No attribute values found"
 msgid "No values found"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerList/CustomerList.json
+#. [customerListOrdersColumnHeader] - customer list: column header
+#. defaultMessage is:
+#. No. Orders
+msgctxt "customer list: column header"
+msgid "No. Orders"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
+#. [customerOrdersNoOfOrderColumnHeader] - customer's order list: number of order column header
+#. defaultMessage is:
+#. No. of Order
+msgctxt "customer's order list: number of order column header"
+msgid "No. of Order"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryList/CategoryList.json
 #. [src.categories.components.CategoryList.2527742754] - number of products
 #. defaultMessage is:
@@ -755,6 +1083,30 @@ msgctxt "product is not published"
 msgid "Not published"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerCreateNote/CustomerCreateNote.json
+#. [customerCreateNoteInputLabel] - note about customer input label
+#. defaultMessage is:
+#. Note
+msgctxt "note about customer input label"
+msgid "Note"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerDetails/CustomerDetails.json
+#. [customerDetailsNoteInputLabel] - note about customer
+#. defaultMessage is:
+#. Note
+msgctxt "note about customer"
+msgid "Note"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerCreateNote/CustomerCreateNote.json
+#. [customerCreateNoteHeader] - notes about customer header
+#. defaultMessage is:
+#. Notes
+msgctxt "notes about customer header"
+msgid "Notes"
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.optionalField] - field is optional
 #. defaultMessage is:
@@ -763,6 +1115,14 @@ msgctxt "field is optional"
 msgid "Optional"
 msgstr ""
 
+#: build/locale/src/intl.json
+#. [src.pages] - pages section name
+#. defaultMessage is:
+#. Pages
+msgctxt "pages section name"
+msgid "Pages"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
 #. [src.attributes.components.AttributeProperties.3590282519] - attribute position in storefront filters
 #. defaultMessage is:
@@ -771,6 +1131,22 @@ msgctxt "attribute position in storefront filters"
 msgid "Position in faceted navigation"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.json
+#. [customerCreateAddressHeader] - page header
+#. defaultMessage is:
+#. Primary address
+msgctxt "page header"
+msgid "Primary address"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.productTypes] - product types section name
+#. defaultMessage is:
+#. Product Types
+msgctxt "product types section name"
+msgid "Product Types"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
 #. [src.categories.components.CategoryProducts.2968663655] - section header
 #. defaultMessage is:
@@ -843,6 +1219,14 @@ msgctxt "product is published"
 msgid "Published"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
+#. [customerOrdersHeader] - section header
+#. defaultMessage is:
+#. Recent orders
+msgctxt "section header"
+msgid "Recent orders"
+msgstr ""
+
 #: build/locale/src/categories/views/CategoryDetails.json
 #. [src.categories.views.3488150607]
 #. defaultMessage is:
@@ -855,6 +1239,46 @@ msgctxt "description"
 msgid "Remember this will also delete all products assigned to this category."
 msgstr ""
 
+#: build/locale/src/intl.json
+#. [src.remove] - button
+#. defaultMessage is:
+#. Remove
+msgctxt "button"
+msgid "Remove"
+msgstr ""
+
+#: build/locale/src/customers/views/CustomerAddresses.json
+#. [customerAddressesRemoveAddressDialogHeader] - dialog header
+#. defaultMessage is:
+#. Remove Address
+msgctxt "dialog header"
+msgid "Remove Address"
+msgstr ""
+
+#: build/locale/src/customers/views/CustomerDetails.json
+#. [customerDetailsRemoveCustomerDialogHeader] - dialog header
+#. defaultMessage is:
+#. Remove customer
+msgctxt "dialog header"
+msgid "Remove customer"
+msgstr ""
+
+#: build/locale/src/customers/views/CustomerList.json
+#. [customerListRemoveCustomersDialogHeader] - dialog header
+#. defaultMessage is:
+#. Remove customers
+msgctxt "dialog header"
+msgid "Remove customers"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.save] - button
+#. defaultMessage is:
+#. Save
+msgctxt "button"
+msgid "Save"
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.savedChanges]
 #. defaultMessage is:
@@ -871,6 +1295,62 @@ msgctxt "attribute can be searched in dashboard"
 msgid "Searchable"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerAddress/CustomerAddress.json
+#. [customerAddressSetAsDefaultBilling] - button
+#. defaultMessage is:
+#. Set as default billing address
+msgctxt "button"
+msgid "Set as default billing address"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddress/CustomerAddress.json
+#. [customerAddressSetAsDefaultShipping] - button
+#. defaultMessage is:
+#. Set as default shipping address
+msgctxt "button"
+msgid "Set as default shipping address"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.shipping] - shipping section name
+#. defaultMessage is:
+#. Shipping Methods
+msgctxt "shipping section name"
+msgid "Shipping Methods"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddresses/CustomerAddresses.json
+#. [customerAddressesShippingAddressSectionHeader] - subsection header
+#. defaultMessage is:
+#. Shipping address
+msgctxt "subsection header"
+msgid "Shipping address"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.siteSettings] - site settings section name
+#. defaultMessage is:
+#. Site Settings
+msgctxt "site settings section name"
+msgid "Site Settings"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.staff] - staff section name
+#. defaultMessage is:
+#. Staff Members
+msgctxt "staff section name"
+msgid "Staff Members"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
+#. [customerOrdersStatusColumnHeader] - customer's order list: status column header
+#. defaultMessage is:
+#. Status
+msgctxt "customer's order list: status column header"
+msgid "Status"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
 #. [src.attributes.components.AttributeProperties.1877630205] - attribute properties regarding storefront
 #. defaultMessage is:
@@ -903,6 +1383,46 @@ msgctxt "description"
 msgid "Successfully created attribute"
 msgstr ""
 
+#: build/locale/src/intl.json
+#. [src.taxes] - taxes section name
+#. defaultMessage is:
+#. Taxes
+msgctxt "taxes section name"
+msgid "Taxes"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.json
+#. [customerCreateAddressContent]
+#. defaultMessage is:
+#. The primary address of this customer.
+msgctxt "description"
+msgid "The primary address of this customer."
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.json
+#. [customerAddressListPageNoAddresses]
+#. defaultMessage is:
+#. There is no address to show for this customer
+msgctxt "description"
+msgid "There is no address to show for this customer"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.json
+#. [customerAddressListPageNoAddressesAdditionalText]
+#. defaultMessage is:
+#. This customer doesn’t have any adresses added to his address book. You can add address using the button below.
+msgctxt "description"
+msgid "This customer doesn’t have any adresses added to his address book. You can add address using the button below."
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddresses/CustomerAddresses.json
+#. [customerAddressesNoAddresses]
+#. defaultMessage is:
+#. This customer has no addresses yet
+msgctxt "description"
+msgid "This customer has no addresses yet"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
 #. [src.attributes.components.AttributeDetails.4107478955] - attribute slug input field helper text
 #. defaultMessage is:
@@ -911,6 +1431,14 @@ msgctxt "attribute slug input field helper text"
 msgid "This is used internally. Make sure you don’t use spaces"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
+#. [customerOrdersTotalColumnHeader] - customer's order list: total amount column header
+#. defaultMessage is:
+#. Total
+msgctxt "customer's order list: total amount column header"
+msgid "Total"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
 #. [src.categories.components.CategoryProducts.1952810469] - product type
 #. defaultMessage is:
@@ -987,6 +1515,14 @@ msgctxt "attribute can be searched in storefront"
 msgid "Use in faceted search"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerDetails/CustomerDetails.json
+#. [customerDetailsAccountActive] - check to mark this account as active
+#. defaultMessage is:
+#. User account active
+msgctxt "check to mark this account as active"
+msgid "User account active"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
 #. [src.attributes.components.AttributeDetails.2592224946] - check to require attribute to have value
 #. defaultMessage is:
@@ -1003,6 +1539,14 @@ msgctxt "attribute value deleted"
 msgid "Value deleted"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
+#. [customerOrdersViewAllOrders] - button
+#. defaultMessage is:
+#. View all orders
+msgctxt "button"
+msgid "View all orders"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeList/AttributeList.json
 #. [src.attributes.components.AttributeList.643174786] - attribute is visible
 #. defaultMessage is:
@@ -1019,10 +1563,18 @@ msgctxt "attribute"
 msgid "Visible on Product Page in Storefront"
 msgstr ""
 
-#: build/locale/src/intl.json
+#: build/locale/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.json
-#. [src.save]
+#. [customerAddressListPageAppHeader] - header
 #. defaultMessage is:
-#. save
+#. {fullName} Details
-msgctxt "description"
+msgctxt "header"
-msgid "save"
+msgid "{fullName} Details"
+msgstr ""
+
+#: build/locale/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.json
+#. [customerAddressListPageHeader] - header
+#. defaultMessage is:
+#. {fullName}'s Address Book
+msgctxt "header"
+msgid "{fullName}'s Address Book"
 msgstr ""

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -12,7 +12,7 @@ import ConfirmButton, {
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
-import { commonMessages } from "@saleor/intl";
+import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
 import { AttributeDetails_attribute_values } from "../../types/AttributeDetails";
@@ -83,7 +83,7 @@ const AttributeValueEditDialog: React.StatelessComponent<
             </DialogContent>
             <DialogActions>
               <Button onClick={onClose}>
-                <FormattedMessage {...commonMessages.cancel} />
+                <FormattedMessage {...buttonMessages.cancel} />
               </Button>
               <ConfirmButton
                 transitionState={confirmButtonState}
@@ -91,7 +91,7 @@ const AttributeValueEditDialog: React.StatelessComponent<
                 variant="contained"
                 onClick={submit}
               >
-                <FormattedMessage {...commonMessages.save} />
+                <FormattedMessage {...buttonMessages.save} />
               </ConfirmButton>
             </DialogActions>
           </>

src/categories/components/CategoryBackground/CategoryBackground.tsx

@@ -105,7 +105,10 @@ const CategoryBackground: React.FC<CategoryBackgroundProps> = props => {
             <TextField
               name="backgroundImageAlt"
               label={intl.formatMessage(commonMessages.description)}
-              helperText={intl.formatMessage(commonMessages.optionalField)}
+              helperText={intl.formatMessage({
+                defaultMessage: "(Optional)",
+                description: "field is optional"
+              })}
               value={data.backgroundImageAlt}
               onChange={onChange}
               fullWidth

src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx

@@ -13,7 +13,7 @@ import {
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { commonMessages } from "@saleor/intl";
+import { buttonMessages } from "@saleor/intl";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -56,14 +56,14 @@ const CategoryDeleteDialog = withStyles(styles, {
     </DialogContent>
     <DialogActions>
       <Button onClick={onClose}>
-        <FormattedMessage {...commonMessages.cancel} />
+        <FormattedMessage {...buttonMessages.cancel} />
       </Button>
       <Button
         className={classes.deleteButton}
         variant="contained"
         onClick={onConfirm}
       >
-        <FormattedMessage {...commonMessages.save} />
+        <FormattedMessage {...buttonMessages.save} />
       </Button>
     </DialogActions>
   </Dialog>

src/collections/components/CollectionImage/CollectionImage.tsx

@@ -124,7 +124,10 @@ export const CollectionImage = withStyles(styles)(
               <TextField
                 name="backgroundImageAlt"
                 label={intl.formatMessage(commonMessages.description)}
-                helperText={intl.formatMessage(commonMessages.optionalField)}
+                helperText={intl.formatMessage({
+                  defaultMessage: "(Optional)",
+                  description: "field is optional"
+                })}
                 value={data.backgroundImageAlt}
                 onChange={onChange}
                 fullWidth

src/customers/components/CustomerAddress/CustomerAddress.tsx

@@ -5,12 +5,13 @@ import CardContent from "@material-ui/core/CardContent";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AddressFormatter from "@saleor/components/AddressFormatter";
 import CardMenu from "@saleor/components/CardMenu";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import { AddressTypeEnum } from "../../../types/globalTypes";
 import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses";
 
@@ -51,65 +52,81 @@ const CustomerAddress = withStyles(styles, { name: "CustomerAddress" })(
     onEdit,
     onRemove,
     onSetAsDefault
-  }: CustomerAddressProps & WithStyles<typeof styles>) => (
+  }: CustomerAddressProps & WithStyles<typeof styles>) => {
-    <Card className={classes.card}>
+    const intl = useIntl();
-      <CardTitle
+
-        title={
+    return (
-          address ? (
+      <Card className={classes.card}>
-            <>
+        <CardTitle
-              {i18n.t("Address {{ addressNumber }}", {
+          title={
-                addressNumber
+            address ? (
-              })}
+              <>
-              <Typography variant="caption">
+                <FormattedMessage
-                {isDefaultBillingAddress && isDefaultShippingAddress
+                  defaultMessage="Address {addressNumber}"
-                  ? i18n.t("Default Address")
+                  description="addres card header"
-                  : isDefaultShippingAddress
+                  values={{
-                  ? i18n.t("Default Shipping Address")
+                    addressNumber
-                  : isDefaultBillingAddress
+                  }}
-                  ? i18n.t("Default Billing Address")
+                />
-                  : null}
+                <Typography variant="caption">
-              </Typography>
+                  {isDefaultBillingAddress && isDefaultShippingAddress
-            </>
+                    ? intl.formatMessage({
-          ) : (
+                        defaultMessage: "Default Address"
-            <Skeleton />
+                      })
-          )
+                    : isDefaultShippingAddress
-        }
+                    ? intl.formatMessage({
-        height="const"
+                        defaultMessage: "Default Shipping Address"
-        toolbar={
+                      })
-          <CardMenu
+                    : isDefaultBillingAddress
-            disabled={disabled}
+                    ? intl.formatMessage({
-            menuItems={[
+                        defaultMessage: "Default Billing Address"
-              {
+                      })
-                label: i18n.t("Set as default shipping address", {
+                    : null}
-                  context: "button"
+                </Typography>
-                }),
+              </>
-                onSelect: () => onSetAsDefault(AddressTypeEnum.SHIPPING)
+            ) : (
-              },
+              <Skeleton />
-              {
+            )
-                label: i18n.t("Set as default billing address", {
+          }
-                  context: "button"
+          height="const"
-                }),
+          toolbar={
-                onSelect: () => onSetAsDefault(AddressTypeEnum.BILLING)
+            <CardMenu
-              }
+              disabled={disabled}
-            ]}
+              menuItems={[
-          />
+                {
-        }
+                  label: intl.formatMessage({
-      />
+                    defaultMessage: "Set as default shipping address",
-      <CardContent>
+                    description: "button"
-        <AddressFormatter address={address} />
+                  }),
-      </CardContent>
+                  onSelect: () => onSetAsDefault(AddressTypeEnum.SHIPPING)
-      <div className={classes.actionsContainer}>
+                },
-        <CardActions className={classes.actions}>
+                {
-          <Button color="primary" disabled={disabled} onClick={onEdit}>
+                  label: intl.formatMessage({
-            {i18n.t("Edit")}
+                    defaultMessage: "Set as default billing address",
-          </Button>
+                    description: "button"
-          <Button color="primary" disabled={disabled} onClick={onRemove}>
+                  }),
-            {i18n.t("Delete")}
+                  onSelect: () => onSetAsDefault(AddressTypeEnum.BILLING)
-          </Button>
+                }
-        </CardActions>
+              ]}
-      </div>
+            />
-    </Card>
+          }
-  )
+        />
+        <CardContent>
+          <AddressFormatter address={address} />
+        </CardContent>
+        <div className={classes.actionsContainer}>
+          <CardActions className={classes.actions}>
+            <Button color="primary" disabled={disabled} onClick={onEdit}>
+              <FormattedMessage {...buttonMessages.edit} />
+            </Button>
+            <Button color="primary" disabled={disabled} onClick={onRemove}>
+              <FormattedMessage {...buttonMessages.remove} />
+            </Button>
+          </CardActions>
+        </div>
+      </Card>
+    );
+  }
 );
 CustomerAddress.displayName = "CustomerAddress";
 export default CustomerAddress;

src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx

@@ -6,6 +6,7 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import AddIcon from "@material-ui/icons/Add";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import AddressEdit from "@saleor/components/AddressEdit";
 import ConfirmButton, {
@@ -13,7 +14,7 @@ import ConfirmButton, {
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import i18n from "@saleor/i18n";
+import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
@@ -97,9 +98,17 @@ const CustomerAddressDialog = withStyles(styles, {})(
             return (
               <>
                 <DialogTitle>
-                  {variant === "create"
+                  {variant === "create" ? (
-                    ? i18n.t("Add Address")
+                    <FormattedMessage
-                    : i18n.t("Edit Address")}
+                      defaultMessage="Add Address"
+                      description="dialog title"
+                    />
+                  ) : (
+                    <FormattedMessage
+                      defaultMessage="Edit Address"
+                      description="dialog title"
+                    />
+                  )}
                 </DialogTitle>
                 <DialogContent className={classes.overflow}>
                   <AddressEdit
@@ -113,7 +122,7 @@ const CustomerAddressDialog = withStyles(styles, {})(
                 </DialogContent>
                 <DialogActions>
                   <Button onClick={onClose}>
-                    {i18n.t("Cancel", { context: "button" })}
+                    <FormattedMessage {...buttonMessages.cancel} />
                   </Button>
                   <ConfirmButton
                     transitionState={confirmButtonState}
@@ -122,8 +131,8 @@ const CustomerAddressDialog = withStyles(styles, {})(
                     onClick={submit}
                     type="submit"
                   >
-                    {i18n.t("Save Address", { context: "button" })}
+                    <FormattedMessage {...buttonMessages.save} />
-                    <AddIcon />
+                    {variant === "create" && <AddIcon />}
                   </ConfirmButton>
                 </DialogActions>
               </>

src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx

@@ -8,11 +8,11 @@ import {
 import Typography from "@material-ui/core/Typography";
 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 "../../../i18n";
 import { maybe, renderCollection } from "../../../misc";
 import { AddressTypeEnum } from "../../../types/globalTypes";
 import { CustomerAddresses_user } from "../../types/CustomerAddresses";
@@ -62,28 +62,42 @@ const CustomerAddressListPage = withStyles(styles, {
     onRemove,
     onSetAsDefault
   }: CustomerAddressListPageProps & WithStyles<typeof styles>) => {
+    const intl = useIntl();
+
     const isEmpty = maybe(() => customer.addresses.length) === 0;
+    const fullName = maybe(
+      () => [customer.firstName, customer.lastName].join(" "),
+      "..."
+    );
+
     return (
       <Container>
         <AppHeader onBack={onBack}>
-          {i18n.t("Customer Info", {
+          <FormattedMessage
-            context: "navigation"
+            defaultMessage="{fullName} Details"
-          })}
+            description="customer details, header"
+            values={{
+              fullName
+            }}
+          />
         </AppHeader>
         {!isEmpty && (
           <PageHeader
-            title={maybe(() =>
+            title={intl.formatMessage(
-              i18n.t("{{ firstName }} {{ lastName }} Address Book", {
+              {
-                context: "customer address book",
+                defaultMessage: "{fullName}'s Address Book",
-                firstName: customer.firstName,
+                description: "customer's address book, header"
-                lastName: customer.lastName
+              },
-              })
+              {
+                fullName
+              }
             )}
           >
             <Button color="primary" variant="contained" onClick={onAdd}>
-              {i18n.t("Add address", {
+              <FormattedMessage
-                context: "add customer address"
+                defaultMessage="Add address"
-              })}
+                description="button"
+              />
               <AddIcon />
             </Button>
           </PageHeader>
@@ -91,12 +105,10 @@ const CustomerAddressListPage = withStyles(styles, {
         {isEmpty ? (
           <div className={classes.empty}>
             <Typography variant="h5">
-              {i18n.t("There is no address to show for this customer")}
+              <FormattedMessage defaultMessage="There is no address to show for this customer" />
             </Typography>
             <Typography className={classes.description}>
-              {i18n.t(
+              <FormattedMessage defaultMessage="This customer doesn’t have any adresses added to his address book. You can add address using the button below." />
-                "This customer doesn’t have any adresses added to his address book. You can add address using the button below."
-              )}
             </Typography>
             <Button
               className={classes.addButton}
@@ -104,9 +116,10 @@ const CustomerAddressListPage = withStyles(styles, {
               variant="contained"
               onClick={onAdd}
             >
-              {i18n.t("Add address", {
+              <FormattedMessage
-                context: "add customer address"
+                defaultMessage="Add address"
-              })}
+                description="button"
+              />
               <AddIcon />
             </Button>
           </div>

src/customers/components/CustomerAddresses/CustomerAddresses.tsx

@@ -9,11 +9,12 @@ import {
 } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AddressFormatter from "@saleor/components/AddressFormatter";
 import CardTitle from "@saleor/components/CardTitle";
 import { Hr } from "@saleor/components/Hr";
-import i18n from "../../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import { maybe } from "../../../misc";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
@@ -37,66 +38,85 @@ const CustomerAddresses = withStyles(styles, { name: "CustomerAddresses" })(
     customer,
     disabled,
     onAddressManageClick
-  }: CustomerAddressesProps) => (
+  }: CustomerAddressesProps) => {
-    <Card>
+    const intl = useIntl();
-      <CardTitle
+
-        title={i18n.t("Address Information")}
+    return (
-        toolbar={
+      <Card>
-          <Button
+        <CardTitle
-            color="primary"
+          title={intl.formatMessage({
-            disabled={disabled}
+            defaultMessage: "Address Information",
-            variant="text"
+            description: "header"
-            onClick={onAddressManageClick}
+          })}
-          >
+          toolbar={
-            {i18n.t("Manage", { context: "button" })}
+            <Button
-          </Button>
+              color="primary"
-        }
+              disabled={disabled}
-      />
+              variant="text"
-      {maybe(() => customer.defaultBillingAddress.id) !==
+              onClick={onAddressManageClick}
-      maybe(() => customer.defaultShippingAddress.id) ? (
+            >
-        <>
+              <FormattedMessage {...buttonMessages.manage} />
-          {maybe(() => customer.defaultBillingAddress) !== null && (
+            </Button>
-            <CardContent>
+          }
-              <Typography className={classes.label}>
+        />
-                {i18n.t("Billing address")}
+        {maybe(() => customer.defaultBillingAddress.id) !==
-              </Typography>
+        maybe(() => customer.defaultShippingAddress.id) ? (
-              <AddressFormatter
+          <>
-                address={maybe(() => customer.defaultBillingAddress)}
+            {maybe(() => customer.defaultBillingAddress) !== null && (
+              <CardContent>
+                <Typography className={classes.label}>
+                  <FormattedMessage
+                    defaultMessage="Billing address"
+                    description="subsection header"
+                  />
+                </Typography>
+                <AddressFormatter
+                  address={maybe(() => customer.defaultBillingAddress)}
+                />
+              </CardContent>
+            )}
+            {maybe(
+              () =>
+                customer.defaultBillingAddress &&
+                customer.defaultShippingAddress
+            ) && <Hr />}
+            {maybe(() => customer.defaultShippingAddress) && (
+              <CardContent>
+                <Typography className={classes.label}>
+                  <FormattedMessage
+                    defaultMessage="Shipping address"
+                    description="subsection header"
+                  />
+                </Typography>
+                <AddressFormatter
+                  address={maybe(() => customer.defaultShippingAddress)}
+                />
+              </CardContent>
+            )}
+          </>
+        ) : maybe(() => customer.defaultBillingAddress) === null &&
+          maybe(() => customer.defaultShippingAddress) === null ? (
+          <CardContent>
+            <Typography>
+              <FormattedMessage defaultMessage="This customer has no addresses yet" />
+            </Typography>
+          </CardContent>
+        ) : (
+          <CardContent>
+            <Typography className={classes.label}>
+              <FormattedMessage
+                defaultMessage="Address"
+                description="subsection header"
               />
-            </CardContent>
+            </Typography>
-          )}
+            <AddressFormatter
-          {maybe(
+              address={maybe(() => customer.defaultBillingAddress)}
-            () =>
+            />
-              customer.defaultBillingAddress && customer.defaultShippingAddress
+          </CardContent>
-          ) && <Hr />}
+        )}
-          {maybe(() => customer.defaultShippingAddress) && (
+      </Card>
-            <CardContent>
+    );
-              <Typography className={classes.label}>
+  }
-                {i18n.t("Shipping address")}
-              </Typography>
-              <AddressFormatter
-                address={maybe(() => customer.defaultShippingAddress)}
-              />
-            </CardContent>
-          )}
-        </>
-      ) : maybe(() => customer.defaultBillingAddress) === null &&
-        maybe(() => customer.defaultShippingAddress) === null ? (
-        <CardContent>
-          <Typography>
-            {i18n.t("This customer has no addresses yet")}
-          </Typography>
-        </CardContent>
-      ) : (
-        <CardContent>
-          <Typography className={classes.label}>{i18n.t("Address")}</Typography>
-          <AddressFormatter
-            address={maybe(() => customer.defaultBillingAddress)}
-          />
-        </CardContent>
-      )}
-    </Card>
-  )
 );
 CustomerAddresses.displayName = "CustomerAddresses";
 export default CustomerAddresses;

src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx

@@ -3,12 +3,12 @@ import CardContent from "@material-ui/core/CardContent";
 import { createStyles, WithStyles, withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AddressEdit from "@saleor/components/AddressEdit";
 import CardTitle from "@saleor/components/CardTitle";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
-import i18n from "../../../i18n";
 import { FormErrors } from "../../../types";
 import { AddressTypeInput } from "../../types";
 
@@ -40,26 +40,35 @@ const CustomerCreateAddress = withStyles(styles, {
     errors,
     onChange,
     onCountryChange
-  }: CustomerCreateAddressProps) => (
+  }: CustomerCreateAddressProps) => {
-    <Card className={classes.overflow}>
+    const intl = useIntl();
-      <CardTitle title={i18n.t("Primary address")} />
+
-      <CardContent className={classes.overflow}>
+    return (
-        <Typography>
+      <Card className={classes.overflow}>
-          {i18n.t("The primary address of this customer.")}
+        <CardTitle
-        </Typography>
+          title={intl.formatMessage({
-        <FormSpacer />
+            defaultMessage: "Primary address",
-        <AddressEdit
+            description: "page header"
-          countries={countries}
+          })}
-          data={data}
-          disabled={disabled}
-          countryDisplayValue={countryDisplayName}
-          errors={errors}
-          onChange={onChange}
-          onCountryChange={onCountryChange}
         />
-      </CardContent>
+        <CardContent className={classes.overflow}>
-    </Card>
+          <Typography>
-  )
+            <FormattedMessage defaultMessage="The primary address of this customer." />
+          </Typography>
+          <FormSpacer />
+          <AddressEdit
+            countries={countries}
+            data={data}
+            disabled={disabled}
+            countryDisplayValue={countryDisplayName}
+            errors={errors}
+            onChange={onChange}
+            onCountryChange={onCountryChange}
+          />
+        </CardContent>
+      </Card>
+    );
+  }
 );
 CustomerCreateAddress.displayName = "CustomerCreateAddress";
 export default CustomerCreateAddress;

src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx

@@ -8,9 +8,10 @@ import {
 } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
-import i18n from "../../../i18n";
+import { commonMessages } from "@saleor/intl";
 import { FormErrors } from "../../../types";
 import { CustomerCreatePageFormData } from "../CustomerCreatePage";
 
@@ -40,48 +41,57 @@ const CustomerCreateDetails = withStyles(styles, {
     disabled,
     errors,
     onChange
-  }: CustomerCreateDetailsProps) => (
+  }: CustomerCreateDetailsProps) => {
-    <Card>
+    const intl = useIntl();
-      <CardTitle title={i18n.t("Customer overview")} />
+
-      <CardContent>
+    return (
-        <div className={classes.root}>
+      <Card>
-          <TextField
+        <CardTitle
-            disabled={disabled}
+          title={intl.formatMessage({
-            error={!!errors.customerFirstName}
+            defaultMessage: "Customer overview",
-            fullWidth
+            description: "header"
-            name="customerFirstName"
+          })}
-            label={i18n.t("First Name")}
+        />
-            helperText={errors.customerFirstName}
+        <CardContent>
-            type="text"
+          <div className={classes.root}>
-            value={data.customerFirstName}
+            <TextField
-            onChange={onChange}
+              disabled={disabled}
-          />
+              error={!!errors.customerFirstName}
-          <TextField
+              fullWidth
-            disabled={disabled}
+              name="customerFirstName"
-            error={!!errors.customerLastName}
+              label={intl.formatMessage(commonMessages.firstName)}
-            fullWidth
+              helperText={errors.customerFirstName}
-            name="customerLastName"
+              type="text"
-            label={i18n.t("Last Name")}
+              value={data.customerFirstName}
-            helperText={errors.customerLastName}
+              onChange={onChange}
-            type="text"
+            />
-            value={data.customerLastName}
+            <TextField
-            onChange={onChange}
+              disabled={disabled}
-          />
+              error={!!errors.customerLastName}
-          <TextField
+              fullWidth
-            disabled={disabled}
+              name="customerLastName"
-            error={!!errors.email}
+              label={intl.formatMessage(commonMessages.lastName)}
-            fullWidth
+              helperText={errors.customerLastName}
-            name="email"
+              type="text"
-            label={i18n.t("Email address")}
+              value={data.customerLastName}
-            helperText={errors.email}
+              onChange={onChange}
-            type="email"
+            />
-            value={data.email}
+            <TextField
-            onChange={onChange}
+              disabled={disabled}
-          />
+              error={!!errors.email}
-        </div>
+              fullWidth
-      </CardContent>
+              name="email"
-    </Card>
+              label={intl.formatMessage(commonMessages.email)}
-  )
+              helperText={errors.email}
+              type="email"
+              value={data.email}
+              onChange={onChange}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
 );
 CustomerCreateDetails.displayName = "CustomerCreateDetails";
 export default CustomerCreateDetails;

src/customers/components/CustomerCreateNote/CustomerCreateNote.tsx

@@ -3,10 +3,10 @@ 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 CardTitle from "@saleor/components/CardTitle";
 import { FormSpacer } from "@saleor/components/FormSpacer";
-import i18n from "../../../i18n";
 
 export interface CustomerCreateNoteProps {
   data: {
@@ -24,27 +24,39 @@ const CustomerCreateNote: React.StatelessComponent<CustomerCreateNoteProps> = ({
   disabled,
   errors,
   onChange
-}) => (
+}) => {
-  <Card>
+  const intl = useIntl();
-    <CardTitle title={i18n.t("Notes")} />
+
-    <CardContent>
+  return (
-      <Typography>
+    <Card>
-        {i18n.t("Enter any extra infotmation regarding this customer.")}
+      <CardTitle
-      </Typography>
+        title={intl.formatMessage({
-      <FormSpacer />
+          defaultMessage: "Notes",
-      <TextField
+          description: "notes about customer header"
-        disabled={disabled}
+        })}
-        error={!!errors.note}
-        fullWidth
-        multiline
-        name="note"
-        helperText={errors.note}
-        label={i18n.t("Note")}
-        value={data.note}
-        onChange={onChange}
       />
-    </CardContent>
+      <CardContent>
-  </Card>
+        <Typography>
-);
+          <FormattedMessage defaultMessage="Enter any extra infotmation regarding this customer." />
+        </Typography>
+        <FormSpacer />
+        <TextField
+          disabled={disabled}
+          error={!!errors.note}
+          fullWidth
+          multiline
+          name="note"
+          helperText={errors.note}
+          label={intl.formatMessage({
+            defaultMessage: "Note",
+            description: "note about customer"
+          })}
+          value={data.note}
+          onChange={onChange}
+        />
+      </CardContent>
+    </Card>
+  );
+};
 CustomerCreateNote.displayName = "CustomerCreateNote";
 export default CustomerCreateNote;

src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
@@ -8,8 +9,8 @@ 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 createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import i18n from "../../../i18n";
 import { UserError } from "../../../types";
 import { AddressTypeInput } from "../../types";
 import { CustomerCreateData_shop_countries } from "../../types/CustomerCreateData";
@@ -59,6 +60,8 @@ const CustomerCreatePage: React.StatelessComponent<CustomerCreatePageProps> = ({
   onBack,
   onSubmit
 }: CustomerCreatePageProps) => {
+  const intl = useIntl();
+
   const [countryDisplayName, setCountryDisplayName] = React.useState("");
   const countryChoices = countries.map(country => ({
     label: country.country,
@@ -81,8 +84,15 @@ const CustomerCreatePage: React.StatelessComponent<CustomerCreatePageProps> = ({
 
         return (
           <Container>
-            <AppHeader onBack={onBack}>{i18n.t("Customers")}</AppHeader>
+            <AppHeader onBack={onBack}>
-            <PageHeader title={i18n.t("Add customer")} />
+              <FormattedMessage {...sectionNames.customers} />
+            </AppHeader>
+            <PageHeader
+              title={intl.formatMessage({
+                defaultMessage: "Add customer",
+                description: "page header"
+              })}
+            />
             <Grid>
               <div>
                 <CustomerCreateDetails

src/customers/components/CustomerDetails/CustomerDetails.tsx

@@ -10,12 +10,13 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import moment from "moment-timezone";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
+import { commonMessages } from "@saleor/intl";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
 const styles = (theme: Theme) =>
@@ -58,88 +59,99 @@ const CustomerDetails = withStyles(styles, { name: "CustomerDetails" })(
     disabled,
     errors,
     onChange
-  }: CustomerDetailsProps) => (
+  }: CustomerDetailsProps) => {
-    <Card>
+    const intl = useIntl();
-      <CardTitle
+
-        className={classes.cardTitle}
+    return (
-        title={
+      <Card>
-          <>
+        <CardTitle
-            {i18n.t("General Information")}
+          className={classes.cardTitle}
-            {customer && customer.dateJoined ? (
+          title={
-              <Typography variant="caption">
+            <>
-                {i18n.t("Customer since: {{ month }} {{ year }}", {
+              <FormattedMessage {...commonMessages.generalInformations} />
-                  month: moment(customer.dateJoined).format("MMM"),
+              {customer && customer.dateJoined ? (
-                  year: moment(customer.dateJoined).format("YYYY")
+                <Typography variant="caption">
-                })}
+                  <FormattedMessage
-              </Typography>
+                    defaultMessage="Customer since: {date}"
-            ) : (
+                    description="section subheader"
-              <Skeleton style={{ width: "10rem" }} />
+                    values={{
-            )}
+                      date: moment(customer.dateJoined).format("MMM YYYY")
-          </>
+                    }}
-        }
+                  />
-      />
+                </Typography>
-      <CardContent>
+              ) : (
-        <ControlledCheckbox
+                <Skeleton style={{ width: "10rem" }} />
-          checked={data.isActive}
+              )}
-          disabled={disabled}
+            </>
-          label={i18n.t("User account active", {
+          }
-            context: "label"
-          })}
-          name="isActive"
-          onChange={onChange}
         />
-        <FormSpacer />
+        <CardContent>
-        <div className={classes.root}>
+          <ControlledCheckbox
-          <TextField
+            checked={data.isActive}
             disabled={disabled}
-            error={!!errors.firstName}
+            label={intl.formatMessage({
-            fullWidth
+              defaultMessage: "User account active",
-            helperText={errors.firstName}
+              description: "check to mark this account as active"
-            name="firstName"
+            })}
-            type="text"
+            name="isActive"
-            label={i18n.t("First Name")}
-            value={data.firstName}
             onChange={onChange}
           />
+          <FormSpacer />
+          <div className={classes.root}>
+            <TextField
+              disabled={disabled}
+              error={!!errors.firstName}
+              fullWidth
+              helperText={errors.firstName}
+              name="firstName"
+              type="text"
+              label={intl.formatMessage(commonMessages.firstName)}
+              value={data.firstName}
+              onChange={onChange}
+            />
+            <TextField
+              disabled={disabled}
+              error={!!errors.lastName}
+              fullWidth
+              helperText={errors.lastName}
+              name="lastName"
+              type="text"
+              label={intl.formatMessage(commonMessages.lastName)}
+              value={data.lastName}
+              onChange={onChange}
+            />
+          </div>
+          <FormSpacer />
           <TextField
             disabled={disabled}
-            error={!!errors.lastName}
+            error={!!errors.email}
             fullWidth
-            helperText={errors.lastName}
+            helperText={errors.email}
-            name="lastName"
+            name="email"
-            type="text"
+            type="email"
-            label={i18n.t("Last Name")}
+            label={intl.formatMessage(commonMessages.email)}
-            value={data.lastName}
+            value={data.email}
             onChange={onChange}
           />
-        </div>
+          <FormSpacer />
-        <FormSpacer />
+          <TextField
-        <TextField
+            disabled={disabled}
-          disabled={disabled}
+            error={!!errors.note}
-          error={!!errors.email}
+            fullWidth
-          fullWidth
+            multiline
-          helperText={errors.email}
+            helperText={errors.note}
-          name="email"
+            name="note"
-          type="email"
+            label={intl.formatMessage({
-          label={i18n.t("E-mail")}
+              defaultMessage: "Note",
-          value={data.email}
+              description: "note about customer"
-          onChange={onChange}
+            })}
-        />
+            value={data.note}
-        <FormSpacer />
+            onChange={onChange}
-        <TextField
+          />
-          disabled={disabled}
+        </CardContent>
-          error={!!errors.note}
+      </Card>
-          fullWidth
+    );
-          multiline
+  }
-          helperText={errors.note}
-          name="note"
-          label={i18n.t("Note")}
-          value={data.note}
-          onChange={onChange}
-        />
-      </CardContent>
-    </Card>
-  )
 );
 CustomerDetails.displayName = "CustomerDetails";
 export default CustomerDetails;

src/customers/components/CustomerDetailsPage/CustomerDetailsPage.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 { UserError } from "../../../types";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
@@ -51,59 +52,67 @@ const CustomerDetailsPage: React.StatelessComponent<
   onRowClick,
   onAddressManageClick,
   onDelete
-}: CustomerDetailsPageProps) => (
+}: CustomerDetailsPageProps) => {
-  <Form
+  const intl = useIntl();
-    errors={errors}
+
-    initial={{
+  return (
-      email: maybe(() => customer.email, ""),
+    <Form
-      firstName: maybe(() => customer.firstName, ""),
+      errors={errors}
-      isActive: maybe(() => customer.isActive, false),
+      initial={{
-      lastName: maybe(() => customer.lastName, ""),
+        email: maybe(() => customer.email, ""),
-      note: maybe(() => customer.note, "")
+        firstName: maybe(() => customer.firstName, ""),
-    }}
+        isActive: maybe(() => customer.isActive, false),
-    onSubmit={onSubmit}
+        lastName: maybe(() => customer.lastName, ""),
-    confirmLeave
+        note: maybe(() => customer.note, "")
-  >
+      }}
-    {({ change, data, errors: formErrors, hasChanged, submit }) => (
+      onSubmit={onSubmit}
-      <Container>
+      confirmLeave
-        <AppHeader onBack={onBack}>{i18n.t("Customers")}</AppHeader>
+    >
-        <PageHeader title={getUserName(customer, true)} />
+      {({ change, data, errors: formErrors, hasChanged, submit }) => (
-        <Grid>
+        <Container>
-          <div>
+          <AppHeader onBack={onBack}>
-            <CustomerDetails
+            {intl.formatMessage(sectionNames.customers)}
-              customer={customer}
+          </AppHeader>
-              data={data}
+          <PageHeader title={getUserName(customer, true)} />
-              disabled={disabled}
+          <Grid>
-              errors={formErrors}
+            <div>
-              onChange={change}
+              <CustomerDetails
-            />
+                customer={customer}
-            <CardSpacer />
+                data={data}
-            <CustomerOrders
+                disabled={disabled}
-              orders={maybe(() => customer.orders.edges.map(edge => edge.node))}
+                errors={formErrors}
-              onViewAllOrdersClick={onViewAllOrdersClick}
+                onChange={change}
-              onRowClick={onRowClick}
+              />
-            />
+              <CardSpacer />
-          </div>
+              <CustomerOrders
-          <div>
+                orders={maybe(() =>
-            <CustomerAddresses
+                  customer.orders.edges.map(edge => edge.node)
-              customer={customer}
+                )}
-              disabled={disabled}
+                onViewAllOrdersClick={onViewAllOrdersClick}
-              onAddressManageClick={onAddressManageClick}
+                onRowClick={onRowClick}
-            />
+              />
-            <CardSpacer />
+            </div>
-            <CustomerStats customer={customer} />
+            <div>
-          </div>
+              <CustomerAddresses
-        </Grid>
+                customer={customer}
-        <SaveButtonBar
+                disabled={disabled}
-          disabled={disabled || !hasChanged}
+                onAddressManageClick={onAddressManageClick}
-          state={saveButtonBar}
+              />
-          onSave={submit}
+              <CardSpacer />
-          onCancel={onBack}
+              <CustomerStats customer={customer} />
-          onDelete={onDelete}
+            </div>
-        />
+          </Grid>
-      </Container>
+          <SaveButtonBar
-    )}
+            disabled={disabled || !hasChanged}
-  </Form>
+            state={saveButtonBar}
-);
+            onSave={submit}
+            onCancel={onBack}
+            onDelete={onDelete}
+          />
+        </Container>
+      )}
+    </Form>
+  );
+};
 CustomerDetailsPage.displayName = "CustomerDetailsPage";
 export default CustomerDetailsPage;

src/customers/components/CustomerList/CustomerList.tsx

@@ -11,12 +11,12 @@ import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
 import TableRow from "@material-ui/core/TableRow";
 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 { getUserName, maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
@@ -77,13 +77,13 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
           toolbar={toolbar}
         >
           <TableCell className={classes.colName}>
-            {i18n.t("Customer Name", { context: "table header" })}
+            <FormattedMessage defaultMessage="Customer Name" />
           </TableCell>
           <TableCell className={classes.colEmail}>
-            {i18n.t("Customer e-mail", { context: "table header" })}
+            <FormattedMessage defaultMessage="Customer Email" />
           </TableCell>
           <TableCell className={classes.colOrders}>
-            {i18n.t("Orders", { context: "table header" })}
+            <FormattedMessage defaultMessage="No. of Orders" />
           </TableCell>
         </TableHead>
         <TableFooter>
@@ -141,7 +141,7 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
             () => (
               <TableRow>
                 <TableCell colSpan={numberOfColumns}>
-                  {i18n.t("No customers found")}
+                  <FormattedMessage defaultMessage="No customers found" />
                 </TableCell>
               </TableRow>
             )

src/customers/components/CustomerListPage/CustomerListPage.tsx

@@ -1,10 +1,11 @@
 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 Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
-import i18n from "@saleor/i18n";
+import { sectionNames } from "@saleor/intl";
 import { ListActions, PageListProps } from "@saleor/types";
 import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
 import CustomerList from "../CustomerList/CustomerList";
@@ -18,27 +19,32 @@ const CustomerListPage: React.StatelessComponent<CustomerListPageProps> = ({
   disabled,
   onAdd,
   ...customerListProps
-}) => (
+}) => {
-  <Container>
+  const intl = useIntl();
-    <PageHeader title={i18n.t("Customers")}>
+
-      <Button
+  return (
-        color="primary"
+    <Container>
-        variant="contained"
+      <PageHeader title={intl.formatMessage(sectionNames.customers)}>
+        <Button
+          color="primary"
+          variant="contained"
+          disabled={disabled}
+          onClick={onAdd}
+        >
+          <FormattedMessage
+            defaultMessage="Add customer"
+            description="button"
+          />
+          <AddIcon />
+        </Button>
+      </PageHeader>
+      <CustomerList
+        customers={customers}
         disabled={disabled}
-        onClick={onAdd}
+        {...customerListProps}
-      >
+      />
-        {i18n.t("Add customer", {
+    </Container>
-          context: "button"
+  );
-        })}{" "}
+};
-        <AddIcon />
-      </Button>
-    </PageHeader>
-    <CustomerList
-      customers={customers}
-      disabled={disabled}
-      {...customerListProps}
-    />
-  </Container>
-);
 CustomerListPage.displayName = "CustomerListPage";
 export default CustomerListPage;

src/customers/components/CustomerOrders/CustomerOrders.tsx

@@ -7,13 +7,13 @@ import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
-import i18n from "../../../i18n";
 import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
 import { CustomerDetails_user_orders_edges_node } from "../../types/CustomerDetails";
 
@@ -39,6 +39,8 @@ const CustomerOrders = withStyles(styles, { name: "CustomerOrders" })(
     onRowClick,
     onViewAllOrdersClick
   }: CustomerOrdersProps) => {
+    const intl = useIntl();
+
     const orderList = orders
       ? orders.map(order => ({
           ...order,
@@ -48,14 +50,20 @@ const CustomerOrders = withStyles(styles, { name: "CustomerOrders" })(
     return (
       <Card>
         <CardTitle
-          title={i18n.t("Recent orders")}
+          title={intl.formatMessage({
+            defaultMessage: "Recent orders",
+            description: "section header"
+          })}
           toolbar={
             <Button
               variant="text"
               color="primary"
               onClick={onViewAllOrdersClick}
             >
-              {i18n.t("View all orders")}
+              <FormattedMessage
+                defaultMessage="View all orders"
+                description="button"
+              />
             </Button>
           }
         />
@@ -63,16 +71,28 @@ const CustomerOrders = withStyles(styles, { name: "CustomerOrders" })(
           <TableHead>
             <TableRow>
               <TableCell padding="dense">
-                {i18n.t("No. of Order", { context: "table header" })}
+                <FormattedMessage
+                  defaultMessage="No. of Order"
+                  description="number of order"
+                />
               </TableCell>
               <TableCell padding="dense">
-                {i18n.t("Date", { context: "table header" })}
+                <FormattedMessage
+                  defaultMessage="Date"
+                  description="order placement date"
+                />
               </TableCell>
               <TableCell padding="dense">
-                {i18n.t("Status", { context: "table header" })}
+                <FormattedMessage
+                  defaultMessage="Status"
+                  description="order status"
+                />
               </TableCell>
               <TableCell className={classes.textRight} padding="dense">
-                {i18n.t("Total", { context: "table header" })}
+                <FormattedMessage
+                  defaultMessage="Total"
+                  description="order total amount"
+                />
               </TableCell>
             </TableRow>
           </TableHead>
@@ -123,7 +143,9 @@ const CustomerOrders = withStyles(styles, { name: "CustomerOrders" })(
               ),
               () => (
                 <TableRow>
-                  <TableCell colSpan={6}>{i18n.t("No orders found")}</TableCell>
+                  <TableCell colSpan={6}>
+                    <FormattedMessage defaultMessage="No orders found" />
+                  </TableCell>
                 </TableRow>
               )
             )}

src/customers/components/CustomerStats/CustomerStats.tsx

@@ -8,12 +8,12 @@ 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 { DateTime } from "@saleor/components/Date";
 import { Hr } from "@saleor/components/Hr";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
 import { maybe } from "../../../misc";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
@@ -32,48 +32,60 @@ export interface CustomerStatsProps extends WithStyles<typeof styles> {
 }
 
 const CustomerStats = withStyles(styles, { name: "CustomerStats" })(
-  ({ classes, customer }: CustomerStatsProps) => (
+  ({ classes, customer }: CustomerStatsProps) => {
-    <Card>
+    const intl = useIntl();
-      <CardTitle title={i18n.t("Customer History")} />
+
-      <CardContent>
+    return (
-        <Typography className={classes.label} variant="caption">
+      <Card>
-          {i18n.t("Last login")}
+        <CardTitle
-        </Typography>
+          title={intl.formatMessage({
-        {maybe(
+            defaultMessage: "Customer History",
-          () => (
+            description: "section header",
-            <Typography variant="h6" className={classes.value}>
+             
-              {customer.lastLogin === null ? (
+          })}
-                i18n.t("-")
+        />
-              ) : (
+        <CardContent>
-                <DateTime date={customer.lastLogin} />
+          <Typography className={classes.label} variant="caption">
-              )}
+            <FormattedMessage defaultMessage="Last login"
-            </Typography>
+               />
-          ),
+          </Typography>
-          <Skeleton />
+          {maybe(
-        )}
+            () => (
-      </CardContent>
+              <Typography variant="h6" className={classes.value}>
-      <Hr />
+                {customer.lastLogin === null ? (
-      <CardContent>
+                  "-"
-        <Typography className={classes.label} variant="caption">
+                ) : (
-          {i18n.t("Last order")}
+                  <DateTime date={customer.lastLogin} />
-        </Typography>
+                )}
-        {maybe(
+              </Typography>
-          () => (
+            ),
-            <Typography variant="h6" className={classes.value}>
+            <Skeleton />
-              {customer.lastPlacedOrder.edges.length === 0 ? (
+          )}
-                i18n.t("-")
+        </CardContent>
-              ) : (
+        <Hr />
-                <DateTime
+        <CardContent>
-                  date={customer.lastPlacedOrder.edges[0].node.created}
+          <Typography className={classes.label} variant="caption">
-                />
+            <FormattedMessage defaultMessage="Last order"
-              )}
+               />
-            </Typography>
+          </Typography>
-          ),
+          {maybe(
-          <Skeleton />
+            () => (
-        )}
+              <Typography variant="h6" className={classes.value}>
-      </CardContent>
+                {customer.lastPlacedOrder.edges.length === 0 ? (
-    </Card>
+                  "-"
-  )
+                ) : (
+                  <DateTime
+                    date={customer.lastPlacedOrder.edges[0].node.created}
+                  />
+                )}
+              </Typography>
+            ),
+            <Skeleton />
+          )}
+        </CardContent>
+      </Card>
+    );
+  }
 );
 CustomerStats.displayName = "CustomerStats";
 export default CustomerStats;

src/customers/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 {
   customerAddPath,
   customerAddressesPath,
@@ -60,17 +61,21 @@ const CustomerAddressesView: React.StatelessComponent<
   );
 };
 
-export const CustomerSection: React.StatelessComponent<{}> = () => (
+export const CustomerSection: React.StatelessComponent<{}> = () => {
-  <>
+  const intl = useIntl();
-    <WindowTitle title={i18n.t("Customers")} />
+
-    <Switch>
+  return (
-      <Route exact path={customerListPath} component={CustomerListView} />
+    <>
-      <Route exact path={customerAddPath} component={CustomerCreateView} />
+      <WindowTitle title={intl.formatMessage(sectionNames.customers)} />
-      <Route
+      <Switch>
-        path={customerAddressesPath(":id")}
+        <Route exact path={customerListPath} component={CustomerListView} />
-        component={CustomerAddressesView}
+        <Route exact path={customerAddPath} component={CustomerCreateView} />
-      />
+        <Route
-      <Route path={customerPath(":id")} component={CustomerDetailsView} />
+          path={customerAddressesPath(":id")}
-    </Switch>
+          component={CustomerAddressesView}
-  </>
+        />
-);
+        <Route path={customerPath(":id")} component={CustomerDetailsView} />
+      </Switch>
+    </>
+  );
+};

src/customers/views/CustomerAddresses.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 useShop from "@saleor/hooks/useShop";
-import i18n from "../../i18n";
+import { commonMessages } from "@saleor/intl";
 import { getMutationState, maybe } from "../../misc";
 import CustomerAddressDialog from "../components/CustomerAddressDialog";
 import CustomerAddressListPage from "../components/CustomerAddressListPage";
@@ -40,6 +41,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();
+  const intl = useIntl();
 
   const closeModal = () => navigate(customerAddressesUrl(id), true);
   const openModal = (action: CustomerAddressesUrlDialog, addressId?: string) =>
@@ -49,9 +51,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
     if (data.addressSetDefault.errors.length === 0) {
       closeModal();
       notify({
-        text: i18n.t("Set address as default", {
+        text: intl.formatMessage(commonMessages.savedChanges)
-          context: "notification"
-        })
       });
     }
   };
@@ -66,9 +66,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
     if (data.addressUpdate.errors.length === 0) {
       closeModal();
       notify({
-        text: i18n.t("Updated address", {
+        text: intl.formatMessage(commonMessages.savedChanges)
-          context: "notification"
-        })
       });
     }
   };
@@ -77,9 +75,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
     if (data.addressDelete.errors.length === 0) {
       closeModal();
       notify({
-        text: i18n.t("Removed address", {
+        text: intl.formatMessage(commonMessages.savedChanges)
-          context: "notification"
-        })
       });
     }
   };
@@ -214,7 +210,10 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
                             <ActionDialog
                               open={params.action === "remove"}
                               variant="delete"
-                              title={i18n.t("Remove Address")}
+                              title={intl.formatMessage({
+                                defaultMessage: "Delete Address",
+                                description: "dialog header"
+                              })}
                               confirmButtonState={removeAddressTransitionState}
                               onClose={closeModal}
                               onConfirm={() =>
@@ -226,9 +225,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
                               }
                             >
                               <DialogContentText>
-                                {i18n.t(
+                                <FormattedMessage defaultMessage="Are you sure you want to delete this address from users address book?" />
-                                  "Are you sure you want to remove this address from users address book?"
-                                )}
                               </DialogContentText>
                             </ActionDialog>
                           </>

src/customers/views/CustomerCreate.tsx

@@ -1,9 +1,9 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import i18n from "../../i18n";
 import { maybe } from "../../misc";
 import CustomerCreatePage from "../components/CustomerCreatePage";
 import { TypedCreateCustomerMutation } from "../mutations";
@@ -14,12 +14,13 @@ import { customerListUrl, customerUrl } from "../urls";
 export const CustomerCreate: React.StatelessComponent<{}> = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
+  const intl = useIntl();
 
   const handleCreateCustomerSuccess = (data: CreateCustomer) => {
     if (data.customerCreate.errors.length === 0) {
       notify({
-        text: i18n.t("Customer created", {
+        text: intl.formatMessage({
-          context: "notification"
+          defaultMessage: "Customer created"
         })
       });
       navigate(customerUrl(data.customerCreate.user.id));
@@ -31,7 +32,12 @@ export const CustomerCreate: React.StatelessComponent<{}> = () => {
         <TypedCreateCustomerMutation onCompleted={handleCreateCustomerSuccess}>
           {(createCustomer, createCustomerOpts) => (
             <>
-              <WindowTitle title={i18n.t("Create customer")} />
+              <WindowTitle
+                title={intl.formatMessage({
+                  defaultMessage: "Create customer",
+                  description: "window title"
+                })}
+              />
               <CustomerCreatePage
                 countries={maybe(() => data.shop.countries, [])}
                 disabled={loading || createCustomerOpts.loading}

src/customers/views/CustomerDetails.tsx

@@ -1,11 +1,12 @@
 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 i18n from "../../i18n";
+import { commonMessages } from "@saleor/intl";
 import { getMutationState, maybe } from "../../misc";
 import { orderListUrl, orderUrl } from "../../orders/urls";
 import CustomerDetailsPage from "../components/CustomerDetailsPage/CustomerDetailsPage";
@@ -33,21 +34,20 @@ export const CustomerDetailsView: React.StatelessComponent<
 > = ({ id, params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
+  const intl = useIntl();
 
   const handleCustomerUpdateSuccess = (data: UpdateCustomer) => {
     if (data.customerUpdate.errors.length === 0) {
       notify({
-        text: i18n.t("Customer updated", {
+        text: intl.formatMessage(commonMessages.savedChanges)
-          context: "notification"
-        })
       });
     }
   };
   const handleCustomerRemoveSuccess = (data: RemoveCustomer) => {
     if (data.customerDelete.errors.length === 0) {
       notify({
-        text: i18n.t("Customer removed", {
+        text: intl.formatMessage({
-          context: "notification"
+          defaultMessage: "Customer Removed"
         })
       });
       navigate(customerListUrl());
@@ -132,26 +132,29 @@ export const CustomerDetailsView: React.StatelessComponent<
                       confirmButtonState={removeTransitionState}
                       onClose={() => navigate(customerUrl(id), true)}
                       onConfirm={() => removeCustomer()}
-                      title={i18n.t("Remove customer", {
+                      title={intl.formatMessage({
-                        context: "modal title"
+                        defaultMessage: "Delete customer",
+                        description: "dialog header"
                       })}
                       variant="delete"
                       open={params.action === "remove"}
                     >
-                      <DialogContentText
+                      <DialogContentText>
-                        dangerouslySetInnerHTML={{
+                        <FormattedMessage
-                          __html: i18n.t(
+                          defaultMessage="Are you sure you want to delete {email}?"
-                            "Are you sure you want to remove <strong>{{ email }}</strong>?",
+                          description="delete customer, dialog content"
-                            {
+                          values={{
-                              context: "modal content",
+                            email: (
-                              email: maybe(
+                              <strong>
-                                () => customerDetails.data.user.email,
+                                {maybe(
-                                "..."
+                                  () => customerDetails.data.user.email,
-                              )
+                                  "..."
-                            }
+                                )}
-                          )
+                              </strong>
-                        }}
+                            )
-                      />
+                          }}
+                        />
+                      </DialogContentText>
                     </ActionDialog>
                   </>
                 );

src/customers/views/CustomerList.tsx

@@ -2,6 +2,7 @@ import DialogContentText from "@material-ui/core/DialogContentText";
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import ActionDialog from "@saleor/components/ActionDialog";
 import useBulkActions from "@saleor/hooks/useBulkActions";
@@ -11,7 +12,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
-import i18n from "@saleor/i18n";
+import { commonMessages } from "@saleor/intl";
 import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import CustomerListPage from "../components/CustomerListPage";
@@ -41,6 +42,7 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
   const { updateListSettings, settings } = useListSettings(
     ListViews.CUSTOMER_LIST
   );
+  const intl = useIntl();
 
   const closeModal = () =>
     navigate(
@@ -66,7 +68,7 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
         const handleBulkCustomerDelete = (data: BulkRemoveCustomers) => {
           if (data.customerBulkDelete.errors.length === 0) {
             notify({
-              text: i18n.t("Customers removed")
+              text: intl.formatMessage(commonMessages.savedChanges)
             });
             reset();
             refetch();
@@ -120,7 +122,10 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
                     toggleAll={toggleAll}
                   />
                   <ActionDialog
-                    open={params.action === "remove"}
+                    open={
+                      params.action === "remove" &&
+                      maybe(() => params.ids.length > 0)
+                    }
                     onClose={closeModal}
                     confirmButtonState={removeTransitionState}
                     onConfirm={() =>
@@ -131,21 +136,25 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
                       })
                     }
                     variant="delete"
-                    title={i18n.t("Remove customers")}
+                    title={intl.formatMessage({
+                      defaultMessage: "Delete customers",
+                      description: "dialog header"
+                    })}
                   >
-                    <DialogContentText
+                    <DialogContentText>
-                      dangerouslySetInnerHTML={{
+                      <FormattedMessage
-                        __html: i18n.t(
+                        defaultMessage="Are you sure you want to delete {counter, plural,
-                          "Are you sure you want to remove <strong>{{ number }}</strong> customers?",
+                          one {this customer}
-                          {
+                          other {{displayQuantity} customers}
-                            number: maybe(
+                        }?"
-                              () => params.ids.length.toString(),
+                        values={{
-                              "..."
+                          counter: maybe(() => params.ids.length),
-                            )
+                          displayQuantity: (
-                          }
+                            <strong>{maybe(() => params.ids.length)}</strong>
-                        )
+                          )
-                      }}
+                        }}
-                    />
+                      />
+                    </DialogContentText>
                   </ActionDialog>
                 </>
               );

src/intl.ts

@@ -4,28 +4,27 @@ export const commonMessages = defineMessages({
   availability: {
     defaultMessage: "Availability"
   },
-  cancel: {
+  dashboard: {
-    defaultMessage: "Cancel"
+    defaultMessage: "Dashboard"
-  },
-  confirm: {
-    defaultMessage: "Confirm"
   },
   description: {
     defaultMessage: "Description"
   },
+  email: {
+    defaultMessage: "E-mail Address"
+  },
+  firstName: {
+    defaultMessage: "First Name"
+  },
   generalInformations: {
     defaultMessage: "General Informations"
   },
-  optionalField: {
+  lastName: {
-    defaultMessage: "Optional",
+    defaultMessage: "Last Name"
-    description: "field is optional"
   },
   properties: {
     defaultMessage: "Properties"
   },
-  save: {
-    defaultMessage: "save"
-  },
   savedChanges: {
     defaultMessage: "Saved changes"
   },
@@ -35,6 +34,33 @@ export const commonMessages = defineMessages({
   }
 });
 
+export const buttonMessages = defineMessages({
+  cancel: {
+    defaultMessage: "Cancel",
+    description: "button"
+  },
+  confirm: {
+    defaultMessage: "Confirm",
+    description: "button"
+  },
+  edit: {
+    defaultMessage: "Edit",
+    description: "button"
+  },
+  manage: {
+    defaultMessage: "Manage",
+    description: "button"
+  },
+  remove: {
+    defaultMessage: "Remove",
+    description: "button"
+  },
+  save: {
+    defaultMessage: "Save",
+    description: "button"
+  }
+});
+
 export const sectionNames = defineMessages({
   attributes: {
     defaultMessage: "Attributes",
@@ -47,5 +73,41 @@ export const sectionNames = defineMessages({
   collections: {
     defaultMessage: "Collections",
     description: "collections section name"
+  },
+  configuration: {
+    defaultMessage: "Configuration",
+    description: "configuration section name"
+  },
+  customers: {
+    defaultMessage: "Customers",
+    description: "customers section name"
+  },
+  navigation: {
+    defaultMessage: "Navigation",
+    description: "navigation section name"
+  },
+  pages: {
+    defaultMessage: "Pages",
+    description: "pages section name"
+  },
+  productTypes: {
+    defaultMessage: "Product Types",
+    description: "product types section name"
+  },
+  shipping: {
+    defaultMessage: "Shipping Methods",
+    description: "shipping section name"
+  },
+  siteSettings: {
+    defaultMessage: "Site Settings",
+    description: "site settings section name"
+  },
+  staff: {
+    defaultMessage: "Staff Members",
+    description: "staff section name"
+  },
+  taxes: {
+    defaultMessage: "Taxes",
+    description: "taxes section name"
   }
 });