Add rich text attribute input (#1023)

* Clean structure, add text input, add story

* Improvements

* Update tests, changelog

* Extract messages

* Improvements

* Generate messages, update snapshots

* Switch to rich text

* Handle transitions

* Update translations

CHANGELOG.md

@@ -25,6 +25,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix trigger form change when collections are being added to list of product collections - #987 by @gax97
 - Add product variant webhooks - #1006 by @piotrgrundas
 - Use default sort for search products list - #997 by @orzechdev
+- Add text attribute input - #1023 by @piotrgrundas
 - Update CollectionBulkDelete error type - #1030 by @d-wysocki
 - Remove mailing settings - #1027 by @dominik-zeglen
 - Update schema to contain email plugin changes - #1029 by @dominik-zeglen

locale/defaultMessages.json

@@ -861,6 +861,10 @@
     "context": "references attribute type",
     "string": "References"
   },
+  "src_dot_attributes_dot_components_dot_AttributeDetails_dot_text": {
+    "context": "text attribute type",
+    "string": "Text"
+  },
   "src_dot_attributes_dot_components_dot_AttributeDetails_dot_valueRequired": {
     "context": "check to require attribute to have value",
     "string": "Value Required"
@@ -1681,7 +1685,7 @@
     "context": "attributes, section header",
     "string": "Attributes"
   },
-  "src_dot_components_dot_Attributes_dot_multipleValueLable": {
+  "src_dot_components_dot_Attributes_dot_multipleValueLabel": {
     "context": "attribute values",
     "string": "Values"
   },
@@ -6468,6 +6472,10 @@
   "src_dot_translations_dot_components_dot_TranslationsProductTypesPage_dot_2642976392": {
     "string": "Attribute Name"
   },
+  "src_dot_translations_dot_components_dot_TranslationsProductTypesPage_dot_3495336243": {
+    "context": "attribute richtext value",
+    "string": "Text"
+  },
   "src_dot_translations_dot_components_dot_TranslationsProductTypesPage_dot_884093025": {
     "context": "header",
     "string": "Translation Attribute \"{attribute}\" - {languageCode}"

schema.graphql

@@ -501,6 +501,7 @@ enum AttributeInputTypeEnum {
   MULTISELECT
   FILE
   REFERENCE
+  RICH_TEXT
 }
 
 type AttributeReorderValues {
@@ -579,6 +580,7 @@ type AttributeValue implements Node {
   inputType: AttributeInputTypeEnum
   reference: ID
   file: File
+  richText: JSONString
 }
 
 type AttributeValueBulkDelete {
@@ -597,6 +599,7 @@ type AttributeValueCreate {
 input AttributeValueCreateInput {
   name: String!
   value: String
+  richText: JSONString
 }
 
 type AttributeValueDelete {
@@ -612,6 +615,7 @@ input AttributeValueInput {
   file: String
   contentType: String
   references: [ID!]
+  richText: JSONString
 }
 
 type AttributeValueTranslatableContent implements Node {
@@ -630,9 +634,15 @@ type AttributeValueTranslate {
 type AttributeValueTranslation implements Node {
   id: ID!
   name: String!
+  richText: JSONString
   language: LanguageDisplay!
 }
 
+input AttributeValueTranslationInput {
+  name: String
+  richText: JSONString
+}
+
 type AttributeValueUpdate {
   errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
   attribute: Attribute
@@ -2801,7 +2811,7 @@ type Mutation {
   attributeValueCreate(attribute: ID!, input: AttributeValueCreateInput!): AttributeValueCreate
   attributeValueDelete(id: ID!): AttributeValueDelete
   attributeValueUpdate(id: ID!, input: AttributeValueCreateInput!): AttributeValueUpdate
-  attributeValueTranslate(id: ID!, input: NameTranslationInput!, languageCode: LanguageCodeEnum!): AttributeValueTranslate
+  attributeValueTranslate(id: ID!, input: AttributeValueTranslationInput!, languageCode: LanguageCodeEnum!): AttributeValueTranslate
   attributeReorderValues(attributeId: ID!, moves: [ReorderInput]!): AttributeReorderValues
   appCreate(input: AppInput!): AppCreate
   appUpdate(id: ID!, input: AppInput!): AppUpdate
@@ -3690,6 +3700,7 @@ type Payment implements Node {
   token: String!
   checkout: Checkout
   order: Order
+  paymentMethodType: String!
   customerIpAddress: String
   chargeStatus: PaymentChargeStatusEnum!
   actions: [OrderAction]!

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -64,6 +64,10 @@ const inputTypeMessages = defineMessages({
   references: {
     defaultMessage: "References",
     description: "references attribute type"
+  },
+  text: {
+    defaultMessage: "Text",
+    description: "text attribute type"
   }
 });
 
@@ -120,6 +124,10 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = props => {
     {
       label: intl.formatMessage(inputTypeMessages.references),
       value: AttributeInputTypeEnum.REFERENCE
+    },
+    {
+      label: intl.formatMessage(inputTypeMessages.text),
+      value: AttributeInputTypeEnum.RICH_TEXT
     }
   ];
   const entityTypeChoices = [

src/attributes/fixtures.ts

@@ -35,7 +35,8 @@ export const attribute: AttributeDetailsFragment = {
       id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0",
       name: "John Doe",
       reference: null,
-      slug: "john-doe"
+      slug: "john-doe",
+      richText: null
     },
     {
       __typename: "AttributeValue" as "AttributeValue",
@@ -43,7 +44,8 @@ export const attribute: AttributeDetailsFragment = {
       id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1",
       name: "Milionare Pirate",
       reference: null,
-      slug: "milionare-pirate"
+      slug: "milionare-pirate",
+      richText: null
     }
   ],
   visibleInStorefront: true
@@ -69,7 +71,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "john-doe",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -79,7 +82,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "milionare-pirate",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: true
@@ -103,7 +107,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "100g",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -113,7 +118,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "250g",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -123,7 +129,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "500g",
           sortOrder: 2,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -133,7 +140,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "1kg",
           sortOrder: 3,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: false
@@ -157,7 +165,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "saleor",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: false
@@ -181,7 +190,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "100g",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -191,7 +201,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "250g",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -201,7 +212,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "500g",
           sortOrder: 2,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: false
@@ -225,7 +237,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "arabica",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -235,7 +248,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "robusta",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: true
@@ -259,7 +273,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "round",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -269,7 +284,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "v-neck",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -279,7 +295,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "polo",
           sortOrder: 2,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: true
@@ -303,7 +320,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "blue",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -313,7 +331,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "white",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: true
@@ -337,7 +356,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "soft",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -347,7 +367,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "hard",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -357,7 +378,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "middle-soft",
           sortOrder: 2,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -367,7 +389,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "middle-hard",
           sortOrder: 3,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -377,7 +400,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "middle",
           sortOrder: 4,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -387,7 +411,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "very-hard",
           sortOrder: 5,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: false
@@ -411,7 +436,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "sour",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -421,7 +447,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "sweet",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: true
@@ -445,7 +472,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "english",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -455,7 +483,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "pirate",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: true
@@ -479,7 +508,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "mirumee-press",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -489,7 +519,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "saleor-publishing",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: true
@@ -513,7 +544,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "xs",
           sortOrder: 0,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -523,7 +555,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "s",
           sortOrder: 1,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -533,7 +566,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "m",
           sortOrder: 2,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -543,7 +577,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "l",
           sortOrder: 3,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -553,7 +588,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "xl",
           sortOrder: 4,
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -563,7 +599,8 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           reference: null,
           slug: "xxl",
           sortOrder: 5,
-          value: ""
+          value: "",
+          richText: null
         }
       ],
       visibleInStorefront: true

src/attributes/types/AttributeCreate.ts

@@ -34,6 +34,7 @@ export interface AttributeCreate_attributeCreate_attribute_values {
   slug: string | null;
   file: AttributeCreate_attributeCreate_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface AttributeCreate_attributeCreate_attribute {

src/attributes/types/AttributeDetails.ts

@@ -34,6 +34,7 @@ export interface AttributeDetails_attribute_values {
   slug: string | null;
   file: AttributeDetails_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface AttributeDetails_attribute {

src/attributes/types/AttributeUpdate.ts

@@ -34,6 +34,7 @@ export interface AttributeUpdate_attributeUpdate_attribute_values {
   slug: string | null;
   file: AttributeUpdate_attributeUpdate_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface AttributeUpdate_attributeUpdate_attribute {

src/attributes/types/AttributeValueCreate.ts

@@ -34,6 +34,7 @@ export interface AttributeValueCreate_attributeValueCreate_attribute_values {
   slug: string | null;
   file: AttributeValueCreate_attributeValueCreate_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface AttributeValueCreate_attributeValueCreate_attribute {

src/attributes/types/AttributeValueDelete.ts

@@ -34,6 +34,7 @@ export interface AttributeValueDelete_attributeValueDelete_attribute_values {
   slug: string | null;
   file: AttributeValueDelete_attributeValueDelete_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface AttributeValueDelete_attributeValueDelete_attribute {

src/attributes/types/AttributeValueUpdate.ts

@@ -34,6 +34,7 @@ export interface AttributeValueUpdate_attributeValueUpdate_attribute_values {
   slug: string | null;
   file: AttributeValueUpdate_attributeValueUpdate_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface AttributeValueUpdate_attributeValueUpdate_attribute {

src/attributes/utils/data.ts

@@ -281,7 +281,6 @@ export const getAttributesDisplayData = (
     if (attribute.data.inputType === AttributeInputTypeEnum.FILE) {
       return getFileAttributeDisplayData(attribute, attributesWithNewFileValue);
     }
-
     return attribute;
   });
 

src/attributes/utils/handlers.test.ts

@@ -15,7 +15,8 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           id: "attrv-1",
           name: "Attribute 1 Value 1",
           reference: null,
-          slug: "attr-1-v-1"
+          slug: "attr-1-v-1",
+          richText: null
         }
       ]
     },
@@ -34,7 +35,8 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           id: "attrv-2",
           name: "Attribute 2 Value 1",
           reference: null,
-          slug: "attr-2-v-1"
+          slug: "attr-2-v-1",
+          richText: null
         },
         {
           __typename: "AttributeValue",
@@ -42,7 +44,8 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           id: "attrv-3",
           name: "Attribute 2 Value 2",
           reference: null,
-          slug: "attr-2-v-2"
+          slug: "attr-2-v-2",
+          richText: null
         },
         {
           __typename: "AttributeValue",
@@ -50,7 +53,8 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           id: "attrv-4",
           name: "Attribute 2 Value 3",
           reference: null,
-          slug: "attr-2-v-3"
+          slug: "attr-2-v-3",
+          richText: null
         }
       ]
     },
@@ -73,7 +77,8 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           id: "gdghdgdhkkdae",
           name: "File First Value",
           reference: null,
-          slug: "file-first-value"
+          slug: "file-first-value",
+          richText: null
         }
       ]
     },

src/attributes/utils/handlers.ts

@@ -203,6 +203,12 @@ export const prepareAttributesInput = ({
         references: attribute.value
       };
     }
+    if (attribute.data.inputType === AttributeInputTypeEnum.RICH_TEXT) {
+      return {
+        id: attribute.id,
+        richText: attribute.value[0]
+      };
+    }
     return {
       id: attribute.id,
       values: attribute.value[0] === "" ? [] : attribute.value

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -162,6 +162,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
           slug: slugify(value.name).toLowerCase(),
           sortOrder: valueIndex,
           value: null,
+          richText: null,
           ...value
         }))}
       />

src/components/Attributes/AttributeRow.tsx

@@ -0,0 +1,181 @@
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import { AttributeInput } from "@saleor/components/Attributes/Attributes";
+import BasicAttributeRow from "@saleor/components/Attributes/BasicAttributeRow";
+import ExtendedAttributeRow from "@saleor/components/Attributes/ExtendedAttributeRow";
+import {
+  getErrorMessage,
+  getFileChoice,
+  getMultiChoices,
+  getMultiDisplayValue,
+  getReferenceDisplayValue,
+  getRichTextData,
+  getSingleChoices
+} from "@saleor/components/Attributes/utils";
+import FileUploadField from "@saleor/components/FileUploadField";
+import MultiAutocompleteSelectField from "@saleor/components/MultiAutocompleteSelectField";
+import RichTextEditor from "@saleor/components/RichTextEditor";
+import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField";
+import SortableChipsField from "@saleor/components/SortableChipsField";
+import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErrorWithAttributesFragment";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
+import { FormsetChange } from "@saleor/hooks/useFormset";
+import { ReorderEvent } from "@saleor/types";
+import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+const messages = defineMessages({
+  multipleValueLabel: {
+    defaultMessage: "Values",
+    description: "attribute values"
+  },
+  valueLabel: {
+    defaultMessage: "Value",
+    description: "attribute value"
+  }
+});
+
+const useStyles = makeStyles(
+  () => ({
+    fileField: {
+      float: "right"
+    }
+  }),
+  { name: "AttributeRow" }
+);
+
+export interface AttributeRowHandlers {
+  onChange: FormsetChange<string>;
+  onFileChange: FormsetChange<File>;
+  onMultiChange: FormsetChange<string>;
+  onReferencesAddClick: (attribute: AttributeInput) => void;
+  onReferencesRemove: FormsetChange<string[]>;
+  onReferencesReorder: FormsetChange<ReorderEvent>;
+}
+
+interface AttributeRowProps extends AttributeRowHandlers {
+  attribute: AttributeInput;
+  disabled: boolean;
+  error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment;
+  loading: boolean;
+}
+
+const AttributeRow: React.FC<AttributeRowProps> = ({
+  attribute,
+  disabled,
+  error,
+  loading,
+  onFileChange,
+  onMultiChange,
+  onReferencesAddClick,
+  onReferencesRemove,
+  onReferencesReorder,
+  onChange
+}) => {
+  const intl = useIntl();
+  const classes = useStyles({});
+
+  switch (attribute.data.inputType) {
+    case AttributeInputTypeEnum.REFERENCE:
+      return (
+        <ExtendedAttributeRow
+          label={attribute.label}
+          selectLabel={intl.formatMessage({
+            defaultMessage: "Assign references",
+            description: "button label"
+          })}
+          onSelect={() => onReferencesAddClick(attribute)}
+          disabled={disabled}
+        >
+          <SortableChipsField
+            values={getReferenceDisplayValue(attribute)}
+            onValueDelete={value =>
+              onReferencesRemove(
+                attribute.id,
+                attribute.value?.filter(id => id !== value)
+              )
+            }
+            onValueReorder={event => onReferencesReorder(attribute.id, event)}
+            loading={loading}
+            error={!!error}
+            helperText={getErrorMessage(error, intl)}
+          />
+        </ExtendedAttributeRow>
+      );
+    case AttributeInputTypeEnum.FILE:
+      return (
+        <BasicAttributeRow label={attribute.label}>
+          <FileUploadField
+            className={classes.fileField}
+            disabled={disabled}
+            loading={loading}
+            file={getFileChoice(attribute)}
+            onFileUpload={file => onFileChange(attribute.id, file)}
+            onFileDelete={() => onFileChange(attribute.id, undefined)}
+            error={!!error}
+            helperText={getErrorMessage(error, intl)}
+            inputProps={{
+              name: `attribute:${attribute.label}`
+            }}
+          />
+        </BasicAttributeRow>
+      );
+    case AttributeInputTypeEnum.DROPDOWN:
+      return (
+        <BasicAttributeRow label={attribute.label}>
+          <SingleAutocompleteSelectField
+            choices={getSingleChoices(attribute.data.values)}
+            disabled={disabled}
+            displayValue={
+              attribute.data.values.find(
+                value => value.slug === attribute.value[0]
+              )?.name ||
+              attribute.value[0] ||
+              ""
+            }
+            emptyOption={!attribute.data.isRequired}
+            error={!!error}
+            helperText={getErrorMessage(error, intl)}
+            name={`attribute:${attribute.label}`}
+            label={intl.formatMessage(messages.valueLabel)}
+            value={attribute.value[0]}
+            onChange={event => onChange(attribute.id, event.target.value)}
+            allowCustomValues={!attribute.data.isRequired}
+          />
+        </BasicAttributeRow>
+      );
+    case AttributeInputTypeEnum.RICH_TEXT:
+      return (
+        <BasicAttributeRow label={attribute.label}>
+          <RichTextEditor
+            name={`attribute:${attribute.label}`}
+            disabled={disabled}
+            error={!!error}
+            label={intl.formatMessage(messages.valueLabel)}
+            helperText={getErrorMessage(error, intl)}
+            onChange={data => onChange(attribute.id, JSON.stringify(data))}
+            data={getRichTextData(attribute)}
+          />
+        </BasicAttributeRow>
+      );
+    default:
+      return (
+        <BasicAttributeRow label={attribute.label}>
+          <MultiAutocompleteSelectField
+            choices={getMultiChoices(attribute.data.values)}
+            displayValues={getMultiDisplayValue(attribute)}
+            disabled={disabled}
+            error={!!error}
+            helperText={getErrorMessage(error, intl)}
+            label={intl.formatMessage(messages.multipleValueLabel)}
+            name={`attribute:${attribute.label}`}
+            value={attribute.value}
+            onChange={event => onMultiChange(attribute.id, event.target.value)}
+            allowCustomValues={!attribute.data.isRequired}
+          />
+        </BasicAttributeRow>
+      );
+  }
+};
+AttributeRow.displayName = "AttributeRow";
+export default AttributeRow;

src/components/Attributes/Attributes.tsx

@@ -6,39 +6,20 @@ import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import { AttributeReference } from "@saleor/attributes/utils/data";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
-import MultiAutocompleteSelectField, {
-  MultiAutocompleteChoiceType
-} from "@saleor/components/MultiAutocompleteSelectField";
-import SingleAutocompleteSelectField, {
-  SingleAutocompleteChoiceType
-} from "@saleor/components/SingleAutocompleteSelectField";
 import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFragment";
 import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErrorWithAttributesFragment";
 import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
-import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
+import { FormsetAtomicData } from "@saleor/hooks/useFormset";
 import { makeStyles } from "@saleor/theme";
-import { ReorderEvent } from "@saleor/types";
 import {
   AttributeEntityTypeEnum,
   AttributeInputTypeEnum
 } from "@saleor/types/globalTypes";
-import { getProductErrorMessage } from "@saleor/utils/errors";
-import getPageErrorMessage from "@saleor/utils/errors/page";
 import classNames from "classnames";
 import React from "react";
-import {
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
-  defineMessages,
-  FormattedMessage,
-  IntlShape,
-  useIntl
-} from "react-intl";
 
-import FileUploadField, { FileChoiceType } from "../FileUploadField";
+import AttributeRow, { AttributeRowHandlers } from "./AttributeRow";
-import SortableChipsField, {
-  SortableChipsFieldValueType
-} from "../SortableChipsField";
-import BasicAttributeRow from "./BasicAttributeRow";
-import ExtendedAttributeRow from "./ExtendedAttributeRow";
 import { VariantAttributeScope } from "./types";
 
 export interface AttributeInputData {
@@ -52,7 +33,7 @@ export interface AttributeInputData {
 }
 export type AttributeInput = FormsetAtomicData<AttributeInputData, string[]>;
 export type AttributeFileInput = FormsetAtomicData<AttributeInputData, File[]>;
-export interface AttributesProps {
+export interface AttributesProps extends AttributeRowHandlers {
   attributes: AttributeInput[];
   disabled: boolean;
   loading: boolean;
@@ -60,12 +41,6 @@ export interface AttributesProps {
     ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment
   >;
   title?: React.ReactNode;
-  onChange: FormsetChange<string>;
-  onMultiChange: FormsetChange<string>;
-  onFileChange: FormsetChange<File>;
-  onReferencesRemove: FormsetChange<string[]>;
-  onReferencesAddClick: (attribute: AttributeInput) => void;
-  onReferencesReorder: FormsetChange<ReorderEvent>;
 }
 
 const useStyles = makeStyles(
@@ -107,9 +82,6 @@ const useStyles = makeStyles(
       display: "flex",
       flex: 1
     },
-    fileField: {
-      float: "right"
-    },
     rotate: {
       transform: "rotate(180deg)"
     },
@@ -125,104 +97,6 @@ const useStyles = makeStyles(
   { name: "Attributes" }
 );
 
-function getMultiChoices(
-  values: AttributeValueFragment[]
-): MultiAutocompleteChoiceType[] {
-  return values.map(value => ({
-    label: value.name,
-    value: value.slug
-  }));
-}
-
-function getMultiDisplayValue(
-  attribute: AttributeInput
-): MultiAutocompleteChoiceType[] {
-  if (!attribute.value) {
-    return [];
-  }
-
-  return attribute.value.map(attributeValue => {
-    const definedAttributeValue = attribute.data.values.find(
-      definedValue => definedValue.slug === attributeValue
-    );
-    if (!!definedAttributeValue) {
-      return {
-        label: definedAttributeValue.name,
-        value: definedAttributeValue.slug
-      };
-    }
-
-    return {
-      label: attributeValue,
-      value: attributeValue
-    };
-  });
-}
-
-function getReferenceDisplayValue(
-  attribute: AttributeInput
-): SortableChipsFieldValueType[] {
-  if (!attribute.value) {
-    return [];
-  }
-
-  return attribute.value.map(attributeValue => {
-    const definedAttributeValue = attribute.data.values.find(
-      definedValue => definedValue.reference === attributeValue
-    );
-    // If value has been previously assigned, use it's data
-    if (!!definedAttributeValue) {
-      return {
-        label: definedAttributeValue.name,
-        value: definedAttributeValue.reference
-      };
-    }
-
-    const definedAttributeReference = attribute.data.references?.find(
-      reference => reference.value === attributeValue
-    );
-    // If value has not been yet assigned, use data of reference
-    if (!!definedAttributeReference) {
-      return definedAttributeReference;
-    }
-
-    return {
-      label: attributeValue,
-      value: attributeValue
-    };
-  });
-}
-
-function getSingleChoices(
-  values: AttributeValueFragment[]
-): SingleAutocompleteChoiceType[] {
-  return values.map(value => ({
-    label: value.name,
-    value: value.slug
-  }));
-}
-
-function getFileChoice(attribute: AttributeInput): FileChoiceType {
-  const attributeValue = attribute.value?.length > 0 && attribute.value[0];
-
-  const definedAttributeValue = attribute.data.values.find(
-    definedValue => definedValue.slug === attributeValue
-  );
-
-  if (definedAttributeValue) {
-    return {
-      file: definedAttributeValue.file,
-      label: definedAttributeValue.name,
-      value: definedAttributeValue.slug
-    };
-  }
-
-  return {
-    label: attributeValue,
-    value: attributeValue
-  };
-}
-
 const messages = defineMessages({
   attributesNumber: {
     defaultMessage: "{number} Attributes",
@@ -231,41 +105,14 @@ const messages = defineMessages({
   header: {
     defaultMessage: "Attributes",
     description: "attributes, section header"
-  },
-  multipleValueLable: {
-    defaultMessage: "Values",
-    description: "attribute values"
-  },
-  valueLabel: {
-    defaultMessage: "Value",
-    description: "attribute value"
   }
 });
 
-function getErrorMessage(
-  err: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment,
-  intl: IntlShape
-): string {
-  switch (err?.__typename) {
-    case "ProductError":
-      return getProductErrorMessage(err, intl);
-    case "PageError":
-      return getPageErrorMessage(err, intl);
-  }
-}
-
 const Attributes: React.FC<AttributesProps> = ({
   attributes,
-  disabled,
-  loading,
   errors,
   title,
-  onChange,
+  ...props
-  onMultiChange,
-  onFileChange,
-  onReferencesRemove,
-  onReferencesAddClick,
-  onReferencesReorder
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -310,95 +157,11 @@ const Attributes: React.FC<AttributesProps> = ({
               return (
                 <React.Fragment key={attribute.id}>
                   {attributeIndex > 0 && <Hr />}
-                  {attribute.data.inputType ===
+                  <AttributeRow
-                  AttributeInputTypeEnum.REFERENCE ? (
+                    attribute={attribute}
-                    <ExtendedAttributeRow
+                    error={error}
-                      label={attribute.label}
+                    {...props}
-                      selectLabel={intl.formatMessage({
-                        defaultMessage: "Assign references",
-                        description: "button label"
-                      })}
-                      onSelect={() => onReferencesAddClick(attribute)}
-                      disabled={disabled}
-                    >
-                      <SortableChipsField
-                        values={getReferenceDisplayValue(attribute)}
-                        onValueDelete={value =>
-                          onReferencesRemove(
-                            attribute.id,
-                            attribute.value?.filter(id => id !== value)
-                          )
-                        }
-                        onValueReorder={event =>
-                          onReferencesReorder(attribute.id, event)
-                        }
-                        loading={loading}
-                        error={!!error}
-                        helperText={getErrorMessage(error, intl)}
                   />
-                    </ExtendedAttributeRow>
-                  ) : attribute.data.inputType ===
-                    AttributeInputTypeEnum.FILE ? (
-                    <BasicAttributeRow label={attribute.label}>
-                      <FileUploadField
-                        className={classes.fileField}
-                        disabled={disabled}
-                        loading={loading}
-                        file={getFileChoice(attribute)}
-                        onFileUpload={file => onFileChange(attribute.id, file)}
-                        onFileDelete={() =>
-                          onFileChange(attribute.id, undefined)
-                        }
-                        error={!!error}
-                        helperText={getErrorMessage(error, intl)}
-                        inputProps={{
-                          name: `attribute:${attribute.label}`
-                        }}
-                      />
-                    </BasicAttributeRow>
-                  ) : attribute.data.inputType ===
-                    AttributeInputTypeEnum.DROPDOWN ? (
-                    <BasicAttributeRow label={attribute.label}>
-                      <SingleAutocompleteSelectField
-                        choices={getSingleChoices(attribute.data.values)}
-                        disabled={disabled}
-                        displayValue={
-                          attribute.data.values.find(
-                            value => value.slug === attribute.value[0]
-                          )?.name ||
-                          attribute.value[0] ||
-                          ""
-                        }
-                        emptyOption={!attribute.data.isRequired}
-                        error={!!error}
-                        helperText={getErrorMessage(error, intl)}
-                        name={`attribute:${attribute.label}`}
-                        label={intl.formatMessage(messages.valueLabel)}
-                        value={attribute.value[0]}
-                        onChange={event =>
-                          onChange(attribute.id, event.target.value)
-                        }
-                        allowCustomValues={!attribute.data.isRequired}
-                      />
-                    </BasicAttributeRow>
-                  ) : (
-                    <BasicAttributeRow label={attribute.label}>
-                      <MultiAutocompleteSelectField
-                        choices={getMultiChoices(attribute.data.values)}
-                        displayValues={getMultiDisplayValue(attribute)}
-                        disabled={disabled}
-                        error={!!error}
-                        helperText={getErrorMessage(error, intl)}
-                        label={intl.formatMessage(messages.multipleValueLable)}
-                        name={`attribute:${attribute.label}`}
-                        value={attribute.value}
-                        onChange={event =>
-                          onMultiChange(attribute.id, event.target.value)
-                        }
-                        allowCustomValues={!attribute.data.isRequired}
-                      />
-                    </BasicAttributeRow>
-                  )}
                 </React.Fragment>
               );
             })}

src/components/Attributes/fixtures.ts

@@ -16,7 +16,8 @@ const DROPDOWN_ATTRIBUTE: AttributeInput = {
         id: "fdinugiffgffd",
         name: "Dropdown First Value",
         reference: null,
-        slug: "dropdown-first-value"
+        slug: "dropdown-first-value",
+        richText: null
       },
       {
         __typename: "AttributeValue",
@@ -24,7 +25,8 @@ const DROPDOWN_ATTRIBUTE: AttributeInput = {
         id: "fdhfdhdihidff",
         name: "Dropdown Second Value",
         reference: null,
-        slug: "dropdown-second-value"
+        slug: "dropdown-second-value",
+        richText: null
       }
     ]
   },
@@ -44,7 +46,8 @@ const MULTISELECT_ATTRIBUTE: AttributeInput = {
         id: "terteretregtt",
         name: "Multiselect First Value",
         reference: null,
-        slug: "multiselect-first-value"
+        slug: "multiselect-first-value",
+        richText: null
       },
       {
         __typename: "AttributeValue",
@@ -52,7 +55,8 @@ const MULTISELECT_ATTRIBUTE: AttributeInput = {
         id: "tyueyryetopwr",
         name: "Multiselect Second Value",
         reference: null,
-        slug: "multiselect-second-value"
+        slug: "multiselect-second-value",
+        richText: null
       },
       {
         __typename: "AttributeValue",
@@ -60,7 +64,8 @@ const MULTISELECT_ATTRIBUTE: AttributeInput = {
         id: "truiwrtweirqd",
         name: "Multiselect Third Value",
         reference: null,
-        slug: "multiselect-third-value"
+        slug: "multiselect-third-value",
+        richText: null
       }
     ]
   },
@@ -84,7 +89,8 @@ const FILE_ATTRIBUTE: AttributeInput = {
         id: "gdghdgdhkkdae",
         name: "File First Value",
         reference: null,
-        slug: "file-first-value"
+        slug: "file-first-value",
+        richText: null
       }
     ]
   },
@@ -119,7 +125,8 @@ const REFERENCE_ATTRIBUTE: AttributeInput = {
         id: "vbnhgcvjhbvhj",
         name: "References First Value",
         reference: null,
-        slug: "references-first-value"
+        slug: "references-first-value",
+        richText: null
       },
       {
         __typename: "AttributeValue",
@@ -127,7 +134,8 @@ const REFERENCE_ATTRIBUTE: AttributeInput = {
         id: "gucngdfdfvdvd",
         name: "References Second Value",
         reference: null,
-        slug: "references-second-value"
+        slug: "references-second-value",
+        richText: null
       },
       {
         __typename: "AttributeValue",
@@ -135,7 +143,8 @@ const REFERENCE_ATTRIBUTE: AttributeInput = {
         id: "dfdfdsfdsfdse",
         name: "References Third Value",
         reference: null,
-        slug: "references-third-value"
+        slug: "references-third-value",
+        richText: null
       }
     ]
   },
@@ -144,11 +153,52 @@ const REFERENCE_ATTRIBUTE: AttributeInput = {
   value: []
 };
 
+const RICH_TEXT_ATTRIBUTE: AttributeInput = {
+  data: {
+    inputType: AttributeInputTypeEnum.RICH_TEXT,
+    isRequired: true,
+    values: [
+      {
+        __typename: "AttributeValue",
+        file: null,
+        id: "asdfafd",
+        name: "Some cool text",
+        reference: null,
+        slug: "text",
+        richText: JSON.stringify({
+          time: 1617788754145,
+          blocks: [{ data: { text: "Some cool text" }, type: "paragraph" }],
+          version: "2.19.3"
+        })
+      }
+    ],
+    selectedValues: [
+      {
+        __typename: "AttributeValue",
+        file: null,
+        id: "asdfafd",
+        name: "Some cool text",
+        reference: null,
+        slug: "text",
+        richText: JSON.stringify({
+          time: 1617788754145,
+          blocks: [{ data: { text: "Some cool text" }, type: "paragraph" }],
+          version: "2.19.3"
+        })
+      }
+    ]
+  },
+  id: "asdfafd",
+  label: "Text Attribute",
+  value: []
+};
+
 export const ATTRIBUTES: AttributeInput[] = [
   DROPDOWN_ATTRIBUTE,
   MULTISELECT_ATTRIBUTE,
   FILE_ATTRIBUTE,
-  REFERENCE_ATTRIBUTE
+  REFERENCE_ATTRIBUTE,
+  RICH_TEXT_ATTRIBUTE
 ];
 
 export const ATTRIBUTES_SELECTED: AttributeInput[] = [
@@ -174,5 +224,9 @@ export const ATTRIBUTES_SELECTED: AttributeInput[] = [
       REFERENCE_ATTRIBUTE.data.values[1].id,
       REFERENCE_ATTRIBUTE.data.values[2].id
     ]
+  },
+  {
+    ...RICH_TEXT_ATTRIBUTE,
+    value: [RICH_TEXT_ATTRIBUTE.data.values[0].richText]
   }
 ];

src/components/Attributes/utils.ts

@@ -0,0 +1,127 @@
+import { OutputData } from "@editorjs/editorjs";
+import { AttributeInput } from "@saleor/components/Attributes/Attributes";
+import { FileChoiceType } from "@saleor/components/FileUploadField";
+import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
+import { SortableChipsFieldValueType } from "@saleor/components/SortableChipsField";
+import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFragment";
+import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErrorWithAttributesFragment";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
+import { getProductErrorMessage } from "@saleor/utils/errors";
+import getPageErrorMessage from "@saleor/utils/errors/page";
+import { IntlShape } from "react-intl";
+
+export function getSingleChoices(
+  values: AttributeValueFragment[]
+): SingleAutocompleteChoiceType[] {
+  return values.map(value => ({
+    label: value.name,
+    value: value.slug
+  }));
+}
+
+export const getRichTextData = (attribute: AttributeInput): OutputData => {
+  const data = attribute.data.selectedValues?.[0]?.richText;
+  return data ? JSON.parse(data) : {};
+};
+
+export function getFileChoice(attribute: AttributeInput): FileChoiceType {
+  const attributeValue = attribute.value?.length > 0 && attribute.value[0];
+
+  const definedAttributeValue = attribute.data.values.find(
+    definedValue => definedValue.slug === attributeValue
+  );
+
+  if (definedAttributeValue) {
+    return {
+      file: definedAttributeValue.file,
+      label: definedAttributeValue.name,
+      value: definedAttributeValue.slug
+    };
+  }
+
+  return {
+    label: attributeValue,
+    value: attributeValue
+  };
+}
+
+export function getReferenceDisplayValue(
+  attribute: AttributeInput
+): SortableChipsFieldValueType[] {
+  if (!attribute.value) {
+    return [];
+  }
+
+  return attribute.value.map(attributeValue => {
+    const definedAttributeValue = attribute.data.values.find(
+      definedValue => definedValue.reference === attributeValue
+    );
+    // If value has been previously assigned, use it's data
+    if (!!definedAttributeValue) {
+      return {
+        label: definedAttributeValue.name,
+        value: definedAttributeValue.reference
+      };
+    }
+
+    const definedAttributeReference = attribute.data.references?.find(
+      reference => reference.value === attributeValue
+    );
+    // If value has not been yet assigned, use data of reference
+    if (!!definedAttributeReference) {
+      return definedAttributeReference;
+    }
+
+    return {
+      label: attributeValue,
+      value: attributeValue
+    };
+  });
+}
+
+export function getMultiChoices(
+  values: AttributeValueFragment[]
+): MultiAutocompleteChoiceType[] {
+  return values.map(value => ({
+    label: value.name,
+    value: value.slug
+  }));
+}
+
+export function getMultiDisplayValue(
+  attribute: AttributeInput
+): MultiAutocompleteChoiceType[] {
+  if (!attribute.value) {
+    return [];
+  }
+
+  return attribute.value.map(attributeValue => {
+    const definedAttributeValue = attribute.data.values.find(
+      definedValue => definedValue.slug === attributeValue
+    );
+    if (!!definedAttributeValue) {
+      return {
+        label: definedAttributeValue.name,
+        value: definedAttributeValue.slug
+      };
+    }
+
+    return {
+      label: attributeValue,
+      value: attributeValue
+    };
+  });
+}
+
+export function getErrorMessage(
+  err: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment,
+  intl: IntlShape
+): string {
+  switch (err?.__typename) {
+    case "ProductError":
+      return getProductErrorMessage(err, intl);
+    case "PageError":
+      return getPageErrorMessage(err, intl);
+  }
+}

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -29,7 +29,8 @@ const useStyles = makeStyles(
     root: {
       alignItems: "center",
       display: "flex",
-      marginBottom: theme.spacing(3)
+      marginBottom: theme.spacing(3),
+      wordBreak: "break-all"
     },
     subtitle: {
       alignItems: "center",

src/fragments/attributes.ts

@@ -13,6 +13,7 @@ export const attributeValueFragment = gql`
       ...FileFragment
     }
     reference
+    richText
   }
 `;
 

src/fragments/translations.ts

@@ -167,12 +167,16 @@ export const attributeTranslationFragment = gql`
     attribute {
       id
       name
+      inputType
       values {
         id
         name
+        richText
+        inputType
         translation(languageCode: $language) {
           id
           name
+          richText
         }
       }
     }

src/fragments/types/AttributeDetailsFragment.ts

@@ -34,6 +34,7 @@ export interface AttributeDetailsFragment_values {
   slug: string | null;
   file: AttributeDetailsFragment_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface AttributeDetailsFragment {

src/fragments/types/AttributeTranslationFragment.ts

@@ -3,6 +3,8 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { AttributeInputTypeEnum } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL fragment: AttributeTranslationFragment
 // ====================================================
@@ -17,12 +19,15 @@ export interface AttributeTranslationFragment_attribute_values_translation {
   __typename: "AttributeValueTranslation";
   id: string;
   name: string;
+  richText: any | null;
 }
 
 export interface AttributeTranslationFragment_attribute_values {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
+  richText: any | null;
+  inputType: AttributeInputTypeEnum | null;
   translation: AttributeTranslationFragment_attribute_values_translation | null;
 }
 
@@ -30,6 +35,7 @@ export interface AttributeTranslationFragment_attribute {
   __typename: "Attribute";
   id: string;
   name: string | null;
+  inputType: AttributeInputTypeEnum | null;
   values: (AttributeTranslationFragment_attribute_values | null)[] | null;
 }
 

src/fragments/types/AttributeValueFragment.ts

@@ -20,4 +20,5 @@ export interface AttributeValueFragment {
   slug: string | null;
   file: AttributeValueFragment_file | null;
   reference: string | null;
+  richText: any | null;
 }

src/fragments/types/PageAttributesFragment.ts

@@ -22,6 +22,7 @@ export interface PageAttributesFragment_attributes_attribute_values {
   slug: string | null;
   file: PageAttributesFragment_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageAttributesFragment_attributes_attribute {
@@ -48,6 +49,7 @@ export interface PageAttributesFragment_attributes_values {
   slug: string | null;
   file: PageAttributesFragment_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageAttributesFragment_attributes {
@@ -69,6 +71,7 @@ export interface PageAttributesFragment_pageType_attributes_values {
   slug: string | null;
   file: PageAttributesFragment_pageType_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageAttributesFragment_pageType_attributes {

src/fragments/types/PageDetailsFragment.ts

@@ -22,6 +22,7 @@ export interface PageDetailsFragment_attributes_attribute_values {
   slug: string | null;
   file: PageDetailsFragment_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageDetailsFragment_attributes_attribute {
@@ -48,6 +49,7 @@ export interface PageDetailsFragment_attributes_values {
   slug: string | null;
   file: PageDetailsFragment_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageDetailsFragment_attributes {
@@ -69,6 +71,7 @@ export interface PageDetailsFragment_pageType_attributes_values {
   slug: string | null;
   file: PageDetailsFragment_pageType_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageDetailsFragment_pageType_attributes {

src/fragments/types/Product.ts

@@ -22,6 +22,7 @@ export interface Product_attributes_attribute_values {
   slug: string | null;
   file: Product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface Product_attributes_attribute {
@@ -48,6 +49,7 @@ export interface Product_attributes_values {
   slug: string | null;
   file: Product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface Product_attributes {
@@ -69,6 +71,7 @@ export interface Product_productType_variantAttributes_values {
   slug: string | null;
   file: Product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface Product_productType_variantAttributes {

src/fragments/types/ProductVariant.ts

@@ -34,6 +34,7 @@ export interface ProductVariant_selectionAttributes_attribute_values {
   slug: string | null;
   file: ProductVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariant_selectionAttributes_attribute {
@@ -60,6 +61,7 @@ export interface ProductVariant_selectionAttributes_values {
   slug: string | null;
   file: ProductVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariant_selectionAttributes {
@@ -81,6 +83,7 @@ export interface ProductVariant_nonSelectionAttributes_attribute_values {
   slug: string | null;
   file: ProductVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariant_nonSelectionAttributes_attribute {
@@ -107,6 +110,7 @@ export interface ProductVariant_nonSelectionAttributes_values {
   slug: string | null;
   file: ProductVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariant_nonSelectionAttributes {

src/fragments/types/ProductVariantAttributesFragment.ts

@@ -22,6 +22,7 @@ export interface ProductVariantAttributesFragment_attributes_attribute_values {
   slug: string | null;
   file: ProductVariantAttributesFragment_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantAttributesFragment_attributes_attribute {
@@ -48,6 +49,7 @@ export interface ProductVariantAttributesFragment_attributes_values {
   slug: string | null;
   file: ProductVariantAttributesFragment_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantAttributesFragment_attributes {
@@ -69,6 +71,7 @@ export interface ProductVariantAttributesFragment_productType_variantAttributes_
   slug: string | null;
   file: ProductVariantAttributesFragment_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantAttributesFragment_productType_variantAttributes {

src/fragments/types/SelectedVariantAttributeFragment.ts

@@ -22,6 +22,7 @@ export interface SelectedVariantAttributeFragment_attribute_values {
   slug: string | null;
   file: SelectedVariantAttributeFragment_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SelectedVariantAttributeFragment_attribute {
@@ -48,6 +49,7 @@ export interface SelectedVariantAttributeFragment_values {
   slug: string | null;
   file: SelectedVariantAttributeFragment_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SelectedVariantAttributeFragment {

src/fragments/types/VariantAttributeFragment.ts

@@ -22,6 +22,7 @@ export interface VariantAttributeFragment_values {
   slug: string | null;
   file: VariantAttributeFragment_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantAttributeFragment {

src/pages/fixtures.ts

@@ -55,7 +55,8 @@ export const page: PageDetails_page = {
             slug: "suzanne-ellison",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6ODg=",
@@ -63,7 +64,8 @@ export const page: PageDetails_page = {
             slug: "dennis-perkins",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6ODk=",
@@ -71,7 +73,8 @@ export const page: PageDetails_page = {
             slug: "dylan-lamb",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           }
         ],
         __typename: "Attribute"
@@ -83,7 +86,8 @@ export const page: PageDetails_page = {
           slug: "dylan-lamb",
           reference: null,
           __typename: "AttributeValue",
-          file: null
+          file: null,
+          richText: null
         }
       ],
       __typename: "SelectedAttribute"
@@ -103,7 +107,8 @@ export const page: PageDetails_page = {
             slug: "security",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6OTE=",
@@ -111,7 +116,8 @@ export const page: PageDetails_page = {
             slug: "support",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6OTI=",
@@ -119,7 +125,8 @@ export const page: PageDetails_page = {
             slug: "medical",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6OTM=",
@@ -127,7 +134,8 @@ export const page: PageDetails_page = {
             slug: "general",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           }
         ],
         __typename: "Attribute"
@@ -139,7 +147,8 @@ export const page: PageDetails_page = {
           slug: "security",
           reference: null,
           __typename: "AttributeValue",
-          file: null
+          file: null,
+          richText: null
         }
       ],
       __typename: "SelectedAttribute"
@@ -173,7 +182,8 @@ export const page: PageDetails_page = {
             slug: "suzanne-ellison",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6ODg=",
@@ -181,7 +191,8 @@ export const page: PageDetails_page = {
             slug: "dennis-perkins",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6ODk=",
@@ -189,7 +200,8 @@ export const page: PageDetails_page = {
             slug: "dylan-lamb",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           }
         ],
         __typename: "Attribute"
@@ -207,7 +219,8 @@ export const page: PageDetails_page = {
             slug: "security",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6OTE=",
@@ -215,7 +228,8 @@ export const page: PageDetails_page = {
             slug: "support",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6OTI=",
@@ -223,7 +237,8 @@ export const page: PageDetails_page = {
             slug: "medical",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           },
           {
             id: "QXR0cmlidXRlVmFsdWU6OTM=",
@@ -231,7 +246,8 @@ export const page: PageDetails_page = {
             slug: "general",
             reference: null,
             __typename: "AttributeValue",
-            file: null
+            file: null,
+            richText: null
           }
         ],
         __typename: "Attribute"

src/pages/types/PageCreate.ts

@@ -30,6 +30,7 @@ export interface PageCreate_pageCreate_page_attributes_attribute_values {
   slug: string | null;
   file: PageCreate_pageCreate_page_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageCreate_pageCreate_page_attributes_attribute {
@@ -56,6 +57,7 @@ export interface PageCreate_pageCreate_page_attributes_values {
   slug: string | null;
   file: PageCreate_pageCreate_page_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageCreate_pageCreate_page_attributes {
@@ -77,6 +79,7 @@ export interface PageCreate_pageCreate_page_pageType_attributes_values {
   slug: string | null;
   file: PageCreate_pageCreate_page_pageType_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageCreate_pageCreate_page_pageType_attributes {

src/pages/types/PageDetails.ts

@@ -22,6 +22,7 @@ export interface PageDetails_page_attributes_attribute_values {
   slug: string | null;
   file: PageDetails_page_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageDetails_page_attributes_attribute {
@@ -48,6 +49,7 @@ export interface PageDetails_page_attributes_values {
   slug: string | null;
   file: PageDetails_page_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageDetails_page_attributes {
@@ -69,6 +71,7 @@ export interface PageDetails_page_pageType_attributes_values {
   slug: string | null;
   file: PageDetails_page_pageType_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageDetails_page_pageType_attributes {

src/pages/types/PageUpdate.ts

@@ -29,6 +29,7 @@ export interface PageUpdate_pageUpdate_page_attributes_attribute_values {
   slug: string | null;
   file: PageUpdate_pageUpdate_page_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageUpdate_pageUpdate_page_attributes_attribute {
@@ -55,6 +56,7 @@ export interface PageUpdate_pageUpdate_page_attributes_values {
   slug: string | null;
   file: PageUpdate_pageUpdate_page_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageUpdate_pageUpdate_page_attributes {
@@ -76,6 +78,7 @@ export interface PageUpdate_pageUpdate_page_pageType_attributes_values {
   slug: string | null;
   file: PageUpdate_pageUpdate_page_pageType_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface PageUpdate_pageUpdate_page_pageType_attributes {

src/productTypes/fixtures.ts

@@ -32,7 +32,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "john-doe",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -43,7 +44,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "milionare-pirate",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -67,7 +69,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "100g",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -78,7 +81,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "250g",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -89,7 +93,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "500g",
           sortOrder: 2,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -100,7 +105,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "1kg",
           sortOrder: 3,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -124,7 +130,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "saleor",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -148,7 +155,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "100g",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -159,7 +167,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "250g",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -170,7 +179,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "500g",
           sortOrder: 2,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -194,7 +204,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "arabica",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -205,7 +216,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "robusta",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -229,7 +241,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "round",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -240,7 +253,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "v-neck",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -251,7 +265,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "polo",
           sortOrder: 2,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -275,7 +290,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "blue",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -286,7 +302,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "white",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -310,7 +327,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "soft",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -321,7 +339,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "hard",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -332,7 +351,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "middle-soft",
           sortOrder: 2,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -343,7 +363,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "middle-hard",
           sortOrder: 3,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -354,7 +375,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "middle",
           sortOrder: 4,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -365,7 +387,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "very-hard",
           sortOrder: 5,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -389,7 +412,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "sour",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -400,7 +424,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "sweet",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -424,7 +449,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "english",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -435,7 +461,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "pirate",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -459,7 +486,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "mirumee-press",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -470,7 +498,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "saleor-publishing",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }
@@ -494,7 +523,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "xs",
           sortOrder: 0,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -505,7 +535,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "s",
           sortOrder: 1,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -516,7 +547,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "m",
           sortOrder: 2,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -527,7 +559,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "l",
           sortOrder: 3,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -538,7 +571,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "xl",
           sortOrder: 4,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         },
         {
           __typename: "AttributeValue" as "AttributeValue",
@@ -549,7 +583,8 @@ export const attributes: ProductType_productType_productAttributes[] = [
           slug: "xxl",
           sortOrder: 5,
           type: "STRING",
-          value: ""
+          value: "",
+          richText: null
         }
       ]
     }

src/products/components/ProductVariantPage/form.tsx

@@ -135,6 +135,8 @@ function useProductVariantUpdateForm(
     makeChangeHandler: makeMetadataChangeHandler
   } = useMetadataChangeTrigger();
 
+  // console.log({ attributes, initial });
+
   const handleChange: FormChange = (event, cb) => {
     form.change(event, cb);
     triggerChange();
@@ -177,6 +179,7 @@ function useProductVariantUpdateForm(
     attributes.data,
     triggerChange
   );
+
   const handleStockAdd = (id: string) => {
     triggerChange();
     stocks.add({

src/products/fixtures.ts

@@ -36,7 +36,8 @@ export const product: (
             id: "ptav47282",
             name: "portals",
             reference: null,
-            slug: "portals"
+            slug: "portals",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -44,7 +45,8 @@ export const product: (
             id: "ptav17253",
             name: "Baht",
             reference: null,
-            slug: "Baht"
+            slug: "Baht",
+            richText: null
           }
         ]
       },
@@ -55,7 +57,8 @@ export const product: (
           id: "ptav47282",
           name: "portals",
           reference: null,
-          slug: "portals"
+          slug: "portals",
+          richText: null
         }
       ]
     },
@@ -76,7 +79,8 @@ export const product: (
             id: "ptav31282",
             name: "payment",
             reference: null,
-            slug: "payment"
+            slug: "payment",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -84,7 +88,8 @@ export const product: (
             id: "ptav14907",
             name: "Auto Loan Account",
             reference: null,
-            slug: "Auto-Loan-Account"
+            slug: "Auto-Loan-Account",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -92,7 +97,8 @@ export const product: (
             id: "ptav27366",
             name: "Garden",
             reference: null,
-            slug: "Garden"
+            slug: "Garden",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -100,7 +106,8 @@ export const product: (
             id: "ptav11873",
             name: "override",
             reference: null,
-            slug: "override"
+            slug: "override",
+            richText: null
           }
         ]
       },
@@ -111,7 +118,8 @@ export const product: (
           id: "ptav14907",
           name: "Auto Loan Account",
           reference: null,
-          slug: "Auto-Loan-Account"
+          slug: "Auto-Loan-Account",
+          richText: null
         }
       ]
     }
@@ -292,7 +300,8 @@ export const product: (
             id: "gdghdgdhkkdae",
             name: "File First Value",
             reference: null,
-            slug: "file-first-value"
+            slug: "file-first-value",
+            richText: null
           }
         ]
       }
@@ -313,7 +322,8 @@ export const product: (
             id: "ptvav47282",
             name: "Black",
             reference: null,
-            slug: "black"
+            slug: "black",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -321,7 +331,8 @@ export const product: (
             id: "ptvav17253",
             name: "White",
             reference: null,
-            slug: "white"
+            slug: "white",
+            richText: null
           }
         ]
       }
@@ -350,7 +361,8 @@ export const product: (
             id: "gdghdgdhkkdae",
             name: "File First Value",
             reference: null,
-            slug: "file-first-value"
+            slug: "file-first-value",
+            richText: null
           }
         ]
       },
@@ -368,7 +380,8 @@ export const product: (
             id: "ptvav47282",
             name: "Black",
             reference: null,
-            slug: "black"
+            slug: "black",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -376,7 +389,8 @@ export const product: (
             id: "ptvav17253",
             name: "White",
             reference: null,
-            slug: "white"
+            slug: "white",
+            richText: null
           }
         ]
       }
@@ -832,7 +846,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6MQ==",
             name: "Pineapple",
             reference: null,
-            slug: "pineapple"
+            slug: "pineapple",
+            richText: null
           }
         ]
       }
@@ -940,7 +955,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6Mg==",
             name: "Coconut",
             reference: null,
-            slug: "coconut"
+            slug: "coconut",
+            richText: null
           }
         ]
       }
@@ -1048,7 +1064,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6Mw==",
             name: "Apple",
             reference: null,
-            slug: "apple"
+            slug: "apple",
+            richText: null
           }
         ]
       }
@@ -1157,7 +1174,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6NDk=",
             name: "Orange",
             reference: null,
-            slug: "orange"
+            slug: "orange",
+            richText: null
           }
         ]
       }
@@ -1265,7 +1283,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6NTA=",
             name: "Banana",
             reference: null,
-            slug: "banana"
+            slug: "banana",
+            richText: null
           }
         ]
       }
@@ -1373,7 +1392,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6NTE=",
             name: "Bean",
             reference: null,
-            slug: "bean"
+            slug: "bean",
+            richText: null
           }
         ]
       }
@@ -1481,7 +1501,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6NTI=",
             name: "Carrot",
             reference: null,
-            slug: "carrot"
+            slug: "carrot",
+            richText: null
           }
         ]
       }
@@ -1589,7 +1610,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6NTM=",
             name: "Sprouty",
             reference: null,
-            slug: "sprouty"
+            slug: "sprouty",
+            richText: null
           }
         ]
       }
@@ -1697,7 +1719,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -1805,7 +1828,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -1913,7 +1937,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -2021,7 +2046,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -2129,7 +2155,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -2237,7 +2264,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -2345,7 +2373,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -2453,7 +2482,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -2561,7 +2591,8 @@ export const products = (
             id: "QXR0cmlidXRlVmFsdWU6NzI=",
             name: "Cotton",
             reference: null,
-            slug: "cotton"
+            slug: "cotton",
+            richText: null
           }
         ]
       }
@@ -2758,7 +2789,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             id: "gdghdgdhkkdae",
             name: "File First Value",
             reference: null,
-            slug: "file-first-value"
+            slug: "file-first-value",
+            richText: null
           }
         ]
       },
@@ -2773,7 +2805,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
           id: "gdghdgdhkkdae",
           name: "File First Value",
           reference: null,
-          slug: "file-first-value"
+          slug: "file-first-value",
+          richText: null
         }
       ]
     }
@@ -3016,7 +3049,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             id: "ptav47282",
             name: "portals",
             reference: null,
-            slug: "portals"
+            slug: "portals",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -3024,7 +3058,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             id: "ptav17253",
             name: "Baht",
             reference: null,
-            slug: "Baht"
+            slug: "Baht",
+            richText: null
           }
         ]
       },
@@ -3035,7 +3070,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
           id: "ptav47282",
           name: "portals",
           reference: null,
-          slug: "portals"
+          slug: "portals",
+          richText: null
         }
       ]
     },
@@ -3056,7 +3092,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             id: "ptav31282",
             name: "payment",
             reference: null,
-            slug: "payment"
+            slug: "payment",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -3064,7 +3101,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             id: "ptav14907",
             name: "Auto Loan Account",
             reference: null,
-            slug: "Auto-Loan-Account"
+            slug: "Auto-Loan-Account",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -3072,7 +3110,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             id: "ptav27366",
             name: "Garden",
             reference: null,
-            slug: "Garden"
+            slug: "Garden",
+            richText: null
           },
           {
             __typename: "AttributeValue",
@@ -3080,7 +3119,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             id: "ptav11873",
             name: "override",
             reference: null,
-            slug: "override"
+            slug: "override",
+            richText: null
           }
         ]
       },
@@ -3091,7 +3131,8 @@ export const variant = (placeholderImage: string): ProductVariant => ({
           id: "ptav14907",
           name: "Auto Loan Account",
           reference: null,
-          slug: "Auto-Loan-Account"
+          slug: "Auto-Loan-Account",
+          richText: null
         }
       ]
     }

src/products/types/CreateMultipleVariantsData.ts

@@ -22,6 +22,7 @@ export interface CreateMultipleVariantsData_product_attributes_attribute_values
   slug: string | null;
   file: CreateMultipleVariantsData_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface CreateMultipleVariantsData_product_attributes_attribute {
@@ -48,6 +49,7 @@ export interface CreateMultipleVariantsData_product_attributes_values {
   slug: string | null;
   file: CreateMultipleVariantsData_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface CreateMultipleVariantsData_product_attributes {
@@ -69,6 +71,7 @@ export interface CreateMultipleVariantsData_product_productType_variantAttribute
   slug: string | null;
   file: CreateMultipleVariantsData_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface CreateMultipleVariantsData_product_productType_variantAttributes {

src/products/types/ProductChannelListingUpdate.ts

@@ -22,6 +22,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   slug: string | null;
   file: ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute {
@@ -48,6 +49,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   slug: string | null;
   file: ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes {
@@ -69,6 +71,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   slug: string | null;
   file: ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes {

src/products/types/ProductCreate.ts

@@ -29,6 +29,7 @@ export interface ProductCreate_productCreate_product_attributes_attribute_values
   slug: string | null;
   file: ProductCreate_productCreate_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductCreate_productCreate_product_attributes_attribute {
@@ -55,6 +56,7 @@ export interface ProductCreate_productCreate_product_attributes_values {
   slug: string | null;
   file: ProductCreate_productCreate_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductCreate_productCreate_product_attributes {
@@ -76,6 +78,7 @@ export interface ProductCreate_productCreate_product_productType_variantAttribut
   slug: string | null;
   file: ProductCreate_productCreate_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductCreate_productCreate_product_productType_variantAttributes {

src/products/types/ProductDetails.ts

@@ -22,6 +22,7 @@ export interface ProductDetails_product_attributes_attribute_values {
   slug: string | null;
   file: ProductDetails_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductDetails_product_attributes_attribute {
@@ -48,6 +49,7 @@ export interface ProductDetails_product_attributes_values {
   slug: string | null;
   file: ProductDetails_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductDetails_product_attributes {
@@ -69,6 +71,7 @@ export interface ProductDetails_product_productType_variantAttributes_values {
   slug: string | null;
   file: ProductDetails_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductDetails_product_productType_variantAttributes {

src/products/types/ProductList.ts

@@ -90,6 +90,7 @@ export interface ProductList_products_edges_node_attributes_values {
   slug: string | null;
   file: ProductList_products_edges_node_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductList_products_edges_node_attributes {

src/products/types/ProductMediaCreate.ts

@@ -28,6 +28,7 @@ export interface ProductMediaCreate_productMediaCreate_product_attributes_attrib
   slug: string | null;
   file: ProductMediaCreate_productMediaCreate_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductMediaCreate_productMediaCreate_product_attributes_attribute {
@@ -54,6 +55,7 @@ export interface ProductMediaCreate_productMediaCreate_product_attributes_values
   slug: string | null;
   file: ProductMediaCreate_productMediaCreate_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductMediaCreate_productMediaCreate_product_attributes {
@@ -75,6 +77,7 @@ export interface ProductMediaCreate_productMediaCreate_product_productType_varia
   slug: string | null;
   file: ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductMediaCreate_productMediaCreate_product_productType_variantAttributes {

src/products/types/ProductMediaUpdate.ts

@@ -28,6 +28,7 @@ export interface ProductMediaUpdate_productMediaUpdate_product_attributes_attrib
   slug: string | null;
   file: ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductMediaUpdate_productMediaUpdate_product_attributes_attribute {
@@ -54,6 +55,7 @@ export interface ProductMediaUpdate_productMediaUpdate_product_attributes_values
   slug: string | null;
   file: ProductMediaUpdate_productMediaUpdate_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductMediaUpdate_productMediaUpdate_product_attributes {
@@ -75,6 +77,7 @@ export interface ProductMediaUpdate_productMediaUpdate_product_productType_varia
   slug: string | null;
   file: ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes {

src/products/types/ProductType.ts

@@ -22,6 +22,7 @@ export interface ProductType_productType_productAttributes_values {
   slug: string | null;
   file: ProductType_productType_productAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductType_productType_productAttributes {

src/products/types/ProductUpdate.ts

@@ -29,6 +29,7 @@ export interface ProductUpdate_productUpdate_product_attributes_attribute_values
   slug: string | null;
   file: ProductUpdate_productUpdate_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductUpdate_productUpdate_product_attributes_attribute {
@@ -55,6 +56,7 @@ export interface ProductUpdate_productUpdate_product_attributes_values {
   slug: string | null;
   file: ProductUpdate_productUpdate_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductUpdate_productUpdate_product_attributes {
@@ -76,6 +78,7 @@ export interface ProductUpdate_productUpdate_product_productType_variantAttribut
   slug: string | null;
   file: ProductUpdate_productUpdate_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductUpdate_productUpdate_product_productType_variantAttributes {

src/products/types/ProductVariantChannelListingUpdate.ts

@@ -34,6 +34,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   slug: string | null;
   file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute {
@@ -60,6 +61,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   slug: string | null;
   file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes {
@@ -81,6 +83,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   slug: string | null;
   file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute {
@@ -107,6 +110,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   slug: string | null;
   file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes {

src/products/types/ProductVariantCreateData.ts

@@ -41,6 +41,7 @@ export interface ProductVariantCreateData_product_productType_selectionVariantAt
   slug: string | null;
   file: ProductVariantCreateData_product_productType_selectionVariantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantCreateData_product_productType_selectionVariantAttributes {
@@ -67,6 +68,7 @@ export interface ProductVariantCreateData_product_productType_nonSelectionVarian
   slug: string | null;
   file: ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes {

src/products/types/ProductVariantDetails.ts

@@ -34,6 +34,7 @@ export interface ProductVariantDetails_productVariant_selectionAttributes_attrib
   slug: string | null;
   file: ProductVariantDetails_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantDetails_productVariant_selectionAttributes_attribute {
@@ -60,6 +61,7 @@ export interface ProductVariantDetails_productVariant_selectionAttributes_values
   slug: string | null;
   file: ProductVariantDetails_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantDetails_productVariant_selectionAttributes {
@@ -81,6 +83,7 @@ export interface ProductVariantDetails_productVariant_nonSelectionAttributes_att
   slug: string | null;
   file: ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute {
@@ -107,6 +110,7 @@ export interface ProductVariantDetails_productVariant_nonSelectionAttributes_val
   slug: string | null;
   file: ProductVariantDetails_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantDetails_productVariant_nonSelectionAttributes {

src/products/types/ProductVariantReorder.ts

@@ -28,6 +28,7 @@ export interface ProductVariantReorder_productVariantReorder_product_attributes_
   slug: string | null;
   file: ProductVariantReorder_productVariantReorder_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantReorder_productVariantReorder_product_attributes_attribute {
@@ -54,6 +55,7 @@ export interface ProductVariantReorder_productVariantReorder_product_attributes_
   slug: string | null;
   file: ProductVariantReorder_productVariantReorder_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantReorder_productVariantReorder_product_attributes {
@@ -75,6 +77,7 @@ export interface ProductVariantReorder_productVariantReorder_product_productType
   slug: string | null;
   file: ProductVariantReorder_productVariantReorder_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantReorder_productVariantReorder_product_productType_variantAttributes {

src/products/types/ProductVariantSetDefault.ts

@@ -28,6 +28,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product_attri
   slug: string | null;
   file: ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute {
@@ -54,6 +55,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product_attri
   slug: string | null;
   file: ProductVariantSetDefault_productVariantSetDefault_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes {
@@ -75,6 +77,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product_produ
   slug: string | null;
   file: ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes {

src/products/types/SimpleProductUpdate.ts

@@ -29,6 +29,7 @@ export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_
   slug: string | null;
   file: SimpleProductUpdate_productUpdate_product_attributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_attributes_attribute {
@@ -55,6 +56,7 @@ export interface SimpleProductUpdate_productUpdate_product_attributes_values {
   slug: string | null;
   file: SimpleProductUpdate_productUpdate_product_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_attributes {
@@ -76,6 +78,7 @@ export interface SimpleProductUpdate_productUpdate_product_productType_variantAt
   slug: string | null;
   file: SimpleProductUpdate_productUpdate_product_productType_variantAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes {
@@ -316,6 +319,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_selecti
   slug: string | null;
   file: SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute {
@@ -342,6 +346,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_selecti
   slug: string | null;
   file: SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes {
@@ -363,6 +368,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSele
   slug: string | null;
   file: SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute {
@@ -389,6 +395,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSele
   slug: string | null;
   file: SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes {
@@ -599,6 +606,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_s
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute {
@@ -625,6 +633,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_s
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes {
@@ -646,6 +655,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_n
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute {
@@ -672,6 +682,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_n
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes {
@@ -881,6 +892,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_s
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute {
@@ -907,6 +919,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_s
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes {
@@ -928,6 +941,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_n
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute {
@@ -954,6 +968,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_n
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes {
@@ -1164,6 +1179,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_s
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute {
@@ -1190,6 +1206,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_s
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes {
@@ -1211,6 +1228,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_n
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute {
@@ -1237,6 +1255,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_n
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes {

src/products/types/VariantCreate.ts

@@ -41,6 +41,7 @@ export interface VariantCreate_productVariantCreate_productVariant_selectionAttr
   slug: string | null;
   file: VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute {
@@ -67,6 +68,7 @@ export interface VariantCreate_productVariantCreate_productVariant_selectionAttr
   slug: string | null;
   file: VariantCreate_productVariantCreate_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes {
@@ -88,6 +90,7 @@ export interface VariantCreate_productVariantCreate_productVariant_nonSelectionA
   slug: string | null;
   file: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute {
@@ -114,6 +117,7 @@ export interface VariantCreate_productVariantCreate_productVariant_nonSelectionA
   slug: string | null;
   file: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes {

src/products/types/VariantMediaAssign.ts

@@ -40,6 +40,7 @@ export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionA
   slug: string | null;
   file: VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_attribute {
@@ -66,6 +67,7 @@ export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionA
   slug: string | null;
   file: VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes {
@@ -87,6 +89,7 @@ export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelecti
   slug: string | null;
   file: VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_attribute {
@@ -113,6 +116,7 @@ export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelecti
   slug: string | null;
   file: VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes {

src/products/types/VariantMediaUnassign.ts

@@ -40,6 +40,7 @@ export interface VariantMediaUnassign_variantMediaUnassign_productVariant_select
   slug: string | null;
   file: VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_attribute {
@@ -66,6 +67,7 @@ export interface VariantMediaUnassign_variantMediaUnassign_productVariant_select
   slug: string | null;
   file: VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes {
@@ -87,6 +89,7 @@ export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSel
   slug: string | null;
   file: VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_attribute {
@@ -113,6 +116,7 @@ export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSel
   slug: string | null;
   file: VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes {

src/products/types/VariantUpdate.ts

@@ -41,6 +41,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_selectionAttr
   slug: string | null;
   file: VariantUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute {
@@ -67,6 +68,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_selectionAttr
   slug: string | null;
   file: VariantUpdate_productVariantUpdate_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_selectionAttributes {
@@ -88,6 +90,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionA
   slug: string | null;
   file: VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute {
@@ -114,6 +117,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionA
   slug: string | null;
   file: VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes {
@@ -324,6 +328,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_selecti
   slug: string | null;
   file: VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute {
@@ -350,6 +355,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_selecti
   slug: string | null;
   file: VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes {
@@ -371,6 +377,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSele
   slug: string | null;
   file: VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute {
@@ -397,6 +404,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSele
   slug: string | null;
   file: VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes {

src/searches/types/SearchPageTypes.ts

@@ -22,6 +22,7 @@ export interface SearchPageTypes_search_edges_node_attributes_values {
   slug: string | null;
   file: SearchPageTypes_search_edges_node_attributes_values_file | null;
   reference: string | null;
+  richText: any | null;
 }
 
 export interface SearchPageTypes_search_edges_node_attributes {

src/searches/types/SearchProductTypes.ts

@@ -1,5 +1,6 @@
 /* tslint:disable */
 /* eslint-disable */
+// @generated
 // This file was automatically generated and should not be edited.
 
 // ====================================================

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

@@ -61,7 +61,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
           <div
             class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
           >
-            4 Attributes
+            5 Attributes
           </div>
         </div>
         <button
@@ -263,7 +263,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
           data-test="attribute-value"
         >
           <div
-            class="Attributes-fileField-id"
+            class="AttributeRow-fileField-id"
           >
             <div>
               <button
@@ -327,6 +327,45 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div />
       </div>
+      <hr
+        class="Hr-root-id"
+      />
+      <div
+        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
+      >
+        <div
+          class="BasicAttributeRow-attributeSectionLabel-id"
+          data-test="attribute-label"
+        >
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Text Attribute
+          </div>
+        </div>
+        <div
+          data-test="attribute-value"
+        >
+          <div
+            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            data-test="richTextEditor"
+            data-test-id="attribute:Text Attribute"
+          >
+            <label
+              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
+              data-shrink="true"
+            >
+              Value
+            </label>
+            <div
+              class="RichTextEditor-editor-id RichTextEditor-root-id"
+            />
+            <p
+              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -369,7 +408,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
           <div
             class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
           >
-            4 Attributes
+            5 Attributes
           </div>
         </div>
         <button
@@ -573,7 +612,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
           data-test="attribute-value"
         >
           <div
-            class="Attributes-fileField-id"
+            class="AttributeRow-fileField-id"
           >
             <div>
               <button
@@ -639,6 +678,45 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div />
       </div>
+      <hr
+        class="Hr-root-id"
+      />
+      <div
+        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
+      >
+        <div
+          class="BasicAttributeRow-attributeSectionLabel-id"
+          data-test="attribute-label"
+        >
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Text Attribute
+          </div>
+        </div>
+        <div
+          data-test="attribute-value"
+        >
+          <div
+            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            data-test="richTextEditor"
+            data-test-id="attribute:Text Attribute"
+          >
+            <label
+              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
+              data-shrink="true"
+            >
+              Value
+            </label>
+            <div
+              class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
+            />
+            <p
+              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -681,7 +759,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
           <div
             class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
           >
-            4 Attributes
+            5 Attributes
           </div>
         </div>
         <button
@@ -950,7 +1028,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
           data-test="attribute-value"
         >
           <div
-            class="Attributes-fileField-id"
+            class="AttributeRow-fileField-id"
           >
             <div
               class="FileUploadField-uploadFileContent-id"
@@ -1211,6 +1289,45 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
           </div>
         </div>
       </div>
+      <hr
+        class="Hr-root-id"
+      />
+      <div
+        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
+      >
+        <div
+          class="BasicAttributeRow-attributeSectionLabel-id"
+          data-test="attribute-label"
+        >
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Text Attribute
+          </div>
+        </div>
+        <div
+          data-test="attribute-value"
+        >
+          <div
+            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            data-test="richTextEditor"
+            data-test-id="attribute:Text Attribute"
+          >
+            <label
+              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
+              data-shrink="true"
+            >
+              Value
+            </label>
+            <div
+              class="RichTextEditor-editor-id RichTextEditor-root-id"
+            />
+            <p
+              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -36898,7 +37015,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0\\",\\"name\\":\\"John Doe\\",\\"reference\\":null,\\"slug\\":\\"john-doe\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1\\",\\"name\\":\\"Milionare Pirate\\",\\"reference\\":null,\\"slug\\":\\"milionare-pirate\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0\\",\\"name\\":\\"John Doe\\",\\"reference\\":null,\\"slug\\":\\"john-doe\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1\\",\\"name\\":\\"Milionare Pirate\\",\\"reference\\":null,\\"slug\\":\\"milionare-pirate\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -36971,7 +37088,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo2"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1\\",\\"name\\":\\"100g\\",\\"reference\\":null,\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2\\",\\"name\\":\\"250g\\",\\"reference\\":null,\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3\\",\\"name\\":\\"500g\\",\\"reference\\":null,\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4\\",\\"name\\":\\"1kg\\",\\"reference\\":null,\\"slug\\":\\"1kg\\",\\"sortOrder\\":3,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1\\",\\"name\\":\\"100g\\",\\"reference\\":null,\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2\\",\\"name\\":\\"250g\\",\\"reference\\":null,\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3\\",\\"name\\":\\"500g\\",\\"reference\\":null,\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4\\",\\"name\\":\\"1kg\\",\\"reference\\":null,\\"slug\\":\\"1kg\\",\\"sortOrder\\":3,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37044,7 +37161,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToz"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=\\",\\"name\\":\\"Saleor\\",\\"reference\\":null,\\"slug\\":\\"saleor\\",\\"sortOrder\\":0,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=\\",\\"name\\":\\"Saleor\\",\\"reference\\":null,\\"slug\\":\\"saleor\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37117,7 +37234,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo4"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx\\",\\"name\\":\\"100g\\",\\"reference\\":null,\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy\\",\\"name\\":\\"250g\\",\\"reference\\":null,\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz\\",\\"name\\":\\"500g\\",\\"reference\\":null,\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx\\",\\"name\\":\\"100g\\",\\"reference\\":null,\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy\\",\\"name\\":\\"250g\\",\\"reference\\":null,\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz\\",\\"name\\":\\"500g\\",\\"reference\\":null,\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37190,7 +37307,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo1"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz\\",\\"name\\":\\"Arabica\\",\\"reference\\":null,\\"slug\\":\\"arabica\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0\\",\\"name\\":\\"Robusta\\",\\"reference\\":null,\\"slug\\":\\"robusta\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz\\",\\"name\\":\\"Arabica\\",\\"reference\\":null,\\"slug\\":\\"arabica\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0\\",\\"name\\":\\"Robusta\\",\\"reference\\":null,\\"slug\\":\\"robusta\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37263,7 +37380,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToy"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=\\",\\"name\\":\\"Round\\",\\"reference\\":null,\\"slug\\":\\"round\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=\\",\\"name\\":\\"V-Neck\\",\\"reference\\":null,\\"slug\\":\\"v-neck\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=\\",\\"name\\":\\"Polo\\",\\"reference\\":null,\\"slug\\":\\"polo\\",\\"sortOrder\\":2,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=\\",\\"name\\":\\"Round\\",\\"reference\\":null,\\"slug\\":\\"round\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=\\",\\"name\\":\\"V-Neck\\",\\"reference\\":null,\\"slug\\":\\"v-neck\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=\\",\\"name\\":\\"Polo\\",\\"reference\\":null,\\"slug\\":\\"polo\\",\\"sortOrder\\":2,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37336,7 +37453,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTox"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=\\",\\"name\\":\\"Blue\\",\\"reference\\":null,\\"slug\\":\\"blue\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=\\",\\"name\\":\\"White\\",\\"reference\\":null,\\"slug\\":\\"white\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=\\",\\"name\\":\\"Blue\\",\\"reference\\":null,\\"slug\\":\\"blue\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=\\",\\"name\\":\\"White\\",\\"reference\\":null,\\"slug\\":\\"white\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37409,7 +37526,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMg=="
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw\\",\\"name\\":\\"Soft\\",\\"reference\\":null,\\"slug\\":\\"soft\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx\\",\\"name\\":\\"Hard\\",\\"reference\\":null,\\"slug\\":\\"hard\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy\\",\\"name\\":\\"Middle soft\\",\\"reference\\":null,\\"slug\\":\\"middle-soft\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz\\",\\"name\\":\\"Middle hard\\",\\"reference\\":null,\\"slug\\":\\"middle-hard\\",\\"sortOrder\\":3,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0\\",\\"name\\":\\"Middle\\",\\"reference\\":null,\\"slug\\":\\"middle\\",\\"sortOrder\\":4,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1\\",\\"name\\":\\"Very hard\\",\\"reference\\":null,\\"slug\\":\\"very-hard\\",\\"sortOrder\\":5,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw\\",\\"name\\":\\"Soft\\",\\"reference\\":null,\\"slug\\":\\"soft\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx\\",\\"name\\":\\"Hard\\",\\"reference\\":null,\\"slug\\":\\"hard\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy\\",\\"name\\":\\"Middle soft\\",\\"reference\\":null,\\"slug\\":\\"middle-soft\\",\\"sortOrder\\":2,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz\\",\\"name\\":\\"Middle hard\\",\\"reference\\":null,\\"slug\\":\\"middle-hard\\",\\"sortOrder\\":3,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0\\",\\"name\\":\\"Middle\\",\\"reference\\":null,\\"slug\\":\\"middle\\",\\"sortOrder\\":4,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1\\",\\"name\\":\\"Very hard\\",\\"reference\\":null,\\"slug\\":\\"very-hard\\",\\"sortOrder\\":5,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37482,7 +37599,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo3"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5\\",\\"name\\":\\"Sour\\",\\"reference\\":null,\\"slug\\":\\"sour\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw\\",\\"name\\":\\"Sweet\\",\\"reference\\":null,\\"slug\\":\\"sweet\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5\\",\\"name\\":\\"Sour\\",\\"reference\\":null,\\"slug\\":\\"sour\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw\\",\\"name\\":\\"Sweet\\",\\"reference\\":null,\\"slug\\":\\"sweet\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37555,7 +37672,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4\\",\\"name\\":\\"English\\",\\"reference\\":null,\\"slug\\":\\"english\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5\\",\\"name\\":\\"Pirate\\",\\"reference\\":null,\\"slug\\":\\"pirate\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4\\",\\"name\\":\\"English\\",\\"reference\\":null,\\"slug\\":\\"english\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5\\",\\"name\\":\\"Pirate\\",\\"reference\\":null,\\"slug\\":\\"pirate\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37628,7 +37745,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2\\",\\"name\\":\\"Mirumee Press\\",\\"reference\\":null,\\"slug\\":\\"mirumee-press\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3\\",\\"name\\":\\"Saleor Publishing\\",\\"reference\\":null,\\"slug\\":\\"saleor-publishing\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2\\",\\"name\\":\\"Mirumee Press\\",\\"reference\\":null,\\"slug\\":\\"mirumee-press\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3\\",\\"name\\":\\"Saleor Publishing\\",\\"reference\\":null,\\"slug\\":\\"saleor-publishing\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -37701,7 +37818,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo0"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=\\",\\"name\\":\\"XS\\",\\"reference\\":null,\\"slug\\":\\"xs\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=\\",\\"name\\":\\"S\\",\\"reference\\":null,\\"slug\\":\\"s\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=\\",\\"name\\":\\"M\\",\\"reference\\":null,\\"slug\\":\\"m\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw\\",\\"name\\":\\"L\\",\\"reference\\":null,\\"slug\\":\\"l\\",\\"sortOrder\\":3,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx\\",\\"name\\":\\"XL\\",\\"reference\\":null,\\"slug\\":\\"xl\\",\\"sortOrder\\":4,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy\\",\\"name\\":\\"XXL\\",\\"reference\\":null,\\"slug\\":\\"xxl\\",\\"sortOrder\\":5,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=\\",\\"name\\":\\"XS\\",\\"reference\\":null,\\"slug\\":\\"xs\\",\\"sortOrder\\":0,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=\\",\\"name\\":\\"S\\",\\"reference\\":null,\\"slug\\":\\"s\\",\\"sortOrder\\":1,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=\\",\\"name\\":\\"M\\",\\"reference\\":null,\\"slug\\":\\"m\\",\\"sortOrder\\":2,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw\\",\\"name\\":\\"L\\",\\"reference\\":null,\\"slug\\":\\"l\\",\\"sortOrder\\":3,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx\\",\\"name\\":\\"XL\\",\\"reference\\":null,\\"slug\\":\\"xl\\",\\"sortOrder\\":4,\\"value\\":\\"\\",\\"richText\\":null},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy\\",\\"name\\":\\"XXL\\",\\"reference\\":null,\\"slug\\":\\"xxl\\",\\"sortOrder\\":5,\\"value\\":\\"\\",\\"richText\\":null}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -165730,7 +165847,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                   data-test="attribute-value"
                 >
                   <div
-                    class="Attributes-fileField-id"
+                    class="AttributeRow-fileField-id"
                   >
                     <div>
                       <button
@@ -166951,7 +167068,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                   data-test="attribute-value"
                 >
                   <div
-                    class="Attributes-fileField-id"
+                    class="AttributeRow-fileField-id"
                   >
                     <div>
                       <button
@@ -168172,7 +168289,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                   data-test="attribute-value"
                 >
                   <div
-                    class="Attributes-fileField-id"
+                    class="AttributeRow-fileField-id"
                   >
                     <div>
                       <button
@@ -170365,7 +170482,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                   data-test="attribute-value"
                 >
                   <div
-                    class="Attributes-fileField-id"
+                    class="AttributeRow-fileField-id"
                   >
                     <div>
                       <button
@@ -196967,7 +197084,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   data-test="attribute-value"
                 >
                   <div
-                    class="Attributes-fileField-id"
+                    class="AttributeRow-fileField-id"
                   >
                     <div
                       class="FileUploadField-uploadFileContent-id"
@@ -198757,7 +198874,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   data-test="attribute-value"
                 >
                   <div
-                    class="Attributes-fileField-id"
+                    class="AttributeRow-fileField-id"
                   >
                     <div
                       class="FileUploadField-uploadFileContent-id"
@@ -200315,7 +200432,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   data-test="attribute-value"
                 >
                   <div
-                    class="Attributes-fileField-id"
+                    class="AttributeRow-fileField-id"
                   >
                     <div
                       class="FileUploadField-uploadFileContent-id"

src/translations/components/TranslationFields/TranslationFields.tsx

@@ -20,7 +20,7 @@ import TranslationFieldsLong from "./TranslationFieldsLong";
 import TranslationFieldsRich from "./TranslationFieldsRich";
 import TranslationFieldsShort from "./TranslationFieldsShort";
 
-interface TranslationField {
+export interface TranslationField {
   displayName: string;
   name: string;
   translation: string;
@@ -108,7 +108,6 @@ const useStyles = makeStyles(
 const TranslationFields: React.FC<TranslationFieldsProps> = props => {
   const {
     activeField,
-
     disabled,
     fields,
     initialState,

src/translations/components/TranslationsProductTypesPage/TranslationsProductTypesPage.tsx

@@ -8,8 +8,11 @@ import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { LanguageCodeEnum } from "../../../types/globalTypes";
+import {
-import TranslationFields from "../TranslationFields";
+  AttributeInputTypeEnum,
+  LanguageCodeEnum
+} from "../../../types/globalTypes";
+import TranslationFields, { TranslationField } from "../TranslationFields";
 
 export interface TranslationsProductTypesPageProps
   extends TranslationsEntitiesPageProps {
@@ -18,7 +21,8 @@ export interface TranslationsProductTypesPageProps
 
 export const fieldNames = {
   attribute: "attribute",
-  value: "attributeValue"
+  value: "attributeValue",
+  richTextValue: "attributeRichTextValue"
 };
 
 const TranslationsProductTypesPage: React.FC<TranslationsProductTypesPageProps> = ({
@@ -76,8 +80,15 @@ const TranslationsProductTypesPage: React.FC<TranslationsProductTypesPageProps>
             value: data?.attribute?.name
           },
           ...(data?.attribute?.values?.map(
-            (attributeValue, attributeValueIndex) => ({
+            (attributeValue, attributeValueIndex) => {
-              displayName: intl.formatMessage(
+              const isRichText =
+                attributeValue?.inputType === AttributeInputTypeEnum.RICH_TEXT;
+              const displayName = isRichText
+                ? intl.formatMessage({
+                    defaultMessage: "Text",
+                    description: "attribute richtext value"
+                  })
+                : intl.formatMessage(
                     {
                       defaultMessage: "Value {number}",
                       description: "attribute values"
@@ -85,12 +96,25 @@ const TranslationsProductTypesPage: React.FC<TranslationsProductTypesPageProps>
                     {
                       number: attributeValueIndex + 1
                     }
-              ),
+                  );
-              name: fieldNames.value + ":" + attributeValue.id,
+
-              translation: attributeValue?.translation?.name || null,
+              return {
-              type: "short" as "short",
+                displayName,
-              value: attributeValue?.name
+                name: `${
-            })
+                  isRichText ? fieldNames.richTextValue : fieldNames.value
+                }:${attributeValue.id}`,
+                translation:
+                  (isRichText
+                    ? attributeValue?.translation?.richText
+                    : attributeValue?.translation?.name) || null,
+                type: (isRichText
+                  ? "rich"
+                  : "short") as TranslationField["type"],
+                value: isRichText
+                  ? attributeValue?.richText
+                  : attributeValue?.name
+              };
+            }
           ) || [])
         ]}
         saveButtonState={saveButtonState}

src/translations/mutations.ts

@@ -265,7 +265,7 @@ export const TypedUpdateAttributeTranslations = TypedMutation<
 const updateAttributeValueTranslations = gql`
   mutation UpdateAttributeValueTranslations(
     $id: ID!
-    $input: NameTranslationInput!
+    $input: AttributeValueTranslationInput!
     $language: LanguageCodeEnum!
   ) {
     attributeValueTranslate(id: $id, input: $input, languageCode: $language) {
@@ -279,6 +279,7 @@ const updateAttributeValueTranslations = gql`
         translation(languageCode: $language) {
           id
           name
+          richText
         }
       }
     }

src/translations/types/AttributeTranslationDetails.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { LanguageCodeEnum } from "./../../types/globalTypes";
+import { LanguageCodeEnum, AttributeInputTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: AttributeTranslationDetails
@@ -23,12 +23,15 @@ export interface AttributeTranslationDetails_translation_AttributeTranslatableCo
   __typename: "AttributeValueTranslation";
   id: string;
   name: string;
+  richText: any | null;
 }
 
 export interface AttributeTranslationDetails_translation_AttributeTranslatableContent_attribute_values {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
+  richText: any | null;
+  inputType: AttributeInputTypeEnum | null;
   translation: AttributeTranslationDetails_translation_AttributeTranslatableContent_attribute_values_translation | null;
 }
 
@@ -36,6 +39,7 @@ export interface AttributeTranslationDetails_translation_AttributeTranslatableCo
   __typename: "Attribute";
   id: string;
   name: string | null;
+  inputType: AttributeInputTypeEnum | null;
   values: (AttributeTranslationDetails_translation_AttributeTranslatableContent_attribute_values | null)[] | null;
 }
 

src/translations/types/AttributeTranslations.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { LanguageCodeEnum } from "./../../types/globalTypes";
+import { LanguageCodeEnum, AttributeInputTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: AttributeTranslations
@@ -23,12 +23,15 @@ export interface AttributeTranslations_translations_edges_node_AttributeTranslat
   __typename: "AttributeValueTranslation";
   id: string;
   name: string;
+  richText: any | null;
 }
 
 export interface AttributeTranslations_translations_edges_node_AttributeTranslatableContent_attribute_values {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
+  richText: any | null;
+  inputType: AttributeInputTypeEnum | null;
   translation: AttributeTranslations_translations_edges_node_AttributeTranslatableContent_attribute_values_translation | null;
 }
 
@@ -36,6 +39,7 @@ export interface AttributeTranslations_translations_edges_node_AttributeTranslat
   __typename: "Attribute";
   id: string;
   name: string | null;
+  inputType: AttributeInputTypeEnum | null;
   values: (AttributeTranslations_translations_edges_node_AttributeTranslatableContent_attribute_values | null)[] | null;
 }
 

src/translations/types/UpdateAttributeValueTranslations.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { NameTranslationInput, LanguageCodeEnum } from "./../../types/globalTypes";
+import { AttributeValueTranslationInput, LanguageCodeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: UpdateAttributeValueTranslations
@@ -19,6 +19,7 @@ export interface UpdateAttributeValueTranslations_attributeValueTranslate_attrib
   __typename: "AttributeValueTranslation";
   id: string;
   name: string;
+  richText: any | null;
 }
 
 export interface UpdateAttributeValueTranslations_attributeValueTranslate_attributeValue {
@@ -40,6 +41,6 @@ export interface UpdateAttributeValueTranslations {
 
 export interface UpdateAttributeValueTranslationsVariables {
   id: string;
-  input: NameTranslationInput;
+  input: AttributeValueTranslationInput;
   language: LanguageCodeEnum;
 }

src/translations/views/TranslationsProductTypes.tsx

@@ -1,3 +1,4 @@
+import { OutputData } from "@editorjs/editorjs";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
@@ -7,10 +8,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { getMutationState, maybe } from "../../misc";
-import {
+import { LanguageCodeEnum } from "../../types/globalTypes";
-  LanguageCodeEnum,
-  NameTranslationInput
-} from "../../types/globalTypes";
 import TranslationsProductTypesPage, {
   fieldNames
 } from "../components/TranslationsProductTypesPage";
@@ -92,24 +90,27 @@ const TranslationsProductTypes: React.FC<TranslationsProductTypesProps> = ({
             updateAttributeValueTranslations,
             updateAttributeValueTranslationsOpts
           ) => {
-            const handleSubmit = (field: string, data: string) => {
+            const handleSubmit = (field: string, data: string | OutputData) => {
-              const input: NameTranslationInput = {};
               const [fieldName, fieldId] = field.split(":");
+
               if (fieldName === fieldNames.attribute) {
-                input.name = data;
                 updateAttributeTranslations({
                   variables: {
                     id: fieldId,
-                    input,
+                    input: { name: data as string },
                     language: languageCode
                   }
                 });
-              } else if (fieldName === fieldNames.value) {
+              } else if (
-                input.name = data;
+                [fieldNames.value, fieldNames.richTextValue].includes(fieldName)
+              ) {
+                const isRichText = fieldName === fieldNames.richTextValue;
                 updateAttributeValueTranslations({
                   variables: {
                     id: fieldId,
-                    input,
+                    input: isRichText
+                      ? { richText: JSON.stringify(data) }
+                      : { name: data as string },
                     language: languageCode
                   }
                 });

src/types/globalTypes.ts

@@ -90,6 +90,7 @@ export enum AttributeInputTypeEnum {
   FILE = "FILE",
   MULTISELECT = "MULTISELECT",
   REFERENCE = "REFERENCE",
+  RICH_TEXT = "RICH_TEXT",
 }
 
 export enum AttributeSortField {
@@ -1128,6 +1129,7 @@ export interface AttributeUpdateInput {
 export interface AttributeValueCreateInput {
   name: string;
   value?: string | null;
+  richText?: any | null;
 }
 
 export interface AttributeValueInput {
@@ -1136,6 +1138,12 @@ export interface AttributeValueInput {
   file?: string | null;
   contentType?: string | null;
   references?: string[] | null;
+  richText?: any | null;
+}
+
+export interface AttributeValueTranslationInput {
+  name?: string | null;
+  richText?: any | null;
 }
 
 export interface BulkAttributeValueInput {