djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor collection section translations (#108)

Browse source 
* Refactor translations in collections section

* Update pot file

* Improve descriptions

* Do not share 'published' message
This commit is contained in:
Dominik Żegleń 2019-08-21 14:31:55 +02:00 committed by dominik-zeglen
parent a909276df3
commit 2073f6ad21
13 changed files with 1173 additions and 690 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

572
locale/messages.pot
View file

@ -1,6 +1,6 @@
msgid "" msgid ""
msgstr "" msgstr ""
"POT-Creation-Date: 2019-08-16T19:32:53.076Z\n" "POT-Creation-Date: 2019-08-20T12:12:53.399Z\n"
"Content-Type: text/plain; charset=UTF-8\n" "Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n" "Content-Transfer-Encoding: 8bit\n"
"MIME-Version: 1.0\n" "MIME-Version: 1.0\n"
@ -39,6 +39,22 @@ msgctxt "button"
msgid "Add category" msgid "Add category"
msgstr "" msgstr ""
#: build/locale/src/collections/components/CollectionCreatePage/CollectionCreatePage.json
#. [collectionCreatePageHeader] - page header
#. defaultMessage is:
#. Add collection
msgctxt "page header"
msgid "Add collection"
msgstr ""
#: build/locale/src/collections/components/CollectionListPage/CollectionListPage.json
#. [collectionListPageAddCollectionButton] - button
#. defaultMessage is:
#. Add collection
msgctxt "button"
msgid "Add collection"
msgstr ""
#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
#. [categoryProductsAddProductButton] - button #. [categoryProductsAddProductButton] - button
#. defaultMessage is: #. defaultMessage is:
@ -63,6 +79,18 @@ msgctxt "description"
msgid "Add search engine title and description to make this category easier to find" msgid "Add search engine title and description to make this category easier to find"
msgstr "" msgstr ""
#: build/locale/src/collections/components/CollectionCreatePage/CollectionCreatePage.json
#. [collectionSeo]
#. defaultMessage is:
#. Add search engine title and description to make this collection easier to find
#: build/locale/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.json
#. [collectionSeo]
#. defaultMessage is:
#. Add search engine title and description to make this collection easier to find
msgctxt "description"
msgid "Add search engine title and description to make this collection easier to find"
msgstr ""
#: build/locale/src/categories/components/CategoryList/CategoryList.json #: build/locale/src/categories/components/CategoryList/CategoryList.json
#. [categoryListAddSubcategoryButton] - button #. [categoryListAddSubcategoryButton] - button
#. defaultMessage is: #. defaultMessage is:
@ -87,6 +115,14 @@ msgctxt "added new attribute value"
msgid "Added new value" msgid "Added new value"
msgstr "" msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [collectionDetailsAddedProduct]
#. defaultMessage is:
#. Added product to collection
msgctxt "description"
msgid "Added product to collection"
msgstr ""
#: build/locale/src/attributes/components/AttributeValues/AttributeValues.json #: build/locale/src/attributes/components/AttributeValues/AttributeValues.json
#. [attributeValuesSlugColumnHeader] - attribute values list: slug column header #. [attributeValuesSlugColumnHeader] - attribute values list: slug column header
#. defaultMessage is: #. defaultMessage is:
@ -104,86 +140,142 @@ msgid "All Subcategories"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json #: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json
#. [attributeValueDeleteDialogContentWithoutAttributeName] - remove attribute value #. [attributeValueDeleteDialogContentWithoutAttributeName] - delete attribute value
#. defaultMessage is: #. defaultMessage is:
#. Are you sure you want to remove "{name}" value? #. Are you sure you want to delete "{name}" value?
msgctxt "remove attribute value" msgctxt "delete attribute value"
msgid "Are you sure you want to remove \"{name}\" value?" msgid "Are you sure you want to delete \"{name}\" value?"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json #: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json
#. [attributeValueDeleteDialogContentWithAttributeName] #. [attributeValueDeleteDialogContentWithAttributeName]
#. defaultMessage is: #. defaultMessage is:
#. Are you sure you want to remove "{name}" value? If you remove it you won’t be able to assign it to any of the products with "{attributeName}" attribute. #. Are you sure you want to delete "{name}" value? If you delete it you won’t be able to assign it to any of the products with "{attributeName}" attribute.
msgctxt "description" msgctxt "description"
msgid "Are you sure you want to remove \"{name}\" value? If you remove it you won’t be able to assign it to any of the products with \"{attributeName}\" attribute." msgid "Are you sure you want to delete \"{name}\" value? If you delete it you won’t be able to assign it to any of the products with \"{attributeName}\" attribute."
msgstr ""
#: build/locale/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.json
#. [attributeBulkDeleteDialogContent] - dialog content
#. defaultMessage is:
#. Are you sure you want to remove {counter,plural,one{this attribute} other{{displayQuantity} attributes}}?
msgctxt "dialog content"
msgid "Are you sure you want to remove {counter,plural,one{this attribute} other{{displayQuantity} attributes}}?"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.json #: build/locale/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.json
#. [attributeDeleteDialogContent] - dialog content #. [attributeDeleteDialogContent] - dialog content
#. defaultMessage is: #. defaultMessage is:
#. Are you sure you want to remove {name}? #. Are you sure you want to delete {attributeName}?
msgctxt "dialog content" msgctxt "dialog content"
msgid "Are you sure you want to remove {name}?" msgid "Are you sure you want to delete {attributeName}?"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.json #: build/locale/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.json
#. [<categoryDeleteDialogContent<] - delete category #. [categoryDeleteDialogContent] - delete category
#. defaultMessage is: #. defaultMessage is:
#. Are you sure you want to remove {name}? #. Are you sure you want to delete {categoryName}?
msgctxt "delete category" msgctxt "delete category"
msgid "Are you sure you want to remove {name}?" msgid "Are you sure you want to delete {categoryName}?"
msgstr "" msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/categories/views/CategoryDetails.json
#. [categoryDetailsDeleteCategoryDialogContent] - remove category #. [categoryDetailsDeleteCategoryDialogContent]
#. defaultMessage is: #. defaultMessage is:
#. Are you sure you want to remove {name}? #. Are you sure you want to delete {categoryName}?
msgctxt "remove category" msgctxt "description"
msgid "Are you sure you want to remove {name}?" msgid "Are you sure you want to delete {categoryName}?"
msgstr ""
#: build/locale/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.json
#. [attributeBulkDeleteDialogContent] - dialog content
#. defaultMessage is:
#. Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} attributes}}?
msgctxt "dialog content"
msgid "Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} attributes}}?"
msgstr "" msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/categories/views/CategoryDetails.json
#. [categoryDetailsDeleteCategoriesDialogContent] #. [categoryDetailsDeleteCategoriesDialogContent]
#. defaultMessage is: #. defaultMessage is:
#. Are you sure you want to remove {number} categories? #. Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} categories}}?
#: build/locale/src/categories/views/CategoryList.json #: build/locale/src/categories/views/CategoryList.json
#. [categoryListDeleteCategoriesDialogContent] #. [categoryListDeleteCategoriesDialogContent]
#. defaultMessage is: #. defaultMessage is:
#. Are you sure you want to remove {number} categories? #. Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} categories}}?
msgctxt "description" msgctxt "description"
msgid "Are you sure you want to remove {number} categories?" msgid "Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} categories}}?"
msgstr "" msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/categories/views/CategoryDetails.json
#. [categoryDetailsDeleteProductsDialogContent] #. [categoryDetailsDeleteProductsDialogContent]
#. defaultMessage is: #. defaultMessage is:
#. Are you sure you want to remove {number} products? #. Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} products}}?
msgctxt "description" msgctxt "description"
msgid "Are you sure you want to remove {number} products?" msgid "Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} products}}?"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [collectionListPublishCollectionsDialogContent]
#. defaultMessage is:
#. Are you sure you want to publish {number} collections?
msgctxt "description"
msgid "Are you sure you want to publish {number} collections?"
msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [collectionDetailsRemoveImageContent]
#. defaultMessage is:
#. Are you sure you want to remove collection's image?
msgctxt "description"
msgid "Are you sure you want to remove collection's image?"
msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [collectionDetailsRemoveCollectionDialogContent] - remove image
#. defaultMessage is:
#. Are you sure you want to remove {name}?
msgctxt "remove image"
msgid "Are you sure you want to remove {name}?"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [collectionListRemoveCollectionsDialogContent]
#. defaultMessage is:
#. Are you sure you want to remove {number} collections?
msgctxt "description"
msgid "Are you sure you want to remove {number} collections?"
msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [collectionDetailsUnassignProductsDialogContent]
#. defaultMessage is:
#. Are you sure you want to unassign {number} products?
msgctxt "description"
msgid "Are you sure you want to unassign {number} products?"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [collectionListUnpublishCollectionsDialogContent]
#. defaultMessage is:
#. Are you sure you want to unpublish {number} collections?
msgctxt "description"
msgid "Are you sure you want to unpublish {number} collections?"
msgstr ""
#: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
#. [collectionProductsAssignProductButton] - button
#. defaultMessage is:
#. Assign product
msgctxt "button"
msgid "Assign product"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
#. [attributeDetailsSlugInputLabel] - attribute slug input field #. [attributeDetailsSlugInputLabel] - attribute's slug short code label
#. defaultMessage is: #. defaultMessage is:
#. Attribute Code #. Attribute Code
msgctxt "attribute slug input field" msgctxt "attribute's slug short code label"
msgid "Attribute Code" msgid "Attribute Code"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeList/AttributeList.json #: build/locale/src/attributes/components/AttributeList/AttributeList.json
#. [attributeListSlugColumnHeader] - attribute list: slug column header #. [attributeListSlugColumnHeader]
#. defaultMessage is: #. defaultMessage is:
#. Attribute Code #. Attribute Code
msgctxt "attribute list: slug column header" msgctxt "description"
msgid "Attribute Code" msgid "Attribute Code"
msgstr "" msgstr ""
@ -198,9 +290,9 @@ msgstr ""
#: build/locale/src/attributes/views/AttributeDetails/AttributeDetails.json #: build/locale/src/attributes/views/AttributeDetails/AttributeDetails.json
#. [attributeDetailsAttributeRemoveSuccess] #. [attributeDetailsAttributeRemoveSuccess]
#. defaultMessage is: #. defaultMessage is:
#. Attribute removed #. Attribute deleted
msgctxt "description" msgctxt "description"
msgid "Attribute removed" msgid "Attribute deleted"
msgstr "" msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
@ -212,17 +304,37 @@ msgid "Attributes"
msgstr "" msgstr ""
#: build/locale/src/attributes/views/AttributeList/AttributeList.json #: build/locale/src/attributes/views/AttributeList/AttributeList.json
#. [attributeListAttributesRemoved] - remove multiple attributes #. [attributeListAttributesDeleted] - deleted multiple attributes
#. defaultMessage is: #. defaultMessage is:
#. Attributes successfully removed #. Attributes successfully delete
msgctxt "remove multiple attributes" msgctxt "deleted multiple attributes"
msgid "Attributes successfully removed" msgid "Attributes successfully delete"
msgstr ""
#: build/locale/src/collections/components/CollectionList/CollectionList.json
#. [collectionListAvailabilityColumnHeader] - collection list: availability column header
#. defaultMessage is:
#. Availability
msgctxt "collection list: availability column header"
msgid "Availability"
msgstr ""
#: build/locale/src/intl.json
#. [availability]
#. defaultMessage is:
#. Availability
msgctxt "description"
msgid "Availability"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryBackground/CategoryBackground.json #: build/locale/src/categories/components/CategoryBackground/CategoryBackground.json
#. [categoryBackgroundHeader] - section header #. [categoryBackgroundHeader] - section header
#. defaultMessage is: #. defaultMessage is:
#. Background image (optional) #. Background image (optional)
#: build/locale/src/collections/components/CollectionImage/CollectionImage.json
#. [collectionImageHeader] - section header
#. defaultMessage is:
#. Background image (optional)
msgctxt "section header" msgctxt "section header"
msgid "Background image (optional)" msgid "Background image (optional)"
msgstr "" msgstr ""
@ -236,10 +348,10 @@ msgid "Cancel"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
#. [attributeDetailsInputTypeField] - attribute editor component type select field label #. [attributeDetailsInputTypeField] - attribute's editor component
#. defaultMessage is: #. defaultMessage is:
#. Catalog Input type for Store Owner #. Catalog Input type for Store Owner
msgctxt "attribute editor component type select field label" msgctxt "attribute's editor component"
msgid "Catalog Input type for Store Owner" msgid "Catalog Input type for Store Owner"
msgstr "" msgstr ""
@ -251,19 +363,31 @@ msgctxt "categories section name"
msgid "Categories" msgid "Categories"
msgstr "" msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.json
#. [categoryDetailsCategoriesRemoved] #. [categoryDetailsFormDescriptionInputLabel]
#. defaultMessage is: #. defaultMessage is:
#. Categories removed #. Category Description
msgctxt "description" msgctxt "description"
msgid "Categories removed" msgid "Category Description"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryList/CategoryList.json #: build/locale/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.json
#. [categoryListNameColumnHeader] - category list: name column header #. [categoryDetailsFormNameInputLabel]
#. defaultMessage is: #. defaultMessage is:
#. Category Name #. Category Name
msgctxt "category list: name column header" #: build/locale/src/categories/components/CategoryList/CategoryList.json
#. [categoryListNameColumnHeader]
#. defaultMessage is:
#. Category Name
msgctxt "description"
msgid "Category Name"
msgstr ""
#: build/locale/src/collections/components/CollectionList/CollectionList.json
#. [collectionListNameColumnHeader] - collection list: name column header
#. defaultMessage is:
#. Category Name
msgctxt "collection list: name column header"
msgid "Category Name" msgid "Category Name"
msgstr "" msgstr ""
@ -283,6 +407,22 @@ msgctxt "description"
msgid "Category deleted" msgid "Category deleted"
msgstr "" msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [collectionListChangedPublication]
#. defaultMessage is:
#. Changed publication status
msgctxt "description"
msgid "Changed publication status"
msgstr ""
#: build/locale/src/intl.json
#. [collections] - collections section name
#. defaultMessage is:
#. Collections
msgctxt "collections section name"
msgid "Collections"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [confirm] #. [confirm]
#. defaultMessage is: #. defaultMessage is:
@ -315,6 +455,22 @@ msgctxt "window title"
msgid "Create category" msgid "Create category"
msgstr "" msgstr ""
#: build/locale/src/collections/views/CollectionCreate.json
#. [collectionCreateWindowTitle] - window title
#. defaultMessage is:
#. Create collection
msgctxt "window title"
msgid "Create collection"
msgstr ""
#: build/locale/src/collections/views/CollectionCreate.json
#. [collectionCreateCreatedCollection]
#. defaultMessage is:
#. Created collection
msgctxt "description"
msgid "Created collection"
msgstr ""
#: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
#. [attributePropertiesDashboard] - attribute properties regarding dashboard #. [attributePropertiesDashboard] - attribute properties regarding dashboard
#. defaultMessage is: #. defaultMessage is:
@ -324,18 +480,18 @@ msgid "Dashboard Properties"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
#. [attributeDetailsNameInputLabel] - attribute label input field #. [attributeDetailsNameInputLabel] - attribute's label
#. defaultMessage is: #. defaultMessage is:
#. Default Label #. Default Label
msgctxt "attribute label input field" msgctxt "attribute's label"
msgid "Default Label" msgid "Default Label"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeList/AttributeList.json #: build/locale/src/attributes/components/AttributeList/AttributeList.json
#. [attributeListNameColumnHeader] - attribute list: name column header #. [attributeListNameColumnHeader] - attribute's label'
#. defaultMessage is: #. defaultMessage is:
#. Default Label #. Default Label
msgctxt "attribute list: name column header" msgctxt "attribute's label'"
msgid "Default Label" msgid "Default Label"
msgstr "" msgstr ""
@ -347,6 +503,42 @@ msgctxt "attribute values list: name column header"
msgid "Default Store View" msgid "Default Store View"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.json
#. [attributeDeleteDialogTitle] - dialog title
#. defaultMessage is:
#. Delete attribute
msgctxt "dialog title"
msgid "Delete attribute"
msgstr ""
#: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json
#. [attributeValueDeleteDialogTitle] - dialog title
#. defaultMessage is:
#. Delete attribute value
msgctxt "dialog title"
msgid "Delete attribute value"
msgstr ""
#: build/locale/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.json
#. [attributeBulkDeleteDialogTitle] - dialog title
#. defaultMessage is:
#. Delete attributes
msgctxt "dialog title"
msgid "Delete attributes"
msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json
#. [categoryDetailsDeleteSubcategoriesDialogTitle] - dialog title
#. defaultMessage is:
#. Delete categories
#: build/locale/src/categories/views/CategoryList.json
#. [categoryListDeleteSubcategoriesDialogTitle] - dialog title
#. defaultMessage is:
#. Delete categories
msgctxt "dialog title"
msgid "Delete categories"
msgstr ""
#: build/locale/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.json #: build/locale/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.json
#. [categoryDeleteDialogTitle] - dialog title #. [categoryDeleteDialogTitle] - dialog title
#. defaultMessage is: #. defaultMessage is:
@ -359,6 +551,14 @@ msgctxt "dialog title"
msgid "Delete category" msgid "Delete category"
msgstr "" msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json
#. [categoryDetailsDeleteProductsDialogTitle] - dialog title
#. defaultMessage is:
#. Delete products
msgctxt "dialog title"
msgid "Delete products"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [description] #. [description]
#. defaultMessage is: #. defaultMessage is:
@ -368,10 +568,10 @@ msgid "Description"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
#. [attributeDetailsInputTypeDropdown] - attribute editor component type #. [attributeDetailsInputTypeDropdown] - product attribute type
#. defaultMessage is: #. defaultMessage is:
#. Dropdown #. Dropdown
msgctxt "attribute editor component type" msgctxt "product attribute type"
msgid "Dropdown" msgid "Dropdown"
msgstr "" msgstr ""
@ -383,6 +583,14 @@ msgctxt "edit attribute value"
msgid "Edit Value" msgid "Edit Value"
msgstr "" msgstr ""
#: build/locale/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.json
#. [collectionDetailsPageFeatureInputLabel] - switch button
#. defaultMessage is:
#. Feature on Homepage
msgctxt "switch button"
msgid "Feature on Homepage"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [generalInformations] #. [generalInformations]
#. defaultMessage is: #. defaultMessage is:
@ -400,10 +608,10 @@ msgid "If enabled, you’ll be able to use this attribute to filter products in
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json #: build/locale/src/attributes/components/AttributeDetails/AttributeDetails.json
#. [attributeDetailsInputTypeMultiselect] - attribute editor component type #. [attributeDetailsInputTypeMultiselect] - product attribute type
#. defaultMessage is: #. defaultMessage is:
#. Multiple Select #. Multiple Select
msgctxt "attribute editor component type" msgctxt "product attribute type"
msgid "Multiple Select" msgid "Multiple Select"
msgstr "" msgstr ""
@ -415,16 +623,24 @@ msgctxt "attribute name"
msgid "Name" msgid "Name"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.json #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
#. [categoryDetailsFormNameInputLabel] - category name #. [categoryProductsNameHeader] - product name
#. defaultMessage is: #. defaultMessage is:
#. Name #. Name
msgctxt "category name" msgctxt "product name"
msgid "Name" msgid "Name"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json #: build/locale/src/collections/components/CollectionDetails/CollectionDetails.json
#. [categoryProductsNameHeader] - product list: product name column header #. [collectionDetailsNameInputLabel] - collection name
#. defaultMessage is:
#. Name
msgctxt "collection name"
msgid "Name"
msgstr ""
#: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
#. [collectionProductsNameColumnHeader] - product list: product name column header
#. defaultMessage is: #. defaultMessage is:
#. Name #. Name
msgctxt "product list: product name column header" msgctxt "product list: product name column header"
@ -432,10 +648,10 @@ msgid "Name"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeList/AttributeList.json #: build/locale/src/attributes/components/AttributeList/AttributeList.json
#. [AttributeListNoAttributes] - no attributes found with present filters #. [AttributeListNoAttributes]
#. defaultMessage is: #. defaultMessage is:
#. No attributes found #. No attributes found
msgctxt "no attributes found with present filters" msgctxt "description"
msgid "No attributes found" msgid "No attributes found"
msgstr "" msgstr ""
@ -447,10 +663,22 @@ msgctxt "description"
msgid "No categories found" msgid "No categories found"
msgstr "" msgstr ""
#: build/locale/src/collections/components/CollectionList/CollectionList.json
#. [collectionListNoCollections]
#. defaultMessage is:
#. No collections found
msgctxt "description"
msgid "No collections found"
msgstr ""
#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
#. [categoryProductsNoProducts] #. [categoryProductsNoProducts]
#. defaultMessage is: #. defaultMessage is:
#. No products found #. No products found
#: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
#. [collectionProductsNoProducts]
#. defaultMessage is:
#. No products found
msgctxt "description" msgctxt "description"
msgid "No products found" msgid "No products found"
msgstr "" msgstr ""
@ -471,14 +699,30 @@ msgctxt "No attribute values found"
msgid "No values found" msgid "No values found"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryList/CategoryList.json #: build/locale/src/collections/components/CollectionList/CollectionList.json
#. [categoryListNumberOfProductsColumnHeader] - category list: number of products column header #. [collectionListProductsColumnHeader] - collection list: number of products column header
#. defaultMessage is: #. defaultMessage is:
#. No. Products #. No. Products
msgctxt "category list: number of products column header" msgctxt "collection list: number of products column header"
msgid "No. Products" msgid "No. Products"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryList/CategoryList.json
#. [categoryListNumberOfProductsColumnHeader] - number of products
#. defaultMessage is:
#. No. of Products
msgctxt "number of products"
msgid "No. of Products"
msgstr ""
#: build/locale/src/intl.json
#. [notPublished]
#. defaultMessage is:
#. Not published
msgctxt "description"
msgid "Not published"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [optionalField] - field is optional #. [optionalField] - field is optional
#. defaultMessage is: #. defaultMessage is:
@ -504,27 +748,27 @@ msgid "Products"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.json #: build/locale/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.json
#. [categoryUpdatePageProductsColumnHeader] - category list: number of products column header #. [categoryUpdatePageProductsColumnHeader] - number of products in category
#. defaultMessage is: #. defaultMessage is:
#. Products #. Products
msgctxt "category list: number of products column header" msgctxt "number of products in category"
msgid "Products" msgid "Products"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryProductsCard/CategoryProductsCard.json #: build/locale/src/categories/components/CategoryProductsCard/CategoryProductsCard.json
#. [categoryProductsCardHeader] - products in category section header #. [categoryProductsCardHeader] - section header
#. defaultMessage is: #. defaultMessage is:
#. Products in {name} #. Products in {categoryName}
msgctxt "products in category section header" msgctxt "section header"
msgid "Products in {name}" msgid "Products in {categoryName}"
msgstr "" msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
#. [categoryDetailsProductsRemoved] #. [collectionProductsHeader] - products in collection
#. defaultMessage is: #. defaultMessage is:
#. Products removed #. Products in {name}
msgctxt "description" msgctxt "products in collection"
msgid "Products removed" msgid "Products in {name}"
msgstr "" msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
@ -535,64 +779,100 @@ msgctxt "description"
msgid "Properties" msgid "Properties"
msgstr "" msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [collectionListPublish] - publish collections
#. defaultMessage is:
#. Publish
msgctxt "publish collections"
msgid "Publish"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [collectionListPublishCollectionsDialogTitle] - dialog title
#. defaultMessage is:
#. Publish collections
msgctxt "dialog title"
msgid "Publish collections"
msgstr ""
#: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
#. [collectionPublishedColumnHeader] - product list: published column header
#. defaultMessage is:
#. Published
msgctxt "product list: published column header"
msgid "Published"
msgstr ""
#: build/locale/src/intl.json
#. [published]
#. defaultMessage is:
#. Published
msgctxt "description"
msgid "Published"
msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/categories/views/CategoryDetails.json
#. [categoryDetailsDeleteCategoryDialogContentAdditionalText] #. [categoryDetailsDeleteCategoryDialogContentAdditionalText]
#. defaultMessage is: #. defaultMessage is:
#. Remember that this will also remove all products assigned to this category. #. Remember this will also delete all products assigned to this category.
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/categories/views/CategoryDetails.json
#. [categoryDetailsDeleteCategoriesDialogContentAdditionalText] #. [categoryDetailsDeleteCategoriesDialogContentAdditionalText]
#. defaultMessage is: #. defaultMessage is:
#. Remember that this will also remove all products assigned to this category. #. Remember this will also delete all products assigned to this category.
#: build/locale/src/categories/views/CategoryList.json #: build/locale/src/categories/views/CategoryList.json
#. [categoryListDeleteCategoriesDialogContentAdditionalText] #. [categoryListDeleteCategoriesDialogContentAdditionalText]
#. defaultMessage is: #. defaultMessage is:
#. Remember that this will also remove all products assigned to this category. #. Remember this will also delete all products assigned to this category.
msgctxt "description" msgctxt "description"
msgid "Remember that this will also remove all products assigned to this category." msgid "Remember this will also delete all products assigned to this category."
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.json #: build/locale/src/collections/views/CollectionDetails.json
#. [attributeDeleteDialogTitle] - dialog title #. [collectionDetailsRemoveCollectionDialogTitle] - dialog title
#. defaultMessage is: #. defaultMessage is:
#. Remove attribute #. Remove Collection
msgctxt "dialog title" msgctxt "dialog title"
msgid "Remove attribute" msgid "Remove Collection"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.json #: build/locale/src/collections/views/CollectionList.json
#. [attributeValueDeleteDialogTitle] - dialog title #. [collectionListRemoveCollectionsDialogTitle] - dialog title
#. defaultMessage is: #. defaultMessage is:
#. Remove attribute value #. Remove collections
msgctxt "dialog title" msgctxt "dialog title"
msgid "Remove attribute value" msgid "Remove collections"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.json #: build/locale/src/collections/views/CollectionDetails.json
#. [attributeBulkDeleteDialogTitle] - dialog title #. [collectionDetailsRemoveImageTitle] - dialog title
#. defaultMessage is: #. defaultMessage is:
#. Remove attributes #. Remove image
msgctxt "dialog title" msgctxt "dialog title"
msgid "Remove attributes" msgid "Remove image"
msgstr "" msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/collections/views/CollectionDetails.json
#. [categoryDetailsDeleteSubcategoriesDialogTitle] - dialog title #. [collectionDetailsRemovedCollection]
#. defaultMessage is: #. defaultMessage is:
#. Remove categories #. Removed collection
#: build/locale/src/categories/views/CategoryList.json msgctxt "description"
#. [categoryListDeleteSubcategoriesDialogTitle] - dialog title msgid "Removed collection"
#. defaultMessage is:
#. Remove categories
msgctxt "dialog title"
msgid "Remove categories"
msgstr "" msgstr ""
#: build/locale/src/categories/views/CategoryDetails.json #: build/locale/src/collections/views/CollectionList.json
#. [categoryDetailsDeleteProductsDialogTitle] - dialog title #. [collectionListRemovedCollections]
#. defaultMessage is: #. defaultMessage is:
#. Remove products #. Removed collections
msgctxt "dialog title" msgctxt "description"
msgid "Remove products" msgid "Removed collections"
msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [collectionDetailsRemovedProduct]
#. defaultMessage is:
#. Removed product from collection
msgctxt "description"
msgid "Removed product from collection"
msgstr "" msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
@ -604,10 +884,10 @@ msgid "Saved changes"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeList/AttributeList.json #: build/locale/src/attributes/components/AttributeList/AttributeList.json
#. [attributeListSearchableColumnHeader] - attribute list: attribute can be searched in dashboard column header #. [attributeListSearchableColumnHeader] - attribute can be searched in dashboard
#. defaultMessage is: #. defaultMessage is:
#. Searchable #. Searchable
msgctxt "attribute list: attribute can be searched in dashboard column header" msgctxt "attribute can be searched in dashboard"
msgid "Searchable" msgid "Searchable"
msgstr "" msgstr ""
@ -620,18 +900,18 @@ msgid "Storefront Properties"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryList/CategoryList.json #: build/locale/src/categories/components/CategoryList/CategoryList.json
#. [categoryListSubcategoriesColumnHeader] - category list: subcategories column header #. [categoryListSubcategoriesColumnHeader] - number of subcategories
#. defaultMessage is: #. defaultMessage is:
#. Subcategories #. Subcategories
msgctxt "category list: subcategories column header" msgctxt "number of subcategories"
msgid "Subcategories" msgid "Subcategories"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.json #: build/locale/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.json
#. [categoryUpdatePageSubcategoriesColumnHeader] - category list: number of subcategories column header #. [categoryUpdatePageSubcategoriesColumnHeader] - number of subcategories in category
#. defaultMessage is: #. defaultMessage is:
#. Subcategories #. Subcategories
msgctxt "category list: number of subcategories column header" msgctxt "number of subcategories in category"
msgid "Subcategories" msgid "Subcategories"
msgstr "" msgstr ""
@ -652,13 +932,61 @@ msgid "This is used internally. Make sure you don’t use spaces"
msgstr "" msgstr ""
#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
#. [categoryProductsTypeHeader] - product list: product type column header #. [categoryProductsTypeHeader] - product type
#. defaultMessage is:
#. Type
msgctxt "product type"
msgid "Type"
msgstr ""
#: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
#. [collectionProductsTypeProductList] - product list: product type column header
#. defaultMessage is: #. defaultMessage is:
#. Type #. Type
msgctxt "product list: product type column header" msgctxt "product list: product type column header"
msgid "Type" msgid "Type"
msgstr "" msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [collectionDetailsUnassignButton] - unassign product from collection button
#. defaultMessage is:
#. Unassign
msgctxt "unassign product from collection button"
msgid "Unassign"
msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [collectionDetailsUnassignProductsDialogTitle] - dialog title
#. defaultMessage is:
#. Unassign products from collection
msgctxt "dialog title"
msgid "Unassign products from collection"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [collectionListUnpublish] - unpublish collections
#. defaultMessage is:
#. Unpublish
msgctxt "unpublish collections"
msgid "Unpublish"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [collectionListUnpublishCollectionsDialogTitle] - dialog title
#. defaultMessage is:
#. Unpublish collections
msgctxt "dialog title"
msgid "Unpublish collections"
msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [collectionDetailsUpdatedCollection]
#. defaultMessage is:
#. Updated collection
msgctxt "description"
msgid "Updated collection"
msgstr ""
#: build/locale/src/intl.json #: build/locale/src/intl.json
#. [uploadImage] - button #. [uploadImage] - button
#. defaultMessage is: #. defaultMessage is:
@ -684,10 +1012,10 @@ msgid "Use in faceted navigation"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeList/AttributeList.json #: build/locale/src/attributes/components/AttributeList/AttributeList.json
#. [attributeListFacetedColumnHeader] - attribute list: attribute can be searched in storefront column header #. [attributeListFacetedColumnHeader] - attribute can be searched in storefront
#. defaultMessage is: #. defaultMessage is:
#. Use in faceted search #. Use in faceted search
msgctxt "attribute list: attribute can be searched in storefront column header" msgctxt "attribute can be searched in storefront"
msgid "Use in faceted search" msgid "Use in faceted search"
msgstr "" msgstr ""
@ -700,18 +1028,18 @@ msgid "Value Required"
msgstr "" msgstr ""
#: build/locale/src/attributes/views/AttributeDetails/AttributeDetails.json #: build/locale/src/attributes/views/AttributeDetails/AttributeDetails.json
#. [attributeDetailsAttributeValueRemoveSuccess] - attribute value removed #. [attributeDetailsAttributeValueDeleteSuccess] - attribute value deleted
#. defaultMessage is: #. defaultMessage is:
#. Value removed #. Value deleted
msgctxt "attribute value removed" msgctxt "attribute value deleted"
msgid "Value removed" msgid "Value deleted"
msgstr "" msgstr ""
#: build/locale/src/attributes/components/AttributeList/AttributeList.json #: build/locale/src/attributes/components/AttributeList/AttributeList.json
#. [attributeListVisibilityColumnHeader] - attribute list: visibility column header #. [attributeListVisibilityColumnHeader] - attribute is visible
#. defaultMessage is: #. defaultMessage is:
#. Visible #. Visible
msgctxt "attribute list: visibility column header" msgctxt "attribute is visible"
msgid "Visible" msgid "Visible"
msgstr "" msgstr ""

204
src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
View file

@ -2,6 +2,7 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
import { ContentState, convertToRaw, RawDraftContentState } from "draft-js"; import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
import React from "react"; import React from "react";
import { useIntl } from "react-intl";
import AppHeader from "@saleor/components/AppHeader"; import AppHeader from "@saleor/components/AppHeader";
import { CardSpacer } from "@saleor/components/CardSpacer"; import { CardSpacer } from "@saleor/components/CardSpacer";
@ -14,7 +15,7 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm"; import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard"; import VisibilityCard from "@saleor/components/VisibilityCard";
import i18n from "../../../i18n"; import { commonMessages, sectionNames } from "@saleor/intl";
import { UserError } from "../../../types"; import { UserError } from "../../../types";
import CollectionDetails from "../CollectionDetails/CollectionDetails"; import CollectionDetails from "../CollectionDetails/CollectionDetails";
import { CollectionImage } from "../CollectionImage/CollectionImage"; import { CollectionImage } from "../CollectionImage/CollectionImage";
@ -63,105 +64,110 @@ const CollectionCreatePage: React.StatelessComponent<
saveButtonBarState, saveButtonBarState,
onBack, onBack,
onSubmit onSubmit
}: CollectionCreatePageProps) => ( }: CollectionCreatePageProps) => {
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}> const intl = useIntl();
{({ change, data, errors: formErrors, hasChanged, submit }) => (
<Container> return (
<AppHeader onBack={onBack}>{i18n.t("Collections")}</AppHeader> <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
<PageHeader {({ change, data, errors: formErrors, hasChanged, submit }) => (
title={i18n.t("Add collection", { <Container>
context: "page title" <AppHeader onBack={onBack}>
})} {intl.formatMessage(sectionNames.collections)}
/> </AppHeader>
<Grid> <PageHeader
<div> title={intl.formatMessage({
<CollectionDetails defaultMessage: "Add collection",
data={data} description: "page header",
disabled={disabled} id: "collectionCreatePageHeader"
errors={formErrors} })}
onChange={change} />
/> <Grid>
<CardSpacer />
<CollectionImage
image={
data.backgroundImage.url
? {
__typename: "Image",
alt: data.backgroundImageAlt,
url: data.backgroundImage.url
}
: null
}
onImageDelete={() =>
change({
target: {
name: "backgroundImage",
value: {
url: null,
value: null
}
}
} as any)
}
onImageUpload={file =>
change({
target: {
name: "backgroundImage",
value: {
url: URL.createObjectURL(file),
value: file
}
}
} as any)
}
onChange={change}
data={data}
/>
<CardSpacer />
<SeoForm
description={data.seoDescription}
disabled={disabled}
descriptionPlaceholder=""
helperText={i18n.t(
"Add search engine title and description to make this collection easier to find",
{
context: "help text"
}
)}
title={data.seoTitle}
titlePlaceholder={data.name}
onChange={change}
/>
</div>
<div>
<div> <div>
<Card> <CollectionDetails
<CardTitle data={data}
title={i18n.t("Availability", { disabled={disabled}
context: "collection status" errors={formErrors}
})} onChange={change}
/> />
<CardContent> <CardSpacer />
<VisibilityCard <CollectionImage
data={data} image={
errors={formErrors} data.backgroundImage.url
disabled={disabled} ? {
onChange={change} __typename: "Image",
/> alt: data.backgroundImageAlt,
</CardContent> url: data.backgroundImage.url
</Card> }
: null
}
onImageDelete={() =>
change({
target: {
name: "backgroundImage",
value: {
url: null,
value: null
}
}
} as any)
}
onImageUpload={file =>
change({
target: {
name: "backgroundImage",
value: {
url: URL.createObjectURL(file),
value: file
}
}
} as any)
}
onChange={change}
data={data}
/>
<CardSpacer />
<SeoForm
description={data.seoDescription}
disabled={disabled}
descriptionPlaceholder=""
helperText={intl.formatMessage({
defaultMessage:
"Add search engine title and description to make this collection easier to find",
id: "collectionSeo"
})}
title={data.seoTitle}
titlePlaceholder={data.name}
onChange={change}
/>
</div> </div>
</div> <div>
</Grid> <div>
<SaveButtonBar <Card>
state={saveButtonBarState} <CardTitle
disabled={disabled || !hasChanged} title={intl.formatMessage(commonMessages.availability)}
onCancel={onBack} />
onSave={submit} <CardContent>
/> <VisibilityCard
</Container> data={data}
)} errors={formErrors}
</Form> disabled={disabled}
); onChange={change}
/>
</CardContent>
</Card>
</div>
</div>
</Grid>
<SaveButtonBar
state={saveButtonBarState}
disabled={disabled || !hasChanged}
onCancel={onBack}
onSave={submit}
/>
</Container>
)}
</Form>
);
};
CollectionCreatePage.displayName = "CollectionCreatePage"; CollectionCreatePage.displayName = "CollectionCreatePage";
export default CollectionCreatePage; export default CollectionCreatePage;

69
src/collections/components/CollectionDetails/CollectionDetails.tsx
View file

@ -4,13 +4,14 @@ import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import { RawDraftContentState } from "draft-js"; import { RawDraftContentState } from "draft-js";
import React from "react"; import React from "react";
import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import RichTextEditor from "@saleor/components/RichTextEditor"; import RichTextEditor from "@saleor/components/RichTextEditor";
import i18n from "../../../i18n"; import { commonMessages } from "@saleor/intl";
import { maybe } from "../../../misc"; import { maybe } from "@saleor/misc";
import { FormErrors } from "../../../types"; import { FormErrors } from "@saleor/types";
import { CollectionDetails_collection } from "../../types/CollectionDetails"; import { CollectionDetails_collection } from "../../types/CollectionDetails";
const styles = createStyles({ const styles = createStyles({
@ -38,33 +39,43 @@ const CollectionDetails = withStyles(styles, { name: "CollectionDetails" })(
data, data,
onChange, onChange,
errors errors
}: CollectionDetailsProps) => ( }: CollectionDetailsProps) => {
<Card> const intl = useIntl();
<CardTitle title={i18n.t("General information")} />
<CardContent> return (
<TextField <Card>
classes={{ root: classes.name }} <CardTitle
label={i18n.t("Name")} title={intl.formatMessage(commonMessages.generalInformations)}
name="name"
disabled={disabled}
value={data.name}
onChange={onChange}
error={!!errors.name}
helperText={errors.name}
/> />
<FormSpacer /> <CardContent>
<RichTextEditor <TextField
error={!!errors.descriptionJson} classes={{ root: classes.name }}
helperText={errors.descriptionJson} label={intl.formatMessage({
initial={maybe(() => JSON.parse(collection.descriptionJson))} defaultMessage: "Name",
label={i18n.t("Description")} description: "collection name",
name="description" id: "collectionDetailsNameInputLabel"
disabled={disabled} })}
onChange={onChange} name="name"
/> disabled={disabled}
</CardContent> value={data.name}
</Card> onChange={onChange}
) error={!!errors.name}
helperText={errors.name}
/>
<FormSpacer />
<RichTextEditor
error={!!errors.descriptionJson}
helperText={errors.descriptionJson}
initial={maybe(() => JSON.parse(collection.descriptionJson))}
label={intl.formatMessage(commonMessages.description)}
name="description"
disabled={disabled}
onChange={onChange}
/>
</CardContent>
</Card>
);
}
); );
CollectionDetails.displayName = "CollectionDetails"; CollectionDetails.displayName = "CollectionDetails";
export default CollectionDetails; export default CollectionDetails;

26
src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
View file

@ -1,5 +1,6 @@
import { RawDraftContentState } from "draft-js"; import { RawDraftContentState } from "draft-js";
import React from "react"; import React from "react";
import { useIntl } from "react-intl";
import AppHeader from "@saleor/components/AppHeader"; import AppHeader from "@saleor/components/AppHeader";
import { CardSpacer } from "@saleor/components/CardSpacer"; import { CardSpacer } from "@saleor/components/CardSpacer";
@ -12,7 +13,7 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm"; import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard"; import VisibilityCard from "@saleor/components/VisibilityCard";
import i18n from "../../../i18n"; import { sectionNames } from "@saleor/intl";
import { maybe } from "../../../misc"; import { maybe } from "../../../misc";
import { ListActions, PageListProps } from "../../../types"; import { ListActions, PageListProps } from "../../../types";
import { CollectionDetails_collection } from "../../types/CollectionDetails"; import { CollectionDetails_collection } from "../../types/CollectionDetails";
@ -57,6 +58,8 @@ const CollectionDetailsPage: React.StatelessComponent<
onSubmit, onSubmit,
...collectionProductsProps ...collectionProductsProps
}: CollectionDetailsPageProps) => { }: CollectionDetailsPageProps) => {
const intl = useIntl();
return ( return (
<Form <Form
initial={{ initial={{
@ -74,7 +77,9 @@ const CollectionDetailsPage: React.StatelessComponent<
> >
{({ change, data, errors: formErrors, hasChanged, submit }) => ( {({ change, data, errors: formErrors, hasChanged, submit }) => (
<Container> <Container>
<AppHeader onBack={onBack}>{i18n.t("Collections")}</AppHeader> <AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.collections)}
</AppHeader>
<PageHeader title={maybe(() => collection.name)} /> <PageHeader title={maybe(() => collection.name)} />
<Grid> <Grid>
<div> <div>
@ -104,12 +109,11 @@ const CollectionDetailsPage: React.StatelessComponent<
description={data.seoDescription} description={data.seoDescription}
disabled={disabled} disabled={disabled}
descriptionPlaceholder="" descriptionPlaceholder=""
helperText={i18n.t( helperText={intl.formatMessage({
"Add search engine title and description to make this collection easier to find", defaultMessage:
{ "Add search engine title and description to make this collection easier to find",
context: "help text" id: "collectionSeo"
} })}
)}
title={data.seoTitle} title={data.seoTitle}
titlePlaceholder={maybe(() => collection.name)} titlePlaceholder={maybe(() => collection.name)}
onChange={change} onChange={change}
@ -128,8 +132,10 @@ const CollectionDetailsPage: React.StatelessComponent<
disabled={disabled} disabled={disabled}
name="isFeatured" name="isFeatured"
onChange={change} onChange={change}
label={i18n.t("Feature on Homepage", { label={intl.formatMessage({
context: "button" defaultMessage: "Feature on Homepage",
description: "switch button",
id: "collectionDetailsPageFeatureInputLabel"
})} })}
/> />
</VisibilityCard> </VisibilityCard>

144
src/collections/components/CollectionImage/CollectionImage.tsx
View file

@ -6,6 +6,7 @@ import {
} from "@material-ui/core/styles"; } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
@ -15,7 +16,7 @@ import Hr from "@saleor/components/Hr";
import ImageTile from "@saleor/components/ImageTile"; import ImageTile from "@saleor/components/ImageTile";
import ImageUpload from "@saleor/components/ImageUpload"; import ImageUpload from "@saleor/components/ImageUpload";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import i18n from "../../../i18n"; import { commonMessages } from "@saleor/intl";
import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails"; import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
@ -51,7 +52,7 @@ const styles = (theme: Theme) =>
} }
}); });
export interface CollectionImageProps extends WithStyles<typeof styles> { export interface CollectionImageProps {
data: { data: {
backgroundImageAlt: string; backgroundImageAlt: string;
}; };
@ -62,80 +63,79 @@ export interface CollectionImageProps extends WithStyles<typeof styles> {
} }
export const CollectionImage = withStyles(styles)( export const CollectionImage = withStyles(styles)(
class CollectionImageComponent extends React.Component< ({
CollectionImageProps, classes,
{} data,
> { onImageUpload,
imgInputAnchor = React.createRef<HTMLInputElement>(); image,
onChange,
onImageDelete
}: CollectionImageProps & WithStyles<typeof styles>) => {
const anchor = React.useRef<HTMLInputElement>();
const intl = useIntl();
clickImgInput = () => this.imgInputAnchor.current.click(); const handleImageUploadButtonClick = () => anchor.current.click();
render() { return (
const { <Card>
classes, <CardTitle
data, title={intl.formatMessage({
onImageUpload, defaultMessage: "Background image (optional)",
image, description: "section header",
onChange, id: "collectionImageHeader"
onImageDelete })}
} = this.props; toolbar={
return (
<Card>
<CardTitle
title={i18n.t("Background image (optional)")}
toolbar={
<>
<Button
variant="text"
color="primary"
onClick={this.clickImgInput}
>
{i18n.t("Upload image")}
</Button>
<input
className={classes.fileField}
id="fileUpload"
onChange={event => onImageUpload(event.target.files[0])}
type="file"
ref={this.imgInputAnchor}
/>
</>
}
/>
{image === undefined ? (
<CardContent>
<div>
<div className={classes.imageContainer}>
<Skeleton />
</div>
</div>
</CardContent>
) : image === null ? (
<ImageUpload onImageUpload={onImageUpload} />
) : (
<CardContent>
<ImageTile image={image} onImageDelete={onImageDelete} />
</CardContent>
)}
{image && (
<> <>
<Hr /> <Button
<CardContent> variant="text"
<TextField color="primary"
name="backgroundImageAlt" onClick={handleImageUploadButtonClick}
label={i18n.t("Description")} >
helperText={i18n.t("Optional")} <FormattedMessage {...commonMessages.uploadImage} />
value={data.backgroundImageAlt} </Button>
onChange={onChange} <input
fullWidth className={classes.fileField}
multiline id="fileUpload"
/> onChange={event => onImageUpload(event.target.files[0])}
</CardContent> type="file"
ref={anchor}
/>
</> </>
)} }
</Card> />
); {image === undefined ? (
} <CardContent>
<div>
<div className={classes.imageContainer}>
<Skeleton />
</div>
</div>
</CardContent>
) : image === null ? (
<ImageUpload onImageUpload={onImageUpload} />
) : (
<CardContent>
<ImageTile image={image} onImageDelete={onImageDelete} />
</CardContent>
)}
{image && (
<>
<Hr />
<CardContent>
<TextField
name="backgroundImageAlt"
label={intl.formatMessage(commonMessages.description)}
helperText={intl.formatMessage(commonMessages.optionalField)}
value={data.backgroundImageAlt}
onChange={onChange}
fullWidth
multiline
/>
</CardContent>
</>
)}
</Card>
);
} }
); );
CollectionImage.displayName = "CollectionImage"; CollectionImage.displayName = "CollectionImage";

227
src/collections/components/CollectionList/CollectionList.tsx
View file

@ -11,13 +11,13 @@ import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter"; import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel"; import StatusLabel from "@saleor/components/StatusLabel";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination"; import TablePagination from "@saleor/components/TablePagination";
import i18n from "@saleor/i18n";
import { maybe, renderCollection } from "@saleor/misc"; import { maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types"; import { ListActions, ListProps } from "@saleor/types";
import { CollectionList_collections_edges_node } from "../../types/CollectionList"; import { CollectionList_collections_edges_node } from "../../types/CollectionList";
@ -68,107 +68,136 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
toggle, toggle,
toggleAll, toggleAll,
toolbar toolbar
}: CollectionListProps) => ( }: CollectionListProps) => {
<Card> const intl = useIntl();
<Table>
<TableHead return (
colSpan={numberOfColumns} <Card>
selected={selected} <Table>
disabled={disabled} <TableHead
items={collections} colSpan={numberOfColumns}
toggleAll={toggleAll} selected={selected}
toolbar={toolbar} disabled={disabled}
> items={collections}
<TableCell className={classes.colName}> toggleAll={toggleAll}
{i18n.t("Category Name", { context: "table cell" })} toolbar={toolbar}
</TableCell> >
<TableCell className={classes.colProducts}> <TableCell className={classes.colName}>
{i18n <FormattedMessage
.t("No. Products", { context: "table cell" }) defaultMessage="Category Name"
.replace(" ", "\xa0")} id="collectionListNameColumnHeader"
</TableCell> />
<TableCell className={classes.colAvailability}> </TableCell>
{i18n.t("Availability", { context: "table cell" })} <TableCell className={classes.colProducts}>
</TableCell> <FormattedMessage
</TableHead> defaultMessage="No. of Products"
<TableFooter> id="collectionListProductsColumnHeader"
<TableRow> />
<TablePagination </TableCell>
colSpan={numberOfColumns} <TableCell className={classes.colAvailability}>
settings={settings} <FormattedMessage
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false} defaultMessage="Availability"
onNextPage={onNextPage} description="collection availability"
onUpdateListSettings={onUpdateListSettings} id="collectionListAvailabilityColumnHeader"
hasPreviousPage={ />
pageInfo && !disabled ? pageInfo.hasPreviousPage : false </TableCell>
} </TableHead>
onPreviousPage={onPreviousPage} <TableFooter>
/> <TableRow>
</TableRow> <TablePagination
</TableFooter> colSpan={numberOfColumns}
<TableBody> settings={settings}
{renderCollection( hasNextPage={
collections, pageInfo && !disabled ? pageInfo.hasNextPage : false
collection => { }
const isSelected = collection ? isChecked(collection.id) : false; onNextPage={onNextPage}
return ( onUpdateListSettings={onUpdateListSettings}
<TableRow hasPreviousPage={
className={classes.tableRow} pageInfo && !disabled ? pageInfo.hasPreviousPage : false
hover={!!collection} }
onClick={collection ? onRowClick(collection.id) : undefined} onPreviousPage={onPreviousPage}
key={collection ? collection.id : "skeleton"} />
selected={isSelected} </TableRow>
> </TableFooter>
<TableCell padding="checkbox"> <TableBody>
<Checkbox {renderCollection(
checked={isSelected} collections,
disabled={disabled} collection => {
disableClickPropagation const isSelected = collection
onChange={() => toggle(collection.id)} ? isChecked(collection.id)
: false;
return (
<TableRow
className={classes.tableRow}
hover={!!collection}
onClick={collection ? onRowClick(collection.id) : undefined}
key={collection ? collection.id : "skeleton"}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
disabled={disabled}
disableClickPropagation
onChange={() => toggle(collection.id)}
/>
</TableCell>
<TableCell className={classes.colName}>
{maybe<React.ReactNode>(
() => collection.name,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colProducts}>
{maybe<React.ReactNode>(
() => collection.products.totalCount,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colAvailability}>
{maybe(
() => (
<StatusLabel
status={
collection.isPublished ? "success" : "error"
}
label={
collection.isPublished
? intl.formatMessage({
defaultMessage: "Published",
description: "collection is published",
id: "collectionListPublished"
})
: intl.formatMessage({
defaultMessage: "Not published",
description: "collection is not published",
id: "collectionListNotPublished"
})
}
/>
),
<Skeleton />
)}
</TableCell>
</TableRow>
);
},
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
defaultMessage="No collections found"
id="collectionListNoCollections"
/> />
</TableCell> </TableCell>
<TableCell className={classes.colName}>
{maybe<React.ReactNode>(
() => collection.name,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colProducts}>
{maybe<React.ReactNode>(
() => collection.products.totalCount,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colAvailability}>
{maybe(
() => (
<StatusLabel
status={collection.isPublished ? "success" : "error"}
label={
collection.isPublished
? i18n.t("Published")
: i18n.t("Not published")
}
/>
),
<Skeleton />
)}
</TableCell>
</TableRow> </TableRow>
); )
}, )}
() => ( </TableBody>
<TableRow> </Table>
<TableCell colSpan={numberOfColumns}> </Card>
{i18n.t("No collections found")} );
</TableCell> }
</TableRow>
)
)}
</TableBody>
</Table>
</Card>
)
); );
CollectionList.displayName = "CollectionList"; CollectionList.displayName = "CollectionList";
export default CollectionList; export default CollectionList;

43
src/collections/components/CollectionListPage/CollectionListPage.tsx
View file

@ -1,10 +1,11 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add"; import AddIcon from "@material-ui/icons/Add";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { Container } from "@saleor/components/Container"; import { Container } from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader"; import PageHeader from "@saleor/components/PageHeader";
import i18n from "@saleor/i18n"; import { sectionNames } from "@saleor/intl";
import { ListActions, PageListProps } from "@saleor/types"; import { ListActions, PageListProps } from "@saleor/types";
import { CollectionList_collections_edges_node } from "../../types/CollectionList"; import { CollectionList_collections_edges_node } from "../../types/CollectionList";
import CollectionList from "../CollectionList/CollectionList"; import CollectionList from "../CollectionList/CollectionList";
@ -17,21 +18,29 @@ const CollectionListPage: React.StatelessComponent<CollectionListPageProps> = ({
disabled, disabled,
onAdd, onAdd,
...listProps ...listProps
}) => ( }) => {
<Container> const intl = useIntl();
<PageHeader title={i18n.t("Collections", { context: "page title" })}>
<Button return (
color="primary" <Container>
disabled={disabled} <PageHeader title={intl.formatMessage(sectionNames.collections)}>
variant="contained" <Button
onClick={onAdd} color="primary"
> disabled={disabled}
{i18n.t("Add collection", { context: "button" })} variant="contained"
<AddIcon /> onClick={onAdd}
</Button> >
</PageHeader> <FormattedMessage
<CollectionList disabled={disabled} {...listProps} /> defaultMessage="Add collection"
</Container> description="button"
); id="collectionListPageAddCollectionButton"
/>
<AddIcon />
</Button>
</PageHeader>
<CollectionList disabled={disabled} {...listProps} />
</Container>
);
};
CollectionListPage.displayName = "CollectionListPage"; CollectionListPage.displayName = "CollectionListPage";
export default CollectionListPage; export default CollectionListPage;

289
src/collections/components/CollectionProducts/CollectionProducts.tsx
View file

@ -14,6 +14,7 @@ import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
@ -24,7 +25,6 @@ import TableCellAvatar, {
} from "@saleor/components/TableCellAvatar"; } from "@saleor/components/TableCellAvatar";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination"; import TablePagination from "@saleor/components/TablePagination";
import i18n from "../../../i18n";
import { maybe, renderCollection } from "../../../misc"; import { maybe, renderCollection } from "../../../misc";
import { ListActions, PageListProps } from "../../../types"; import { ListActions, PageListProps } from "../../../types";
import { CollectionDetails_collection } from "../../types/CollectionDetails"; import { CollectionDetails_collection } from "../../types/CollectionDetails";
@ -83,137 +83,170 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
toggle, toggle,
toggleAll, toggleAll,
toolbar toolbar
}: CollectionProductsProps) => ( }: CollectionProductsProps) => {
<Card> const intl = useIntl();
<CardTitle
title={
!!collection ? (
i18n.t("Products in {{ collectionName }}", {
collectionName: collection.name
})
) : (
<Skeleton />
)
}
toolbar={
<Button
disabled={disabled}
variant="text"
color="primary"
onClick={onAdd}
>
{i18n.t("Assign product", {
context: "button"
})}
</Button>
}
/>
<Table className={classes.table}>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={maybe(() => collection.products.edges.map(edge => edge.node))}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCell className={classes.colName}>
<span className={classes.colNameLabel}>
{i18n.t("Name", { context: "table header" })}
</span>
</TableCell>
<TableCell className={classes.colType}>
{i18n.t("Type", { context: "table header" })}
</TableCell>
<TableCell className={classes.colPublished}>
{i18n.t("Published", { context: "table header" })}
</TableCell>
<TableCell className={classes.colActions} />
</TableHead>
<TableFooter>
<TableRow>
<TablePagination
colSpan={numberOfColumns}
hasNextPage={maybe(() => pageInfo.hasNextPage)}
onNextPage={onNextPage}
hasPreviousPage={maybe(() => pageInfo.hasPreviousPage)}
onPreviousPage={onPreviousPage}
/>
</TableRow>
</TableFooter>
<TableBody>
{renderCollection(
maybe(() => collection.products.edges.map(edge => edge.node)),
product => {
const isSelected = product ? isChecked(product.id) : false;
return ( return (
<TableRow <Card>
className={classes.tableRow} <CardTitle
hover={!!product} title={
onClick={!!product ? onRowClick(product.id) : undefined} !!collection ? (
key={product ? product.id : "skeleton"} intl.formatMessage({
selected={isSelected} defaultMessage: "Products in {name}",
> description: "products in collection",
<TableCell padding="checkbox"> id: "collectionProductsHeader"
<Checkbox })
checked={isSelected} ) : (
disabled={disabled} <Skeleton />
disableClickPropagation )
onChange={() => toggle(product.id)} }
toolbar={
<Button
disabled={disabled}
variant="text"
color="primary"
onClick={onAdd}
>
<FormattedMessage
defaultMessage="Assign product"
description="button"
id="collectionProductsAssignProductButton"
/>
</Button>
}
/>
<Table className={classes.table}>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={maybe(() =>
collection.products.edges.map(edge => edge.node)
)}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCell className={classes.colName}>
<span className={classes.colNameLabel}>
<FormattedMessage
defaultMessage="Name"
description="product name"
id="collectionProductsNameColumnHeader"
/>
</span>
</TableCell>
<TableCell className={classes.colType}>
<FormattedMessage
defaultMessage="Type"
description="product type"
id="collectionProductsTypeProductList"
/>
</TableCell>
<TableCell className={classes.colPublished}>
<FormattedMessage
defaultMessage="Published"
description="product is published"
id="collectionPublishedColumnHeader"
/>
</TableCell>
<TableCell className={classes.colActions} />
</TableHead>
<TableFooter>
<TableRow>
<TablePagination
colSpan={numberOfColumns}
hasNextPage={maybe(() => pageInfo.hasNextPage)}
onNextPage={onNextPage}
hasPreviousPage={maybe(() => pageInfo.hasPreviousPage)}
onPreviousPage={onPreviousPage}
/>
</TableRow>
</TableFooter>
<TableBody>
{renderCollection(
maybe(() => collection.products.edges.map(edge => edge.node)),
product => {
const isSelected = product ? isChecked(product.id) : false;
return (
<TableRow
className={classes.tableRow}
hover={!!product}
onClick={!!product ? onRowClick(product.id) : undefined}
key={product ? product.id : "skeleton"}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
disabled={disabled}
disableClickPropagation
onChange={() => toggle(product.id)}
/>
</TableCell>
<TableCellAvatar
className={classes.colName}
thumbnail={maybe(() => product.thumbnail.url)}
>
{maybe<React.ReactNode>(() => product.name, <Skeleton />)}
</TableCellAvatar>
<TableCell className={classes.colType}>
{maybe<React.ReactNode>(
() => product.productType.name,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colPublished}>
{maybe(
() => (
<StatusLabel
label={
product.isPublished
? intl.formatMessage({
defaultMessage: "Published",
description: "product is published",
id: "collectionProductsPublished"
})
: intl.formatMessage({
defaultMessage: "Not published",
description: "product is not published",
id: "collectionProductsNotPublished"
})
}
status={product.isPublished ? "success" : "error"}
/>
),
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colActions}>
<IconButton
disabled={!product}
onClick={event => onProductUnassign(product.id, event)}
>
<DeleteIcon color="primary" />
</IconButton>
</TableCell>
</TableRow>
);
},
() => (
<TableRow>
<TableCell />
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
defaultMessage="No products found"
id="collectionProductsNoProducts"
/> />
</TableCell> </TableCell>
<TableCellAvatar
className={classes.colName}
thumbnail={maybe(() => product.thumbnail.url)}
>
{maybe<React.ReactNode>(() => product.name, <Skeleton />)}
</TableCellAvatar>
<TableCell className={classes.colType}>
{maybe<React.ReactNode>(
() => product.productType.name,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colPublished}>
{maybe(
() => (
<StatusLabel
label={
product.isPublished
? i18n.t("Published")
: i18n.t("Not published")
}
status={product.isPublished ? "success" : "error"}
/>
),
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colActions}>
<IconButton
disabled={!product}
onClick={event => onProductUnassign(product.id, event)}
>
<DeleteIcon color="primary" />
</IconButton>
</TableCell>
</TableRow> </TableRow>
); )
}, )}
() => ( </TableBody>
<TableRow> </Table>
<TableCell /> </Card>
<TableCell colSpan={numberOfColumns}> );
{i18n.t("No products found")} }
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</Card>
)
); );
CollectionProducts.displayName = "CollectionProducts"; CollectionProducts.displayName = "CollectionProducts";
export default CollectionProducts; export default CollectionProducts;

27
src/collections/index.tsx
View file

@ -1,9 +1,10 @@
import { parse as parseQs } from "qs"; import { parse as parseQs } from "qs";
import React from "react"; import React from "react";
import { useIntl } from "react-intl";
import { Route, RouteComponentProps, Switch } from "react-router-dom"; import { Route, RouteComponentProps, Switch } from "react-router-dom";
import { sectionNames } from "@saleor/intl";
import { WindowTitle } from "../components/WindowTitle"; import { WindowTitle } from "../components/WindowTitle";
import i18n from "../i18n";
import { import {
collectionAddPath, collectionAddPath,
collectionListPath, collectionListPath,
@ -39,14 +40,18 @@ const CollectionDetails: React.StatelessComponent<
); );
}; };
const Component = () => ( const Component = () => {
<> const intl = useIntl();
<WindowTitle title={i18n.t("Collections")} />
<Switch> return (
<Route exact path={collectionListPath} component={CollectionList} /> <>
<Route exact path={collectionAddPath} component={CollectionCreate} /> <WindowTitle title={intl.formatMessage(sectionNames.collections)} />
<Route path={collectionPath(":id")} component={CollectionDetails} /> <Switch>
</Switch> <Route exact path={collectionListPath} component={CollectionList} />
</> <Route exact path={collectionAddPath} component={CollectionCreate} />
); <Route path={collectionPath(":id")} component={CollectionDetails} />
</Switch>
</>
);
};
export default Component; export default Component;

18
src/collections/views/CollectionCreate.tsx
View file

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle"; import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import i18n from "../../i18n";
import { getMutationState, maybe } from "../../misc"; import { getMutationState, maybe } from "../../misc";
import { CollectionCreateInput } from "../../types/globalTypes"; import { CollectionCreateInput } from "../../types/globalTypes";
import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage"; import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage";
@ -11,15 +11,17 @@ import { TypedCollectionCreateMutation } from "../mutations";
import { CreateCollection } from "../types/CreateCollection"; import { CreateCollection } from "../types/CreateCollection";
import { collectionListUrl, collectionUrl } from "../urls"; import { collectionListUrl, collectionUrl } from "../urls";
export const CollectionCreate: React.StatelessComponent<{}> = () => { export const CollectionCreate: React.FC = () => {
const navigate = useNavigator(); const navigate = useNavigator();
const notify = useNotifier(); const notify = useNotifier();
const intl = useIntl();
const handleCollectionCreateSuccess = (data: CreateCollection) => { const handleCollectionCreateSuccess = (data: CreateCollection) => {
if (data.collectionCreate.errors.length === 0) { if (data.collectionCreate.errors.length === 0) {
notify({ notify({
text: i18n.t("Created collection", { text: intl.formatMessage({
context: "notification" defaultMessage: "Created collection",
id: "collectionCreateCreatedCollection"
}) })
}); });
navigate(collectionUrl(data.collectionCreate.collection.id)); navigate(collectionUrl(data.collectionCreate.collection.id));
@ -45,7 +47,13 @@ export const CollectionCreate: React.StatelessComponent<{}> = () => {
); );
return ( return (
<> <>
<WindowTitle title={i18n.t("Create collection")} /> <WindowTitle
title={intl.formatMessage({
defaultMessage: "Create collection",
description: "window title",
id: "collectionCreateWindowTitle"
})}
/>
<CollectionCreatePage <CollectionCreatePage
errors={maybe(() => data.collectionCreate.errors, [])} errors={maybe(() => data.collectionCreate.errors, [])}
onBack={() => navigate(collectionListUrl())} onBack={() => navigate(collectionListUrl())}

107
src/collections/views/CollectionDetails.tsx
View file

@ -1,6 +1,7 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import DialogContentText from "@material-ui/core/DialogContentText"; import DialogContentText from "@material-ui/core/DialogContentText";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog"; import ActionDialog from "@saleor/components/ActionDialog";
import AssignProductDialog from "@saleor/components/AssignProductDialog"; import AssignProductDialog from "@saleor/components/AssignProductDialog";
@ -11,9 +12,9 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, { import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl";
import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config"; import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
import SearchProducts from "../../containers/SearchProducts"; import SearchProducts from "../../containers/SearchProducts";
import i18n from "../../i18n";
import { getMutationState, maybe } from "../../misc"; import { getMutationState, maybe } from "../../misc";
import { productUrl } from "../../products/urls"; import { productUrl } from "../../products/urls";
import { CollectionInput } from "../../types/globalTypes"; import { CollectionInput } from "../../types/globalTypes";
@ -47,6 +48,7 @@ export const CollectionDetails: React.StatelessComponent<
params.ids params.ids
); );
const paginate = usePaginator(); const paginate = usePaginator();
const intl = useIntl();
const closeModal = () => const closeModal = () =>
navigate( navigate(
@ -77,9 +79,7 @@ export const CollectionDetails: React.StatelessComponent<
const handleCollectionUpdate = (data: CollectionUpdate) => { const handleCollectionUpdate = (data: CollectionUpdate) => {
if (data.collectionUpdate.errors.length === 0) { if (data.collectionUpdate.errors.length === 0) {
notify({ notify({
text: i18n.t("Updated collection", { text: intl.formatMessage(commonMessages.savedChanges)
context: "notification"
})
}); });
navigate(collectionUrl(id)); navigate(collectionUrl(id));
} else { } else {
@ -98,8 +98,9 @@ export const CollectionDetails: React.StatelessComponent<
const handleProductAssign = (data: CollectionAssignProduct) => { const handleProductAssign = (data: CollectionAssignProduct) => {
if (data.collectionAddProducts.errors.length === 0) { if (data.collectionAddProducts.errors.length === 0) {
notify({ notify({
text: i18n.t("Added product to collection", { text: intl.formatMessage({
context: "notification" defaultMessage: "Added product to collection",
id: "collectionDetailsAddedProduct"
}) })
}); });
navigate(collectionUrl(id), true); navigate(collectionUrl(id), true);
@ -109,8 +110,9 @@ export const CollectionDetails: React.StatelessComponent<
const handleProductUnassign = (data: UnassignCollectionProduct) => { const handleProductUnassign = (data: UnassignCollectionProduct) => {
if (data.collectionRemoveProducts.errors.length === 0) { if (data.collectionRemoveProducts.errors.length === 0) {
notify({ notify({
text: i18n.t("Removed product from collection", { text: intl.formatMessage({
context: "notification" defaultMessage: "Deleted product from collection",
id: "collectionDetailsDeletedProduct"
}) })
}); });
reset(); reset();
@ -121,8 +123,9 @@ export const CollectionDetails: React.StatelessComponent<
const handleCollectionRemove = (data: RemoveCollection) => { const handleCollectionRemove = (data: RemoveCollection) => {
if (data.collectionDelete.errors.length === 0) { if (data.collectionDelete.errors.length === 0) {
notify({ notify({
text: i18n.t("Removed collection", { text: intl.formatMessage({
context: "notification" defaultMessage: "Deleted collection",
id: "collectionDetailsDeletedCollection"
}) })
}); });
navigate(collectionListUrl()); navigate(collectionListUrl());
@ -272,7 +275,11 @@ export const CollectionDetails: React.StatelessComponent<
) )
} }
> >
{i18n.t("Unassign")} <FormattedMessage
defaultMessage="Unassign"
description="unassign product from collection, button"
id="collectionDetailsUnassignButton"
/>
</Button> </Button>
} }
isChecked={isSelected} isChecked={isSelected}
@ -308,25 +315,26 @@ export const CollectionDetails: React.StatelessComponent<
onClose={closeModal} onClose={closeModal}
onConfirm={() => removeCollection.mutate({ id })} onConfirm={() => removeCollection.mutate({ id })}
open={params.action === "remove"} open={params.action === "remove"}
title={i18n.t("Remove collection", { title={intl.formatMessage({
context: "modal title" defaultMessage: "Delete Collection",
description: "dialog title",
id: "collectionDetailsDeleteCollectionDialogTitle"
})} })}
variant="delete" variant="delete"
> >
<DialogContentText <DialogContentText>
dangerouslySetInnerHTML={{ <FormattedMessage
__html: i18n.t( defaultMessage="Are you sure you want to delete {collectionName}?"
"Are you sure you want to remove <strong>{{ collectionName }}</strong>?", id="collectionDetailsDeleteCollectionDialogContent"
{ values={{
collectionName: maybe( collectionName: (
() => data.collection.name, <strong>
"..." {maybe(() => data.collection.name, "...")}
), </strong>
context: "modal" )
} }}
) />
}} </DialogContentText>
/>
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
confirmButtonState={unassignTransitionState} confirmButtonState={unassignTransitionState}
@ -339,24 +347,24 @@ export const CollectionDetails: React.StatelessComponent<
}) })
} }
open={params.action === "unassign"} open={params.action === "unassign"}
title={i18n.t("Unassign products from collection", { title={intl.formatMessage({
context: "modal title" defaultMessage: "Unassign products from collection",
description: "dialog title",
id: "collectionDetailsUnassignProductsDialogTitle"
})} })}
> >
<DialogContentText <DialogContentText>
dangerouslySetInnerHTML={{ <FormattedMessage
__html: i18n.t( defaultMessage="Are you sure you want to unassign {counter, plural,
"Are you sure you want to unassign <strong>{{ number }}</strong> products?", one {this product}
{ other {{displayQuantity} products}
context: "modal", }?"
number: maybe( id="collectionDetailsUnassignProductsDialogContent"
() => params.ids.length.toString(), values={{
"..." number: <strong>{params.ids.length}</strong>
) }}
} />
) </DialogContentText>
}}
/>
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
confirmButtonState={imageRemoveTransitionState} confirmButtonState={imageRemoveTransitionState}
@ -370,15 +378,18 @@ export const CollectionDetails: React.StatelessComponent<
}) })
} }
open={params.action === "removeImage"} open={params.action === "removeImage"}
title={i18n.t("Remove image", { title={intl.formatMessage({
context: "modal title" defaultMessage: "Delete image",
description: "dialog title",
id: "collectionDetailsDeleteImageTitle"
})} })}
variant="delete" variant="delete"
> >
<DialogContentText> <DialogContentText>
{i18n.t( <FormattedMessage
"Are you sure you want to remove collection's image?" defaultMessage="Are you sure you want to delete collection's image?"
)} id="collectionDetailsDeleteImageContent"
/>
</DialogContentText> </DialogContentText>
</ActionDialog> </ActionDialog>
</> </>

128
src/collections/views/CollectionList.tsx
View file

@ -3,6 +3,7 @@ import DialogContentText from "@material-ui/core/DialogContentText";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog"; import ActionDialog from "@saleor/components/ActionDialog";
import useBulkActions from "@saleor/hooks/useBulkActions"; import useBulkActions from "@saleor/hooks/useBulkActions";
@ -12,7 +13,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, { import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import i18n from "@saleor/i18n"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { getMutationState, maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import CollectionListPage from "../components/CollectionListPage/CollectionListPage"; import CollectionListPage from "../components/CollectionListPage/CollectionListPage";
@ -47,6 +48,7 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
const { updateListSettings, settings } = useListSettings( const { updateListSettings, settings } = useListSettings(
ListViews.COLLECTION_LIST ListViews.COLLECTION_LIST
); );
const intl = useIntl();
const closeModal = () => const closeModal = () =>
navigate( navigate(
@ -79,7 +81,7 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
const handleCollectionBulkDelete = (data: CollectionBulkDelete) => { const handleCollectionBulkDelete = (data: CollectionBulkDelete) => {
if (data.collectionBulkDelete.errors.length === 0) { if (data.collectionBulkDelete.errors.length === 0) {
notify({ notify({
text: i18n.t("Removed collections") text: intl.formatMessage(commonMessages.savedChanges)
}); });
refetch(); refetch();
reset(); reset();
@ -90,7 +92,7 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
const handleCollectionBulkPublish = (data: CollectionBulkPublish) => { const handleCollectionBulkPublish = (data: CollectionBulkPublish) => {
if (data.collectionBulkPublish.errors.length === 0) { if (data.collectionBulkPublish.errors.length === 0) {
notify({ notify({
text: i18n.t("Changed publication status") text: intl.formatMessage(commonMessages.savedChanges)
}); });
refetch(); refetch();
reset(); reset();
@ -147,13 +149,21 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
openModal("unpublish", listElements) openModal("unpublish", listElements)
} }
> >
{i18n.t("Unpublish")} <FormattedMessage
defaultMessage="Unpublish"
description="unpublish collections"
id="collectionListUnpublish"
/>
</Button> </Button>
<Button <Button
color="primary" color="primary"
onClick={() => openModal("publish", listElements)} onClick={() => openModal("publish", listElements)}
> >
{i18n.t("Publish")} <FormattedMessage
defaultMessage="Publish"
description="publish collections"
id="collectionListPublish"
/>
</Button> </Button>
<IconButton <IconButton
color="primary" color="primary"
@ -169,7 +179,10 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
toggleAll={toggleAll} toggleAll={toggleAll}
/> />
<ActionDialog <ActionDialog
open={params.action === "publish"} open={
params.action === "publish" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal} onClose={closeModal}
confirmButtonState={bulkPublishTransitionState} confirmButtonState={bulkPublishTransitionState}
onConfirm={() => onConfirm={() =>
@ -181,24 +194,30 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
}) })
} }
variant="default" variant="default"
title={i18n.t("Publish collections")} title={intl.formatMessage({
defaultMessage: "Publish collections",
description: "dialog title",
id: "collectionListPublishCollectionsDialogTitle"
})}
> >
<DialogContentText <DialogContentText>
dangerouslySetInnerHTML={{ <FormattedMessage
__html: i18n.t( defaultMessage="Are you sure you want to publish {counter, plural,
"Are you sure you want to publish <strong>{{ number }}</strong> collections?", one {this collection}
{ other {{displayQuantity} collections}
number: maybe( }?"
() => params.ids.length.toString(), id="collectionListPublishCollectionsDialogContent"
"..." values={{
) number: params.ids.length
} }}
) />
}} </DialogContentText>
/>
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
open={params.action === "unpublish"} open={
params.action === "unpublish" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal} onClose={closeModal}
confirmButtonState={bulkPublishTransitionState} confirmButtonState={bulkPublishTransitionState}
onConfirm={() => onConfirm={() =>
@ -210,24 +229,30 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
}) })
} }
variant="default" variant="default"
title={i18n.t("Unpublish collections")} title={intl.formatMessage({
defaultMessage: "Unpublish collections",
description: "dialog title",
id: "collectionListUnpublishCollectionsDialogTitle"
})}
> >
<DialogContentText <DialogContentText>
dangerouslySetInnerHTML={{ <FormattedMessage
__html: i18n.t( defaultMessage="Are you sure you want to unpublish {counter, plural,
"Are you sure you want to unpublish <strong>{{ number }}</strong> collections?", one {this collection}
{ other {{displayQuantity} collections}
number: maybe( }?"
() => params.ids.length.toString(), id="collectionListUnpublishCollectionsDialogContent"
"..." values={{
) number: params.ids.length
} }}
) />
}} </DialogContentText>
/>
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
open={params.action === "remove"} open={
params.action === "remove" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal} onClose={closeModal}
confirmButtonState={bulkDeleteTransitionState} confirmButtonState={bulkDeleteTransitionState}
onConfirm={() => onConfirm={() =>
@ -238,21 +263,24 @@ export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
}) })
} }
variant="delete" variant="delete"
title={i18n.t("Remove collections")} title={intl.formatMessage({
defaultMessage: "Delete collections",
description: "dialog title",
id: "collectionListDeleteCollectionsDialogTitle"
})}
> >
<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> collections?", one {this collection}
{ other {{displayQuantity} collections}
number: maybe( }?"
() => params.ids.length.toString(), id="collectionListDeleteCollectionsDialogContent"
"..." values={{
) number: params.ids.length
} }}
) />
}} </DialogContentText>
/>
</ActionDialog> </ActionDialog>
</> </>
); );

9
src/intl.ts
View file

@ -1,6 +1,10 @@
import { defineMessages } from "react-intl"; import { defineMessages } from "react-intl";
export const commonMessages = defineMessages({ export const commonMessages = defineMessages({
availability: {
defaultMessage: "Availability",
id: "availability"
},
cancel: { cancel: {
defaultMessage: "Cancel", defaultMessage: "Cancel",
id: "cancel" id: "cancel"
@ -51,5 +55,10 @@ export const sectionNames = defineMessages({
defaultMessage: "Categories", defaultMessage: "Categories",
description: "categories section name", description: "categories section name",
id: "categories" id: "categories"
},
collections: {
defaultMessage: "Collections",
description: "collections section name",
id: "collections"
} }
}); });