Add rating input at Create/Edit Product page (#828)

* Add rating input at Create/Edit Product page

* Fix cypress tests

Co-authored-by: Karolina Kuźniewicz <karolina.kuzniewicz@mirumee.com>
Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>

cypress/elements/catalog/product-selectors.js

@@ -10,6 +10,6 @@ export const PRODUCTS_SELECTORS = {
   firstCategoryItem: "#downshift-0-item-0",
   visibleRadioBtn: "[name='isPublished']",
   saveBtn: "[data-test='button-bar-confirm']",
-  confirmationMsg: "[data-test='notification']",
+  confirmationMsg: "[data-test='notification-success']",
   channelAvailabilityItem: "[data-test='channel-availability-item']"
 };

cypress/integration/products.js

@@ -44,9 +44,7 @@ describe("Products", () => {
       .click()
       .get(PRODUCTS_SELECTORS.saveBtn)
       .click()
-      .get(PRODUCTS_SELECTORS.confirmationMsg, {
+      .get(PRODUCTS_SELECTORS.confirmationMsg)
-        timeout: 1000
-      })
       .contains("Product created");
   });
 });

locale/defaultMessages.json

@@ -4428,6 +4428,10 @@
     "context": "product label",
     "string": "Published"
   },
+  "src_dot_products_dot_components_dot_ProductDetailsForm_dot_3416636340": {
+    "context": "product rating",
+    "string": "Product Rating"
+  },
   "src_dot_products_dot_components_dot_ProductDetailsForm_dot_636461959": {
     "context": "product name",
     "string": "Name"

src/components/messages/MessageManager.tsx

@@ -35,6 +35,7 @@ export const MessageManagerTemplate: React.FC<IMessageManagerProps> = props => {
       className={classes.snackbarContainer}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      data-test={`notification-${status}`}
     >
       <SnackbarContent
         id={id}

src/fragments/products.ts

@@ -152,6 +152,7 @@ export const productFragmentDetails = gql`
     descriptionJson
     seoTitle
     seoDescription
+    rating
     defaultVariant {
       id
     }

src/fragments/types/Product.ts

@@ -204,6 +204,7 @@ export interface Product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: Product_defaultVariant | null;
   category: Product_category | null;
   collections: (Product_collections | null)[] | null;

src/products/components/ProductCreatePage/form.tsx

@@ -47,6 +47,7 @@ export interface ProductCreateFormData extends MetadataFormData {
   isAvailable: boolean;
   name: string;
   productType: ProductType;
+  rating: number;
   seoDescription: string;
   seoTitle: string;
   sku: string;
@@ -137,6 +138,7 @@ function useProductCreateForm(
     name: "",
     privateMetadata: [],
     productType: null,
+    rating: 0,
     seoDescription: "",
     seoTitle: "",
     sku: "",

src/products/components/ProductDetailsForm/ProductDetailsForm.tsx

@@ -4,6 +4,7 @@ import CardContent from "@material-ui/core/CardContent";
 import TextField from "@material-ui/core/TextField";
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
+import Hr from "@saleor/components/Hr";
 import RichTextEditor, {
   RichTextEditorChange
 } from "@saleor/components/RichTextEditor";
@@ -17,6 +18,7 @@ interface ProductDetailsFormProps {
   data: {
     description: OutputData;
     name: string;
+    rating: number;
   };
   disabled?: boolean;
   errors: ProductErrorFragment[];
@@ -34,7 +36,10 @@ export const ProductDetailsForm: React.FC<ProductDetailsFormProps> = ({
 }) => {
   const intl = useIntl();
 
-  const formErrors = getFormErrors(["name", "descriptionJson"], errors);
+  const formErrors = getFormErrors(
+    ["name", "descriptionJson", "rating"],
+    errors
+  );
 
   return (
     <Card>
@@ -65,6 +70,21 @@ export const ProductDetailsForm: React.FC<ProductDetailsFormProps> = ({
           name="description"
           onChange={onDescriptionChange}
         />
+        <Hr />
+        <FormSpacer />
+        <TextField
+          type="number"
+          error={!!formErrors.rating}
+          helperText={getProductErrorMessage(formErrors.rating, intl)}
+          disabled={disabled}
+          label={intl.formatMessage({
+            defaultMessage: "Product Rating",
+            description: "product rating"
+          })}
+          name="rating"
+          value={data.rating || ""}
+          onChange={onChange}
+        />
       </CardContent>
     </Card>
   );

src/products/components/ProductUpdatePage/form.tsx

@@ -47,6 +47,7 @@ export interface ProductUpdateFormData extends MetadataFormData {
   collections: string[];
   isAvailable: boolean;
   name: string;
+  rating: number;
   slug: string;
   seoDescription: string;
   seoTitle: string;

src/products/fixtures.ts

@@ -263,6 +263,7 @@ export const product: (
       localized: "678.78 NZD"
     }
   },
+  rating: 100,
   seoDescription: "Seo description",
   seoTitle: "Seo title",
   sku: "59661-34207",

src/products/types/ProductChannelListingUpdate.ts

@@ -204,6 +204,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: ProductChannelListingUpdate_productChannelListingUpdate_product_defaultVariant | null;
   category: ProductChannelListingUpdate_productChannelListingUpdate_product_category | null;
   collections: (ProductChannelListingUpdate_productChannelListingUpdate_product_collections | null)[] | null;

src/products/types/ProductCreate.ts

@@ -211,6 +211,7 @@ export interface ProductCreate_productCreate_product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: ProductCreate_productCreate_product_defaultVariant | null;
   category: ProductCreate_productCreate_product_category | null;
   collections: (ProductCreate_productCreate_product_collections | null)[] | null;

src/products/types/ProductDetails.ts

@@ -204,6 +204,7 @@ export interface ProductDetails_product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: ProductDetails_product_defaultVariant | null;
   category: ProductDetails_product_category | null;
   collections: (ProductDetails_product_collections | null)[] | null;

src/products/types/ProductImageCreate.ts

@@ -210,6 +210,7 @@ export interface ProductImageCreate_productImageCreate_product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: ProductImageCreate_productImageCreate_product_defaultVariant | null;
   category: ProductImageCreate_productImageCreate_product_category | null;
   collections: (ProductImageCreate_productImageCreate_product_collections | null)[] | null;

src/products/types/ProductImageUpdate.ts

@@ -210,6 +210,7 @@ export interface ProductImageUpdate_productImageUpdate_product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: ProductImageUpdate_productImageUpdate_product_defaultVariant | null;
   category: ProductImageUpdate_productImageUpdate_product_category | null;
   collections: (ProductImageUpdate_productImageUpdate_product_collections | null)[] | null;

src/products/types/ProductUpdate.ts

@@ -211,6 +211,7 @@ export interface ProductUpdate_productUpdate_product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: ProductUpdate_productUpdate_product_defaultVariant | null;
   category: ProductUpdate_productUpdate_product_category | null;
   collections: (ProductUpdate_productUpdate_product_collections | null)[] | null;

src/products/types/ProductVariantReorder.ts

@@ -210,6 +210,7 @@ export interface ProductVariantReorder_productVariantReorder_product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: ProductVariantReorder_productVariantReorder_product_defaultVariant | null;
   category: ProductVariantReorder_productVariantReorder_product_category | null;
   collections: (ProductVariantReorder_productVariantReorder_product_collections | null)[] | null;

src/products/types/ProductVariantSetDefault.ts

@@ -210,6 +210,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: ProductVariantSetDefault_productVariantSetDefault_product_defaultVariant | null;
   category: ProductVariantSetDefault_productVariantSetDefault_product_category | null;
   collections: (ProductVariantSetDefault_productVariantSetDefault_product_collections | null)[] | null;

src/products/types/SimpleProductUpdate.ts

@@ -211,6 +211,7 @@ export interface SimpleProductUpdate_productUpdate_product {
   descriptionJson: any;
   seoTitle: string | null;
   seoDescription: string | null;
+  rating: number | null;
   defaultVariant: SimpleProductUpdate_productUpdate_product_defaultVariant | null;
   category: SimpleProductUpdate_productUpdate_product_category | null;
   collections: (SimpleProductUpdate_productUpdate_product_collections | null)[] | null;

src/products/utils/data.ts

@@ -178,6 +178,7 @@ export interface ProductUpdatePageFormData extends MetadataFormData {
   isAvailable: boolean;
   name: string;
   slug: string;
+  rating: number;
   seoDescription: string;
   seoTitle: string;
   sku: string;
@@ -208,6 +209,7 @@ export function getProductUpdatePageFormData(
     metadata: product?.metadata?.map(mapMetadataItemToInput),
     name: maybe(() => product.name, ""),
     privateMetadata: product?.privateMetadata?.map(mapMetadataItemToInput),
+    rating: maybe(() => product.rating, null),
     seoDescription: maybe(() => product.seoDescription, ""),
     seoTitle: maybe(() => product.seoTitle, ""),
     sku: maybe(

src/products/views/ProductCreate/handlers.ts

@@ -81,6 +81,7 @@ export function createHandler(
         descriptionJson: JSON.stringify(formData.description),
         name: formData.name,
         productType: formData.productType?.id,
+        rating: formData.rating,
         seo: {
           description: formData.seoDescription,
           title: formData.seoTitle

src/products/views/ProductUpdate/handlers.ts

@@ -125,6 +125,7 @@ export function createUpdateHandler(
         collections: data.collections,
         descriptionJson: JSON.stringify(data.description),
         name: data.name,
+        rating: data.rating,
         seo: {
           description: data.seoDescription,
           title: data.seoTitle

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -152851,6 +152851,48 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                  data-shrink="false"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="rating"
+                    type="number"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -153842,6 +153884,47 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -154832,6 +154915,47 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -161044,6 +161168,47 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -162806,6 +162971,47 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -164299,6 +164505,47 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -165999,6 +166246,47 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -167636,6 +167924,47 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -169470,6 +169799,47 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -171228,6 +171598,48 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                  data-shrink="false"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="rating"
+                    type="number"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -172193,6 +172605,47 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -173901,6 +174354,47 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -175735,6 +176229,47 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                   class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                 />
               </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  Product Rating
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="rating"
+                    type="number"
+                    value="100"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div