diff --git a/cypress/apiRequests/Order.js b/cypress/apiRequests/Order.js
index e10dd1710..212255abf 100644
--- a/cypress/apiRequests/Order.js
+++ b/cypress/apiRequests/Order.js
@@ -1,3 +1,5 @@
+import { getDefaultAddress } from "./utils/Utils";
+
 export function markOrderAsPaid(orderId) {
   const mutation = `mutation{
     orderMarkAsPaid(id:"${orderId}"){
@@ -23,12 +25,19 @@ export function addProductToOrder(orderId, variantId, quantity = 1) {
   return cy.sendRequestWithQuery(mutation);
 }
 
-export function createDraftOrder(customerId, shippingMethodId, channelId) {
+export function createDraftOrder(
+  customerId,
+  shippingMethodId,
+  channelId,
+  address
+) {
   const mutation = `mutation{
     draftOrderCreate(input:{
       user:"${customerId}"
       shippingMethod:"${shippingMethodId}"
       channel: "${channelId}"
+      ${getDefaultAddress(address, "shippingAddress")}
+      ${getDefaultAddress(address, "billingAddress")}
     }){
       orderErrors{
         message
diff --git a/cypress/elements/orders/draft-order-selectors.js b/cypress/elements/orders/draft-order-selectors.js
index cfa1bc6c6..4b2fb1a21 100644
--- a/cypress/elements/orders/draft-order-selectors.js
+++ b/cypress/elements/orders/draft-order-selectors.js
@@ -6,5 +6,8 @@ export const DRAFT_ORDER_SELECTORS = {
   selectCustomerOption: "[data-test-type='option']",
   addShippingCarrierLink: "[data-test-id='add-shipping-carrier']",
   finalizeButton: "[data-test='button-bar-confirm']",
-  pageHeader: "[data-test-id='page-header']"
+  pageHeader: "[data-test-id='page-header']",
+  editShippingAddress: '[data-test-id="edit-shipping-address"]',
+  editBillingAddress: '[data-test-id="edit-billing-address"]',
+  customerEmail: '[data-test-id="customer-email"]'
 };
diff --git a/cypress/elements/shared/addressForm.js b/cypress/elements/shared/addressForm.js
new file mode 100644
index 000000000..5a8d7aa12
--- /dev/null
+++ b/cypress/elements/shared/addressForm.js
@@ -0,0 +1,13 @@
+export const ADDRESS_SELECTORS = {
+  firstName: '[name="firstName"]',
+  lastName: '[name="lastName"]',
+  companyName: '[name="companyName"]',
+  phone: '[name="phone"]',
+  streetAddress1: '[name="streetAddress1"]',
+  streetAddress2: '[name="streetAddress2"]',
+  city: '[name="city"]',
+  postalCode: '[name="postalCode"]',
+  country: '[data-test-id="address-edit-country-select-field"]',
+  countryArea: '[name="countryArea"]',
+  saveButton: '[data-test-id="order-address-edit-dialog-confirm-button"]'
+};
diff --git a/cypress/fixtures/addresses.json b/cypress/fixtures/addresses.json
index 820b814fe..12107df59 100644
--- a/cypress/fixtures/addresses.json
+++ b/cypress/fixtures/addresses.json
@@ -1,26 +1,16 @@
 {
-    "plAddress": {
-        "companyName": "Test3",
-        "streetAddress1": "Smolna",
-        "streetAddress2": "13/1",
-        "city": "Wrocław",
-        "postalCode": "53-346",
-        "country": "PL",
-        "countryArea": "Dolny Śląsk",
-        "phone": "123456787",
-        "currency": "PLN",
-        "countryFullName": "Poland"
-    },
-    "usAddress": {
-      "companyName": "Test3",
-      "streetAddress1": "Amber Prairie",
-      "streetAddress2": "483",
-      "city": "KIRKSHIRE",
-      "postalCode": "52216",
-      "country": "US",
-      "countryArea": "IA",
-      "currency": "USD",
-      "phone": "+12025550180",
-      "countryFullName": "United States of America"
+  "plAddress": {
+    "firstName": "test",
+    "lastName": "test",
+    "companyName": "Test3",
+    "streetAddress1": "Smolna",
+    "streetAddress2": "13/1",
+    "city": "Wrocław",
+    "postalCode": "53-346",
+    "country": "PL",
+    "countryArea": "Dolny Śląsk",
+    "phone": "123456787",
+    "currency": "PLN",
+    "countryFullName": "Poland"
   }
 }
\ No newline at end of file
diff --git a/cypress/integration/homePage/homePageAnalitics.js b/cypress/integration/homePage/homePageAnalitics.js
index feb6f7d92..f0762ed84 100644
--- a/cypress/integration/homePage/homePageAnalitics.js
+++ b/cypress/integration/homePage/homePageAnalitics.js
@@ -109,12 +109,12 @@ describe("Homepage analytics", () => {
     homePageUtils
       .getOrdersReadyToFulfill(defaultChannel.slug)
       .as("ordersReadyToFulfill");
-
     createReadyToFulfillOrder(
       customerId,
       shippingMethod.id,
       defaultChannel.id,
-      createdVariants
+      createdVariants,
+      addresses.plAddress
     );
     cy.get("@ordersReadyToFulfill").then(ordersReadyToFulfillBefore => {
       const allOrdersReadyToFulfill = ordersReadyToFulfillBefore + 1;
@@ -195,7 +195,8 @@ describe("Homepage analytics", () => {
       customerId,
       shippingMethod.id,
       defaultChannel.id,
-      createdVariants
+      createdVariants,
+      addresses.plAddress
     );
 
     cy.get("@salesAmount").then(salesAmount => {
@@ -227,7 +228,8 @@ describe("Homepage analytics", () => {
       customerId,
       shippingMethod.id,
       defaultChannel.id,
-      createdVariants
+      createdVariants,
+      addresses.plAddress
     );
 
     cy.get("@todaysOrders").then(ordersBefore => {
diff --git a/cypress/integration/orders/draftOrders.js b/cypress/integration/orders/draftOrders.js
index 43a9c2dcd..98e30938b 100644
--- a/cypress/integration/orders/draftOrders.js
+++ b/cypress/integration/orders/draftOrders.js
@@ -23,6 +23,7 @@ describe("Draft orders", () => {
 
   let defaultChannel;
   let warehouse;
+  let address;
 
   before(() => {
     cy.clearSessionData().loginUserViaRequest();
@@ -38,6 +39,7 @@ describe("Draft orders", () => {
         cy.fixture("addresses");
       })
       .then(addresses => {
+        address = addresses.plAddress;
         createCustomer(
           `${randomName}@example.com`,
           randomName,
@@ -81,7 +83,7 @@ describe("Draft orders", () => {
       .get(ORDERS_SELECTORS.createOrder)
       .click();
     selectChannelInPicker(defaultChannel.name);
-    finalizeDraftOrder(randomName).then(draftOrderNumber => {
+    finalizeDraftOrder(randomName, address).then(draftOrderNumber => {
       cy.visit(urlList.orders);
       cy.contains(ORDERS_SELECTORS.orderRow, draftOrderNumber).should(
         $order => {
diff --git a/cypress/integration/orders/orders.js b/cypress/integration/orders/orders.js
index 7422fdc40..184575e8f 100644
--- a/cypress/integration/orders/orders.js
+++ b/cypress/integration/orders/orders.js
@@ -26,6 +26,7 @@ describe("Orders", () => {
   let warehouse;
   let shippingMethod;
   let variantsList;
+  let address;
 
   before(() => {
     cy.clearSessionData().loginUserViaRequest();
@@ -33,8 +34,6 @@ describe("Orders", () => {
     deleteShippingStartsWith(startsWith);
     productsUtils.deleteProductsStartsWith(startsWith);
 
-    let address;
-
     getDefaultChannel()
       .then(channel => {
         defaultChannel = channel;
@@ -91,7 +90,7 @@ describe("Orders", () => {
       .get(ORDERS_SELECTORS.createOrder)
       .click();
     selectChannelInPicker(defaultChannel.name);
-    finalizeDraftOrder(randomName).then(draftOrderNumber => {
+    finalizeDraftOrder(randomName, address).then(draftOrderNumber => {
       cy.visit(urlList.orders);
       cy.contains(ORDERS_SELECTORS.orderRow, draftOrderNumber).click();
       cy.contains(ORDERS_SELECTORS.salesChannel, defaultChannel.name).should(
@@ -104,7 +103,8 @@ describe("Orders", () => {
       customerId: customer.id,
       channelId: defaultChannel.id,
       shippingMethodId: shippingMethod.id,
-      variantsList
+      variantsList,
+      address
     }).then(order => {
       cy.visit(urlList.orders);
       cy.contains(ORDERS_SELECTORS.orderRow, order.number).click();
diff --git a/cypress/steps/draftOrderSteps.js b/cypress/steps/draftOrderSteps.js
index a8b98909c..e5753351b 100644
--- a/cypress/steps/draftOrderSteps.js
+++ b/cypress/steps/draftOrderSteps.js
@@ -1,42 +1,47 @@
 import { ASSIGN_PRODUCTS_SELECTORS } from "../elements/catalog/products/assign-products-selectors";
 import { DRAFT_ORDER_SELECTORS } from "../elements/orders/draft-order-selectors";
 import { SELECT_SHIPPING_METHOD_FORM } from "../elements/shipping/select-shipping-method-form";
+import { fillUpAddressForm } from "./shared/addressForm";
 
-export function finalizeDraftOrder(name) {
-  return cy
-    .get(DRAFT_ORDER_SELECTORS.addProducts)
+export function finalizeDraftOrder(name, address) {
+  cy.get(DRAFT_ORDER_SELECTORS.addProducts)
     .click()
     .get(ASSIGN_PRODUCTS_SELECTORS.searchInput)
-    .type(name)
-    .then(() => {
-      cy.contains(ASSIGN_PRODUCTS_SELECTORS.tableRow, name)
-        .find(ASSIGN_PRODUCTS_SELECTORS.checkbox)
-        .click()
-        .get(ASSIGN_PRODUCTS_SELECTORS.submitButton)
-        .click()
-        .get(DRAFT_ORDER_SELECTORS.editCustomerButton)
-        .click()
-        .get(DRAFT_ORDER_SELECTORS.selectCustomer)
-        .type(name);
-      cy.contains(DRAFT_ORDER_SELECTORS.selectCustomerOption, name)
-        .click()
-        .get(DRAFT_ORDER_SELECTORS.addShippingCarrierLink)
-        .click()
-        .get(SELECT_SHIPPING_METHOD_FORM.selectShippingMethod)
-        .click()
-        .get(SELECT_SHIPPING_METHOD_FORM.shippingMethodOption)
-        .first()
-        .click();
-      cy.addAliasToGraphRequest("OrderShippingMethodUpdate")
-        .get(SELECT_SHIPPING_METHOD_FORM.submitButton)
-        .click();
-      cy.wait("@OrderShippingMethodUpdate");
-      cy.getTextFromElement(DRAFT_ORDER_SELECTORS.pageHeader).as(
-        "draftOrderNumber"
-      );
-      cy.addAliasToGraphRequest("OrderDraftFinalize");
-      cy.get(DRAFT_ORDER_SELECTORS.finalizeButton).click();
-      cy.wait("@OrderDraftFinalize");
-      return cy.get("@draftOrderNumber");
-    });
+    .type(name);
+  cy.contains(ASSIGN_PRODUCTS_SELECTORS.tableRow, name)
+    .find(ASSIGN_PRODUCTS_SELECTORS.checkbox)
+    .click()
+    .get(ASSIGN_PRODUCTS_SELECTORS.submitButton)
+    .click()
+    .get(DRAFT_ORDER_SELECTORS.editCustomerButton)
+    .click()
+    .get(DRAFT_ORDER_SELECTORS.selectCustomer)
+    .type(name);
+  cy.contains(DRAFT_ORDER_SELECTORS.selectCustomerOption, name)
+    .click()
+    .get(DRAFT_ORDER_SELECTORS.customerEmail)
+    .should("be.visible")
+    .get(DRAFT_ORDER_SELECTORS.editShippingAddress)
+    .click();
+  fillUpAddressForm(address);
+  cy.get(DRAFT_ORDER_SELECTORS.editBillingAddress).click();
+  fillUpAddressForm(address);
+  cy.get(DRAFT_ORDER_SELECTORS.addShippingCarrierLink)
+    .click()
+    .get(SELECT_SHIPPING_METHOD_FORM.selectShippingMethod)
+    .click()
+    .get(SELECT_SHIPPING_METHOD_FORM.shippingMethodOption)
+    .first()
+    .click();
+  cy.addAliasToGraphRequest("OrderShippingMethodUpdate")
+    .get(SELECT_SHIPPING_METHOD_FORM.submitButton)
+    .click();
+  cy.wait("@OrderShippingMethodUpdate");
+  cy.getTextFromElement(DRAFT_ORDER_SELECTORS.pageHeader).as(
+    "draftOrderNumber"
+  );
+  cy.addAliasToGraphRequest("OrderDraftFinalize");
+  cy.get(DRAFT_ORDER_SELECTORS.finalizeButton).click();
+  cy.wait("@OrderDraftFinalize");
+  return cy.get("@draftOrderNumber");
 }
diff --git a/cypress/steps/shared/addressForm.js b/cypress/steps/shared/addressForm.js
new file mode 100644
index 000000000..b43dc4f5d
--- /dev/null
+++ b/cypress/steps/shared/addressForm.js
@@ -0,0 +1,26 @@
+import { ADDRESS_SELECTORS } from "../../elements/shared/addressForm";
+import { fillAutocompleteSelect } from "./autocompleteSelect";
+
+export function fillUpAddressForm(address) {
+  cy.get(ADDRESS_SELECTORS.firstName)
+    .type(address.firstName)
+    .get(ADDRESS_SELECTORS.lastName)
+    .type(address.lastName)
+    .get(ADDRESS_SELECTORS.companyName)
+    .type(address.companyName)
+    .get(ADDRESS_SELECTORS.phone)
+    .type(address.phone)
+    .get(ADDRESS_SELECTORS.streetAddress1)
+    .type(address.streetAddress1)
+    .get(ADDRESS_SELECTORS.streetAddress2)
+    .type(address.streetAddress2)
+    .get(ADDRESS_SELECTORS.city)
+    .type(address.city)
+    .get(ADDRESS_SELECTORS.postalCode)
+    .type(address.postalCode);
+  fillAutocompleteSelect(ADDRESS_SELECTORS.country, address.countryFullName);
+  cy.get(ADDRESS_SELECTORS.countryArea)
+    .type(address.countryArea)
+    .get(ADDRESS_SELECTORS.saveButton)
+    .click();
+}
diff --git a/cypress/utils/ordersUtils.js b/cypress/utils/ordersUtils.js
index 4cd7676b9..af426f3ca 100644
--- a/cypress/utils/ordersUtils.js
+++ b/cypress/utils/ordersUtils.js
@@ -47,11 +47,11 @@ export function createReadyToFulfillOrder(
   customerId,
   shippingMethodId,
   channelId,
-  variantsList
+  variantsList,
+  address
 ) {
   let order;
-  return orderRequest
-    .createDraftOrder(customerId, shippingMethodId, channelId)
+  return createDraftOrder(customerId, shippingMethodId, channelId, address)
     .then(orderResp => {
       order = orderResp;
       assignVariantsToOrder(order, variantsList);
@@ -64,11 +64,11 @@ export function createOrder({
   customerId,
   shippingMethodId,
   channelId,
-  variantsList
+  variantsList,
+  address
 }) {
   let order;
-  return orderRequest
-    .createDraftOrder(customerId, shippingMethodId, channelId)
+  return createDraftOrder(customerId, shippingMethodId, channelId, address)
     .then(orderResp => {
       order = orderResp;
       assignVariantsToOrder(order, variantsList);
@@ -82,12 +82,16 @@ function assignVariantsToOrder(order, variantsList) {
     orderRequest.addProductToOrder(order.id, variantElement.id);
   });
 }
-export function addPayment(checkoutId) {
-  return checkoutRequest.addPayment(
-    checkoutId,
-    "mirumee.payments.dummy",
-    "not-charged"
-  );
+
+export function createDraftOrder(
+  customerId,
+  shippingMethodId,
+  channelId,
+  address
+) {
+  return orderRequest
+    .createDraftOrder(customerId, shippingMethodId, channelId, address)
+    .its("body.data.draftOrderCreate.order");
 }
 export function createAndCompleteCheckoutWithoutShipping({
   channelSlug,
diff --git a/cypress/utils/products/productsListUtils.js b/cypress/utils/products/productsListUtils.js
index fb9b699a0..a5ed573e6 100644
--- a/cypress/utils/products/productsListUtils.js
+++ b/cypress/utils/products/productsListUtils.js
@@ -16,6 +16,7 @@ export function getDisplayedColumnArray(columnName) {
 export function expectProductsSortedBy(columnName, inAscOrder = true) {
   let sortedProductsArray;
   let productsArray;
+  cy.get(PRODUCTS_LIST.emptyProductRow).should("not.exist");
   getDisplayedColumnArray(columnName)
     .then(productsArrayResp => {
       productsArray = productsArrayResp;
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 3447035fe..c1665ca1a 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -3,10 +3,58 @@
     "context": "dialog header",
     "string": "Cancel Order"
   },
+  "PageTypeDeleteWarningDialog multiple assigned items description": {
+    "context": "PageTypeDeleteWarningDialog multiple assigned items description",
+    "string": "Are you sure you want to delete selected page types? If you remove them you won’t be able to assign them to created pages."
+  },
+  "PageTypeDeleteWarningDialog multiple consent label": {
+    "context": "PageTypeDeleteWarningDialog multiple consent label",
+    "string": "Yes, I want to delete those pages types and assigned pages"
+  },
+  "PageTypeDeleteWarningDialog single assigned items description": {
+    "context": "PageTypeDeleteWarningDialog single assigned items description",
+    "string": "You are about to delete page type <b>{typeName}</b>. It is assigned to {assignedItemsCount} {assignedItemsCount,plural,one{page} other{pages}}. Deleting this page type will also delete those pages. Are you sure you want to do this?"
+  },
+  "PageTypeDeleteWarningDialog single consent label": {
+    "context": "PageTypeDeleteWarningDialog single consent label",
+    "string": "Yes, I want to delete this page type and assigned pages"
+  },
+  "PageTypeDeleteWarningDialog single no assigned items description": {
+    "context": "PageTypeDeleteWarningDialog single no assigned items description",
+    "string": "Are you sure you want to delete <b>{typeName}</b>? If you remove it you won’t be able to assign it to created pages."
+  },
+  "PageTypeDeleteWarningDialog with items multiple description": {
+    "context": "PageTypeDeleteWarningDialog with items multiple description",
+    "string": "You are about to delete multiple page types. Some of them are assigned to pages. Deleting those page types will also delete those pages"
+  },
   "Previous discount label id": {
     "context": "Previous discount label",
     "string": "Previous discount value"
   },
+  "ProductTypeDeleteWarningDialog multiple assigned items description": {
+    "context": "ProductTypeDeleteWarningDialog multiple assigned items description",
+    "string": "Are you sure you want to delete selected product types? If you remove them you won’t be able to assign them to created products."
+  },
+  "ProductTypeDeleteWarningDialog multiple consent label": {
+    "context": "ProductTypeDeleteWarningDialog multiple consent label",
+    "string": "Yes, I want to delete those products types and assigned products"
+  },
+  "ProductTypeDeleteWarningDialog single assigned items description": {
+    "context": "ProductTypeDeleteWarningDialog single assigned items description",
+    "string": "You are about to delete product type <b>{typeName}</b>. It is assigned to {assignedItemsCount} {assignedItemsCount,plural,one{product} other{products}}. Deleting this product type will also delete those products. Are you sure you want to do this?"
+  },
+  "ProductTypeDeleteWarningDialog single consent label": {
+    "context": "ProductTypeDeleteWarningDialog single consent label",
+    "string": "Yes, I want to delete this product type and assigned products"
+  },
+  "ProductTypeDeleteWarningDialog single no assigned items description": {
+    "context": "ProductTypeDeleteWarningDialog single no assigned items description",
+    "string": "Are you sure you want to delete <b>{typeName}</b>? If you remove it you won’t be able to assign it to created products."
+  },
+  "ProductTypeDeleteWarningDialog with items multiple description": {
+    "context": "ProductTypeDeleteWarningDialog with items multiple description",
+    "string": "You are about to delete multiple product types. Some of them are assigned to products. Deleting those product types will also delete those products"
+  },
   "amount title": {
     "context": "amount title",
     "string": "Refunded amount"
@@ -138,6 +186,10 @@
     "context": "Fixed amount subtitle",
     "string": "Fixed amount"
   },
+  "globalConfigPluginMessages title": {
+    "context": "global config plugin status popup title",
+    "string": "Global Plugin"
+  },
   "homeActivityCardHeader": {
     "context": "header",
     "string": "Activity"
@@ -199,6 +251,14 @@
     "context": "header",
     "string": "Hello there, {userName}"
   },
+  "is filter range between value": {
+    "context": "is filter range or value",
+    "string": "between"
+  },
+  "is filter range equal to value": {
+    "context": "is filter range or value",
+    "string": "equal to"
+  },
   "menuCreateDialogHeader": {
     "context": "dialog header",
     "string": "Create Menu"
@@ -322,6 +382,10 @@
   "pageTypeInputLabel": {
     "string": "Select content type"
   },
+  "pluginChannelConfigurationCellMessages per channel": {
+    "context": "PluginChannelConfigurationCell channel title",
+    "string": "Per channel"
+  },
   "product available for purchase": {
     "context": "product availability",
     "string": "Available for purchase"
@@ -2027,23 +2091,19 @@
     "context": "search",
     "string": "No results"
   },
-  "src_dot_components_dot_Filter_dot_2683154806": {
-    "context": "is filter range or value",
-    "string": "equal to"
-  },
-  "src_dot_components_dot_Filter_dot_2779594451": {
-    "context": "filter range separator",
-    "string": "and"
-  },
   "src_dot_components_dot_Filter_dot_4190318230": {
     "context": "search results",
     "string": "Show more"
   },
-  "src_dot_components_dot_Filter_dot_773313536": {
-    "context": "is filter range or value",
-    "string": "between"
-  },
   "src_dot_components_dot_Filter_dot_996289613": {
+    "context": "button",
+    "string": "Filters"
+  },
+  "src_dot_components_dot_Filter_dot_FilterContent_dot_2779594451": {
+    "context": "filter range separator",
+    "string": "and"
+  },
+  "src_dot_components_dot_Filter_dot_FilterContent_dot_996289613": {
     "string": "Filters"
   },
   "src_dot_components_dot_ImageUpload_dot_1731007575": {
@@ -2319,6 +2379,18 @@
   "src_dot_components_dot_SingleSelectField_dot_4205644805": {
     "string": "No results found"
   },
+  "src_dot_components_dot_StatusLabel_dot_active": {
+    "context": "status label active",
+    "string": "Active"
+  },
+  "src_dot_components_dot_StatusLabel_dot_deactivated": {
+    "context": "status label deactivated",
+    "string": "Deactivated"
+  },
+  "src_dot_components_dot_StatusLabel_dot_inactive": {
+    "context": "status label inactive",
+    "string": "Inactive"
+  },
   "src_dot_components_dot_TableHead_dot_868570480": {
     "string": "Selected {number} items"
   },
@@ -4532,18 +4604,6 @@
     "context": "header",
     "string": "Create Page Type"
   },
-  "src_dot_pageTypes_dot_components_dot_PageTypeDeleteDialog_dot_2364900868": {
-    "context": "delete page type with its pages",
-    "string": "Page Type you want to delete is used by some pages. Deleting this page type will also delete those pages. Are you sure you want to delete {name}? After doing so you won’t be able to revert changes."
-  },
-  "src_dot_pageTypes_dot_components_dot_PageTypeDeleteDialog_dot_3120835055": {
-    "context": "dialog header",
-    "string": "Delete Page Type"
-  },
-  "src_dot_pageTypes_dot_components_dot_PageTypeDeleteDialog_dot_3734861990": {
-    "context": "delete page type",
-    "string": "Are you sure you want to delete {name}? After doing so you won’t be able to revert changes."
-  },
   "src_dot_pageTypes_dot_components_dot_PageTypeDetailsPage_dot_1105469372": {
     "string": "These are general information about this Content Type."
   },
@@ -4579,6 +4639,14 @@
   "src_dot_pageTypes_dot_components_dot_PageTypeList_dot_2965257236": {
     "string": "No page types found"
   },
+  "src_dot_pageTypes_dot_hooks_dot_usePageTypeDelete_dot_title": {
+    "context": "PageTypeDeleteWarningDialog title",
+    "string": "Delete page {selectedTypesCount,plural,one{type} other{types}}"
+  },
+  "src_dot_pageTypes_dot_hooks_dot_usePageTypeDelete_dot_viewAssignedItemsButtonLabel": {
+    "context": "PageTypeDeleteWarningDialog single assigned items button label",
+    "string": "View pages"
+  },
   "src_dot_pageTypes_dot_views_dot_2634056946": {
     "context": "dialog header",
     "string": "Unassign Attribute from Page Type"
@@ -4887,6 +4955,10 @@
     "context": "section header",
     "string": "Authorization"
   },
+  "src_dot_plugins_dot_components_dot_PluginDetailsChannelsCard_dot_noChannelsSubtitle": {
+    "context": "PluginDetailsChannelsCard no channels subtitle",
+    "string": "Plugin’s settings are set common across all channels"
+  },
   "src_dot_plugins_dot_components_dot_PluginInfo_dot_1049131348": {
     "context": "plugin name",
     "string": "Plugin Name"
@@ -4914,21 +4986,10 @@
     "context": "section header",
     "string": "Plugin Settings"
   },
-  "src_dot_plugins_dot_components_dot_PluginsDetailsPage_dot_1970881031": {
-    "context": "section header",
-    "string": "Plugin Settings"
-  },
   "src_dot_plugins_dot_components_dot_PluginsDetailsPage_dot_3352026836": {
     "context": "header",
     "string": "{pluginName} Details"
   },
-  "src_dot_plugins_dot_components_dot_PluginsDetailsPage_dot_3425535100": {
-    "context": "section header",
-    "string": "Plugin Information and Status"
-  },
-  "src_dot_plugins_dot_components_dot_PluginsDetailsPage_dot_3799756739": {
-    "string": "These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar."
-  },
   "src_dot_plugins_dot_components_dot_PluginsListPage_dot_3233248823": {
     "string": "Search Plugins..."
   },
@@ -4937,28 +4998,56 @@
     "string": "All Plugins"
   },
   "src_dot_plugins_dot_components_dot_PluginsListPage_dot_active": {
-    "context": "plugin",
-    "string": "Active"
+    "context": "plugin filters error messages active",
+    "string": "Active is not selected"
   },
-  "src_dot_plugins_dot_components_dot_PluginsListPage_dot_deactivated": {
-    "context": "plugin",
-    "string": "Inactive"
+  "src_dot_plugins_dot_components_dot_PluginsListPage_dot_channelStatusSectionSubtitle": {
+    "context": "status section subtitle",
+    "string": "Channel status"
   },
-  "src_dot_plugins_dot_components_dot_PluginsList_dot_3247064221": {
-    "context": "plugin status",
-    "string": "Active"
+  "src_dot_plugins_dot_components_dot_PluginsListPage_dot_channelStatusSectionTitle": {
+    "context": "status section title",
+    "string": "Status in channel"
   },
-  "src_dot_plugins_dot_components_dot_PluginsList_dot_4120604650": {
-    "context": "user action bar",
-    "string": "Action"
+  "src_dot_plugins_dot_components_dot_PluginsListPage_dot_channels": {
+    "context": "plugin filters error messages channels",
+    "string": "No channels selected"
   },
-  "src_dot_plugins_dot_components_dot_PluginsList_dot_636461959": {
-    "context": "plugin name",
-    "string": "Name"
+  "src_dot_plugins_dot_components_dot_PluginsListPage_dot_configTypeSectionTitle": {
+    "context": "config type section title",
+    "string": "Configuration Type"
   },
   "src_dot_plugins_dot_components_dot_PluginsList_dot_666641390": {
     "string": "No plugins found"
   },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_channelLabel": {
+    "context": "table header channel col label",
+    "string": "Channel"
+  },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_channelTitle": {
+    "context": "plugin channel availability status title",
+    "string": "Active in {activeChannelsCount}"
+  },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_confLabel": {
+    "context": "table header configuration col label",
+    "string": "Configuration"
+  },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_description": {
+    "context": "global config plugin status popup description",
+    "string": "Global plugins are set across all channels in your ecommerce. Only status is shown for those types of plugins"
+  },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_globalLabel": {
+    "context": "PluginChannelConfigurationCell global title",
+    "string": "Global"
+  },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_nameLabel": {
+    "context": "table header name col label",
+    "string": "Name"
+  },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_title": {
+    "context": "channel config plugin status popup title",
+    "string": "Assigned to {activeChannelsCount} of {allChannelsCount} channels"
+  },
   "src_dot_plugins_dot_views_dot_1096544448": {
     "context": "header",
     "string": "Authorization Field Delete"
@@ -4992,14 +5081,6 @@
     "context": "section header",
     "string": "Variant Attributes"
   },
-  "src_dot_productTypes_dot_components_dot_ProductTypeDeleteDialog_dot_2297471173": {
-    "context": "delete product type",
-    "string": "Are you sure you want to delete {name}?"
-  },
-  "src_dot_productTypes_dot_components_dot_ProductTypeDeleteDialog_dot_924066985": {
-    "context": "dialog header",
-    "string": "Delete Product Type"
-  },
   "src_dot_productTypes_dot_components_dot_ProductTypeDetailsPage_dot_1217376589": {
     "context": "switch button",
     "string": "Product type uses Variant Attributes"
@@ -5079,17 +5160,17 @@
   "src_dot_productTypes_dot_components_dot_ProductTypeShipping_dot_746695941": {
     "string": "Weight"
   },
+  "src_dot_productTypes_dot_hooks_dot_useProductTypeDelete_dot_title": {
+    "context": "ProductTypeDeleteWarningDialog title",
+    "string": "Delete product {selectedTypesCount,plural,one{type} other{types}}"
+  },
+  "src_dot_productTypes_dot_hooks_dot_useProductTypeDelete_dot_viewAssignedItemsButtonLabel": {
+    "context": "ProductTypeDeleteWarningDialog single assigned items button label",
+    "string": "View products"
+  },
   "src_dot_productTypes_dot_views_dot_3822478981": {
     "string": "Successfully created product type"
   },
-  "src_dot_productTypes_dot_views_dot_ProductTypeList_dot_4080551769": {
-    "context": "dialog header",
-    "string": "Delete Product Types"
-  },
-  "src_dot_productTypes_dot_views_dot_ProductTypeList_dot_4269954457": {
-    "context": "dialog content",
-    "string": "{counter,plural,one{Are you sure you want to delete this product type?} other{Are you sure you want to delete {displayQuantity} product types?}}"
-  },
   "src_dot_productTypes_dot_views_dot_ProductTypeUpdate_dot_3512959355": {
     "string": "Product type deleted"
   },
diff --git a/schema.graphql b/schema.graphql
index 5943a4045..9fafed726 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -2820,7 +2820,7 @@ type Mutation {
   giftCardCreate(input: GiftCardCreateInput!): GiftCardCreate
   giftCardDeactivate(id: ID!): GiftCardDeactivate
   giftCardUpdate(id: ID!, input: GiftCardUpdateInput!): GiftCardUpdate
-  pluginUpdate(id: ID!, input: PluginUpdateInput!): PluginUpdate
+  pluginUpdate(channel: ID, id: ID!, input: PluginUpdateInput!): PluginUpdate
   saleCreate(input: SaleInput!): SaleCreate
   saleDelete(id: ID!): SaleDelete
   saleBulkDelete(ids: [ID]!): SaleBulkDelete
@@ -3813,6 +3813,7 @@ enum PaymentErrorCode {
   SHIPPING_METHOD_NOT_SET
   PAYMENT_ERROR
   NOT_SUPPORTED_GATEWAY
+  CHANNEL_INACTIVE
 }
 
 input PaymentFilterInput {
@@ -3951,14 +3952,25 @@ input PermissionGroupUpdateInput {
   removeUsers: [ID!]
 }
 
-type Plugin implements Node {
+type Plugin {
   id: ID!
   name: String!
   description: String!
+  globalConfiguration: PluginConfiguration
+  channelConfigurations: [PluginConfiguration!]!
+}
+
+type PluginConfiguration {
   active: Boolean!
+  channel: Channel
   configuration: [ConfigurationItem]
 }
 
+enum PluginConfigurationType {
+  PER_CHANNEL
+  GLOBAL
+}
+
 type PluginCountableConnection {
   pageInfo: PageInfo!
   edges: [PluginCountableEdge!]!
@@ -3986,8 +3998,9 @@ enum PluginErrorCode {
 }
 
 input PluginFilterInput {
-  active: Boolean
+  statusInChannels: PluginStatusInChannelsInput
   search: String
+  type: PluginConfigurationType
 }
 
 enum PluginSortField {
@@ -4000,6 +4013,11 @@ input PluginSortingInput {
   field: PluginSortField!
 }
 
+input PluginStatusInChannelsInput {
+  active: Boolean!
+  channels: [ID!]!
+}
+
 type PluginUpdate {
   plugin: Plugin
   pluginsErrors: [PluginError!]! @deprecated(reason: "Use errors field instead. This field will be removed in Saleor 4.0.")
diff --git a/src/channels/components/ChannelsAvailabilityDialog/utils.ts b/src/channels/components/ChannelsAvailabilityDialog/utils.ts
deleted file mode 100644
index d3c5b7d2a..000000000
--- a/src/channels/components/ChannelsAvailabilityDialog/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { filter } from "fuzzaldrin";
-import React from "react";
-
-export const useChannelsSearch = function<T extends { name: string }>(
-  channels: T[]
-) {
-  const [query, onQueryChange] = React.useState("");
-  const filteredChannels = filter<T, "name">(channels, query, { key: "name" });
-
-  return { query, onQueryChange, filteredChannels };
-};
diff --git a/src/components/AddressEdit/AddressEdit.tsx b/src/components/AddressEdit/AddressEdit.tsx
index 60636993a..1ea464d1d 100644
--- a/src/components/AddressEdit/AddressEdit.tsx
+++ b/src/components/AddressEdit/AddressEdit.tsx
@@ -202,6 +202,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         <div>
           <SingleAutocompleteSelectField
             disabled={disabled}
+            data-test-id="address-edit-country-select-field"
             displayValue={countryDisplayValue}
             error={!!formErrors.country}
             helperText={getErrorMessage(formErrors.country, intl)}
diff --git a/src/components/Alert/InlineAlert.tsx b/src/components/Alert/InlineAlert.tsx
new file mode 100644
index 000000000..05b60d8d5
--- /dev/null
+++ b/src/components/Alert/InlineAlert.tsx
@@ -0,0 +1,25 @@
+import Card from "@material-ui/core/Card";
+import { makeStyles } from "@saleor/theme";
+import React from "react";
+
+const useStyles = makeStyles(
+  theme => ({
+    container: {
+      backgroundColor: theme.palette.error.main,
+      padding: theme.spacing(1.5, 2)
+    }
+  }),
+  { name: "InlineAlert" }
+);
+
+interface AlertCardProps {
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+const AlertCard: React.FC<AlertCardProps> = ({ children }) => {
+  const classes = useStyles({});
+
+  return <Card className={classes.container}>{children}</Card>;
+};
+
+export default AlertCard;
diff --git a/src/components/CollectionWithDividers/CollectionWithDividers.tsx b/src/components/CollectionWithDividers/CollectionWithDividers.tsx
new file mode 100644
index 000000000..3f1fbb9f3
--- /dev/null
+++ b/src/components/CollectionWithDividers/CollectionWithDividers.tsx
@@ -0,0 +1,46 @@
+import Divider from "@material-ui/core/Divider";
+import initial from "lodash-es/initial";
+import React from "react";
+
+interface CollectionWithDividersProps<T> {
+  DividerComponent?: React.FunctionComponent;
+  renderEmpty?: (collection: T[]) => any;
+  collection: T[];
+  renderItem: (
+    item: T | undefined,
+    index: number | undefined,
+    collection: T[]
+  ) => any;
+}
+
+function CollectionWithDividers<T>({
+  collection,
+  renderItem,
+  DividerComponent,
+  renderEmpty
+}: CollectionWithDividersProps<T>) {
+  const hasNoItemsAndPlaceholder = !renderEmpty && !collection.length;
+
+  if (hasNoItemsAndPlaceholder) {
+    return null;
+  }
+
+  if (!collection.length) {
+    return !!renderEmpty ? renderEmpty(collection) : null;
+  }
+
+  const SelectedDividerComponent = DividerComponent || Divider;
+
+  return initial(
+    collection.reduce(
+      (result, item, index) => [
+        ...result,
+        renderItem(item, index, collection),
+        <SelectedDividerComponent />
+      ],
+      []
+    )
+  );
+}
+
+export default CollectionWithDividers;
diff --git a/src/components/CollectionWithDividers/index.tsx b/src/components/CollectionWithDividers/index.tsx
new file mode 100644
index 000000000..f0b5ac483
--- /dev/null
+++ b/src/components/CollectionWithDividers/index.tsx
@@ -0,0 +1,2 @@
+export * from "./CollectionWithDividers";
+export { default } from "./CollectionWithDividers";
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
index 655a6cd22..78abbef0b 100644
--- a/src/components/Filter/Filter.tsx
+++ b/src/components/Filter/Filter.tsx
@@ -6,15 +6,17 @@ import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
-import React from "react";
+import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { FilterContent } from ".";
-import { IFilter, IFilterElement } from "./types";
+import { FilterErrorMessages, IFilter, IFilterElement } from "./types";
 import useFilter from "./useFilter";
+import { extractInvalidFilters } from "./utils";
 
 export interface FilterProps<TFilterKeys extends string = string> {
   currencySymbol?: string;
+  errorMessages?: FilterErrorMessages<TFilterKeys>;
   menu: IFilter<TFilterKeys>;
   onFilterAdd: (filter: Array<IFilterElement<string>>) => void;
 }
@@ -87,15 +89,30 @@ const useStyles = makeStyles(
   { name: "Filter" }
 );
 const Filter: React.FC<FilterProps> = props => {
-  const { currencySymbol, menu, onFilterAdd } = props;
+  const { currencySymbol, menu, onFilterAdd, errorMessages } = props;
   const classes = useStyles(props);
 
   const anchor = React.useRef<HTMLDivElement>();
-  const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false);
+  const [isFilterMenuOpened, setFilterMenuOpened] = useState(false);
+  const [filterErrors, setFilterErrors] = useState<string[]>([]);
   const [data, dispatch, reset] = useFilter(menu);
 
   const isFilterActive = menu.some(filterElement => filterElement.active);
 
+  const handleSubmit = () => {
+    const invalidFilters = extractInvalidFilters(data, menu);
+
+    if (!!invalidFilters.length) {
+      const parsedFilterErrors = invalidFilters.map(({ name }) => name);
+      setFilterErrors(parsedFilterErrors);
+      return;
+    }
+
+    setFilterErrors([]);
+    onFilterAdd(data);
+    setFilterMenuOpened(false);
+  };
+
   return (
     <ClickAwayListener
       onClickAway={event => {
@@ -120,10 +137,17 @@ const Filter: React.FC<FilterProps> = props => {
             <>
               <span className={classes.separator} />
               <Typography className={classes.addFilterText}>
-                {menu.reduce(
-                  (acc, filterElement) => acc + (filterElement.active ? 1 : 0),
-                  0
-                )}
+                {menu.reduce((acc, filterElement) => {
+                  const dataFilterElement = data.find(
+                    ({ name }) => name === filterElement.name
+                  );
+
+                  if (!dataFilterElement) {
+                    return acc;
+                  }
+
+                  return acc + (dataFilterElement.active ? 1 : 0);
+                }, 0)}
               </Typography>
             </>
           )}
@@ -157,14 +181,14 @@ const Filter: React.FC<FilterProps> = props => {
               }}
             >
               <FilterContent
+                errorMessages={errorMessages}
+                errors={filterErrors}
+                dataStructure={menu}
                 currencySymbol={currencySymbol}
                 filters={data}
                 onClear={reset}
                 onFilterPropertyChange={dispatch}
-                onSubmit={() => {
-                  onFilterAdd(data);
-                  setFilterMenuOpened(false);
-                }}
+                onSubmit={handleSubmit}
               />
             </Grow>
           )}
diff --git a/src/components/Filter/FilterAutocompleteField.tsx b/src/components/Filter/FilterAutocompleteField.tsx
index 2868bc76b..d756c6653 100644
--- a/src/components/Filter/FilterAutocompleteField.tsx
+++ b/src/components/Filter/FilterAutocompleteField.tsx
@@ -13,12 +13,16 @@ import { MultiAutocompleteChoiceType } from "../MultiAutocompleteSelectField";
 import { FilterBaseFieldProps } from "./types";
 
 interface FilterAutocompleteFieldProps extends FilterBaseFieldProps {
-  displayValues: Record<string, MultiAutocompleteChoiceType[]>;
-  setDisplayValues: (
-    values: Record<string, MultiAutocompleteChoiceType[]>
-  ) => void;
+  displayValues: FilterAutocompleteDisplayValues;
+  setDisplayValues: (values: FilterAutocompleteDisplayValues) => void;
+  initialDisplayValues: FilterAutocompleteDisplayValues;
 }
 
+export type FilterAutocompleteDisplayValues = Record<
+  string,
+  MultiAutocompleteChoiceType[]
+>;
+
 const useStyles = makeStyles(
   theme => ({
     hr: {
@@ -29,7 +33,8 @@ const useStyles = makeStyles(
       padding: "12px 0 9px 12px"
     },
     inputContainer: {
-      marginBottom: theme.spacing(1)
+      marginBottom: theme.spacing(1),
+      paddingTop: theme.spacing(1)
     },
     noResults: {
       marginTop: theme.spacing(1)
@@ -51,11 +56,13 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
   filterField,
   setDisplayValues,
   onFilterPropertyChange,
+  initialDisplayValues,
   ...rest
 }) => {
   const classes = useStyles({});
 
   const fieldDisplayValues = displayValues[filterField.name];
+  const initialFieldDisplayValues = initialDisplayValues[filterField.name];
   const availableOptions = filterField.options.filter(option =>
     fieldDisplayValues.every(
       displayValue => displayValue.value !== option.value
@@ -63,11 +70,6 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
   );
   const displayNoResults =
     availableOptions.length === 0 && fieldDisplayValues.length === 0;
-  const displayHr = !(
-    (fieldDisplayValues.length === 0 && availableOptions.length > 0) ||
-    (availableOptions.length === 0 && fieldDisplayValues.length > 0) ||
-    displayNoResults
-  );
 
   const handleChange = (option: MultiAutocompleteChoiceType) => {
     onFilterPropertyChange({
@@ -90,6 +92,19 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
     });
   };
 
+  const isValueChecked = (displayValue: MultiAutocompleteChoiceType) =>
+    filterField.value.includes(displayValue.value);
+
+  const filteredValuesChecked = initialFieldDisplayValues.filter(
+    isValueChecked
+  );
+
+  const filteredValuesUnchecked = fieldDisplayValues.filter(
+    displayValue => !isValueChecked(displayValue)
+  );
+
+  const displayHr = !!filteredValuesChecked.length;
+
   return (
     <div {...rest}>
       <TextField
@@ -104,7 +119,7 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
         }}
         onChange={event => filterField.onSearchChange(event.target.value)}
       />
-      {fieldDisplayValues.map(displayValue => (
+      {filteredValuesChecked.map(displayValue => (
         <div className={classes.option} key={displayValue.value}>
           <FormControlLabel
             control={
@@ -130,7 +145,7 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
           <FormattedMessage defaultMessage="No results" description="search" />
         </Typography>
       )}
-      {availableOptions.map(option => (
+      {filteredValuesUnchecked.map(option => (
         <div
           className={classes.option}
           key={option.value}
diff --git a/src/components/Filter/FilterContent.tsx b/src/components/Filter/FilterContent.tsx
deleted file mode 100644
index c441184a1..000000000
--- a/src/components/Filter/FilterContent.tsx
+++ /dev/null
@@ -1,433 +0,0 @@
-import { TextField } from "@material-ui/core";
-import Button from "@material-ui/core/Button";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Paper from "@material-ui/core/Paper";
-import Radio from "@material-ui/core/Radio";
-import { fade } from "@material-ui/core/styles/colorManipulator";
-import Typography from "@material-ui/core/Typography";
-import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import { buttonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/theme";
-import classNames from "classnames";
-import React from "react";
-import { FormattedMessage, IntlShape, useIntl } from "react-intl";
-
-import Checkbox from "../Checkbox";
-import FormSpacer from "../FormSpacer";
-import Hr from "../Hr";
-import { MultiAutocompleteChoiceType } from "../MultiAutocompleteSelectField";
-import { SingleAutocompleteChoiceType } from "../SingleAutocompleteSelectField";
-import SingleSelectField from "../SingleSelectField";
-import Arrow from "./Arrow";
-import FilterAutocompleteField from "./FilterAutocompleteField";
-import FilterOptionField from "./FilterOptionField";
-import { FilterReducerAction } from "./reducer";
-import { FieldType, FilterType, IFilter } from "./types";
-
-export interface FilterContentProps<T extends string = string> {
-  filters: IFilter<T>;
-  onFilterPropertyChange: React.Dispatch<FilterReducerAction<T>>;
-  onClear: () => void;
-  onSubmit: () => void;
-  currencySymbol?: string;
-}
-
-const useStyles = makeStyles(
-  theme => ({
-    actionBar: {
-      alignItems: "center",
-      display: "flex",
-      justifyContent: "space-between",
-      padding: theme.spacing(1, 3)
-    },
-    andLabel: {
-      margin: theme.spacing(0, 2)
-    },
-    arrow: {
-      marginRight: theme.spacing(2)
-    },
-    clear: {
-      marginRight: theme.spacing(1)
-    },
-    filterFieldBar: {
-      "&:not(:last-of-type)": {
-        borderBottom: `1px solid ${theme.palette.divider}`
-      },
-      padding: theme.spacing(1, 2.5)
-    },
-    filterSettings: {
-      background: fade(theme.palette.primary.main, 0.2),
-      padding: theme.spacing(2, 3)
-    },
-    input: {
-      padding: "12px 0 9px 12px"
-    },
-    inputRange: {
-      alignItems: "center",
-      display: "flex"
-    },
-    label: {
-      fontWeight: 600
-    },
-    option: {
-      left: -theme.spacing(0.5),
-      position: "relative"
-    },
-    optionRadio: {
-      left: -theme.spacing(0.25)
-    }
-  }),
-  { name: "FilterContent" }
-);
-
-function getIsFilterMultipleChoices(
-  intl: IntlShape
-): SingleAutocompleteChoiceType[] {
-  return [
-    {
-      label: intl.formatMessage({
-        defaultMessage: "equal to",
-        description: "is filter range or value"
-      }),
-      value: FilterType.SINGULAR
-    },
-    {
-      label: intl.formatMessage({
-        defaultMessage: "between",
-        description: "is filter range or value"
-      }),
-      value: FilterType.MULTIPLE
-    }
-  ];
-}
-
-const filterFieldTestingContext = "filter-field";
-
-const FilterContent: React.FC<FilterContentProps> = ({
-  currencySymbol,
-  filters,
-  onClear,
-  onFilterPropertyChange,
-  onSubmit
-}) => {
-  const intl = useIntl();
-  const classes = useStyles({});
-  const [
-    autocompleteDisplayValues,
-    setAutocompleteDisplayValues
-  ] = useStateFromProps<Record<string, MultiAutocompleteChoiceType[]>>(
-    filters.reduce((acc, filterField) => {
-      if (filterField.type === FieldType.autocomplete) {
-        acc[filterField.name] = filterField.displayValues;
-      }
-
-      return acc;
-    }, {})
-  );
-
-  return (
-    <Paper>
-      <form
-        onSubmit={event => {
-          event.preventDefault();
-          onSubmit();
-        }}
-      >
-        <div className={classes.actionBar}>
-          <Typography className={classes.label}>
-            <FormattedMessage defaultMessage="Filters" />
-          </Typography>
-          <div>
-            <Button
-              data-test="clear"
-              className={classes.clear}
-              onClick={onClear}
-            >
-              <FormattedMessage {...buttonMessages.clear} />
-            </Button>
-            <Button
-              data-test="submit"
-              color="primary"
-              variant="contained"
-              type="submit"
-            >
-              <FormattedMessage {...buttonMessages.done} />
-            </Button>
-          </div>
-        </div>
-        <Hr />
-        {filters
-          .filter(filter => !!filter)
-          .sort((a, b) => (a.name > b.name ? 1 : -1))
-          .map(filterField => (
-            <React.Fragment key={filterField.name}>
-              <div className={classes.filterFieldBar}>
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      data-test="filterGroupActive"
-                      data-test-id={filterField.name}
-                      checked={filterField.active}
-                    />
-                  }
-                  label={filterField.label}
-                  onChange={() =>
-                    onFilterPropertyChange({
-                      payload: {
-                        name: filterField.name,
-                        update: {
-                          active: !filterField.active
-                        }
-                      },
-                      type: "set-property"
-                    })
-                  }
-                />
-              </div>
-              {filterField.active && (
-                <div className={classes.filterSettings}>
-                  {filterField.type === FieldType.text && (
-                    <TextField
-                      data-test={filterFieldTestingContext}
-                      data-test-id={filterField.name}
-                      fullWidth
-                      name={filterField.name}
-                      InputProps={{
-                        classes: {
-                          input: classes.input
-                        }
-                      }}
-                      value={filterField.value[0]}
-                      onChange={event =>
-                        onFilterPropertyChange({
-                          payload: {
-                            name: filterField.name,
-                            update: {
-                              value: [event.target.value, filterField.value[1]]
-                            }
-                          },
-                          type: "set-property"
-                        })
-                      }
-                    />
-                  )}
-                  {[FieldType.date, FieldType.price, FieldType.number].includes(
-                    filterField.type
-                  ) && (
-                    <>
-                      <SingleSelectField
-                        data-test="filterFieldRangeTypeChoice"
-                        choices={getIsFilterMultipleChoices(intl)}
-                        value={
-                          filterField.multiple
-                            ? FilterType.MULTIPLE
-                            : FilterType.SINGULAR
-                        }
-                        InputProps={{
-                          classes: {
-                            input: classes.input
-                          }
-                        }}
-                        onChange={event =>
-                          onFilterPropertyChange({
-                            payload: {
-                              name: filterField.name,
-                              update: {
-                                multiple:
-                                  event.target.value === FilterType.MULTIPLE
-                              }
-                            },
-                            type: "set-property"
-                          })
-                        }
-                      />
-                      <FormSpacer />
-                      <div className={classes.inputRange}>
-                        <div>
-                          <Arrow className={classes.arrow} />
-                        </div>
-                        {filterField.multiple ? (
-                          <>
-                            <TextField
-                              data-test={filterFieldTestingContext}
-                              data-test-id={filterField.name}
-                              data-test-range-type="min"
-                              fullWidth
-                              name={filterField.name + "_min"}
-                              InputProps={{
-                                classes: {
-                                  input: classes.input
-                                },
-                                endAdornment:
-                                  filterField.type === FieldType.price &&
-                                  currencySymbol,
-                                type:
-                                  filterField.type === FieldType.date
-                                    ? "date"
-                                    : "number"
-                              }}
-                              value={filterField.value[0]}
-                              onChange={event =>
-                                onFilterPropertyChange({
-                                  payload: {
-                                    name: filterField.name,
-                                    update: {
-                                      value: [
-                                        event.target.value,
-                                        filterField.value[1]
-                                      ]
-                                    }
-                                  },
-                                  type: "set-property"
-                                })
-                              }
-                            />
-                            <span className={classes.andLabel}>
-                              <FormattedMessage
-                                defaultMessage="and"
-                                description="filter range separator"
-                              />
-                            </span>
-                            <TextField
-                              data-test={filterFieldTestingContext}
-                              data-test-id={filterField.name}
-                              data-test-range-type="max"
-                              fullWidth
-                              name={filterField.name + "_max"}
-                              InputProps={{
-                                classes: {
-                                  input: classes.input
-                                },
-                                endAdornment:
-                                  filterField.type === FieldType.price &&
-                                  currencySymbol,
-                                type:
-                                  filterField.type === FieldType.date
-                                    ? "date"
-                                    : "number"
-                              }}
-                              value={filterField.value[1]}
-                              onChange={event =>
-                                onFilterPropertyChange({
-                                  payload: {
-                                    name: filterField.name,
-                                    update: {
-                                      value: [
-                                        filterField.value[0],
-                                        event.target.value
-                                      ]
-                                    }
-                                  },
-                                  type: "set-property"
-                                })
-                              }
-                            />
-                          </>
-                        ) : (
-                          <TextField
-                            data-test={filterFieldTestingContext}
-                            data-test-id={filterField.name}
-                            fullWidth
-                            name={filterField.name}
-                            InputProps={{
-                              classes: {
-                                input: classes.input
-                              },
-                              endAdornment:
-                                filterField.type === FieldType.price &&
-                                currencySymbol,
-                              type:
-                                filterField.type === FieldType.date
-                                  ? "date"
-                                  : [
-                                      FieldType.number,
-                                      FieldType.price
-                                    ].includes(filterField.type)
-                                  ? "number"
-                                  : "text"
-                            }}
-                            value={filterField.value[0]}
-                            onChange={event =>
-                              onFilterPropertyChange({
-                                payload: {
-                                  name: filterField.name,
-                                  update: {
-                                    value: [
-                                      event.target.value,
-                                      filterField.value[1]
-                                    ]
-                                  }
-                                },
-                                type: "set-property"
-                              })
-                            }
-                          />
-                        )}
-                      </div>
-                    </>
-                  )}
-                  {filterField.type === FieldType.options && (
-                    <FilterOptionField
-                      data-test={filterFieldTestingContext}
-                      data-test-id={filterField.name}
-                      filterField={filterField}
-                      onFilterPropertyChange={onFilterPropertyChange}
-                    />
-                  )}
-                  {filterField.type === FieldType.boolean &&
-                    filterField.options.map(option => (
-                      <div
-                        className={classNames(
-                          classes.option,
-                          classes.optionRadio
-                        )}
-                        key={option.value}
-                      >
-                        <FormControlLabel
-                          control={
-                            <Radio
-                              data-test="filterFieldBoolean"
-                              data-test-is-checked={
-                                filterField.value[0] === option.value
-                              }
-                              checked={filterField.value[0] === option.value}
-                              color="primary"
-                            />
-                          }
-                          label={option.label}
-                          name={filterField.name}
-                          onChange={() =>
-                            onFilterPropertyChange({
-                              payload: {
-                                name: filterField.name,
-                                update: {
-                                  value: [option.value]
-                                }
-                              },
-                              type: "set-property"
-                            })
-                          }
-                        />
-                      </div>
-                    ))}
-                  {filterField.type === FieldType.autocomplete &&
-                    filterField.multiple && (
-                      <FilterAutocompleteField
-                        data-test={filterFieldTestingContext}
-                        data-test-id={filterField.name}
-                        displayValues={autocompleteDisplayValues}
-                        filterField={filterField}
-                        setDisplayValues={setAutocompleteDisplayValues}
-                        onFilterPropertyChange={onFilterPropertyChange}
-                      />
-                    )}
-                </div>
-              )}
-            </React.Fragment>
-          ))}
-      </form>
-    </Paper>
-  );
-};
-FilterContent.displayName = "FilterContent";
-export default FilterContent;
diff --git a/src/components/Filter/FilterContent/FilterContent.tsx b/src/components/Filter/FilterContent/FilterContent.tsx
new file mode 100644
index 000000000..3d587e465
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterContent.tsx
@@ -0,0 +1,158 @@
+import { Typography } from "@material-ui/core";
+import Paper from "@material-ui/core/Paper";
+import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
+import Hr from "@saleor/components/Hr";
+import useStateFromProps from "@saleor/hooks/useStateFromProps";
+import React from "react";
+
+import { FilterAutocompleteDisplayValues } from "../FilterAutocompleteField";
+import { FilterReducerAction } from "../reducer";
+import {
+  FieldType,
+  FilterErrorMessages,
+  FilterErrors,
+  IFilter,
+  IFilterElement
+} from "../types";
+import FilterContentBody, { FilterContentBodyProps } from "./FilterContentBody";
+import FilterContentBodyNameField from "./FilterContentBodyNameField";
+import FilterContentHeader from "./FilterContentHeader";
+import FilterErrorsList from "./FilterErrorsList";
+
+export interface FilterContentProps<T extends string = string> {
+  filters: IFilter<T>;
+  onFilterPropertyChange: React.Dispatch<FilterReducerAction<T>>;
+  onClear: () => void;
+  onSubmit: () => void;
+  currencySymbol?: string;
+  dataStructure: IFilter<T>;
+  errors?: FilterErrors;
+  errorMessages?: FilterErrorMessages<T>;
+}
+
+const FilterContent: React.FC<FilterContentProps> = ({
+  currencySymbol,
+  errors,
+  errorMessages,
+  filters,
+  onClear,
+  onFilterPropertyChange,
+  onSubmit,
+  dataStructure
+}) => {
+  const getAutocompleteValuesWithNewValues = (
+    autocompleteDisplayValues: FilterAutocompleteDisplayValues,
+    filterField: IFilterElement<string>
+  ) => {
+    if (filterField.type === FieldType.autocomplete) {
+      return {
+        ...autocompleteDisplayValues,
+        [filterField.name]: filterField.options
+      };
+    }
+
+    return autocompleteDisplayValues;
+  };
+
+  const initialAutocompleteDisplayValues = filters.reduce(
+    (acc, filterField) => {
+      if (filterField.multipleFields) {
+        return filterField.multipleFields.reduce(
+          getAutocompleteValuesWithNewValues,
+          {}
+        );
+      }
+
+      return getAutocompleteValuesWithNewValues(acc, filterField);
+    },
+    {}
+  );
+
+  const [
+    autocompleteDisplayValues,
+    setAutocompleteDisplayValues
+  ] = useStateFromProps<FilterAutocompleteDisplayValues>(
+    initialAutocompleteDisplayValues
+  );
+
+  const commonFilterBodyProps: Omit<
+    FilterContentBodyProps,
+    "filter" | "onFilterPropertyChange"
+  > = {
+    currencySymbol,
+    autocompleteDisplayValues,
+    setAutocompleteDisplayValues,
+    initialAutocompleteDisplayValues
+  };
+
+  const handleMultipleFieldPropertyChange = function<T extends string>(
+    action: FilterReducerAction<T>
+  ) {
+    const { update } = action.payload;
+
+    onFilterPropertyChange({
+      ...action,
+      payload: { ...action.payload, update: { ...update, active: true } }
+    });
+  };
+
+  const getFilterFromCurrentData = function<T extends string>(
+    filter: IFilterElement<T>
+  ) {
+    return filters.find(({ name }) => filter.name === name);
+  };
+
+  return (
+    <Paper>
+      <form
+        onSubmit={event => {
+          event.preventDefault();
+          onSubmit();
+        }}
+      >
+        <FilterContentHeader onClear={onClear} />
+        <Hr />
+        {dataStructure
+          .sort((a, b) => (a.name > b.name ? 1 : -1))
+          .map(filter => (
+            <React.Fragment key={filter.name}>
+              <FilterContentBodyNameField
+                filter={getFilterFromCurrentData(filter)}
+                onFilterPropertyChange={onFilterPropertyChange}
+              />
+              <FilterErrorsList
+                errors={errors}
+                errorMessages={errorMessages}
+                filter={filter}
+              />
+              {filter.multipleFields ? (
+                <CollectionWithDividers
+                  collection={filter.multipleFields}
+                  renderItem={filterField => (
+                    <FilterContentBody
+                      {...commonFilterBodyProps}
+                      onFilterPropertyChange={handleMultipleFieldPropertyChange}
+                      filter={{
+                        ...getFilterFromCurrentData(filterField),
+                        active: getFilterFromCurrentData(filter).active
+                      }}
+                    >
+                      <Typography>{filterField.label}</Typography>
+                    </FilterContentBody>
+                  )}
+                />
+              ) : (
+                <FilterContentBody
+                  {...commonFilterBodyProps}
+                  onFilterPropertyChange={onFilterPropertyChange}
+                  filter={getFilterFromCurrentData(filter)}
+                />
+              )}
+            </React.Fragment>
+          ))}
+      </form>
+    </Paper>
+  );
+};
+FilterContent.displayName = "FilterContent";
+export default FilterContent;
diff --git a/src/components/Filter/FilterContent/FilterContentBody.tsx b/src/components/Filter/FilterContent/FilterContentBody.tsx
new file mode 100644
index 000000000..651e86414
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterContentBody.tsx
@@ -0,0 +1,298 @@
+import {
+  fade,
+  FormControlLabel,
+  makeStyles,
+  Radio,
+  TextField
+} from "@material-ui/core";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import SingleSelectField from "@saleor/components/SingleSelectField";
+import classNames from "classnames";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import Arrow from "../Arrow";
+import FilterAutocompleteField, {
+  FilterAutocompleteDisplayValues
+} from "../FilterAutocompleteField";
+import FilterOptionField from "../FilterOptionField";
+import { FilterReducerAction } from "../reducer";
+import { FieldType, FilterType, IFilterElement } from "../types";
+import { getIsFilterMultipleChoices } from "./utils";
+
+const useStyles = makeStyles(
+  theme => ({
+    andLabel: {
+      margin: theme.spacing(0, 2)
+    },
+    arrow: {
+      marginRight: theme.spacing(2)
+    },
+    filterSettings: {
+      background: fade(theme.palette.primary.main, 0.1),
+      padding: theme.spacing(2, 3)
+    },
+    input: {
+      padding: "12px 0 9px 12px"
+    },
+    inputRange: {
+      alignItems: "center",
+      display: "flex"
+    },
+
+    option: {
+      left: -theme.spacing(0.5),
+      position: "relative"
+    },
+    optionRadio: {
+      left: -theme.spacing(0.25)
+    }
+  }),
+  { name: "FilterContentBody" }
+);
+
+const filterTestingContext = "filter-field";
+
+export interface FilterContentBodyProps<T extends string = string> {
+  children?: React.ReactNode;
+  filter: IFilterElement<T>;
+  currencySymbol?: string;
+  initialAutocompleteDisplayValues: FilterAutocompleteDisplayValues;
+  onFilterPropertyChange: React.Dispatch<FilterReducerAction<T>>;
+  autocompleteDisplayValues: FilterAutocompleteDisplayValues;
+  setAutocompleteDisplayValues: React.Dispatch<
+    React.SetStateAction<Record<string, MultiAutocompleteChoiceType[]>>
+  >;
+}
+
+const FilterContentBody: React.FC<FilterContentBodyProps> = ({
+  filter,
+  children,
+  currencySymbol,
+  onFilterPropertyChange,
+  autocompleteDisplayValues,
+  setAutocompleteDisplayValues,
+  initialAutocompleteDisplayValues
+}) => {
+  const intl = useIntl();
+  const classes = useStyles({});
+
+  if (!filter?.active) {
+    return null;
+  }
+
+  return (
+    <div className={classes.filterSettings}>
+      {children}
+      {filter.type === FieldType.text && (
+        <TextField
+          data-test={filterTestingContext}
+          data-test-id={filter.name}
+          fullWidth
+          name={filter.name}
+          InputProps={{
+            classes: {
+              input: classes.input
+            }
+          }}
+          value={filter.value[0]}
+          onChange={event =>
+            onFilterPropertyChange({
+              payload: {
+                name: filter.name,
+                update: {
+                  value: [event.target.value, filter.value[1]]
+                }
+              },
+              type: "set-property"
+            })
+          }
+        />
+      )}
+      {[FieldType.date, FieldType.price, FieldType.number].includes(
+        filter.type
+      ) && (
+        <>
+          <SingleSelectField
+            data-test="filterRangeTypeChoice"
+            choices={getIsFilterMultipleChoices(intl)}
+            value={filter.multiple ? FilterType.MULTIPLE : FilterType.SINGULAR}
+            InputProps={{
+              classes: {
+                input: classes.input
+              }
+            }}
+            onChange={event =>
+              onFilterPropertyChange({
+                payload: {
+                  name: filter.name,
+                  update: {
+                    multiple: event.target.value === FilterType.MULTIPLE
+                  }
+                },
+                type: "set-property"
+              })
+            }
+          />
+          <FormSpacer />
+          <div className={classes.inputRange}>
+            <div>
+              <Arrow className={classes.arrow} />
+            </div>
+            {filter.multiple ? (
+              <>
+                <TextField
+                  data-test={filterTestingContext}
+                  data-test-id={filter.name}
+                  data-test-range-type="min"
+                  fullWidth
+                  name={filter.name + "_min"}
+                  InputProps={{
+                    classes: {
+                      input: classes.input
+                    },
+                    endAdornment:
+                      filter.type === FieldType.price && currencySymbol,
+                    type: filter.type === FieldType.date ? "date" : "number"
+                  }}
+                  value={filter.value[0]}
+                  onChange={event =>
+                    onFilterPropertyChange({
+                      payload: {
+                        name: filter.name,
+                        update: {
+                          value: [event.target.value, filter.value[1]]
+                        }
+                      },
+                      type: "set-property"
+                    })
+                  }
+                />
+                <span className={classes.andLabel}>
+                  <FormattedMessage
+                    defaultMessage="and"
+                    description="filter range separator"
+                  />
+                </span>
+                <TextField
+                  data-test={filterTestingContext}
+                  data-test-id={filter.name}
+                  data-test-range-type="max"
+                  fullWidth
+                  name={filter.name + "_max"}
+                  InputProps={{
+                    classes: {
+                      input: classes.input
+                    },
+                    endAdornment:
+                      filter.type === FieldType.price && currencySymbol,
+                    type: filter.type === FieldType.date ? "date" : "number"
+                  }}
+                  value={filter.value[1]}
+                  onChange={event =>
+                    onFilterPropertyChange({
+                      payload: {
+                        name: filter.name,
+                        update: {
+                          value: [filter.value[0], event.target.value]
+                        }
+                      },
+                      type: "set-property"
+                    })
+                  }
+                />
+              </>
+            ) : (
+              <TextField
+                data-test={filterTestingContext}
+                data-test-id={filter.name}
+                fullWidth
+                name={filter.name}
+                InputProps={{
+                  classes: {
+                    input: classes.input
+                  },
+                  endAdornment:
+                    filter.type === FieldType.price && currencySymbol,
+                  type:
+                    filter.type === FieldType.date
+                      ? "date"
+                      : [FieldType.number, FieldType.price].includes(
+                          filter.type
+                        )
+                      ? "number"
+                      : "text"
+                }}
+                value={filter.value[0]}
+                onChange={event =>
+                  onFilterPropertyChange({
+                    payload: {
+                      name: filter.name,
+                      update: {
+                        value: [event.target.value, filter.value[1]]
+                      }
+                    },
+                    type: "set-property"
+                  })
+                }
+              />
+            )}
+          </div>
+        </>
+      )}
+      {filter.type === FieldType.options && (
+        <FilterOptionField
+          data-test={filterTestingContext}
+          data-test-id={filter.name}
+          filterField={filter}
+          onFilterPropertyChange={onFilterPropertyChange}
+        />
+      )}
+      {filter.type === FieldType.boolean &&
+        filter.options.map(option => (
+          <div
+            className={classNames(classes.option, classes.optionRadio)}
+            key={option.value}
+          >
+            <FormControlLabel
+              control={
+                <Radio
+                  data-test="filterBoolean"
+                  data-test-is-checked={filter.value[0] === option.value}
+                  checked={filter.value[0] === option.value}
+                  color="primary"
+                />
+              }
+              label={option.label}
+              name={filter.name}
+              onChange={() =>
+                onFilterPropertyChange({
+                  payload: {
+                    name: filter.name,
+                    update: {
+                      value: [option.value]
+                    }
+                  },
+                  type: "set-property"
+                })
+              }
+            />
+          </div>
+        ))}
+      {filter.type === FieldType.autocomplete && filter.multiple && (
+        <FilterAutocompleteField
+          data-test={filterTestingContext}
+          data-test-id={filter.name}
+          displayValues={autocompleteDisplayValues}
+          filterField={filter}
+          setDisplayValues={setAutocompleteDisplayValues}
+          onFilterPropertyChange={onFilterPropertyChange}
+          initialDisplayValues={initialAutocompleteDisplayValues}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FilterContentBody;
diff --git a/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx b/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx
new file mode 100644
index 000000000..6bd6849de
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx
@@ -0,0 +1,61 @@
+import { Checkbox, FormControlLabel, makeStyles } from "@material-ui/core";
+import React from "react";
+
+import { FilterReducerAction } from "../reducer";
+import { IFilterElement } from "../types";
+
+const useStyles = makeStyles(
+  theme => ({
+    container: {
+      "&:not(:last-of-type)": {
+        borderBottom: `1px solid ${theme.palette.divider}`
+      },
+      padding: theme.spacing(1, 2.5)
+    }
+  }),
+  { name: "FilterContentBodyNameField" }
+);
+
+export interface FilterContentBodyNameFieldProps<T extends string = string> {
+  filter: IFilterElement<T>;
+  onFilterPropertyChange: React.Dispatch<FilterReducerAction<T>>;
+}
+
+const FilterContentBodyNameField: React.FC<FilterContentBodyNameFieldProps> = ({
+  filter,
+  onFilterPropertyChange
+}) => {
+  const classes = useStyles({});
+
+  if (!filter) {
+    return null;
+  }
+
+  return (
+    <div className={classes.container}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            data-test="filterGroupActive"
+            data-test-id={filter.name}
+            checked={filter.active}
+          />
+        }
+        label={filter.label}
+        onChange={() =>
+          onFilterPropertyChange({
+            payload: {
+              name: filter.name,
+              update: {
+                active: !filter.active
+              }
+            },
+            type: "set-property"
+          })
+        }
+      />
+    </div>
+  );
+};
+
+export default FilterContentBodyNameField;
diff --git a/src/components/Filter/FilterContent/FilterContentHeader.tsx b/src/components/Filter/FilterContent/FilterContentHeader.tsx
new file mode 100644
index 000000000..7b704ea95
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterContentHeader.tsx
@@ -0,0 +1,55 @@
+import { Button, makeStyles, Typography } from "@material-ui/core";
+import { buttonMessages } from "@saleor/intl";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+const useStyles = makeStyles(
+  theme => ({
+    container: {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      padding: theme.spacing(1, 3)
+    },
+    clear: {
+      marginRight: theme.spacing(1)
+    },
+    label: {
+      fontWeight: 600
+    }
+  }),
+  { name: "FilterContentHeader" }
+);
+
+interface FilterContentHeaderProps {
+  onClear: () => void;
+}
+
+const FilterContentHeader: React.FC<FilterContentHeaderProps> = ({
+  onClear
+}) => {
+  const classes = useStyles({});
+
+  return (
+    <div className={classes.container}>
+      <Typography className={classes.label}>
+        <FormattedMessage defaultMessage="Filters" />
+      </Typography>
+      <div>
+        <Button data-test="clear" className={classes.clear} onClick={onClear}>
+          <FormattedMessage {...buttonMessages.clear} />
+        </Button>
+        <Button
+          data-test="submit"
+          color="primary"
+          variant="contained"
+          type="submit"
+        >
+          <FormattedMessage {...buttonMessages.done} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default FilterContentHeader;
diff --git a/src/components/Filter/FilterContent/FilterErrorsList.tsx b/src/components/Filter/FilterContent/FilterErrorsList.tsx
new file mode 100644
index 000000000..1d8e57525
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterErrorsList.tsx
@@ -0,0 +1,80 @@
+import { fade, makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InlineAlert from "@saleor/components/Alert/InlineAlert";
+import { useStyles as useDotStyles } from "@saleor/components/StatusLabel";
+import classNames from "classnames";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { FilterErrorMessages, FilterErrors, IFilterElement } from "../types";
+
+const useStyles = makeStyles(
+  theme => ({
+    container: {
+      backgroundColor: fade(theme.palette.primary.main, 0.1),
+      padding: theme.spacing(3, 3, 0, 3)
+    },
+    listItemTitle: {
+      color: theme.palette.primary.contrastText
+    },
+    dot: {
+      backgroundColor: theme.palette.primary.contrastText,
+      marginRight: theme.spacing(1)
+    },
+    itemContainer: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }),
+  { name: "FilterErrorsList" }
+);
+
+interface FilterErrorsListProps<T extends string = string> {
+  filter: IFilterElement<T>;
+  errors?: FilterErrors;
+  errorMessages?: FilterErrorMessages<T>;
+}
+
+const FilterErrorsList: React.FC<FilterErrorsListProps> = ({
+  filter: { name, multipleFields },
+  errors = [],
+  errorMessages
+}) => {
+  const classes = useStyles({});
+  const dotClasses = useDotStyles({});
+  const intl = useIntl();
+
+  const hasError = (fieldName: string) =>
+    !!errors.find(errorName => errorName === fieldName);
+
+  const hasErrorsToShow = () => {
+    if (!!multipleFields?.length) {
+      return multipleFields.some(multipleField => hasError(multipleField.name));
+    }
+
+    return hasError(name);
+  };
+
+  if (!errors.length || !hasErrorsToShow()) {
+    return null;
+  }
+
+  return (
+    <div className={classes.container}>
+      {!!errors.length && (
+        <InlineAlert>
+          {errors.map(fieldName => (
+            <div className={classes.itemContainer}>
+              <div className={classNames(classes.dot, dotClasses.dot)} />
+              <Typography className={classes.listItemTitle}>
+                {intl.formatMessage(errorMessages?.[fieldName])}
+              </Typography>
+            </div>
+          ))}
+        </InlineAlert>
+      )}
+    </div>
+  );
+};
+
+export default FilterErrorsList;
diff --git a/src/components/Filter/FilterContent/index.tsx b/src/components/Filter/FilterContent/index.tsx
new file mode 100644
index 000000000..21dd6c64b
--- /dev/null
+++ b/src/components/Filter/FilterContent/index.tsx
@@ -0,0 +1,2 @@
+export * from "./FilterContent";
+export { default } from "./FilterContent";
diff --git a/src/components/Filter/FilterContent/utils.ts b/src/components/Filter/FilterContent/utils.ts
new file mode 100644
index 000000000..961e30a81
--- /dev/null
+++ b/src/components/Filter/FilterContent/utils.ts
@@ -0,0 +1,27 @@
+import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
+import { IntlShape } from "react-intl";
+
+import { FilterType } from "../types";
+
+export function getIsFilterMultipleChoices(
+  intl: IntlShape
+): SingleAutocompleteChoiceType[] {
+  return [
+    {
+      label: intl.formatMessage({
+        defaultMessage: "equal to",
+        description: "is filter range or value",
+        id: "is filter range equal to value"
+      }),
+      value: FilterType.SINGULAR
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "between",
+        description: "is filter range or value",
+        id: "is filter range between value"
+      }),
+      value: FilterType.MULTIPLE
+    }
+  ];
+}
diff --git a/src/components/Filter/types.ts b/src/components/Filter/types.ts
index f872a87f1..f157283c6 100644
--- a/src/components/Filter/types.ts
+++ b/src/components/Filter/types.ts
@@ -1,4 +1,5 @@
 import { FetchMoreProps, SearchPageProps } from "@saleor/types";
+import { MessageDescriptor } from "react-intl";
 
 import { MultiAutocompleteChoiceType } from "../MultiAutocompleteSelectField";
 import { FilterReducerAction } from "./reducer";
@@ -28,7 +29,9 @@ export interface IFilterElement<T extends string = string>
   group?: T;
   label: string;
   name: T;
-  type: FieldType;
+  type?: FieldType;
+  required?: boolean;
+  multipleFields?: IFilterElement[];
 }
 
 export interface FilterBaseFieldProps<T extends string = string> {
@@ -36,6 +39,13 @@ export interface FilterBaseFieldProps<T extends string = string> {
   onFilterPropertyChange: React.Dispatch<FilterReducerAction<T>>;
 }
 
+export type FilterErrors = string[];
+
+export type FilterErrorMessages<T extends string> = Record<
+  T,
+  MessageDescriptor
+>;
+
 export type IFilter<T extends string = string> = Array<IFilterElement<T>>;
 
 export enum FilterType {
diff --git a/src/components/Filter/useFilter.ts b/src/components/Filter/useFilter.ts
index 0816cab13..925605bc6 100644
--- a/src/components/Filter/useFilter.ts
+++ b/src/components/Filter/useFilter.ts
@@ -9,15 +9,31 @@ export type UseFilter<T extends string> = [
   () => void
 ];
 
+function getParsedInitialFilter<T extends string>(
+  initialFilter: IFilter<T>
+): IFilter<T> {
+  return initialFilter.reduce((resultFilter, filterField) => {
+    if (filterField.multipleFields) {
+      return resultFilter
+        .concat(filterField.multipleFields)
+        .concat([filterField]);
+    }
+
+    return resultFilter.concat(filterField);
+  }, []);
+}
+
 function useFilter<T extends string>(initialFilter: IFilter<T>): UseFilter<T> {
+  const parsedInitialFilter = getParsedInitialFilter(initialFilter);
+
   const [data, dispatchFilterAction] = useReducer<
     React.Reducer<IFilter<T>, FilterReducerAction<T>>
-  >(reduceFilter, initialFilter);
+  >(reduceFilter, parsedInitialFilter);
 
   const reset = () =>
     dispatchFilterAction({
       payload: {
-        new: initialFilter.map(each => ({
+        new: parsedInitialFilter.map(each => ({
           ...each,
           active: false,
           value: []
@@ -29,7 +45,7 @@ function useFilter<T extends string>(initialFilter: IFilter<T>): UseFilter<T> {
   const refresh = () =>
     dispatchFilterAction({
       payload: {
-        new: initialFilter
+        new: parsedInitialFilter
       },
       type: "merge"
     });
diff --git a/src/components/Filter/utils.ts b/src/components/Filter/utils.ts
new file mode 100644
index 000000000..371fb3b7d
--- /dev/null
+++ b/src/components/Filter/utils.ts
@@ -0,0 +1,68 @@
+import compact from "lodash-es/compact";
+
+import { FieldType, IFilterElement } from "./types";
+
+export const getByName = (nameToCompare: string) => (obj: { name: string }) =>
+  obj.name === nameToCompare;
+
+export const isAutocompleteFilterFieldValid = function<T extends string>({
+  value
+}: IFilterElement<T>) {
+  return !!compact(value).length;
+};
+
+export const isFilterFieldValid = function<T extends string>(
+  filter: IFilterElement<T>
+) {
+  const { type } = filter;
+
+  switch (type) {
+    case FieldType.boolean:
+    case FieldType.autocomplete:
+      return isAutocompleteFilterFieldValid(filter);
+
+    default:
+      return true;
+  }
+};
+
+export const isFilterValid = function<T extends string>(
+  resultFilters: Array<IFilterElement<T>>,
+  filter: IFilterElement<T>
+) {
+  const { required, active } = filter;
+
+  if (!required || !active) {
+    return resultFilters;
+  }
+
+  return isFilterFieldValid(filter)
+    ? resultFilters
+    : [...resultFilters, filter];
+};
+
+export const extractInvalidFilters = function<T extends string>(
+  filtersData: Array<IFilterElement<T>>,
+  filtersDataStructure: Array<IFilterElement<T>>
+) {
+  return filtersDataStructure.reduce(
+    (resultFilters, { name, multipleFields }) => {
+      const filter = filtersData.find(getByName(name));
+
+      const shouldExtractChildrenFields =
+        filter.active && !!multipleFields?.length;
+
+      if (shouldExtractChildrenFields) {
+        return multipleFields
+          .map(field => {
+            const dataField = filtersData.find(getByName(field.name));
+            return { ...dataField, active: true };
+          })
+          .reduce(isFilterValid, resultFilters);
+      }
+
+      return isFilterValid(resultFilters, filter);
+    },
+    []
+  );
+};
diff --git a/src/components/FilterBar/FilterBar.tsx b/src/components/FilterBar/FilterBar.tsx
index 1d85f1ac1..8405825c9 100644
--- a/src/components/FilterBar/FilterBar.tsx
+++ b/src/components/FilterBar/FilterBar.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { FilterProps } from "../../types";
 import Filter from "../Filter";
-import { IFilter } from "../Filter/types";
+import { FilterErrorMessages, IFilter } from "../Filter/types";
 import { SearchBarProps } from "../SearchBar";
 import SearchInput from "../SearchBar/SearchInput";
 import FilterTabs, { FilterTab } from "../TableFilter";
@@ -13,6 +13,7 @@ import FilterTabs, { FilterTab } from "../TableFilter";
 export interface FilterBarProps<TKeys extends string = string>
   extends FilterProps<TKeys>,
     SearchBarProps {
+  errorMessages?: FilterErrorMessages<TKeys>;
   filterStructure: IFilter<TKeys>;
 }
 
@@ -49,7 +50,8 @@ const FilterBar: React.FC<FilterBarProps> = props => {
     onFilterChange,
     onTabChange,
     onTabDelete,
-    onTabSave
+    onTabSave,
+    errorMessages
   } = props;
 
   const classes = useStyles(props);
@@ -84,6 +86,7 @@ const FilterBar: React.FC<FilterBarProps> = props => {
       </FilterTabs>
       <div className={classes.root}>
         <Filter
+          errorMessages={errorMessages}
           menu={filterStructure}
           currencySymbol={currencySymbol}
           onFilterAdd={onFilterChange}
diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx
index 83e7124db..f11ab37d5 100644
--- a/src/components/StatusLabel/StatusLabel.tsx
+++ b/src/components/StatusLabel/StatusLabel.tsx
@@ -1,43 +1,55 @@
 import grey from "@material-ui/core/colors/grey";
 import yellow from "@material-ui/core/colors/yellow";
-import Typography, { TypographyProps } from "@material-ui/core/Typography";
+import Typography from "@material-ui/core/Typography";
+import Label from "@saleor/orders/components/OrderHistory/Label";
 import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(
+export const useStyles = makeStyles(
   theme => {
     const dot = {
       borderRadius: "100%",
-      content: "''",
-      display: "block",
       height: 8,
-      left: -theme.spacing(2),
-      position: "absolute" as "absolute",
-      top: "calc(50% - 5px)",
       width: 8
     };
 
     return {
+      dot,
+      container: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      containerVertical: {
+        alignItems: "flex-start"
+      },
+      textContainer: {
+        marginLeft: theme.spacing(1),
+        display: "flex",
+        flexDirection: "column"
+      },
+      dotVertical: {
+        marginTop: theme.spacing(1)
+      },
       alertDot: {
-        "&:before": { backgroundColor: yellow[500], ...dot }
+        backgroundColor: yellow[500],
+        ...dot
       },
       errorDot: {
-        "&:before": { backgroundColor: theme.palette.error.main, ...dot }
+        backgroundColor: theme.palette.error.main,
+        ...dot
       },
       neutralDot: {
-        "&:before": { backgroundColor: grey[300], ...dot }
+        backgroundColor: grey[300],
+        ...dot
       },
-      root: {
-        display: "inline-block",
-        marginLeft: theme.spacing(1) + 8,
-        position: "relative"
+      successDot: {
+        backgroundColor: theme.palette.primary.main,
+        ...dot
       },
       span: {
         display: "inline"
-      },
-      successDot: {
-        "&:before": { backgroundColor: theme.palette.primary.main, ...dot }
       }
     };
   },
@@ -45,41 +57,43 @@ const useStyles = makeStyles(
 );
 
 interface StatusLabelProps {
-  className?: string;
   label: string | React.ReactNode;
   status: "success" | "alert" | "neutral" | "error" | string;
-  typographyProps?: TypographyProps;
+  subtitle?: string;
+  className?: string;
 }
 
-const StatusLabel: React.FC<StatusLabelProps> = props => {
-  const { className, label, status, typographyProps } = props;
-
-  const classes = useStyles(props);
+const StatusLabel: React.FC<StatusLabelProps> = ({
+  className,
+  label,
+  status,
+  subtitle
+}) => {
+  const classes = useStyles({});
 
   return (
     <div
       className={classNames({
-        [classes.root]: true,
-        [className]: true,
-        [classes.successDot]: status === "success",
-        [classes.alertDot]: status === "alert",
-        [classes.neutralDot]: status === "neutral",
-        [classes.errorDot]: status === "error"
+        [classes.container]: true,
+        [classes.containerVertical]: !!subtitle
       })}
     >
-      {typographyProps ? (
-        <Typography
-          component="span"
-          className={classes.span}
-          {...typographyProps}
-        >
-          {label}
-        </Typography>
-      ) : (
-        label
-      )}
+      <div
+        className={classNames({
+          [className]: true,
+          [classes.dotVertical]: !!subtitle,
+          [classes.successDot]: status === "success",
+          [classes.alertDot]: status === "alert",
+          [classes.neutralDot]: status === "neutral",
+          [classes.errorDot]: status === "error"
+        })}
+      ></div>
+      <div className={classes.textContainer}>
+        <Typography>{label}</Typography>
+        {subtitle && <Label text={subtitle} />}
+      </div>
     </div>
   );
 };
-StatusLabel.displayName = "StatusLabel";
+
 export default StatusLabel;
diff --git a/src/components/StatusLabel/messages.ts b/src/components/StatusLabel/messages.ts
new file mode 100644
index 000000000..8b9e19047
--- /dev/null
+++ b/src/components/StatusLabel/messages.ts
@@ -0,0 +1,16 @@
+import { defineMessages } from "react-intl";
+
+export const statusLabelMessages = defineMessages({
+  active: {
+    defaultMessage: "Active",
+    description: "status label active"
+  },
+  inactive: {
+    defaultMessage: "Inactive",
+    description: "status label inactive"
+  },
+  deactivated: {
+    defaultMessage: "Deactivated",
+    description: "status label deactivated"
+  }
+});
diff --git a/src/fragments/plugins.ts b/src/fragments/plugins.ts
index 3a128af56..d88d0e413 100644
--- a/src/fragments/plugins.ts
+++ b/src/fragments/plugins.ts
@@ -1,11 +1,42 @@
 import gql from "graphql-tag";
 
+export const configurationItemFragment = gql`
+  fragment ConfigurationItemFragment on ConfigurationItem {
+    name
+    value
+    type
+    helpText
+    label
+  }
+`;
+
+export const pluginConfigurationFragment = gql`
+  ${configurationItemFragment}
+  fragment PluginConfigurationFragment on PluginConfiguration {
+    active
+    channel {
+      id
+      name
+      slug
+    }
+    configuration {
+      ...ConfigurationItemFragment
+    }
+  }
+`;
+
 export const pluginsFragment = gql`
+  ${pluginConfigurationFragment}
   fragment PluginFragment on Plugin {
     id
     name
     description
-    active
+    globalConfiguration {
+      ...PluginConfigurationFragment
+    }
+    channelConfigurations {
+      ...PluginConfigurationFragment
+    }
   }
 `;
 
@@ -13,12 +44,5 @@ export const pluginsDetailsFragment = gql`
   ${pluginsFragment}
   fragment PluginsDetailsFragment on Plugin {
     ...PluginFragment
-    configuration {
-      name
-      type
-      value
-      helpText
-      label
-    }
   }
 `;
diff --git a/src/fragments/types/ConfigurationItemFragment.ts b/src/fragments/types/ConfigurationItemFragment.ts
new file mode 100644
index 000000000..81de8d0c1
--- /dev/null
+++ b/src/fragments/types/ConfigurationItemFragment.ts
@@ -0,0 +1,19 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: ConfigurationItemFragment
+// ====================================================
+
+export interface ConfigurationItemFragment {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
diff --git a/src/fragments/types/PluginConfiguarionFragment.ts b/src/fragments/types/PluginConfiguarionFragment.ts
new file mode 100644
index 000000000..1a16e94dd
--- /dev/null
+++ b/src/fragments/types/PluginConfiguarionFragment.ts
@@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: PluginConfiguarionFragment
+// ====================================================
+
+export interface PluginConfiguarionFragment_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginConfiguarionFragment_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface PluginConfiguarionFragment {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginConfiguarionFragment_channel | null;
+  configuration: (PluginConfiguarionFragment_configuration | null)[] | null;
+}
diff --git a/src/fragments/types/PluginConfigurationFragment.ts b/src/fragments/types/PluginConfigurationFragment.ts
new file mode 100644
index 000000000..6f75ac9a2
--- /dev/null
+++ b/src/fragments/types/PluginConfigurationFragment.ts
@@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: PluginConfigurationFragment
+// ====================================================
+
+export interface PluginConfigurationFragment_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginConfigurationFragment_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface PluginConfigurationFragment {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginConfigurationFragment_channel | null;
+  configuration: (PluginConfigurationFragment_configuration | null)[] | null;
+}
diff --git a/src/fragments/types/PluginFragment.ts b/src/fragments/types/PluginFragment.ts
index c4a323dae..d546aed49 100644
--- a/src/fragments/types/PluginFragment.ts
+++ b/src/fragments/types/PluginFragment.ts
@@ -3,14 +3,63 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL fragment: PluginFragment
 // ====================================================
 
+export interface PluginFragment_globalConfiguration_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginFragment_globalConfiguration_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface PluginFragment_globalConfiguration {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginFragment_globalConfiguration_channel | null;
+  configuration: (PluginFragment_globalConfiguration_configuration | null)[] | null;
+}
+
+export interface PluginFragment_channelConfigurations_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginFragment_channelConfigurations_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface PluginFragment_channelConfigurations {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginFragment_channelConfigurations_channel | null;
+  configuration: (PluginFragment_channelConfigurations_configuration | null)[] | null;
+}
+
 export interface PluginFragment {
   __typename: "Plugin";
   id: string;
   name: string;
   description: string;
-  active: boolean;
+  globalConfiguration: PluginFragment_globalConfiguration | null;
+  channelConfigurations: PluginFragment_channelConfigurations[];
 }
diff --git a/src/fragments/types/PluginsDetailsFragment.ts b/src/fragments/types/PluginsDetailsFragment.ts
index 6aeb21c29..2e4b15f59 100644
--- a/src/fragments/types/PluginsDetailsFragment.ts
+++ b/src/fragments/types/PluginsDetailsFragment.ts
@@ -9,20 +9,57 @@ import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
 // GraphQL fragment: PluginsDetailsFragment
 // ====================================================
 
-export interface PluginsDetailsFragment_configuration {
+export interface PluginsDetailsFragment_globalConfiguration_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginsDetailsFragment_globalConfiguration_configuration {
   __typename: "ConfigurationItem";
   name: string;
-  type: ConfigurationTypeFieldEnum | null;
   value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
   helpText: string | null;
   label: string | null;
 }
 
+export interface PluginsDetailsFragment_globalConfiguration {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginsDetailsFragment_globalConfiguration_channel | null;
+  configuration: (PluginsDetailsFragment_globalConfiguration_configuration | null)[] | null;
+}
+
+export interface PluginsDetailsFragment_channelConfigurations_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginsDetailsFragment_channelConfigurations_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface PluginsDetailsFragment_channelConfigurations {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginsDetailsFragment_channelConfigurations_channel | null;
+  configuration: (PluginsDetailsFragment_channelConfigurations_configuration | null)[] | null;
+}
+
 export interface PluginsDetailsFragment {
   __typename: "Plugin";
   id: string;
   name: string;
   description: string;
-  active: boolean;
-  configuration: (PluginsDetailsFragment_configuration | null)[] | null;
+  globalConfiguration: PluginsDetailsFragment_globalConfiguration | null;
+  channelConfigurations: PluginsDetailsFragment_channelConfigurations[];
 }
diff --git a/src/hooks/useChannelsSearch.ts b/src/hooks/useChannelsSearch.ts
new file mode 100644
index 000000000..394c49f4f
--- /dev/null
+++ b/src/hooks/useChannelsSearch.ts
@@ -0,0 +1,21 @@
+import { Channel_channel } from "@saleor/channels/types/Channel";
+import { FetchMoreProps, Search, SearchProps } from "@saleor/types";
+import { filter } from "fuzzaldrin";
+import React from "react";
+
+export const useChannelsSearch = function<T extends { name: string }>(
+  channels: T[]
+) {
+  const [query, onQueryChange] = React.useState("");
+  const filteredChannels =
+    filter<T, "name">(channels, query, { key: "name" }) || [];
+
+  return { query, onQueryChange, filteredChannels };
+};
+
+export interface ChannelsWithLoadMoreProps
+  extends FetchMoreProps,
+    Search,
+    SearchProps {
+  channels: Channel_channel[];
+}
diff --git a/src/hooks/useChannelsSearchWithLoadMore.ts b/src/hooks/useChannelsSearchWithLoadMore.ts
new file mode 100644
index 000000000..9100415b1
--- /dev/null
+++ b/src/hooks/useChannelsSearchWithLoadMore.ts
@@ -0,0 +1,66 @@
+import { useBaseChannelsList } from "@saleor/channels/queries";
+import chunk from "lodash-es/chunk";
+import compact from "lodash-es/compact";
+import concat from "lodash-es/concat";
+import { useEffect, useState } from "react";
+
+import {
+  ChannelsWithLoadMoreProps,
+  useChannelsSearch
+} from "./useChannelsSearch";
+
+const DEFAULT_ITEMS_PER_PAGE = 6;
+const INITIAL_INDEX = 0;
+
+export const useChannelsSearchWithLoadMore = (
+  itemsPerPage: number = DEFAULT_ITEMS_PER_PAGE
+): ChannelsWithLoadMoreProps => {
+  const { data, loading } = useBaseChannelsList({});
+
+  const {
+    query,
+    onQueryChange: onSearchChange,
+    filteredChannels
+  } = useChannelsSearch(data?.channels);
+
+  const allChannelsChunks = chunk(filteredChannels, itemsPerPage);
+
+  const [currentIndex, setCurrentIndex] = useState(INITIAL_INDEX);
+  const [currentChannelsChunks, setCurrentChannelsChunks] = useState([]);
+
+  const handleAddInitialChunk = () => {
+    if (data?.channels && !loading) {
+      setCurrentChannelsChunks([allChannelsChunks[INITIAL_INDEX]]);
+    }
+  };
+
+  useEffect(handleAddInitialChunk, [loading, query]);
+
+  const onFetchMore = () => {
+    if (!hasMore) {
+      return;
+    }
+
+    const newIndex = currentIndex + 1;
+    setCurrentIndex(newIndex);
+
+    const newChunk = allChannelsChunks[newIndex];
+    setCurrentChannelsChunks([...currentChannelsChunks, newChunk]);
+  };
+
+  const hasMore = allChannelsChunks.length > currentChannelsChunks.length;
+
+  const channels = compact(concat([], ...currentChannelsChunks));
+
+  const totalCount = data?.channels.length;
+
+  return {
+    query,
+    onSearchChange,
+    channels,
+    hasMore,
+    totalCount,
+    onFetchMore,
+    loading
+  };
+};
diff --git a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
index 4f9135646..6f6e73ed9 100644
--- a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
+++ b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
@@ -108,6 +108,7 @@ const OrderAddressEditDialog: React.FC<OrderAddressEditDialogProps> = props => {
                   <FormattedMessage {...buttonMessages.back} />
                 </Button>
                 <ConfirmButton
+                  data-test-id="order-address-edit-dialog-confirm-button"
                   transitionState={confirmButtonState}
                   color="primary"
                   variant="contained"
diff --git a/src/orders/components/OrderCustomer/OrderCustomer.tsx b/src/orders/components/OrderCustomer/OrderCustomer.tsx
index 4f79e1aeb..55ee02ff8 100644
--- a/src/orders/components/OrderCustomer/OrderCustomer.tsx
+++ b/src/orders/components/OrderCustomer/OrderCustomer.tsx
@@ -184,7 +184,12 @@ const OrderCustomer: React.FC<OrderCustomerProps> = props => {
           )
         ) : (
           <>
-            <Typography className={classes.userEmail}>{user.email}</Typography>
+            <Typography
+              className={classes.userEmail}
+              data-test-id="customer-email"
+            >
+              {user.email}
+            </Typography>
             <RequirePermissions
               userPermissions={userPermissions}
               requiredPermissions={[PermissionEnum.MANAGE_USERS]}
@@ -257,6 +262,7 @@ const OrderCustomer: React.FC<OrderCustomerProps> = props => {
           {canEditAddresses && (
             <div className={classes.sectionHeaderToolbar}>
               <Button
+                data-test-id="edit-shipping-address"
                 color="primary"
                 variant="text"
                 onClick={onShippingAddressEdit}
@@ -314,6 +320,7 @@ const OrderCustomer: React.FC<OrderCustomerProps> = props => {
           {canEditAddresses && (
             <div className={classes.sectionHeaderToolbar}>
               <Button
+                data-test-id="edit-billing-address"
                 color="primary"
                 variant="text"
                 onClick={onBillingAddressEdit}
diff --git a/src/pageTypes/hooks/usePageTypeDelete/messages.ts b/src/pageTypes/hooks/usePageTypeDelete/messages.ts
index 46de4491d..cab820297 100644
--- a/src/pageTypes/hooks/usePageTypeDelete/messages.ts
+++ b/src/pageTypes/hooks/usePageTypeDelete/messages.ts
@@ -4,12 +4,12 @@ export const baseMessages = defineMessages({
   title: {
     defaultMessage:
       "Delete page {selectedTypesCount,plural,one{type} other{types}}",
-    description: "ProductTypeDeleteWarningDialog title"
+    description: "PageTypeDeleteWarningDialog title"
   },
   viewAssignedItemsButtonLabel: {
     defaultMessage: "View pages",
     description:
-      "ProductTypeDeleteWarningDialog single assigned items button label"
+      "PageTypeDeleteWarningDialog single assigned items button label"
   }
 });
 
@@ -18,11 +18,13 @@ export const singleWithItemsMessages = defineMessages({
     defaultMessage:
       "You are about to delete page type <b>{typeName}</b>. It is assigned to {assignedItemsCount} {assignedItemsCount,plural,one{page} other{pages}}. Deleting this page type will also delete those pages. Are you sure you want to do this?",
     description:
-      "ProductTypeDeleteWarningDialog single assigned items description"
+      "PageTypeDeleteWarningDialog single assigned items description",
+    id: "PageTypeDeleteWarningDialog single assigned items description"
   },
   consentLabel: {
     defaultMessage: "Yes, I want to delete this page type and assigned pages",
-    description: "ProductTypeDeleteWarningDialog single consent label"
+    description: "PageTypeDeleteWarningDialog single consent label",
+    id: "PageTypeDeleteWarningDialog single consent label"
   }
 });
 
@@ -30,13 +32,14 @@ export const multipleWithItemsMessages = defineMessages({
   description: {
     defaultMessage:
       "You are about to delete multiple page types. Some of them are assigned to pages. Deleting those page types will also delete those pages",
-    description:
-      "ProductTypeDeleteWarningDialog with items multiple description"
+    description: "PageTypeDeleteWarningDialog with items multiple description",
+    id: "PageTypeDeleteWarningDialog with items multiple description"
   },
   consentLabel: {
     defaultMessage:
       "Yes, I want to delete those pages types and assigned pages",
-    description: "ProductTypeDeleteWarningDialog multiple consent label"
+    description: "PageTypeDeleteWarningDialog multiple consent label",
+    id: "PageTypeDeleteWarningDialog multiple consent label"
   }
 });
 
@@ -45,7 +48,9 @@ export const singleWithoutItemsMessages = defineMessages({
     defaultMessage:
       "Are you sure you want to delete <b>{typeName}</b>? If you remove it you won’t be able to assign it to created pages.",
     description:
-      "ProductTypeDeleteWarningDialog single assigned items description"
+      "PageTypeDeleteWarningDialog single no assigned items description",
+
+    id: "PageTypeDeleteWarningDialog single no assigned items description"
   }
 });
 
@@ -54,6 +59,8 @@ export const multipleWithoutItemsMessages = defineMessages({
     defaultMessage:
       "Are you sure you want to delete selected page types? If you remove them you won’t be able to assign them to created pages.",
     description:
-      "ProductTypeDeleteWarningDialog single assigned items description"
+      "PageTypeDeleteWarningDialog multiple assigned items description",
+
+    id: "PageTypeDeleteWarningDialog multiple assigned items description"
   }
 });
diff --git a/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx b/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx
index 587b43297..912006049 100644
--- a/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx
+++ b/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx
@@ -4,8 +4,8 @@ import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
+import { PluginConfigurationFragment_configuration } from "@saleor/fragments/types/PluginConfigurationFragment";
 import { buttonMessages } from "@saleor/intl";
-import { Plugin_plugin_configuration } from "@saleor/plugins/types/Plugin";
 import { isSecretField } from "@saleor/plugins/utils";
 import { makeStyles } from "@saleor/theme";
 import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
@@ -13,7 +13,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 interface PluginAuthorizationProps {
-  fields: Plugin_plugin_configuration[];
+  fields: PluginConfigurationFragment_configuration[];
   onClear: (field: string) => void;
   onEdit: (field: string) => void;
 }
diff --git a/src/plugins/components/PluginDetailsChannelsCard/PluginDetailsChannelsCard.tsx b/src/plugins/components/PluginDetailsChannelsCard/PluginDetailsChannelsCard.tsx
new file mode 100644
index 000000000..8802f3836
--- /dev/null
+++ b/src/plugins/components/PluginDetailsChannelsCard/PluginDetailsChannelsCard.tsx
@@ -0,0 +1,22 @@
+import { Card } from "@material-ui/core";
+import CardTitle from "@saleor/components/CardTitle";
+import { sectionNames } from "@saleor/intl";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import PluginDetailsChannelsCardContent, {
+  PluginDetailsChannelsCardProps
+} from "./PluginDetailsChannelsCardContent";
+
+const PluginDetailsChannelsCard: React.FC<PluginDetailsChannelsCardProps> = props => {
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle title={intl.formatMessage(sectionNames.channels)} />
+      <PluginDetailsChannelsCardContent {...props} />
+    </Card>
+  );
+};
+
+export default PluginDetailsChannelsCard;
diff --git a/src/plugins/components/PluginDetailsChannelsCard/PluginDetailsChannelsCardContent.tsx b/src/plugins/components/PluginDetailsChannelsCard/PluginDetailsChannelsCardContent.tsx
new file mode 100644
index 000000000..2fa9877dd
--- /dev/null
+++ b/src/plugins/components/PluginDetailsChannelsCard/PluginDetailsChannelsCardContent.tsx
@@ -0,0 +1,83 @@
+import { CardContent, makeStyles, Typography } from "@material-ui/core";
+import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
+import Skeleton from "@saleor/components/Skeleton";
+import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { isPluginGlobal } from "@saleor/plugins/views/utils";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+const useStyles = makeStyles(
+  theme => ({
+    itemContainer: {
+      position: "relative",
+      cursor: "pointer"
+    },
+    itemActiveIndicator: {
+      position: "absolute",
+      left: 0,
+      backgroundColor: theme.palette.primary.main,
+      width: 2,
+      height: "100%"
+    }
+  }),
+  { name: "PluginDetailsChannelsCardContent" }
+);
+
+export interface PluginDetailsChannelsCardProps {
+  setSelectedChannelId: (channelId: string) => void;
+  selectedChannelId: string;
+  plugin: Plugin_plugin;
+}
+
+import { pluginDetailsChannelsCardMessages as messages } from "./messages";
+
+const PluginDetailsChannelsCardContent: React.FC<PluginDetailsChannelsCardProps> = ({
+  plugin,
+  selectedChannelId,
+  setSelectedChannelId
+}) => {
+  const classes = useStyles({});
+
+  if (!plugin) {
+    return (
+      <CardContent>
+        <Skeleton />
+      </CardContent>
+    );
+  }
+
+  if (isPluginGlobal(plugin.globalConfiguration)) {
+    return (
+      <CardContent>
+        <FormattedMessage {...messages.noChannelsSubtitle} />
+      </CardContent>
+    );
+  }
+
+  const isChannelSelected = (channelId: string) =>
+    selectedChannelId === channelId;
+
+  return (
+    <>
+      <CollectionWithDividers
+        collection={plugin.channelConfigurations}
+        renderItem={({ channel }) => (
+          <div
+            className={classes.itemContainer}
+            key={channel.id}
+            onClick={() => setSelectedChannelId(channel.id)}
+          >
+            {isChannelSelected(channel.id) && (
+              <div className={classes.itemActiveIndicator}></div>
+            )}
+            <CardContent>
+              <Typography>{channel.name}</Typography>
+            </CardContent>
+          </div>
+        )}
+      />
+    </>
+  );
+};
+
+export default PluginDetailsChannelsCardContent;
diff --git a/src/plugins/components/PluginDetailsChannelsCard/index.tsx b/src/plugins/components/PluginDetailsChannelsCard/index.tsx
new file mode 100644
index 000000000..6fbcc4e5f
--- /dev/null
+++ b/src/plugins/components/PluginDetailsChannelsCard/index.tsx
@@ -0,0 +1,2 @@
+export * from "./PluginDetailsChannelsCard";
+export { default } from "./PluginDetailsChannelsCard";
diff --git a/src/plugins/components/PluginDetailsChannelsCard/messages.ts b/src/plugins/components/PluginDetailsChannelsCard/messages.ts
new file mode 100644
index 000000000..600f0f792
--- /dev/null
+++ b/src/plugins/components/PluginDetailsChannelsCard/messages.ts
@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+
+export const pluginDetailsChannelsCardMessages = defineMessages({
+  noChannelsSubtitle: {
+    defaultMessage: "Plugin’s settings are set common across all channels",
+    description: "PluginDetailsChannelsCard no channels subtitle"
+  }
+});
diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
index 9d8a4c8ae..30fd08383 100644
--- a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
+++ b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
@@ -9,9 +9,9 @@ import ConfirmButton, {
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import Skeleton from "@saleor/components/Skeleton";
+import { PluginConfigurationFragment_configuration } from "@saleor/fragments/types/PluginConfigurationFragment";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
-import { Plugin_plugin_configuration } from "@saleor/plugins/types/Plugin";
 import { DialogProps } from "@saleor/types";
 import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
 import React from "react";
@@ -22,7 +22,7 @@ export interface PluginSecretFieldDialogFormData {
 }
 export interface PluginSecretFieldDialogProps extends DialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
-  field: Plugin_plugin_configuration;
+  field: PluginConfigurationFragment_configuration;
   onConfirm: (data: PluginSecretFieldDialogFormData) => void;
 }
 
diff --git a/src/plugins/components/PluginSettings/PluginSettings.tsx b/src/plugins/components/PluginSettings/PluginSettings.tsx
index 0f6f7761e..48954a293 100644
--- a/src/plugins/components/PluginSettings/PluginSettings.tsx
+++ b/src/plugins/components/PluginSettings/PluginSettings.tsx
@@ -6,7 +6,7 @@ import Typography from "@material-ui/core/Typography";
 import InfoIcon from "@material-ui/icons/Info";
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledSwitch from "@saleor/components/ControlledSwitch";
-import { Plugin_plugin_configuration } from "@saleor/plugins/types/Plugin";
+import { PluginConfigurationFragment_configuration } from "@saleor/fragments/types/PluginConfigurationFragment";
 import { makeStyles } from "@saleor/theme";
 import { UserError } from "@saleor/types";
 import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
@@ -21,7 +21,7 @@ interface PluginSettingsProps {
   errors: UserError[];
   disabled: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
-  fields: Plugin_plugin_configuration[];
+  fields: PluginConfigurationFragment_configuration[];
 }
 
 const useStyles = makeStyles(
diff --git a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
index 027ff0a87..e49cec91f 100644
--- a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
+++ b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
@@ -1,11 +1,10 @@
-import Typography from "@material-ui/core/Typography";
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
+// import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
-import Hr from "@saleor/components/Hr";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { PluginErrorFragment } from "@saleor/fragments/types/PluginErrorFragment";
@@ -13,15 +12,16 @@ import { ChangeEvent } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
 import { getStringOrPlaceholder } from "@saleor/misc";
 import { isSecretField } from "@saleor/plugins/utils";
-import { makeStyles } from "@saleor/theme";
 import { ConfigurationItemInput } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { Plugin_plugin } from "../../types/Plugin";
 import PluginAuthorization from "../PluginAuthorization";
+import PluginDetailsChannelsCard from "../PluginDetailsChannelsCard";
 import PluginInfo from "../PluginInfo";
 import PluginSettings from "../PluginSettings";
+import { PluginConfiguration } from "./types";
 
 export interface PluginDetailsPageFormData {
   active: boolean;
@@ -31,51 +31,50 @@ export interface PluginDetailsPageFormData {
 export interface PluginsDetailsPageProps {
   disabled: boolean;
   errors: PluginErrorFragment[];
-  plugin: Plugin_plugin;
+  plugin?: Plugin_plugin;
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onClear: (field: string) => void;
   onEdit: (field: string) => void;
   onSubmit: (data: PluginDetailsPageFormData) => void;
+  selectedConfig?: PluginConfiguration;
+  setSelectedChannelId: (channelId: string) => void;
 }
 
-const useStyles = makeStyles(
-  {
-    spacer: {
-      gridColumnEnd: "span 2"
-    }
-  },
-  {
-    name: "PluginsDetailsPage"
-  }
-);
-
-const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = props => {
-  const {
-    disabled,
-    errors,
-    plugin,
-    saveButtonBarState,
-    onBack,
-    onClear,
-    onEdit,
-    onSubmit
-  } = props;
-
-  const classes = useStyles(props);
+const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
+  disabled,
+  errors,
+  plugin,
+  saveButtonBarState,
+  onBack,
+  onClear,
+  onEdit,
+  onSubmit,
+  selectedConfig,
+  setSelectedChannelId
+}) => {
   const intl = useIntl();
-  const initialForm: PluginDetailsPageFormData = {
-    active: plugin?.active || false,
-    configuration: plugin?.configuration
-      ?.filter(field => !isSecretField(plugin?.configuration || [], field.name))
+
+  const initialFormData = (): PluginDetailsPageFormData => ({
+    active: selectedConfig?.active,
+    configuration: selectedConfig?.configuration
+      ?.filter(
+        field => !isSecretField(selectedConfig?.configuration || [], field.name)
+      )
       .map(field => ({
         ...field,
         value: field.value || ""
       }))
-  };
+  });
+
+  const selectedChannelId = selectedConfig?.channel?.id;
 
   return (
-    <Form initial={initialForm} onSubmit={onSubmit}>
+    <Form
+      initial={initialFormData()}
+      onSubmit={onSubmit}
+      key={selectedChannelId}
+    >
       {({ data, hasChanged, submit, set }) => {
         const onChange = (event: ChangeEvent) => {
           const { name, value } = event.target;
@@ -91,7 +90,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = props => {
               }
             });
 
-            plugin.configuration.map(item => {
+            selectedConfig.configuration.map(item => {
               if (item.name === name) {
                 item.value = value;
               }
@@ -118,60 +117,45 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = props => {
             />
             <Grid variant="inverted">
               <div>
-                <Typography variant="h6">
-                  {intl.formatMessage({
-                    defaultMessage: "Plugin Information and Status",
-                    description: "section header"
-                  })}
-                </Typography>
-                <Typography>
-                  {intl.formatMessage({
-                    defaultMessage:
-                      "These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar."
-                  })}
-                </Typography>
+                <PluginDetailsChannelsCard
+                  plugin={plugin}
+                  selectedChannelId={selectedChannelId}
+                  setSelectedChannelId={setSelectedChannelId}
+                />
               </div>
-              <PluginInfo
-                data={data}
-                description={plugin?.description || ""}
-                errors={errors}
-                name={plugin?.name || ""}
-                onChange={onChange}
-              />
-              {data.configuration && (
-                <>
-                  <Hr className={classes.spacer} />
-                  <div>
-                    <Typography variant="h6">
-                      {intl.formatMessage({
-                        defaultMessage: "Plugin Settings",
-                        description: "section header"
-                      })}
-                    </Typography>
-                  </div>
+              <div>
+                <PluginInfo
+                  data={data}
+                  description={plugin?.description || ""}
+                  errors={errors}
+                  name={plugin?.name || ""}
+                  onChange={onChange}
+                />
+                <CardSpacer />
+                {data.configuration && (
                   <div>
                     <PluginSettings
                       data={data}
-                      fields={plugin?.configuration || []}
+                      fields={selectedConfig?.configuration || []}
                       errors={errors}
                       disabled={disabled}
                       onChange={onChange}
                     />
-                    {plugin?.configuration.some(field =>
-                      isSecretField(plugin.configuration, field.name)
+                    {selectedConfig?.configuration.some(field =>
+                      isSecretField(selectedConfig?.configuration, field.name)
                     ) && (
                       <>
                         <CardSpacer />
                         <PluginAuthorization
-                          fields={plugin.configuration}
+                          fields={selectedConfig?.configuration}
                           onClear={onClear}
                           onEdit={onEdit}
                         />
                       </>
                     )}
                   </div>
-                </>
-              )}
+                )}
+              </div>
             </Grid>
             <SaveButtonBar
               disabled={disabled || !hasChanged}
@@ -185,5 +169,5 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = props => {
     </Form>
   );
 };
-PluginsDetailsPage.displayName = "PluginsDetailsPage";
+
 export default PluginsDetailsPage;
diff --git a/src/plugins/components/PluginsDetailsPage/types.ts b/src/plugins/components/PluginsDetailsPage/types.ts
new file mode 100644
index 000000000..11cd32490
--- /dev/null
+++ b/src/plugins/components/PluginsDetailsPage/types.ts
@@ -0,0 +1,3 @@
+import { PluginConfigurationFragment } from "@saleor/fragments/types/PluginConfigurationFragment";
+
+export type PluginConfiguration = PluginConfigurationFragment;
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
new file mode 100644
index 000000000..c7d76554c
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
@@ -0,0 +1,75 @@
+import { Typography } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import StatusLabel from "@saleor/components/StatusLabel";
+import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
+import { Plugins_plugins_edges_node } from "@saleor/plugins/types/Plugins";
+import { isPluginGlobal } from "@saleor/plugins/views/utils";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { pluginAvailabilityStatusMessages as messages } from "./messages";
+import {
+  getActiveChannelConfigsCount,
+  getAllChannelConfigsCount
+} from "./utils";
+
+const useStyles = makeStyles(
+  () => ({
+    horizontalContainer: {
+      display: "flex",
+      flexDirection: "row"
+    }
+  }),
+  { name: "ChannelStatusLabel" }
+);
+
+interface PluginAvailabilityStatusProps {
+  plugin: Plugins_plugins_edges_node;
+}
+
+const PluginAvailabilityStatus: React.FC<PluginAvailabilityStatusProps> = ({
+  plugin: { globalConfiguration, channelConfigurations }
+}) => {
+  const classes = useStyles({});
+  const intl = useIntl();
+
+  const isGlobalPlugin = isPluginGlobal(globalConfiguration);
+
+  const activeChannelsCount = getActiveChannelConfigsCount(
+    channelConfigurations
+  );
+
+  const isStatusActive = isGlobalPlugin
+    ? globalConfiguration.active
+    : !!activeChannelsCount;
+
+  const globalPluginLabel = intl.formatMessage(
+    isStatusActive
+      ? statusLabelMessages.active
+      : statusLabelMessages.deactivated
+  );
+
+  return (
+    <StatusLabel
+      label={
+        isGlobalPlugin ? (
+          globalPluginLabel
+        ) : (
+          <div className={classes.horizontalContainer}>
+            <Typography>
+              {intl.formatMessage(messages.channelTitle, {
+                activeChannelsCount
+              })}
+            </Typography>
+            <Typography color="textSecondary">{`/${getAllChannelConfigsCount(
+              channelConfigurations
+            )}`}</Typography>
+          </div>
+        )
+      }
+      status={isStatusActive ? "success" : "error"}
+    />
+  );
+};
+
+export default PluginAvailabilityStatus;
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx
new file mode 100644
index 000000000..0830f5c4f
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx
@@ -0,0 +1,76 @@
+import { CardContent, Divider, Typography } from "@material-ui/core";
+import CardSpacer from "@saleor/components/CardSpacer";
+import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
+import StatusLabel from "@saleor/components/StatusLabel";
+import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
+import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { makeStyles } from "@saleor/theme";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { channelConfigPluginMessages as messages } from "../messages";
+import {
+  getActiveChannelConfigsCount,
+  getAllChannelConfigsCount
+} from "../utils";
+import ScrollableContent from "./ScrollableContent";
+
+const useStyles = makeStyles(
+  theme => ({
+    itemContainer: {
+      padding: theme.spacing(0, 1)
+    }
+  }),
+  { name: "ChannelConfigPluginPopupBody" }
+);
+
+interface ChannelConfigPluginPopupBodyProps {
+  plugin: Plugin_plugin;
+}
+
+const ChannelConfigPluginPopupBody: React.FC<ChannelConfigPluginPopupBodyProps> = ({
+  plugin: { channelConfigurations }
+}) => {
+  const intl = useIntl();
+  const classes = useStyles({});
+
+  return (
+    <>
+      <CardContent>
+        <Typography>
+          {intl.formatMessage(messages.title, {
+            allChannelsCount: getAllChannelConfigsCount(channelConfigurations),
+            activeChannelsCount: getActiveChannelConfigsCount(
+              channelConfigurations
+            )
+          })}
+        </Typography>
+      </CardContent>
+      <Divider />
+      <ScrollableContent>
+        <CardSpacer />
+        <CollectionWithDividers
+          collection={channelConfigurations}
+          DividerComponent={CardSpacer}
+          renderItem={({ channel, active }) => (
+            <div className={classes.itemContainer}>
+              <StatusLabel
+                key={channel.id}
+                label={channel.name}
+                status={active ? "success" : "error"}
+                subtitle={intl.formatMessage(
+                  active
+                    ? statusLabelMessages.active
+                    : statusLabelMessages.inactive
+                )}
+              />
+            </div>
+          )}
+        />
+        <CardSpacer />
+      </ScrollableContent>
+    </>
+  );
+};
+
+export default ChannelConfigPluginPopupBody;
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx
new file mode 100644
index 000000000..086933e73
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx
@@ -0,0 +1,42 @@
+import { CardContent, Typography } from "@material-ui/core";
+import CardSpacer from "@saleor/components/CardSpacer";
+import StatusLabel from "@saleor/components/StatusLabel";
+import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
+import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { globalConfigPluginMessages as messages } from "../messages";
+
+interface GlobalConfigPluginPopupBodyProps {
+  plugin: Plugin_plugin;
+}
+
+const GlobalConfigPluginPopupBody: React.FC<GlobalConfigPluginPopupBodyProps> = ({
+  plugin
+}) => {
+  const intl = useIntl();
+
+  const { active } = plugin.globalConfiguration;
+
+  return (
+    <>
+      <CardContent>
+        <Typography>{intl.formatMessage(messages.title)}</Typography>
+        <CardSpacer />
+        <Typography variant="caption">
+          {intl.formatMessage(messages.description)}
+        </Typography>
+        <CardSpacer />
+        <StatusLabel
+          status={active ? "success" : "error"}
+          label={intl.formatMessage(
+            active ? statusLabelMessages.active : statusLabelMessages.inactive
+          )}
+        />
+      </CardContent>
+    </>
+  );
+};
+
+export default GlobalConfigPluginPopupBody;
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx
new file mode 100644
index 000000000..185b3eff4
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx
@@ -0,0 +1,52 @@
+import { Card, makeStyles, Popper } from "@material-ui/core";
+import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { isPluginGlobal } from "@saleor/plugins/views/utils";
+import React from "react";
+
+import ChannelConfigPluginPopupBody from "./ChannelConfigPluginPopupBody";
+import GlobalConfigPluginPopupBody from "./GlobalConfigPluginPopupBody";
+
+const useStyles = makeStyles(
+  () => ({
+    container: {
+      maxWidth: 300,
+      zIndex: 1000
+    }
+  }),
+  { name: "PluginChannelsAvailabilityStatusPopup" }
+);
+
+interface PluginAvailabilityStatusPopupProps {
+  plugin: Plugin_plugin;
+  isOpen: boolean;
+  anchor: React.RefObject<HTMLTableCellElement>;
+}
+
+const PluginAvailabilityStatusPopup: React.FC<PluginAvailabilityStatusPopupProps> = ({
+  plugin,
+  isOpen,
+  anchor
+}) => {
+  const classes = useStyles({});
+
+  const isGlobalPlugin = isPluginGlobal(plugin.globalConfiguration);
+
+  return (
+    <Popper
+      placement="left"
+      open={isOpen}
+      className={classes.container}
+      anchorEl={anchor.current}
+    >
+      <Card>
+        {isGlobalPlugin ? (
+          <GlobalConfigPluginPopupBody plugin={plugin} />
+        ) : (
+          <ChannelConfigPluginPopupBody plugin={plugin} />
+        )}
+      </Card>
+    </Popper>
+  );
+};
+
+export default PluginAvailabilityStatusPopup;
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent.tsx
new file mode 100644
index 000000000..ec7968ec3
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent.tsx
@@ -0,0 +1,29 @@
+import List from "@material-ui/core/List";
+import { makeStyles } from "@saleor/theme";
+import React from "react";
+
+const useStyles = makeStyles(
+  () => ({
+    container: {
+      maxHeight: 450,
+      overflow: "auto"
+    }
+  }),
+  { name: "ScrollableContent" }
+);
+
+interface ScrollableContentProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+const ScrollableContent: React.FC<ScrollableContentProps> = ({ children }) => {
+  const classes = useStyles({});
+
+  return (
+    <div className={classes.container}>
+      <List>{children}</List>
+    </div>
+  );
+};
+
+export default ScrollableContent;
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/index.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/index.tsx
new file mode 100644
index 000000000..8d1ed9304
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/index.tsx
@@ -0,0 +1,2 @@
+export * from "./PluginAvailabilityStatusPopup";
+export { default } from "./PluginAvailabilityStatusPopup";
diff --git a/src/plugins/components/PluginsList/PluginChannelAvailabilityCell.tsx b/src/plugins/components/PluginsList/PluginChannelAvailabilityCell.tsx
new file mode 100644
index 000000000..e9c0ee65c
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginChannelAvailabilityCell.tsx
@@ -0,0 +1,46 @@
+import { TableCell } from "@material-ui/core";
+import Skeleton from "@saleor/components/Skeleton";
+import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import React, { useRef, useState } from "react";
+
+import PluginAvailabilityStatus from "./PluginAvailabilityStatus";
+import PluginAvailabilityStatusPopup from "./PluginAvailabilityStatusPopup";
+
+interface PluginChannelAvailabilityCellProps {
+  plugin: Plugin_plugin;
+}
+
+const PluginChannelAvailabilityCell: React.FC<PluginChannelAvailabilityCellProps> = ({
+  plugin
+}) => {
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const popupAnchor = useRef<HTMLTableCellElement>(null);
+
+  const handleMouseOver = () => setIsPopupOpen(true);
+
+  const handleMouseLeave = () => setIsPopupOpen(false);
+
+  return (
+    <TableCell
+      colSpan={2}
+      ref={popupAnchor}
+      onMouseOver={handleMouseOver}
+      onMouseLeave={handleMouseLeave}
+    >
+      {plugin ? (
+        <>
+          <PluginAvailabilityStatus plugin={plugin} />
+          <PluginAvailabilityStatusPopup
+            plugin={plugin}
+            isOpen={isPopupOpen}
+            anchor={popupAnchor}
+          />
+        </>
+      ) : (
+        <Skeleton />
+      )}
+    </TableCell>
+  );
+};
+
+export default PluginChannelAvailabilityCell;
diff --git a/src/plugins/components/PluginsList/PluginChannelConfigurationCell.tsx b/src/plugins/components/PluginsList/PluginChannelConfigurationCell.tsx
new file mode 100644
index 000000000..70d6702e6
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginChannelConfigurationCell.tsx
@@ -0,0 +1,27 @@
+import { TableCell } from "@material-ui/core";
+import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { isPluginGlobal } from "@saleor/plugins/views/utils";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { pluginChannelConfigurationCellMessages as messages } from "./messages";
+
+interface PluginChannelConfigurationCellProps {
+  plugin: Plugin_plugin;
+}
+
+const PluginChannelConfigurationCell: React.FC<PluginChannelConfigurationCellProps> = ({
+  plugin
+}) => {
+  const message = isPluginGlobal(plugin.globalConfiguration)
+    ? messages.globalLabel
+    : messages.channelLabel;
+
+  return (
+    <TableCell colSpan={2}>
+      <FormattedMessage {...message} />
+    </TableCell>
+  );
+};
+
+export default PluginChannelConfigurationCell;
diff --git a/src/plugins/components/PluginsList/PluginListTableHead.tsx b/src/plugins/components/PluginsList/PluginListTableHead.tsx
new file mode 100644
index 000000000..4e5d8a7ad
--- /dev/null
+++ b/src/plugins/components/PluginsList/PluginListTableHead.tsx
@@ -0,0 +1,52 @@
+import { TableHead } from "@material-ui/core";
+import TableCellHeader from "@saleor/components/TableCellHeader";
+import { PluginListUrlSortField } from "@saleor/plugins/urls";
+import { SortPage } from "@saleor/types";
+import { getArrowDirection } from "@saleor/utils/sort";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { pluginsListTableHeadMessages as messages } from "./messages";
+
+type PluginListTableHeadProps = SortPage<PluginListUrlSortField>;
+
+const PluginListTableHead: React.FC<PluginListTableHeadProps> = ({
+  sort,
+  onSort
+}) => {
+  const intl = useIntl();
+
+  return (
+    <TableHead>
+      <TableCellHeader
+        direction={
+          sort.sort === PluginListUrlSortField.name
+            ? getArrowDirection(sort.asc)
+            : undefined
+        }
+        arrowPosition="right"
+        onClick={() => onSort(PluginListUrlSortField.name)}
+        colSpan={5}
+      >
+        {intl.formatMessage(messages.nameLabel)}
+      </TableCellHeader>
+      <TableCellHeader
+        colSpan={2}
+        direction={
+          sort.sort === PluginListUrlSortField.active
+            ? getArrowDirection(sort.asc)
+            : undefined
+        }
+        onClick={() => onSort(PluginListUrlSortField.active)}
+      >
+        {intl.formatMessage(messages.confLabel)}
+      </TableCellHeader>
+      <TableCellHeader colSpan={2}>
+        {intl.formatMessage(messages.channelLabel)}
+      </TableCellHeader>
+      <TableCellHeader></TableCellHeader>
+    </TableHead>
+  );
+};
+
+export default PluginListTableHead;
diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx
index 63742edfc..8bea96534 100644
--- a/src/plugins/components/PluginsList/PluginsList.tsx
+++ b/src/plugins/components/PluginsList/PluginsList.tsx
@@ -1,44 +1,25 @@
+import { makeStyles } from "@material-ui/core";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
-import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import EditIcon from "@material-ui/icons/Edit";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import StatusLabel from "@saleor/components/StatusLabel";
-import TableCellHeader from "@saleor/components/TableCellHeader";
 import TablePagination from "@saleor/components/TablePagination";
-import { translateBoolean } from "@saleor/intl";
-import { maybe, renderCollection } from "@saleor/misc";
+import { renderCollection } from "@saleor/misc";
 import { PluginListUrlSortField } from "@saleor/plugins/urls";
-import { makeStyles } from "@saleor/theme";
 import { ListProps, SortPage } from "@saleor/types";
-import { getArrowDirection } from "@saleor/utils/sort";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { Plugins_plugins_edges_node } from "../../types/Plugins";
+import PluginChannelAvailabilityCell from "./PluginChannelAvailabilityCell";
+import PluginChannelConfigurationCell from "./PluginChannelConfigurationCell";
+import PluginListTableHead from "./PluginListTableHead";
 
-export interface PluginListProps
-  extends ListProps,
-    SortPage<PluginListUrlSortField> {
-  plugins: Plugins_plugins_edges_node[];
-}
-
-const useStyles = makeStyles(
-  theme => ({
-    colAction: {
-      "& svg": {
-        color: theme.palette.primary.main
-      },
-      textAlign: "right",
-      width: 200
-    },
-    colActive: {
-      width: 200
-    },
-    colName: {},
+export const useStyles = makeStyles(
+  () => ({
     link: {
       cursor: "pointer"
     }
@@ -46,7 +27,13 @@ const useStyles = makeStyles(
   { name: "PluginsList" }
 );
 
-const numberOfColumns = 3;
+export interface PluginListProps
+  extends ListProps,
+    SortPage<PluginListUrlSortField> {
+  plugins: Plugins_plugins_edges_node[];
+}
+
+const totalColSpan = 10;
 
 const PluginList: React.FC<PluginListProps> = props => {
   const {
@@ -66,47 +53,11 @@ const PluginList: React.FC<PluginListProps> = props => {
 
   return (
     <ResponsiveTable>
-      <TableHead>
-        <TableCellHeader
-          direction={
-            sort.sort === PluginListUrlSortField.name
-              ? getArrowDirection(sort.asc)
-              : undefined
-          }
-          arrowPosition="right"
-          onClick={() => onSort(PluginListUrlSortField.name)}
-          className={classes.colName}
-        >
-          {intl.formatMessage({
-            defaultMessage: "Name",
-            description: "plugin name"
-          })}
-        </TableCellHeader>
-        <TableCellHeader
-          direction={
-            sort.sort === PluginListUrlSortField.active
-              ? getArrowDirection(sort.asc)
-              : undefined
-          }
-          onClick={() => onSort(PluginListUrlSortField.active)}
-          className={classes.colActive}
-        >
-          {intl.formatMessage({
-            defaultMessage: "Active",
-            description: "plugin status"
-          })}
-        </TableCellHeader>
-        <TableCell className={classes.colAction}>
-          {intl.formatMessage({
-            defaultMessage: "Action",
-            description: "user action bar"
-          })}
-        </TableCell>
-      </TableHead>
+      <PluginListTableHead sort={sort} onSort={onSort} />
       <TableFooter>
         <TableRow>
           <TablePagination
-            colSpan={numberOfColumns}
+            colSpan={totalColSpan}
             settings={settings}
             hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
             onNextPage={onNextPage}
@@ -121,37 +72,33 @@ const PluginList: React.FC<PluginListProps> = props => {
       <TableBody>
         {renderCollection(
           plugins,
-          plugin => (
-            <TableRow
-              hover={!!plugin}
-              className={!!plugin ? classes.link : undefined}
-              onClick={plugin ? onRowClick(plugin.id) : undefined}
-              key={plugin ? plugin.id : "skeleton"}
-            >
-              <TableCell className={classes.colName}>
-                {maybe<React.ReactNode>(() => plugin.name, <Skeleton />)}
-              </TableCell>
-              <TableCell className={classes.colActive}>
-                {maybe<React.ReactNode>(
-                  () => (
-                    <StatusLabel
-                      label={translateBoolean(plugin.active, intl)}
-                      status={plugin.active ? "success" : "error"}
-                    />
-                  ),
+          plugin =>
+            plugin ? (
+              <TableRow
+                hover={!!plugin}
+                className={!!plugin ? classes.link : undefined}
+                onClick={plugin ? onRowClick(plugin.id) : undefined}
+                key={plugin ? plugin.id : "skeleton"}
+              >
+                <TableCell colSpan={5}>{plugin.name}</TableCell>
+                <PluginChannelConfigurationCell plugin={plugin} />
+                <PluginChannelAvailabilityCell plugin={plugin} />
+                <TableCell align="right">
+                  <div onClick={plugin ? onRowClick(plugin.id) : undefined}>
+                    <EditIcon />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ) : (
+              <TableRow>
+                <TableCell colSpan={totalColSpan}>
                   <Skeleton />
-                )}
-              </TableCell>
-              <TableCell className={classes.colAction}>
-                <div onClick={plugin ? onRowClick(plugin.id) : undefined}>
-                  <EditIcon />
-                </div>
-              </TableCell>
-            </TableRow>
-          ),
+                </TableCell>
+              </TableRow>
+            ),
           () => (
             <TableRow>
-              <TableCell colSpan={numberOfColumns}>
+              <TableCell colSpan={totalColSpan}>
                 {intl.formatMessage({
                   defaultMessage: "No plugins found"
                 })}
diff --git a/src/plugins/components/PluginsList/messages.ts b/src/plugins/components/PluginsList/messages.ts
new file mode 100644
index 000000000..6fe8c7e73
--- /dev/null
+++ b/src/plugins/components/PluginsList/messages.ts
@@ -0,0 +1,56 @@
+import { defineMessages } from "react-intl";
+
+export const pluginAvailabilityStatusMessages = defineMessages({
+  channelTitle: {
+    defaultMessage: "Active in {activeChannelsCount}",
+    description: "plugin channel availability status title"
+  }
+});
+
+export const channelConfigPluginMessages = defineMessages({
+  title: {
+    defaultMessage:
+      "Assigned to {activeChannelsCount} of {allChannelsCount} channels",
+    description: "channel config plugin status popup title"
+  }
+});
+
+export const globalConfigPluginMessages = defineMessages({
+  title: {
+    defaultMessage: "Global Plugin",
+    description: "global config plugin status popup title",
+    id: "globalConfigPluginMessages title"
+  },
+  description: {
+    defaultMessage:
+      "Global plugins are set across all channels in your ecommerce. Only status is shown for those types of plugins",
+    description: "global config plugin status popup description"
+  }
+});
+
+export const pluginsListTableHeadMessages = defineMessages({
+  nameLabel: {
+    defaultMessage: "Name",
+    description: "table header name col label"
+  },
+  confLabel: {
+    defaultMessage: "Configuration",
+    description: "table header configuration col label"
+  },
+  channelLabel: {
+    defaultMessage: "Channel",
+    description: "table header channel col label"
+  }
+});
+
+export const pluginChannelConfigurationCellMessages = defineMessages({
+  globalLabel: {
+    defaultMessage: "Global",
+    description: "PluginChannelConfigurationCell global title"
+  },
+  channelLabel: {
+    defaultMessage: "Per channel",
+    description: "PluginChannelConfigurationCell channel title",
+    id: "pluginChannelConfigurationCellMessages per channel"
+  }
+});
diff --git a/src/plugins/components/PluginsList/utils.ts b/src/plugins/components/PluginsList/utils.ts
new file mode 100644
index 000000000..4c6f9775c
--- /dev/null
+++ b/src/plugins/components/PluginsList/utils.ts
@@ -0,0 +1,9 @@
+import { Plugin_plugin_channelConfigurations } from "@saleor/plugins/types/Plugin";
+
+export const getAllChannelConfigsCount = (
+  channelConfigurations: Plugin_plugin_channelConfigurations[]
+) => channelConfigurations?.length;
+
+export const getActiveChannelConfigsCount = (
+  channelConfigurations: Plugin_plugin_channelConfigurations[]
+) => channelConfigurations?.filter(({ active }) => !!active).length;
diff --git a/src/plugins/components/PluginsListPage/PluginsListPage.tsx b/src/plugins/components/PluginsListPage/PluginsListPage.tsx
index 47072e22d..5fec3ef02 100644
--- a/src/plugins/components/PluginsListPage/PluginsListPage.tsx
+++ b/src/plugins/components/PluginsListPage/PluginsListPage.tsx
@@ -21,6 +21,7 @@ import {
   PluginFilterKeys,
   PluginListFilterOpts
 } from "./filters";
+import { pluginsFilterErrorMessages } from "./messages";
 
 export interface PluginsListPageProps
   extends PageListProps,
@@ -58,6 +59,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
       <PageHeader title={intl.formatMessage(sectionNames.plugins)} />
       <Card>
         <FilterBar
+          errorMessages={pluginsFilterErrorMessages}
           currentTab={currentTab}
           initialSearch={initialSearch}
           onAll={onAll}
diff --git a/src/plugins/components/PluginsListPage/filters.ts b/src/plugins/components/PluginsListPage/filters.ts
index 0e1ef8ae6..e2eaa73e3 100644
--- a/src/plugins/components/PluginsListPage/filters.ts
+++ b/src/plugins/components/PluginsListPage/filters.ts
@@ -1,25 +1,43 @@
-import { IFilter } from "@saleor/components/Filter";
-import { commonMessages } from "@saleor/intl";
-import { FilterOpts } from "@saleor/types";
-import { createBooleanField } from "@saleor/utils/filters/fields";
+import { IFilter, IFilterElement } from "@saleor/components/Filter";
+import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
+import { sectionNames } from "@saleor/intl";
+import { AutocompleteFilterOpts, FilterOpts } from "@saleor/types";
+import { PluginConfigurationType } from "@saleor/types/globalTypes";
+import {
+  createAutocompleteField,
+  createBooleanField,
+  createOptionsField
+} from "@saleor/utils/filters/fields";
 import { defineMessages, IntlShape } from "react-intl";
 
+import { pluginChannelConfigurationCellMessages } from "../PluginsList/messages";
+
 export enum PluginFilterKeys {
-  active = "active"
+  active = "active",
+  channels = "channels",
+  status = "status",
+  type = "type"
 }
 
 export interface PluginListFilterOpts {
   isActive: FilterOpts<boolean>;
+  channels: FilterOpts<string[]> & AutocompleteFilterOpts;
+  type: FilterOpts<PluginConfigurationType>;
+  status: FilterOpts<boolean>;
 }
 
 const messages = defineMessages({
-  active: {
-    defaultMessage: "Active",
-    description: "plugin"
+  channelStatusSectionTitle: {
+    defaultMessage: "Status in channel",
+    description: "status section title"
   },
-  deactivated: {
-    defaultMessage: "Inactive",
-    description: "plugin"
+  channelStatusSectionSubtitle: {
+    defaultMessage: "Channel status",
+    description: "status section subtitle"
+  },
+  configTypeSectionTitle: {
+    defaultMessage: "Configuration Type",
+    description: "config type section title"
   }
 });
 
@@ -29,16 +47,65 @@ export function createFilterStructure(
 ): IFilter<PluginFilterKeys> {
   return [
     {
-      ...createBooleanField(
-        PluginFilterKeys.active,
-        intl.formatMessage(commonMessages.status),
-        opts.isActive.value,
+      active: opts.status.active,
+      name: PluginFilterKeys.status,
+      label: intl.formatMessage(messages.channelStatusSectionTitle),
+      multipleFields: [
         {
-          negative: intl.formatMessage(messages.deactivated),
-          positive: intl.formatMessage(messages.active)
+          required: true,
+          ...createBooleanField(
+            PluginFilterKeys.active,
+            intl.formatMessage(messages.channelStatusSectionSubtitle),
+            opts.isActive.value,
+            {
+              negative: intl.formatMessage(statusLabelMessages.inactive),
+              positive: intl.formatMessage(statusLabelMessages.active)
+            }
+          )
+        },
+        {
+          required: true,
+          ...createAutocompleteField(
+            PluginFilterKeys.channels,
+            intl.formatMessage(sectionNames.channels),
+            opts.channels.value,
+            opts.channels.displayValues,
+            true,
+            opts.channels.choices,
+            {
+              hasMore: opts.channels.hasMore,
+              initialSearch: "",
+              loading: opts.channels.loading,
+              onFetchMore: opts.channels.onFetchMore,
+              onSearchChange: opts.channels.onSearchChange
+            }
+          )
         }
-      ),
-      active: opts.isActive.active
+      ]
+    } as IFilterElement<PluginFilterKeys.status>,
+    {
+      active: opts.type.active,
+      name: PluginFilterKeys.type,
+      ...createOptionsField(
+        PluginFilterKeys.type,
+        intl.formatMessage(messages.configTypeSectionTitle),
+        [],
+        false,
+        [
+          {
+            value: PluginConfigurationType.GLOBAL,
+            label: intl.formatMessage(
+              pluginChannelConfigurationCellMessages.globalLabel
+            )
+          },
+          {
+            value: PluginConfigurationType.PER_CHANNEL,
+            label: intl.formatMessage(
+              pluginChannelConfigurationCellMessages.channelLabel
+            )
+          }
+        ]
+      )
     }
   ];
 }
diff --git a/src/plugins/components/PluginsListPage/messages.ts b/src/plugins/components/PluginsListPage/messages.ts
new file mode 100644
index 000000000..b502a559e
--- /dev/null
+++ b/src/plugins/components/PluginsListPage/messages.ts
@@ -0,0 +1,12 @@
+import { defineMessages } from "react-intl";
+
+export const pluginsFilterErrorMessages = defineMessages({
+  active: {
+    defaultMessage: "Active is not selected",
+    description: "plugin filters error messages active"
+  },
+  channels: {
+    defaultMessage: "No channels selected",
+    description: "plugin filters error messages channels"
+  }
+});
diff --git a/src/plugins/fixtures.ts b/src/plugins/fixtures.ts
index e1608aa5d..f9af2459f 100644
--- a/src/plugins/fixtures.ts
+++ b/src/plugins/fixtures.ts
@@ -6,7 +6,20 @@ import { Plugins_plugins_edges_node } from "./types/Plugins";
 export const pluginList: Plugins_plugins_edges_node[] = [
   {
     __typename: "Plugin",
-    active: true,
+    globalConfiguration: null,
+    channelConfigurations: [
+      {
+        __typename: "PluginConfiguration",
+        active: true,
+        configuration: [],
+        channel: {
+          __typename: "Channel",
+          id: "channel-1",
+          name: "channel 1",
+          slug: "channel-1"
+        }
+      }
+    ],
     description:
       "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.",
     id: "Jzx123sEt==",
@@ -14,7 +27,20 @@ export const pluginList: Plugins_plugins_edges_node[] = [
   },
   {
     __typename: "Plugin",
-    active: false,
+    globalConfiguration: null,
+    channelConfigurations: [
+      {
+        __typename: "PluginConfiguration",
+        active: true,
+        configuration: [],
+        channel: {
+          __typename: "Channel",
+          id: "channel-1",
+          name: "channel 1",
+          slug: "channel-1"
+        }
+      }
+    ],
     description:
       "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.",
     id: "Jzx123sEt==",
@@ -23,64 +49,76 @@ export const pluginList: Plugins_plugins_edges_node[] = [
 ];
 export const plugin: Plugin_plugin = {
   __typename: "Plugin",
-  active: true,
-  configuration: [
+  globalConfiguration: null,
+  channelConfigurations: [
     {
-      __typename: "ConfigurationItem",
-      helpText: "Provide user or account details",
-      label: "Username or account",
-      name: "Username or account",
-      type: ConfigurationTypeFieldEnum.STRING,
-      value: "avatax_user"
-    },
-    {
-      __typename: "ConfigurationItem",
-      helpText: "Provide password or license details",
-      label: "Password or license",
-      name: "Password or license",
-      type: ConfigurationTypeFieldEnum.STRING,
-      value: "TEM8S2-2ET83-CGKP1-DPSI2-EPZO1"
-    },
-    {
-      __typename: "ConfigurationItem",
-      helpText: "This key will enable you to connect to Avatax API",
-      label: "API key",
-      name: "apiKey",
-      type: ConfigurationTypeFieldEnum.SECRET,
-      value: "9ab9"
-    },
-    {
-      __typename: "ConfigurationItem",
-      helpText: "",
-      label: "Password",
-      name: "password",
-      type: ConfigurationTypeFieldEnum.PASSWORD,
-      value: ""
-    },
-    {
-      __typename: "ConfigurationItem",
-      helpText: "",
-      label: "Empty Password",
-      name: "password-not-set",
-      type: ConfigurationTypeFieldEnum.PASSWORD,
-      value: null
-    },
-    {
-      __typename: "ConfigurationItem",
-      helpText: "Determines if Saleor should use Avatax sandbox API.",
-      label: "Use sandbox",
-      name: "Use sandbox",
-      type: ConfigurationTypeFieldEnum.BOOLEAN,
-      value: "true"
-    },
-    {
-      __typename: "ConfigurationItem",
-      helpText: "This is a multiline field",
-      label: "Multiline Field",
-      name: "multiline-field",
-      type: ConfigurationTypeFieldEnum.MULTILINE,
-      value:
-        "Lorem ipsum\ndolor sit\namet enim.\nEtiam ullamcorper.\nSuspendisse a\npellentesque dui,\nnon felis."
+      __typename: "PluginConfiguration",
+      active: true,
+      channel: {
+        __typename: "Channel",
+        id: "channel-1",
+        name: "channel 1",
+        slug: "channel-1"
+      },
+      configuration: [
+        {
+          __typename: "ConfigurationItem",
+          helpText: "Provide user or account details",
+          label: "Username or account",
+          name: "Username or account",
+          type: ConfigurationTypeFieldEnum.STRING,
+          value: "avatax_user"
+        },
+        {
+          __typename: "ConfigurationItem",
+          helpText: "Provide password or license details",
+          label: "Password or license",
+          name: "Password or license",
+          type: ConfigurationTypeFieldEnum.STRING,
+          value: "TEM8S2-2ET83-CGKP1-DPSI2-EPZO1"
+        },
+        {
+          __typename: "ConfigurationItem",
+          helpText: "This key will enable you to connect to Avatax API",
+          label: "API key",
+          name: "apiKey",
+          type: ConfigurationTypeFieldEnum.SECRET,
+          value: "9ab9"
+        },
+        {
+          __typename: "ConfigurationItem",
+          helpText: "",
+          label: "Password",
+          name: "password",
+          type: ConfigurationTypeFieldEnum.PASSWORD,
+          value: ""
+        },
+        {
+          __typename: "ConfigurationItem",
+          helpText: "",
+          label: "Empty Password",
+          name: "password-not-set",
+          type: ConfigurationTypeFieldEnum.PASSWORD,
+          value: null
+        },
+        {
+          __typename: "ConfigurationItem",
+          helpText: "Determines if Saleor should use Avatax sandbox API.",
+          label: "Use sandbox",
+          name: "Use sandbox",
+          type: ConfigurationTypeFieldEnum.BOOLEAN,
+          value: "true"
+        },
+        {
+          __typename: "ConfigurationItem",
+          helpText: "This is a multiline field",
+          label: "Multiline Field",
+          name: "multiline-field",
+          type: ConfigurationTypeFieldEnum.MULTILINE,
+          value:
+            "Lorem ipsum\ndolor sit\namet enim.\nEtiam ullamcorper.\nSuspendisse a\npellentesque dui,\nnon felis."
+        }
+      ]
     }
   ],
   description:
diff --git a/src/plugins/mutations.ts b/src/plugins/mutations.ts
index 1e02d3309..9b0ea774c 100644
--- a/src/plugins/mutations.ts
+++ b/src/plugins/mutations.ts
@@ -8,8 +8,8 @@ import { PluginUpdate, PluginUpdateVariables } from "./types/PluginUpdate";
 const pluginUpdate = gql`
   ${pluginsDetailsFragment}
   ${pluginErrorFragment}
-  mutation PluginUpdate($id: ID!, $input: PluginUpdateInput!) {
-    pluginUpdate(id: $id, input: $input) {
+  mutation PluginUpdate($channel: ID!, $id: ID!, $input: PluginUpdateInput!) {
+    pluginUpdate(channel: $channel, id: $id, input: $input) {
       errors {
         ...PluginErrorFragment
       }
diff --git a/src/plugins/queries.ts b/src/plugins/queries.ts
index 801d8436f..9c1d70ba3 100644
--- a/src/plugins/queries.ts
+++ b/src/plugins/queries.ts
@@ -5,7 +5,6 @@ import {
 import makeQuery from "@saleor/hooks/makeQuery";
 import gql from "graphql-tag";
 
-import { TypedQuery } from "../queries";
 import { Plugin, PluginVariables } from "./types/Plugin";
 import { Plugins, PluginsVariables } from "./types/Plugins";
 
@@ -53,6 +52,7 @@ const pluginsDetails = gql`
     }
   }
 `;
-export const TypedPluginsDetailsQuery = TypedQuery<Plugin, PluginVariables>(
+
+export const usePluginDetails = makeQuery<Plugin, PluginVariables>(
   pluginsDetails
 );
diff --git a/src/plugins/types/Plugin.ts b/src/plugins/types/Plugin.ts
index 10f65c20d..e4c0a9374 100644
--- a/src/plugins/types/Plugin.ts
+++ b/src/plugins/types/Plugin.ts
@@ -9,22 +9,59 @@ import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
 // GraphQL query operation: Plugin
 // ====================================================
 
-export interface Plugin_plugin_configuration {
+export interface Plugin_plugin_globalConfiguration_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface Plugin_plugin_globalConfiguration_configuration {
   __typename: "ConfigurationItem";
   name: string;
-  type: ConfigurationTypeFieldEnum | null;
   value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
   helpText: string | null;
   label: string | null;
 }
 
+export interface Plugin_plugin_globalConfiguration {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: Plugin_plugin_globalConfiguration_channel | null;
+  configuration: (Plugin_plugin_globalConfiguration_configuration | null)[] | null;
+}
+
+export interface Plugin_plugin_channelConfigurations_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface Plugin_plugin_channelConfigurations_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface Plugin_plugin_channelConfigurations {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: Plugin_plugin_channelConfigurations_channel | null;
+  configuration: (Plugin_plugin_channelConfigurations_configuration | null)[] | null;
+}
+
 export interface Plugin_plugin {
   __typename: "Plugin";
   id: string;
   name: string;
   description: string;
-  active: boolean;
-  configuration: (Plugin_plugin_configuration | null)[] | null;
+  globalConfiguration: Plugin_plugin_globalConfiguration | null;
+  channelConfigurations: Plugin_plugin_channelConfigurations[];
 }
 
 export interface Plugin {
diff --git a/src/plugins/types/PluginUpdate.ts b/src/plugins/types/PluginUpdate.ts
index 85af09e9b..56aba46b8 100644
--- a/src/plugins/types/PluginUpdate.ts
+++ b/src/plugins/types/PluginUpdate.ts
@@ -15,22 +15,59 @@ export interface PluginUpdate_pluginUpdate_errors {
   field: string | null;
 }
 
-export interface PluginUpdate_pluginUpdate_plugin_configuration {
+export interface PluginUpdate_pluginUpdate_plugin_globalConfiguration_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginUpdate_pluginUpdate_plugin_globalConfiguration_configuration {
   __typename: "ConfigurationItem";
   name: string;
-  type: ConfigurationTypeFieldEnum | null;
   value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
   helpText: string | null;
   label: string | null;
 }
 
+export interface PluginUpdate_pluginUpdate_plugin_globalConfiguration {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginUpdate_pluginUpdate_plugin_globalConfiguration_channel | null;
+  configuration: (PluginUpdate_pluginUpdate_plugin_globalConfiguration_configuration | null)[] | null;
+}
+
+export interface PluginUpdate_pluginUpdate_plugin_channelConfigurations_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginUpdate_pluginUpdate_plugin_channelConfigurations_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface PluginUpdate_pluginUpdate_plugin_channelConfigurations {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginUpdate_pluginUpdate_plugin_channelConfigurations_channel | null;
+  configuration: (PluginUpdate_pluginUpdate_plugin_channelConfigurations_configuration | null)[] | null;
+}
+
 export interface PluginUpdate_pluginUpdate_plugin {
   __typename: "Plugin";
   id: string;
   name: string;
   description: string;
-  active: boolean;
-  configuration: (PluginUpdate_pluginUpdate_plugin_configuration | null)[] | null;
+  globalConfiguration: PluginUpdate_pluginUpdate_plugin_globalConfiguration | null;
+  channelConfigurations: PluginUpdate_pluginUpdate_plugin_channelConfigurations[];
 }
 
 export interface PluginUpdate_pluginUpdate {
@@ -44,6 +81,7 @@ export interface PluginUpdate {
 }
 
 export interface PluginUpdateVariables {
+  channel: string;
   id: string;
   input: PluginUpdateInput;
 }
diff --git a/src/plugins/types/Plugins.ts b/src/plugins/types/Plugins.ts
index 01251a86c..e5f61af12 100644
--- a/src/plugins/types/Plugins.ts
+++ b/src/plugins/types/Plugins.ts
@@ -3,18 +3,65 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { PluginFilterInput, PluginSortingInput } from "./../../types/globalTypes";
+import { PluginFilterInput, PluginSortingInput, ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: Plugins
 // ====================================================
 
+export interface Plugins_plugins_edges_node_globalConfiguration_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface Plugins_plugins_edges_node_globalConfiguration_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface Plugins_plugins_edges_node_globalConfiguration {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: Plugins_plugins_edges_node_globalConfiguration_channel | null;
+  configuration: (Plugins_plugins_edges_node_globalConfiguration_configuration | null)[] | null;
+}
+
+export interface Plugins_plugins_edges_node_channelConfigurations_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface Plugins_plugins_edges_node_channelConfigurations_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface Plugins_plugins_edges_node_channelConfigurations {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: Plugins_plugins_edges_node_channelConfigurations_channel | null;
+  configuration: (Plugins_plugins_edges_node_channelConfigurations_configuration | null)[] | null;
+}
+
 export interface Plugins_plugins_edges_node {
   __typename: "Plugin";
   id: string;
   name: string;
   description: string;
-  active: boolean;
+  globalConfiguration: Plugins_plugins_edges_node_globalConfiguration | null;
+  channelConfigurations: Plugins_plugins_edges_node_channelConfigurations[];
 }
 
 export interface Plugins_plugins_edges {
diff --git a/src/plugins/urls.ts b/src/plugins/urls.ts
index b5bc8e040..402519cee 100644
--- a/src/plugins/urls.ts
+++ b/src/plugins/urls.ts
@@ -14,11 +14,17 @@ import {
 export const pluginSection = "/plugins/";
 
 export const pluginListPath = pluginSection;
+
 export enum PluginListUrlFiltersEnum {
+  query = "query",
   active = "active",
-  query = "query"
+  channels = "channels",
+  type = "type"
 }
-export type PluginListUrlFilters = Filters<PluginListUrlFiltersEnum>;
+
+export type PluginListUrlFilters = Filters<PluginListUrlFiltersEnum> & {
+  channels?: string[];
+};
 export type PluginListUrlDialog = TabActionDialog;
 export enum PluginListUrlSortField {
   name = "name",
diff --git a/src/plugins/utils.ts b/src/plugins/utils.ts
index b02251cc6..16129fd96 100644
--- a/src/plugins/utils.ts
+++ b/src/plugins/utils.ts
@@ -1,9 +1,8 @@
+import { PluginConfigurationFragment_configuration } from "@saleor/fragments/types/PluginConfigurationFragment";
 import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
 
-import { Plugin_plugin_configuration } from "./types/Plugin";
-
 export function isSecretField(
-  config: Plugin_plugin_configuration[],
+  config: PluginConfigurationFragment_configuration[],
   field: string
 ) {
   return [
diff --git a/src/plugins/views/PluginDetails.test.ts b/src/plugins/views/PluginDetails.test.ts
index af11fd2fe..c1feb0644 100644
--- a/src/plugins/views/PluginDetails.test.ts
+++ b/src/plugins/views/PluginDetails.test.ts
@@ -1,12 +1,13 @@
+import { PluginConfigurationFragment_configuration } from "@saleor/fragments/types/PluginConfigurationFragment";
+
 import {
   ConfigurationItemInput,
   ConfigurationTypeFieldEnum
 } from "../../types/globalTypes";
-import { Plugin_plugin_configuration } from "../types/Plugin";
 import { getConfigurationInput } from "./PluginsDetails";
 
 const baseConfig: Omit<
-  Plugin_plugin_configuration,
+  PluginConfigurationFragment_configuration,
   "name" | "type" | "value"
 > = {
   __typename: "ConfigurationItem",
@@ -14,7 +15,7 @@ const baseConfig: Omit<
   label: ""
 };
 
-const config: Plugin_plugin_configuration[] = [
+const config: PluginConfigurationFragment_configuration[] = [
   {
     ...baseConfig,
     name: "field-1",
diff --git a/src/plugins/views/PluginList/PluginList.tsx b/src/plugins/views/PluginList/PluginList.tsx
index faf0dec32..e17a83587 100644
--- a/src/plugins/views/PluginList/PluginList.tsx
+++ b/src/plugins/views/PluginList/PluginList.tsx
@@ -3,6 +3,7 @@ import SaveFilterTabDialog, {
   SaveFilterTabDialogFormData
 } from "@saleor/components/SaveFilterTabDialog";
 import { configurationMenuUrl } from "@saleor/configuration";
+import { useChannelsSearchWithLoadMore } from "@saleor/hooks/useChannelsSearchWithLoadMore";
 import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
 import usePaginator, {
@@ -112,13 +113,16 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
   );
 
   const handleSort = createSortHandler(navigate, pluginListUrl, params);
+  const channelsSearchWithLoadMoreProps = useChannelsSearchWithLoadMore();
+
+  const filterOpts = getFilterOpts(params, channelsSearchWithLoadMoreProps);
 
   return (
     <>
       <PluginsListPage
         currentTab={currentTab}
         disabled={loading}
-        filterOpts={getFilterOpts(params)}
+        filterOpts={filterOpts}
         initialSearch={params.query || ""}
         settings={settings}
         plugins={maybe(() => data.plugins.edges.map(edge => edge.node))}
diff --git a/src/plugins/views/PluginList/__snapshots__/filters.test.ts.snap b/src/plugins/views/PluginList/__snapshots__/filters.test.ts.snap
index 79b6ca913..74f7f38cd 100644
--- a/src/plugins/views/PluginList/__snapshots__/filters.test.ts.snap
+++ b/src/plugins/views/PluginList/__snapshots__/filters.test.ts.snap
@@ -3,7 +3,8 @@
 exports[`Filtering URL params should not be empty if active filters are present 1`] = `
 Object {
   "active": "true",
+  "type": "GLOBAL",
 }
 `;
 
-exports[`Filtering URL params should not be empty if active filters are present 2`] = `"active=true"`;
+exports[`Filtering URL params should not be empty if active filters are present 2`] = `"active=true&type=GLOBAL"`;
diff --git a/src/plugins/views/PluginList/filters.test.ts b/src/plugins/views/PluginList/filters.test.ts
index f6ad46aac..96fd8da71 100644
--- a/src/plugins/views/PluginList/filters.test.ts
+++ b/src/plugins/views/PluginList/filters.test.ts
@@ -1,7 +1,11 @@
-import { createFilterStructure } from "@saleor/plugins/components/PluginsListPage";
+import {
+  createFilterStructure,
+  PluginFilterKeys
+} from "@saleor/plugins/components/PluginsListPage";
 import { PluginListUrlFilters } from "@saleor/plugins/urls";
+import { PluginConfigurationType } from "@saleor/types/globalTypes";
 import { getFilterQueryParams } from "@saleor/utils/filters";
-import { getExistingKeys, setFilterOptsStatus } from "@test/filters";
+import { getExistingKeys } from "@test/filters";
 import { config } from "@test/intl";
 import { stringify as stringifyQs } from "qs";
 import { createIntl } from "react-intl";
@@ -18,7 +22,7 @@ describe("Filtering query params", () => {
 
   it("should not be empty object if params given", () => {
     const params: PluginListUrlFilters = {
-      active: true.toString()
+      type: PluginConfigurationType.GLOBAL
     };
     const filterVariables = getFilterVariables(params);
 
@@ -33,6 +37,25 @@ describe("Filtering URL params", () => {
     isActive: {
       active: false,
       value: true
+    },
+    channels: {
+      active: false,
+      choices: [],
+      displayValues: [],
+      initialSearch: "",
+      hasMore: false,
+      loading: false,
+      onFetchMore: () => undefined,
+      onSearchChange: () => undefined,
+      value: []
+    },
+    status: {
+      active: false,
+      value: false
+    },
+    type: {
+      active: false,
+      value: PluginConfigurationType.GLOBAL
     }
   });
 
@@ -47,7 +70,22 @@ describe("Filtering URL params", () => {
 
   it("should not be empty if active filters are present", () => {
     const filterQueryParams = getFilterQueryParams(
-      setFilterOptsStatus(filters, true),
+      [
+        {
+          name: PluginFilterKeys.active,
+          label: "Active",
+          multiple: false,
+          active: true,
+          value: ["true"]
+        },
+        {
+          name: PluginFilterKeys.type,
+          label: "Configuration type",
+          multiple: false,
+          active: true,
+          value: [PluginConfigurationType.GLOBAL]
+        }
+      ],
       getFilterQueryParam
     );
 
diff --git a/src/plugins/views/PluginList/filters.ts b/src/plugins/views/PluginList/filters.ts
index 297652fdd..99c1c99e7 100644
--- a/src/plugins/views/PluginList/filters.ts
+++ b/src/plugins/views/PluginList/filters.ts
@@ -1,14 +1,22 @@
 import { IFilterElement } from "@saleor/components/Filter";
+import { ChannelsWithLoadMoreProps } from "@saleor/hooks/useChannelsSearch";
 import { maybe, parseBoolean } from "@saleor/misc";
 import {
   PluginFilterKeys,
   PluginListFilterOpts
 } from "@saleor/plugins/components/PluginsListPage";
-import { PluginFilterInput } from "@saleor/types/globalTypes";
+import {
+  PluginConfigurationType,
+  PluginFilterInput
+} from "@saleor/types/globalTypes";
+import { mapNodeToChoice } from "@saleor/utils/maps";
 
 import {
   createFilterTabUtils,
   createFilterUtils,
+  dedupeFilter,
+  getMultipleValueQueryParam,
+  getSingleEnumValueQueryParam,
   getSingleValueQueryParam
 } from "../../../utils/filters";
 import {
@@ -20,27 +28,67 @@ import {
 export const PLUGIN_FILTERS_KEY = "pluginFilters";
 
 export function getFilterOpts(
-  params: PluginListUrlFilters
+  params: PluginListUrlFilters,
+  {
+    channels,
+    hasMore,
+    onFetchMore,
+    onSearchChange,
+    loading
+  }: ChannelsWithLoadMoreProps
 ): PluginListFilterOpts {
   return {
     isActive: {
       active: maybe(() => params.active !== undefined, false),
       value:
-        params.active !== undefined ? parseBoolean(params.active, true) : true
+        params.active === undefined
+          ? undefined
+          : parseBoolean(params.active, true)
+    },
+    channels: {
+      active: !!params.channels,
+      choices: mapNodeToChoice(channels),
+      displayValues: mapNodeToChoice(channels),
+      initialSearch: "",
+      hasMore,
+      loading,
+      onFetchMore,
+      onSearchChange,
+      value: maybe(() => dedupeFilter(params.channels), [])
+    },
+    type: {
+      active: !!params.type,
+      value: getParsedConfigType(params.type)
+    },
+    status: {
+      active: !!params.channels?.length && params.active !== undefined,
+      value:
+        !!dedupeFilter(params.channels)?.length && params.active !== undefined
     }
   };
 }
 
+const getParsedConfigType = (configTypeString?: string) =>
+  PluginConfigurationType[configTypeString] || undefined;
+
 export function getFilterVariables(
   params: PluginListUrlFilters
 ): PluginFilterInput {
-  return {
-    active:
-      params.active !== undefined
-        ? parseBoolean(params.active, true)
-        : undefined,
-    search: params.query
+  const baseParams = {
+    type: getParsedConfigType(params.type)
   };
+
+  if (!!params.active && !!params.channels?.length) {
+    return {
+      ...baseParams,
+      statusInChannels: {
+        active: parseBoolean(params.active, true),
+        channels: params.channels
+      }
+    };
+  }
+
+  return baseParams;
 }
 
 export function getFilterQueryParam(
@@ -49,8 +97,21 @@ export function getFilterQueryParam(
   const { name } = filter;
 
   switch (name) {
+    case PluginFilterKeys.channels:
+      return getMultipleValueQueryParam(
+        filter,
+        PluginListUrlFiltersEnum.channels
+      );
+
     case PluginFilterKeys.active:
       return getSingleValueQueryParam(filter, PluginListUrlFiltersEnum.active);
+
+    case PluginFilterKeys.type:
+      return getSingleEnumValueQueryParam(
+        filter,
+        PluginListUrlFiltersEnum.type,
+        PluginConfigurationType
+      );
   }
 }
 
diff --git a/src/plugins/views/PluginsDetails.tsx b/src/plugins/views/PluginsDetails.tsx
index 56cf7f072..a2534ec74 100644
--- a/src/plugins/views/PluginsDetails.tsx
+++ b/src/plugins/views/PluginsDetails.tsx
@@ -1,8 +1,10 @@
 import DialogContentText from "@material-ui/core/DialogContentText";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
+import { PluginConfigurationFragment_configuration } from "@saleor/fragments/types/PluginConfigurationFragment";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { commonMessages } from "@saleor/intl";
 import { ConfigurationItemInput } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
@@ -11,11 +13,10 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import PluginsDetailsPage, {
   PluginDetailsPageFormData
-} from "../components/PluginsDetailsPage";
+} from "../components/PluginsDetailsPage"; // PluginDetailsPageFormData
 import PluginSecretFieldDialog from "../components/PluginSecretFieldDialog";
 import { TypedPluginUpdate } from "../mutations";
-import { TypedPluginsDetailsQuery } from "../queries";
-import { Plugin_plugin_configuration } from "../types/Plugin";
+import { usePluginDetails } from "../queries";
 import { PluginUpdate } from "../types/PluginUpdate";
 import {
   pluginListUrl,
@@ -24,6 +25,8 @@ import {
   PluginUrlQueryParams
 } from "../urls";
 import { isSecretField } from "../utils";
+import { isPluginGlobal } from "./utils";
+import { getConfigByChannelId } from "./utils";
 
 export interface PluginsDetailsProps {
   id: string;
@@ -31,7 +34,7 @@ export interface PluginsDetailsProps {
 }
 
 export function getConfigurationInput(
-  config: Plugin_plugin_configuration[] | null,
+  config: PluginConfigurationFragment_configuration[] | null,
   input: ConfigurationItemInput[] | null
 ): ConfigurationItemInput[] | null {
   if (config === null || input === null) {
@@ -54,6 +57,28 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
   const notify = useNotifier();
   const intl = useIntl();
 
+  const { data: pluginData, loading } = usePluginDetails({
+    displayLoader: true,
+    variables: { id }
+  });
+
+  const plugin = pluginData?.plugin;
+
+  const initialSelectedChannelValue =
+    plugin && !isPluginGlobal(plugin.globalConfiguration)
+      ? plugin.channelConfigurations[0].channel.id
+      : null;
+
+  const [selectedChannelId, setSelectedChannelId] = useStateFromProps(
+    initialSelectedChannelValue
+  );
+
+  const selectedConfig = isPluginGlobal(plugin?.globalConfiguration)
+    ? plugin?.globalConfiguration
+    : plugin?.channelConfigurations.find(
+        getConfigByChannelId(selectedChannelId)
+      );
+
   const [openModal, closeModal] = createDialogActionHandlers<
     PluginUrlDialog,
     PluginUrlQueryParams
@@ -70,106 +95,104 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
   };
 
   return (
-    <TypedPluginsDetailsQuery variables={{ id }}>
-      {pluginDetails => (
-        <TypedPluginUpdate onCompleted={handleUpdate}>
-          {(pluginUpdate, pluginUpdateOpts) => {
-            const formErrors = pluginUpdateOpts.data?.pluginUpdate.errors || [];
+    <TypedPluginUpdate onCompleted={handleUpdate}>
+      {(pluginUpdate, pluginUpdateOpts) => {
+        const formErrors = pluginUpdateOpts.data?.pluginUpdate.errors || [];
 
-            const handleFieldUpdate = (value: string) =>
-              pluginUpdate({
-                variables: {
-                  id,
-                  input: {
-                    configuration: [
-                      {
-                        name: params.id,
-                        value
-                      }
-                    ]
+        const handleFieldUpdate = (value: string) =>
+          pluginUpdate({
+            variables: {
+              channel: selectedChannelId,
+              id,
+              input: {
+                configuration: [
+                  {
+                    name: params.id,
+                    value
                   }
-                }
-              });
+                ]
+              }
+            }
+          });
 
-            const handleSubmit = async (
-              formData: PluginDetailsPageFormData
-            ) => {
-              const result = await pluginUpdate({
-                variables: {
-                  id,
-                  input: {
-                    active: formData.active,
-                    configuration: getConfigurationInput(
-                      pluginDetails.data.plugin.configuration,
-                      formData.configuration
-                    )
-                  }
-                }
-              });
+        const handleSubmit = async (formData: PluginDetailsPageFormData) => {
+          const result = await pluginUpdate({
+            variables: {
+              channel: selectedChannelId,
+              id,
+              input: {
+                active: formData.active,
+                configuration: getConfigurationInput(
+                  selectedConfig?.configuration,
+                  formData.configuration
+                )
+              }
+            }
+          });
 
-              return result.data.pluginUpdate.errors;
-            };
+          return result.data.pluginUpdate.errors;
+        };
 
-            return (
+        return (
+          <>
+            <WindowTitle title={plugin?.name} />
+            <PluginsDetailsPage
+              disabled={loading}
+              errors={formErrors}
+              saveButtonBarState={
+                !params.action ? pluginUpdateOpts.status : "default"
+              }
+              plugin={plugin}
+              onBack={() => navigate(pluginListUrl())}
+              onClear={id =>
+                openModal("clear", {
+                  id
+                })
+              }
+              onEdit={id =>
+                openModal("edit", {
+                  id
+                })
+              }
+              onSubmit={handleSubmit}
+              selectedConfig={selectedConfig}
+              setSelectedChannelId={setSelectedChannelId}
+            />
+            {selectedConfig && (
               <>
-                <WindowTitle title={pluginDetails.data?.plugin?.name} />
-                <PluginsDetailsPage
-                  disabled={pluginDetails.loading}
-                  errors={formErrors}
-                  saveButtonBarState={
-                    !params.action ? pluginUpdateOpts.status : "default"
+                <ActionDialog
+                  confirmButtonState={
+                    !!params.action ? pluginUpdateOpts.status : "default"
                   }
-                  plugin={pluginDetails.data?.plugin}
-                  onBack={() => navigate(pluginListUrl())}
-                  onClear={id =>
-                    openModal("clear", {
-                      id
-                    })
+                  onClose={closeModal}
+                  open={params.action === "clear" && !!params.id}
+                  title={intl.formatMessage({
+                    defaultMessage: "Authorization Field Delete",
+                    description: "header"
+                  })}
+                  onConfirm={() => handleFieldUpdate(null)}
+                >
+                  <DialogContentText>
+                    <FormattedMessage defaultMessage="The plugin may stop working after this field is cleared. Are you sure you want to proceed?" />
+                  </DialogContentText>
+                </ActionDialog>
+                <PluginSecretFieldDialog
+                  confirmButtonState={
+                    !!params.action ? pluginUpdateOpts.status : "default"
                   }
-                  onEdit={id =>
-                    openModal("edit", {
-                      id
-                    })
-                  }
-                  onSubmit={handleSubmit}
+                  field={selectedConfig?.configuration.find(
+                    field => field.name === params.id
+                  )}
+                  onClose={closeModal}
+                  onConfirm={formData => handleFieldUpdate(formData.value)}
+                  open={params.action === "edit" && !!params.id}
                 />
-                {pluginDetails.data?.plugin?.configuration && (
-                  <>
-                    <ActionDialog
-                      confirmButtonState={
-                        !!params.action ? pluginUpdateOpts.status : "default"
-                      }
-                      onClose={closeModal}
-                      open={params.action === "clear" && !!params.id}
-                      title={intl.formatMessage({
-                        defaultMessage: "Authorization Field Delete",
-                        description: "header"
-                      })}
-                      onConfirm={() => handleFieldUpdate(null)}
-                    >
-                      <DialogContentText>
-                        <FormattedMessage defaultMessage="The plugin may stop working after this field is cleared. Are you sure you want to proceed?" />
-                      </DialogContentText>
-                    </ActionDialog>
-                    <PluginSecretFieldDialog
-                      confirmButtonState={
-                        !!params.action ? pluginUpdateOpts.status : "default"
-                      }
-                      field={pluginDetails.data?.plugin?.configuration.find(
-                        field => field.name === params.id
-                      )}
-                      onClose={closeModal}
-                      onConfirm={formData => handleFieldUpdate(formData.value)}
-                      open={params.action === "edit" && !!params.id}
-                    />
-                  </>
-                )}
               </>
-            );
-          }}
-        </TypedPluginUpdate>
-      )}
-    </TypedPluginsDetailsQuery>
+            )}
+          </>
+        );
+      }}
+    </TypedPluginUpdate>
   );
 };
 PluginsDetails.displayName = "PluginsDetails";
diff --git a/src/plugins/views/utils.ts b/src/plugins/views/utils.ts
new file mode 100644
index 000000000..512e40b68
--- /dev/null
+++ b/src/plugins/views/utils.ts
@@ -0,0 +1,11 @@
+import { Plugin_plugin_globalConfiguration } from "@saleor/plugins/types/Plugin";
+
+export const isPluginGlobal = (
+  globalConfiguration: Plugin_plugin_globalConfiguration
+) => !!globalConfiguration;
+
+export const getConfigByChannelId = (channelIdToCompare: string) => ({
+  channel
+}: {
+  channel: { id: string };
+}) => channel.id === channelIdToCompare;
diff --git a/src/productTypes/hooks/useProductTypeDelete/messages.ts b/src/productTypes/hooks/useProductTypeDelete/messages.ts
index adde90214..095e787ef 100644
--- a/src/productTypes/hooks/useProductTypeDelete/messages.ts
+++ b/src/productTypes/hooks/useProductTypeDelete/messages.ts
@@ -18,12 +18,14 @@ export const singleWithItemsMessages = defineMessages({
     defaultMessage:
       "You are about to delete product type <b>{typeName}</b>. It is assigned to {assignedItemsCount} {assignedItemsCount,plural,one{product} other{products}}. Deleting this product type will also delete those products. Are you sure you want to do this?",
     description:
-      "ProductTypeDeleteWarningDialog single assigned items description"
+      "ProductTypeDeleteWarningDialog single assigned items description",
+    id: "ProductTypeDeleteWarningDialog single assigned items description"
   },
   consentLabel: {
     defaultMessage:
       "Yes, I want to delete this product type and assigned products",
-    description: "ProductTypeDeleteWarningDialog single consent label"
+    description: "ProductTypeDeleteWarningDialog single consent label",
+    id: "ProductTypeDeleteWarningDialog single consent label"
   }
 });
 
@@ -32,12 +34,14 @@ export const multipleWithItemsMessages = defineMessages({
     defaultMessage:
       "You are about to delete multiple product types. Some of them are assigned to products. Deleting those product types will also delete those products",
     description:
-      "ProductTypeDeleteWarningDialog with items multiple description"
+      "ProductTypeDeleteWarningDialog with items multiple description",
+    id: "ProductTypeDeleteWarningDialog with items multiple description"
   },
   consentLabel: {
     defaultMessage:
       "Yes, I want to delete those products types and assigned products",
-    description: "ProductTypeDeleteWarningDialog multiple consent label"
+    description: "ProductTypeDeleteWarningDialog multiple consent label",
+    id: "ProductTypeDeleteWarningDialog multiple consent label"
   }
 });
 
@@ -46,7 +50,8 @@ export const singleWithoutItemsMessages = defineMessages({
     defaultMessage:
       "Are you sure you want to delete <b>{typeName}</b>? If you remove it you won’t be able to assign it to created products.",
     description:
-      "ProductTypeDeleteWarningDialog single assigned items description"
+      "ProductTypeDeleteWarningDialog single no assigned items description",
+    id: "ProductTypeDeleteWarningDialog single no assigned items description"
   }
 });
 
@@ -55,6 +60,7 @@ export const multipleWithoutItemsMessages = defineMessages({
     defaultMessage:
       "Are you sure you want to delete selected product types? If you remove them you won’t be able to assign them to created products.",
     description:
-      "ProductTypeDeleteWarningDialog single assigned items description"
+      "ProductTypeDeleteWarningDialog multiple assigned items description",
+    id: "ProductTypeDeleteWarningDialog multiple assigned items description"
   }
 });
diff --git a/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx b/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx
index 4263af986..d32b924ba 100644
--- a/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx
+++ b/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx
@@ -1,9 +1,9 @@
-import { useChannelsSearch } from "@saleor/channels/components/ChannelsAvailabilityDialog/utils";
 import { Channels_channels } from "@saleor/channels/types/Channels";
 import CardSpacer from "@saleor/components/CardSpacer";
 import MultiAutocompleteSelectField, {
   MultiAutocompleteChoiceType
 } from "@saleor/components/MultiAutocompleteSelectField";
+import { useChannelsSearch } from "@saleor/hooks/useChannelsSearch";
 import { FormChange } from "@saleor/hooks/useForm";
 import { mapNodeToChoice } from "@saleor/utils/maps";
 import React from "react";
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 14a3d3dde..8794c9e9d 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -3181,6 +3181,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
         <div>
           <div
             class="SingleAutocompleteSelectField-container-id"
+            data-test-id="address-edit-country-select-field"
           >
             <div
               class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -3704,20 +3705,7 @@ exports[`Storyshots Generics / Channels availability card default 1`] = `
       </span>
       <div
         class="CardTitle-toolbar-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-          data-test-id="channels-availiability-manage-button"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Manage
-          </span>
-        </button>
-      </div>
+      />
     </div>
     <div
       class="CardTitle-children-id"
@@ -3790,20 +3778,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
       </span>
       <div
         class="CardTitle-toolbar-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-          data-test-id="channels-availiability-manage-button"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Manage
-          </span>
-        </button>
-      </div>
+      />
     </div>
     <div
       class="CardTitle-children-id"
@@ -4588,9 +4563,20 @@ exports[`Storyshots Generics / ChannelsAvailabilityDropdown default 1`] = `
       role="button"
     >
       <div
-        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+        class="StatusLabel-container-id"
       >
-        Available in 3/6
+        <div
+          class="undefined StatusLabel-successDot-id"
+        />
+        <div
+          class="StatusLabel-textContainer-id"
+        >
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Available in 3/6
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -5529,16 +5515,16 @@ exports[`Storyshots Generics / Filter default 1`] = `
     >
       <form>
         <div
-          class="FilterContent-actionBar-id"
+          class="FilterContentHeader-container-id"
         >
           <div
-            class="MuiTypography-root-id FilterContent-label-id MuiTypography-body1-id"
+            class="MuiTypography-root-id FilterContentHeader-label-id MuiTypography-body1-id"
           >
             Filters
           </div>
           <div>
             <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContent-clear-id"
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContentHeader-clear-id"
               data-test="clear"
               tabindex="0"
               type="button"
@@ -5567,7 +5553,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           class="Hr-root-id"
         />
         <div
-          class="FilterContent-filterFieldBar-id"
+          class="FilterContentBodyNameField-container-id"
         >
           <label
             class="MuiFormControlLabel-root-id"
@@ -5617,7 +5603,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           </label>
         </div>
         <div
-          class="FilterContent-filterSettings-id"
+          class="FilterContentBody-filterSettings-id"
         >
           <div
             class="MuiFormControl-root-id SingleSelectField-formControl-id"
@@ -5631,7 +5617,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
             >
               <div
                 aria-haspopup="listbox"
-                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
+                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBody-input-id"
                 role="button"
                 tabindex="0"
               >
@@ -5673,11 +5659,11 @@ exports[`Storyshots Generics / Filter default 1`] = `
             class="FormSpacer-spacer-id"
           />
           <div
-            class="FilterContent-inputRange-id"
+            class="FilterContentBody-inputRange-id"
           >
             <div>
               <svg
-                class="FilterContent-arrow-id"
+                class="FilterContentBody-arrow-id"
                 fill="none"
                 height="21"
                 viewBox="0 0 18 21"
@@ -5703,7 +5689,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBody-input-id"
                   name="createdAt_min"
                   type="date"
                   value="2019-09-09"
@@ -5725,7 +5711,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
               </div>
             </div>
             <span
-              class="FilterContent-andLabel-id"
+              class="FilterContentBody-andLabel-id"
             >
               and
             </span>
@@ -5740,7 +5726,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBody-input-id"
                   name="createdAt_max"
                   type="date"
                   value="2019-10-23"
@@ -5764,7 +5750,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           </div>
         </div>
         <div
-          class="FilterContent-filterFieldBar-id"
+          class="FilterContentBodyNameField-container-id"
         >
           <label
             class="MuiFormControlLabel-root-id"
@@ -5808,7 +5794,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           </label>
         </div>
         <div
-          class="FilterContent-filterFieldBar-id"
+          class="FilterContentBodyNameField-container-id"
         >
           <label
             class="MuiFormControlLabel-root-id"
@@ -5852,7 +5838,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           </label>
         </div>
         <div
-          class="FilterContent-filterFieldBar-id"
+          class="FilterContentBodyNameField-container-id"
         >
           <label
             class="MuiFormControlLabel-root-id"
@@ -5902,7 +5888,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           </label>
         </div>
         <div
-          class="FilterContent-filterSettings-id"
+          class="FilterContentBody-filterSettings-id"
         >
           <div
             class="FilterOptionField-root-id"
@@ -6089,16 +6075,16 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
     >
       <form>
         <div
-          class="FilterContent-actionBar-id"
+          class="FilterContentHeader-container-id"
         >
           <div
-            class="MuiTypography-root-id FilterContent-label-id MuiTypography-body1-id"
+            class="MuiTypography-root-id FilterContentHeader-label-id MuiTypography-body1-id"
           >
             Filters
           </div>
           <div>
             <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContent-clear-id"
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContentHeader-clear-id"
               data-test="clear"
               tabindex="0"
               type="button"
@@ -6127,7 +6113,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
           class="Hr-root-id"
         />
         <div
-          class="FilterContent-filterFieldBar-id"
+          class="FilterContentBodyNameField-container-id"
         >
           <label
             class="MuiFormControlLabel-root-id"
@@ -6177,7 +6163,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
           </label>
         </div>
         <div
-          class="FilterContent-filterSettings-id"
+          class="FilterContentBody-filterSettings-id"
         >
           <div
             class="MuiFormControl-root-id SingleSelectField-formControl-id"
@@ -6191,7 +6177,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             >
               <div
                 aria-haspopup="listbox"
-                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
+                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBody-input-id"
                 role="button"
                 tabindex="0"
               >
@@ -6233,11 +6219,11 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             class="FormSpacer-spacer-id"
           />
           <div
-            class="FilterContent-inputRange-id"
+            class="FilterContentBody-inputRange-id"
           >
             <div>
               <svg
-                class="FilterContent-arrow-id"
+                class="FilterContentBody-arrow-id"
                 fill="none"
                 height="21"
                 viewBox="0 0 18 21"
@@ -6263,7 +6249,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBody-input-id"
                   name="createdAt_min"
                   type="date"
                   value="2019-09-09"
@@ -6285,7 +6271,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
               </div>
             </div>
             <span
-              class="FilterContent-andLabel-id"
+              class="FilterContentBody-andLabel-id"
             >
               and
             </span>
@@ -6300,7 +6286,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBody-input-id"
                   name="createdAt_max"
                   type="date"
                   value="2019-10-23"
@@ -6324,7 +6310,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
           </div>
         </div>
         <div
-          class="FilterContent-filterFieldBar-id"
+          class="FilterContentBodyNameField-container-id"
         >
           <label
             class="MuiFormControlLabel-root-id"
@@ -6368,7 +6354,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
           </label>
         </div>
         <div
-          class="FilterContent-filterFieldBar-id"
+          class="FilterContentBodyNameField-container-id"
         >
           <label
             class="MuiFormControlLabel-root-id"
@@ -6412,7 +6398,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
           </label>
         </div>
         <div
-          class="FilterContent-filterFieldBar-id"
+          class="FilterContentBodyNameField-container-id"
         >
           <label
             class="MuiFormControlLabel-root-id"
@@ -6462,7 +6448,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
           </label>
         </div>
         <div
-          class="FilterContent-filterSettings-id"
+          class="FilterContentBody-filterSettings-id"
         >
           <div
             class="FilterOptionField-root-id"
@@ -13358,9 +13344,20 @@ exports[`Storyshots Generics / StatusLabel when error 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+        class="StatusLabel-container-id"
       >
-        Example label
+        <div
+          class="undefined StatusLabel-errorDot-id"
+        />
+        <div
+          class="StatusLabel-textContainer-id"
+        >
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Example label
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -13379,9 +13376,20 @@ exports[`Storyshots Generics / StatusLabel when neutral 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+        class="StatusLabel-container-id"
       >
-        Example label
+        <div
+          class="undefined StatusLabel-neutralDot-id"
+        />
+        <div
+          class="StatusLabel-textContainer-id"
+        >
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Example label
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -13400,9 +13408,20 @@ exports[`Storyshots Generics / StatusLabel when success 1`] = `
       class="MuiCardContent-root-id"
     >
       <div
-        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+        class="StatusLabel-container-id"
       >
-        Example label
+        <div
+          class="undefined StatusLabel-successDot-id"
+        />
+        <div
+          class="StatusLabel-textContainer-id"
+        >
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Example label
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -15238,6 +15257,7 @@ exports[`Storyshots Orders / OrderCustomer editable 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test-id="edit-shipping-address"
             tabindex="0"
             type="button"
           >
@@ -15293,6 +15313,7 @@ exports[`Storyshots Orders / OrderCustomer editable 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test-id="edit-billing-address"
             tabindex="0"
             type="button"
           >
@@ -16486,12 +16507,6 @@ exports[`Storyshots Orders / OrderShippingMethodEditDialog errors 1`] = `
 />
 `;
 
-exports[`Storyshots Product types / ProductTypeDeleteDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
 exports[`Storyshots Products / ProductVariantImageSelectDialog default 1`] = `
 <div
   style="padding:24px"
@@ -21596,6 +21611,56 @@ exports[`Storyshots Shipping zones details / Settings Card default 1`] = `
 </div>
 `;
 
+exports[`Storyshots TypeDeleteWarningDialog.stories loading 1`] = `
+<div
+  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
+>
+  <div
+    style="padding:24px"
+  />
+</div>
+`;
+
+exports[`Storyshots TypeDeleteWarningDialog.stories multiple type no assigned items 1`] = `
+<div
+  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
+>
+  <div
+    style="padding:24px"
+  />
+</div>
+`;
+
+exports[`Storyshots TypeDeleteWarningDialog.stories multiple types some assigned items 1`] = `
+<div
+  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
+>
+  <div
+    style="padding:24px"
+  />
+</div>
+`;
+
+exports[`Storyshots TypeDeleteWarningDialog.stories single type no assigned items 1`] = `
+<div
+  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
+>
+  <div
+    style="padding:24px"
+  />
+</div>
+`;
+
+exports[`Storyshots TypeDeleteWarningDialog.stories single type some assigned items 1`] = `
+<div
+  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
+>
+  <div
+    style="padding:24px"
+  />
+</div>
+`;
+
 exports[`Storyshots Views / Apps / Activate app default 1`] = `
 <div
   style="padding:24px"
@@ -49678,9 +49743,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 2/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 2/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -49764,9 +49840,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -49850,9 +49937,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -49936,9 +50034,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -50022,9 +50131,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -50108,9 +50228,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -50194,9 +50325,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -50280,9 +50422,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -50366,9 +50519,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -50452,9 +50616,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                         role="button"
                       >
                         <div
-                          class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                          class="StatusLabel-container-id"
                         >
-                          Available in 1/2
+                          <div
+                            class="undefined StatusLabel-errorDot-id"
+                          />
+                          <div
+                            class="StatusLabel-textContainer-id"
+                          >
+                            <div
+                              class="MuiTypography-root-id MuiTypography-body1-id"
+                            >
+                              Available in 1/2
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -55325,9 +55500,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 2/2
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 2/2
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -55430,9 +55616,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 2/2
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 2/2
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -55535,9 +55732,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 2/2
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 2/2
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -55640,9 +55848,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 2/2
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 2/2
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -56777,9 +56996,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 2/2
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 2/2
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -56882,9 +57112,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 2/2
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 2/2
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -56987,9 +57228,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 2/2
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 2/2
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -57092,9 +57344,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 2/2
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 2/2
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -59703,9 +59966,20 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     role="button"
                   >
                     <div
-                      class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                      class="StatusLabel-container-id"
                     >
-                      Available in 1/2
+                      <div
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Available in 1/2
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -68389,6 +68663,7 @@ exports[`Storyshots Views / Customers / Create customer default 1`] = `
                 <div>
                   <div
                     class="SingleAutocompleteSelectField-container-id"
+                    data-test-id="address-edit-country-select-field"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -69112,6 +69387,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
                 <div>
                   <div
                     class="SingleAutocompleteSelectField-container-id"
+                    data-test-id="address-edit-country-select-field"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -69816,6 +70092,7 @@ exports[`Storyshots Views / Customers / Create customer loading 1`] = `
                 <div>
                   <div
                     class="SingleAutocompleteSelectField-container-id"
+                    data-test-id="address-edit-country-select-field"
                   >
                     <div
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -70384,9 +70661,20 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Fully paid
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Fully paid
+                          </div>
+                        </div>
                       </div>
                     </td>
                     <td
@@ -71058,9 +71346,20 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Fully paid
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Fully paid
+                          </div>
+                        </div>
                       </div>
                     </td>
                     <td
@@ -71787,9 +72086,20 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Fully paid
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Fully paid
+                          </div>
+                        </div>
                       </div>
                     </td>
                     <td
@@ -73069,9 +73379,20 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Fully paid
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Fully paid
+                          </div>
+                        </div>
                       </div>
                     </td>
                     <td
@@ -73737,9 +74058,20 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Fully paid
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Fully paid
+                          </div>
+                        </div>
                       </div>
                     </td>
                     <td
@@ -74405,9 +74737,20 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Fully paid
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Fully paid
+                          </div>
+                        </div>
                       </div>
                     </td>
                     <td
@@ -75051,9 +75394,20 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Fully paid
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Fully paid
+                          </div>
+                        </div>
                       </div>
                     </td>
                     <td
@@ -75725,9 +76079,20 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Fully paid
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Fully paid
+                          </div>
+                        </div>
                       </div>
                     </td>
                     <td
@@ -87526,9 +87891,20 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 1/7
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 1/7
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -87631,9 +88007,20 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 1/7
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 1/7
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -87736,9 +88123,20 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 1/7
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 1/7
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -87841,9 +88239,20 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           role="button"
                         >
                           <div
-                            class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                            class="StatusLabel-container-id"
                           >
-                            Available in 1/7
+                            <div
+                              class="undefined StatusLabel-successDot-id"
+                            />
+                            <div
+                              class="StatusLabel-textContainer-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id"
+                              >
+                                Available in 1/7
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -110611,12 +111020,23 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -110739,13 +111159,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -110869,13 +111300,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -111030,9 +111472,20 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -112251,12 +112704,23 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -112394,13 +112858,24 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -112564,13 +113039,24 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -112765,9 +113251,20 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -113740,6 +114237,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -113795,6 +114293,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -114067,12 +114566,23 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -114210,13 +114720,24 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -114380,13 +114901,24 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -114581,9 +115113,20 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -115556,6 +116099,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -115611,6 +116155,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -116178,6 +116723,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                    data-test-id="edit-shipping-address"
                     disabled=""
                     tabindex="-1"
                     type="button"
@@ -116215,6 +116761,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                    data-test-id="edit-billing-address"
                     disabled=""
                     tabindex="-1"
                     type="button"
@@ -116452,12 +116999,23 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -116595,13 +117153,24 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -116765,13 +117334,24 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -116966,9 +117546,20 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -117941,6 +118532,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -117996,6 +118588,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -118268,12 +118861,23 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -118411,13 +119015,24 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -118581,13 +119196,24 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -118782,9 +119408,20 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -119757,6 +120394,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -119812,6 +120450,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -120084,12 +120723,23 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -120227,13 +120877,24 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -120397,13 +121058,24 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -120598,9 +121270,20 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -121573,6 +122256,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -121609,6 +122293,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -121900,12 +122585,23 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -122043,13 +122739,24 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -122213,13 +122920,24 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -122414,9 +123132,20 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -123389,6 +124118,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -123444,6 +124174,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -123716,12 +124447,23 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -123859,13 +124601,24 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -124029,13 +124782,24 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -124230,9 +124994,20 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -125205,6 +125980,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -125260,6 +126036,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -125532,12 +126309,23 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -125675,13 +126463,24 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -125845,13 +126644,24 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -126046,9 +126856,20 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -127021,6 +127842,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -127076,6 +127898,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -127348,12 +128171,23 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -127491,13 +128325,24 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -127661,13 +128506,24 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -127862,9 +128718,20 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -128837,6 +129704,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -128892,6 +129760,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -129164,12 +130033,23 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -129307,13 +130187,24 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -129477,13 +130368,24 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -129678,9 +130580,20 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully refunded
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully refunded
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -130653,6 +131566,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -130708,6 +131622,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -130980,12 +131895,23 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -131123,13 +132049,24 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -131293,13 +132230,24 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -131494,9 +132442,20 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -132469,6 +133428,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -132524,6 +133484,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -132796,12 +133757,23 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-alertDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-alertDot-id"
                   />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      />
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -132939,13 +133911,24 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-2
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-2
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -133109,13 +134092,24 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled (1)
                   <div
-                    class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
                   >
-                    #9-1
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled (1)
+                      <div
+                        class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
+                      >
+                        #9-1
+                      </div>
+                    </div>
                   </div>
                 </div>
               </span>
@@ -133310,9 +134304,20 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </span>
               <div
@@ -134285,6 +135290,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-shipping-address"
                     tabindex="0"
                     type="button"
                   >
@@ -134340,6 +135346,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                    data-test-id="edit-billing-address"
                     tabindex="0"
                     type="button"
                   >
@@ -135107,6 +136114,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="edit-shipping-address"
                   tabindex="0"
                   type="button"
                 >
@@ -135143,6 +136151,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="edit-billing-address"
                   tabindex="0"
                   type="button"
                 >
@@ -135398,6 +136407,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                  data-test-id="edit-shipping-address"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -135435,6 +136445,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                  data-test-id="edit-billing-address"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -136073,6 +137084,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="edit-shipping-address"
                   tabindex="0"
                   type="button"
                 >
@@ -136109,6 +137121,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="edit-billing-address"
                   tabindex="0"
                   type="button"
                 >
@@ -136445,6 +137458,7 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="edit-shipping-address"
                   tabindex="0"
                   type="button"
                 >
@@ -136481,6 +137495,7 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="edit-billing-address"
                   tabindex="0"
                   type="button"
                 >
@@ -136943,18 +137958,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -136992,18 +138029,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137041,18 +138100,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Draft
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Draft
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137090,18 +138171,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137139,18 +138242,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137188,18 +138313,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137237,18 +138384,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137286,18 +138455,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137335,18 +138526,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137384,18 +138597,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137433,18 +138668,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137482,18 +138739,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137531,18 +138810,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137580,18 +138881,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137629,18 +138952,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137678,18 +139023,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137727,18 +139094,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137776,18 +139165,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137825,18 +139236,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -137874,18 +139307,40 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138350,18 +139805,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138399,18 +139876,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138448,18 +139947,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Draft
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Draft
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138497,18 +140018,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138546,18 +140089,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138595,18 +140160,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138644,18 +140231,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138693,18 +140302,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138742,18 +140373,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138791,18 +140444,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138840,18 +140515,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138889,18 +140586,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138938,18 +140657,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -138987,18 +140728,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -139036,18 +140799,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -139085,18 +140870,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -139134,18 +140941,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -139183,18 +141012,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -139232,18 +141083,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -139281,18 +141154,40 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140165,18 +142060,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140214,18 +142131,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140263,18 +142202,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Draft
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Draft
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140312,18 +142273,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140361,18 +142344,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140410,18 +142415,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140459,18 +142486,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140508,18 +142557,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140557,18 +142628,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140606,18 +142699,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unfulfilled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unfulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140655,18 +142770,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Cancelled
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Cancelled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140704,18 +142841,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140753,18 +142912,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140802,18 +142983,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140851,18 +143054,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fulfilled
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140900,18 +143125,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140949,18 +143196,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -140998,18 +143267,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Unpaid
+                  <div
+                    class="undefined StatusLabel-errorDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Unpaid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -141047,18 +143338,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -141096,18 +143409,40 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Fully paid
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Fully paid
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Partially fulfilled
+                  <div
+                    class="undefined StatusLabel-neutralDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      Partially fulfilled
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
@@ -150432,9 +152767,20 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                     class="TableCellHeader-label-id"
                   >
                     <div
-                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                      class="StatusLabel-container-id"
                     >
-                      Published
+                      <div
+                        class="undefined StatusLabel-successDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Published
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -150512,9 +152858,20 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                     class="TableCellHeader-label-id"
                   >
                     <div
-                      class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                      class="StatusLabel-container-id"
                     >
-                      Not Published
+                      <div
+                        class="undefined StatusLabel-errorDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Not Published
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -150592,9 +152949,20 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                     class="TableCellHeader-label-id"
                   >
                     <div
-                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                      class="StatusLabel-container-id"
                     >
-                      Published
+                      <div
+                        class="undefined StatusLabel-successDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Published
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -150672,9 +153040,20 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                     class="TableCellHeader-label-id"
                   >
                     <div
-                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                      class="StatusLabel-container-id"
                     >
-                      Published
+                      <div
+                        class="undefined StatusLabel-successDot-id"
+                      />
+                      <div
+                        class="StatusLabel-textContainer-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Published
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -157798,126 +160177,39 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
       >
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-h6-id"
-          >
-            Plugin Information and Status
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Plugin Information and Status
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
+              class="CardTitle-root-id"
             >
-              Plugin Name
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Channels
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
             </div>
             <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Username or account
-            </div>
-            <div
-              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-            >
-              Description
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="Hr-root-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
+              class="PluginDetailsChannelsCardContent-itemContainer-id"
             >
-              Status
-            </div>
-            <label
-              class="MuiFormControlLabel-root-id"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+              <div
+                class="MuiCardContent-root-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    name="active"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="currentColor"
-                      height="14"
-                      width="14"
-                      x="5"
-                      y="5"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M 16.7527 9.33783 L 10.86618 15.7595 L 8 12.32006 L 8.76822 11.67988 L 10.90204 14.24046 L 16.0155 8.66211 L 16.7527 9.33783 Z"
-                      fill="white"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-              >
-                Set plugin as Active
-              </span>
-            </label>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PluginsDetailsPage-spacer-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h6-id"
-          >
-            Plugin Settings
+                  channel 1
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div>
@@ -157930,7 +160222,7 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
               <span
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
-                Plugin Settings
+                Plugin Information and Status
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -157946,335 +160238,80 @@ exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
               class="MuiCardContent-root-id"
             >
               <div
-                class="PluginSettings-item-id"
+                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Username or account
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="Username or account"
-                      type="text"
-                      value="avatax_user"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Username or account
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    Provide user or account details
-                  </p>
-                </div>
+                Plugin Name
               </div>
               <div
-                class="PluginSettings-item-id"
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Password or license
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="Password or license"
-                      type="text"
-                      value="TEM8S2-2ET83-CGKP1-DPSI2-EPZO1"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Password or license
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    Provide password or license details
-                  </p>
-                </div>
+                Username or account
               </div>
               <div
-                class="PluginSettings-item-id"
+                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
               >
-                <label
-                  class="MuiFormControlLabel-root-id"
+                Description
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
+              >
+                Status
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                 >
                   <span
-                    class="MuiSwitch-root-id"
+                    class="MuiIconButton-label-id"
                   >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                          name="Use sandbox"
-                          type="checkbox"
-                        />
-                        <span
-                          class="MuiSwitch-thumb-id"
-                        />
-                      </span>
-                    </span>
-                    <span
-                      class="MuiSwitch-track-id"
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="active"
+                      type="checkbox"
                     />
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    <div>
-                      <span
-                        class="ControlledSwitch-labelText-id"
-                      >
-                        Use sandbox
-                      </span>
-                      <div />
-                    </div>
-                  </span>
-                </label>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-                  />
-                </svg>
-              </div>
-              <div
-                class="PluginSettings-item-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Multiline Field
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      name="multiline-field"
-                      rows="1"
-                    >
-                      Lorem ipsum
-dolor sit
-amet enim.
-Etiam ullamcorper.
-Suspendisse a
-pellentesque dui,
-non felis.
-                    </textarea>
-                    <textarea
+                    <svg
                       aria-hidden="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      readonly=""
-                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                      tabindex="-1"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Multiline Field
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    This is a multiline field
-                  </p>
-                </div>
-              </div>
+                      <rect
+                        fill="none"
+                        height="14"
+                        stroke="currentColor"
+                        width="14"
+                        x="5"
+                        y="5"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                >
+                  Set plugin as Active
+                </span>
+              </label>
             </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
           />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Authorization
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="PluginAuthorization-item-id"
-              >
-                <div>
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    API key
-                  </div>
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    **** 9ab9
-                  </div>
-                </div>
-                <div
-                  class="PluginAuthorization-spacer-id"
-                />
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Clear
-                  </span>
-                </button>
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id PluginAuthorization-hr-id"
-              />
-              <div
-                class="PluginAuthorization-item-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Password
-                </div>
-                <div
-                  class="PluginAuthorization-spacer-id"
-                />
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Clear
-                  </span>
-                </button>
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id PluginAuthorization-hr-id"
-              />
-              <div
-                class="PluginAuthorization-item-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Empty Password
-                </div>
-                <div
-                  class="PluginAuthorization-spacer-id"
-                />
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Create
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -158312,133 +160349,41 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
       >
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-h6-id"
-          >
-            Plugin Information and Status
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Plugin Information and Status
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
+              class="CardTitle-root-id"
             >
-              Plugin Name
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Channels
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
             </div>
             <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Username or account
-            </div>
-            <div
-              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-            >
-              Description
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="Hr-root-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
+              class="PluginDetailsChannelsCardContent-itemContainer-id"
             >
-              Status
-            </div>
-            <label
-              class="MuiFormControlLabel-root-id"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+              <div
+                class="MuiCardContent-root-id"
               >
-                <span
-                  class="MuiIconButton-label-id"
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    name="active"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="currentColor"
-                      height="14"
-                      width="14"
-                      x="5"
-                      y="5"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M 16.7527 9.33783 L 10.86618 15.7595 L 8 12.32006 L 8.76822 11.67988 L 10.90204 14.24046 L 16.0155 8.66211 L 16.7527 9.33783 Z"
-                      fill="white"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-              >
-                Set plugin as Active
-              </span>
-            </label>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
-            >
-              Plugin is misconfigured and cannot be activated
+                  channel 1
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <hr
-          class="Hr-root-id PluginsDetailsPage-spacer-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h6-id"
-          >
-            Plugin Settings
-          </div>
-        </div>
         <div>
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -158449,7 +160394,7 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
               <span
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
-                Plugin Settings
+                Plugin Information and Status
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -158465,335 +160410,85 @@ exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
               class="MuiCardContent-root-id"
             >
               <div
-                class="PluginSettings-item-id"
+                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Username or account
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="Username or account"
-                      type="text"
-                      value="avatax_user"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Username or account
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    Provide user or account details
-                  </p>
-                </div>
+                Plugin Name
               </div>
               <div
-                class="PluginSettings-item-id"
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Password or license
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="Password or license"
-                      type="text"
-                      value="TEM8S2-2ET83-CGKP1-DPSI2-EPZO1"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Password or license
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    Provide password or license details
-                  </p>
-                </div>
+                Username or account
               </div>
               <div
-                class="PluginSettings-item-id"
+                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
               >
-                <label
-                  class="MuiFormControlLabel-root-id"
+                Description
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
+              >
+                Status
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                 >
                   <span
-                    class="MuiSwitch-root-id"
+                    class="MuiIconButton-label-id"
                   >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                          name="Use sandbox"
-                          type="checkbox"
-                        />
-                        <span
-                          class="MuiSwitch-thumb-id"
-                        />
-                      </span>
-                    </span>
-                    <span
-                      class="MuiSwitch-track-id"
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="active"
+                      type="checkbox"
                     />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <rect
+                        fill="none"
+                        height="14"
+                        stroke="currentColor"
+                        width="14"
+                        x="5"
+                        y="5"
+                      />
+                    </svg>
                   </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    <div>
-                      <span
-                        class="ControlledSwitch-labelText-id"
-                      >
-                        Use sandbox
-                      </span>
-                      <div />
-                    </div>
-                  </span>
-                </label>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
-                  <path
-                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-                  />
-                </svg>
-              </div>
+                  Set plugin as Active
+                </span>
+              </label>
               <div
-                class="PluginSettings-item-id"
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Multiline Field
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      name="multiline-field"
-                      rows="1"
-                    >
-                      Lorem ipsum
-dolor sit
-amet enim.
-Etiam ullamcorper.
-Suspendisse a
-pellentesque dui,
-non felis.
-                    </textarea>
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      readonly=""
-                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                      tabindex="-1"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Multiline Field
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    This is a multiline field
-                  </p>
-                </div>
+                Plugin is misconfigured and cannot be activated
               </div>
             </div>
           </div>
           <div
             class="CardSpacer-spacer-id"
           />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Authorization
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="PluginAuthorization-item-id"
-              >
-                <div>
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    API key
-                  </div>
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    **** 9ab9
-                  </div>
-                </div>
-                <div
-                  class="PluginAuthorization-spacer-id"
-                />
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Clear
-                  </span>
-                </button>
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id PluginAuthorization-hr-id"
-              />
-              <div
-                class="PluginAuthorization-item-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Password
-                </div>
-                <div
-                  class="PluginAuthorization-spacer-id"
-                />
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Clear
-                  </span>
-                </button>
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id PluginAuthorization-hr-id"
-              />
-              <div
-                class="PluginAuthorization-item-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Empty Password
-                </div>
-                <div
-                  class="PluginAuthorization-spacer-id"
-                />
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Create
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -158831,99 +160526,125 @@ exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
       >
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-h6-id"
-          >
-            Plugin Information and Status
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Plugin Information and Status
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
+              class="CardTitle-root-id"
             >
-              Plugin Name
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Channels
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
             </div>
             <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            />
-            <div
-              class="FormSpacer-spacer-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="Hr-root-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
-            >
-              Status
-            </div>
-            <label
-              class="MuiFormControlLabel-root-id"
+              class="MuiCardContent-root-id"
             >
               <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Plugin Information and Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
+              >
+                Plugin Name
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
+              >
+                Status
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
               >
                 <span
-                  class="MuiIconButton-label-id"
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                 >
-                  <input
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    name="active"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <rect
-                      fill="none"
-                      height="14"
-                      stroke="currentColor"
-                      width="14"
-                      x="5"
-                      y="5"
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="active"
+                      type="checkbox"
                     />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <rect
+                        fill="none"
+                        height="14"
+                        stroke="currentColor"
+                        width="14"
+                        x="5"
+                        y="5"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-              >
-                Set plugin as Active
-              </span>
-            </label>
+                <span
+                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                >
+                  Set plugin as Active
+                </span>
+              </label>
+            </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
         </div>
       </div>
     </div>
@@ -158961,117 +160682,141 @@ exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
       >
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-h6-id"
-          >
-            Plugin Information and Status
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-            >
-              Plugin Information and Status
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
             <div
-              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
+              class="CardTitle-root-id"
             >
-              Plugin Name
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Channels
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
             </div>
             <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Username or account
-            </div>
-            <div
-              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-            >
-              Description
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
+              class="CardTitle-children-id"
             />
             <hr
-              class="Hr-root-id"
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
+              class="PluginDetailsChannelsCardContent-itemContainer-id"
             >
-              Status
+              <div
+                class="MuiCardContent-root-id"
+              >
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  channel 1
+                </div>
+              </div>
             </div>
-            <label
-              class="MuiFormControlLabel-root-id"
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Plugin Information and Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
+              >
+                Plugin Name
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Username or account
+              </div>
+              <div
+                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
+              >
+                Description
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
+              >
+                Status
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
               >
                 <span
-                  class="MuiIconButton-label-id"
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                 >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    name="active"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <rect
-                      fill="currentColor"
-                      height="14"
-                      width="14"
-                      x="5"
-                      y="5"
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="active"
+                      type="checkbox"
                     />
-                    <path
-                      clip-rule="evenodd"
-                      d="M 16.7527 9.33783 L 10.86618 15.7595 L 8 12.32006 L 8.76822 11.67988 L 10.90204 14.24046 L 16.0155 8.66211 L 16.7527 9.33783 Z"
-                      fill="white"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <rect
+                        fill="none"
+                        height="14"
+                        stroke="currentColor"
+                        width="14"
+                        x="5"
+                        y="5"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-              >
-                Set plugin as Active
-              </span>
-            </label>
+                <span
+                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                >
+                  Set plugin as Active
+                </span>
+              </label>
+            </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
         </div>
       </div>
     </div>
@@ -159202,7 +160947,8 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
           >
             <tr>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="5"
                 scope="col"
               >
                 <div
@@ -159234,7 +160980,8 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="2"
                 scope="col"
               >
                 <div
@@ -159243,15 +160990,36 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
                   <div
                     class="TableCellHeader-label-id"
                   >
-                    Active
+                    Configuration
                   </div>
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="2"
                 scope="col"
               >
-                Action
+                <div
+                  class="TableCellHeader-labelContainer-id"
+                >
+                  <div
+                    class="TableCellHeader-label-id"
+                  >
+                    Channel
+                  </div>
+                </div>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                scope="col"
+              >
+                <div
+                  class="TableCellHeader-labelContainer-id"
+                >
+                  <div
+                    class="TableCellHeader-label-id"
+                  />
+                </div>
               </th>
             </tr>
           </thead>
@@ -159263,7 +161031,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="3"
+                colspan="10"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -159366,21 +161134,53 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
               class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="5"
               >
                 Avalara
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="2"
+              >
+                Per channel
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="2"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  Yes
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      <div
+                        class="ChannelStatusLabel-horizontalContainer-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Active in 1
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          /1
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
               >
                 <div>
                   <svg
@@ -159400,21 +161200,53 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
               class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="5"
               >
                 VatLayer
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="2"
+              >
+                Per channel
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="2"
               >
                 <div
-                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                  class="StatusLabel-container-id"
                 >
-                  No
+                  <div
+                    class="undefined StatusLabel-successDot-id"
+                  />
+                  <div
+                    class="StatusLabel-textContainer-id"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body1-id"
+                    >
+                      <div
+                        class="ChannelStatusLabel-horizontalContainer-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Active in 1
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          /1
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
               >
                 <div>
                   <svg
@@ -159561,7 +161393,8 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
           >
             <tr>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="5"
                 scope="col"
               >
                 <div
@@ -159593,7 +161426,8 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="2"
                 scope="col"
               >
                 <div
@@ -159602,15 +161436,36 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
                   <div
                     class="TableCellHeader-label-id"
                   >
-                    Active
+                    Configuration
                   </div>
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="2"
                 scope="col"
               >
-                Action
+                <div
+                  class="TableCellHeader-labelContainer-id"
+                >
+                  <div
+                    class="TableCellHeader-label-id"
+                  >
+                    Channel
+                  </div>
+                </div>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                scope="col"
+              >
+                <div
+                  class="TableCellHeader-labelContainer-id"
+                >
+                  <div
+                    class="TableCellHeader-label-id"
+                  />
+                </div>
               </th>
             </tr>
           </thead>
@@ -159622,7 +161477,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="3"
+                colspan="10"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -159726,7 +161581,8 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
               class="MuiTableRow-root-id"
             >
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="10"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -159734,31 +161590,6 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
                   ‌
                 </span>
               </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colAction-id"
-              >
-                <div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                    />
-                  </svg>
-                </div>
-              </td>
             </tr>
           </tbody>
         </table>
@@ -159891,7 +161722,8 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
           >
             <tr>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colName-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="5"
                 scope="col"
               >
                 <div
@@ -159923,7 +161755,8 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colActive-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="2"
                 scope="col"
               >
                 <div
@@ -159932,15 +161765,36 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
                   <div
                     class="TableCellHeader-label-id"
                   >
-                    Active
+                    Configuration
                   </div>
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-colAction-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                colspan="2"
                 scope="col"
               >
-                Action
+                <div
+                  class="TableCellHeader-labelContainer-id"
+                >
+                  <div
+                    class="TableCellHeader-label-id"
+                  >
+                    Channel
+                  </div>
+                </div>
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
+                scope="col"
+              >
+                <div
+                  class="TableCellHeader-labelContainer-id"
+                >
+                  <div
+                    class="TableCellHeader-label-id"
+                  />
+                </div>
               </th>
             </tr>
           </thead>
@@ -159952,7 +161806,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="3"
+                colspan="10"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -160056,7 +161910,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="3"
+                colspan="10"
               >
                 No plugins found
               </td>
@@ -201355,9 +203209,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -201460,9 +203325,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -201565,9 +203441,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -201670,9 +203557,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -201775,9 +203673,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -201880,9 +203789,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -201985,9 +203905,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202090,9 +204021,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202195,9 +204137,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202300,9 +204253,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202405,9 +204369,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202510,9 +204485,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202615,9 +204601,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202720,9 +204717,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202825,9 +204833,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202930,9 +204949,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -203035,9 +205065,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -203140,9 +205181,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -203245,9 +205297,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -203350,9 +205413,20 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -203947,9 +206021,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204052,9 +206137,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204157,9 +206253,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204262,9 +206369,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204367,9 +206485,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204472,9 +206601,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204577,9 +206717,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204682,9 +206833,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204787,9 +206949,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204892,9 +207065,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -204997,9 +207181,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205102,9 +207297,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205207,9 +207413,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205312,9 +207529,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205417,9 +207645,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205522,9 +207761,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205627,9 +207877,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205732,9 +207993,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205837,9 +208109,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -205942,9 +208225,20 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -209779,9 +212073,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -209884,9 +212189,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -209989,9 +212305,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210094,9 +212421,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210199,9 +212537,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210304,9 +212653,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210409,9 +212769,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210514,9 +212885,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210619,9 +213001,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210724,9 +213117,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210829,9 +213233,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -210934,9 +213349,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -211039,9 +213465,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -211144,9 +213581,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -211249,9 +213697,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -211354,9 +213813,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -211459,9 +213929,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -211564,9 +214045,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -211669,9 +214161,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -211774,9 +214277,20 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -212325,9 +214839,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -212430,9 +214955,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -212535,9 +215071,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -212640,9 +215187,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -212745,9 +215303,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -212850,9 +215419,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -212955,9 +215535,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213060,9 +215651,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213165,9 +215767,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213270,9 +215883,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213375,9 +215999,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213480,9 +216115,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213585,9 +216231,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213690,9 +216347,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213795,9 +216463,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -213900,9 +216579,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -214005,9 +216695,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -214110,9 +216811,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -214215,9 +216927,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -214320,9 +217043,20 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                       role="button"
                     >
                       <div
-                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                        class="StatusLabel-container-id"
                       >
-                        Available in 2/6
+                        <div
+                          class="undefined StatusLabel-successDot-id"
+                        />
+                        <div
+                          class="StatusLabel-textContainer-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body1-id"
+                          >
+                            Available in 2/6
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
diff --git a/src/storybook/stories/components/Filter.tsx b/src/storybook/stories/components/Filter.tsx
index 4d2b79c5f..141ebf22f 100644
--- a/src/storybook/stories/components/Filter.tsx
+++ b/src/storybook/stories/components/Filter.tsx
@@ -10,21 +10,42 @@ import React from "react";
 
 import Decorator from "../../Decorator";
 
-const props: FilterContentProps = {
-  filters: [
-    createPriceField("price", "Price", {
-      max: "100.00",
-      min: "20.00"
+const filtersData = [
+  createPriceField("price", "Price", {
+    max: "100.00",
+    min: "20.00"
+  }),
+  {
+    ...createDateField("createdAt", "Created At", {
+      max: "2019-10-23",
+      min: "2019-09-09"
     }),
-    {
-      ...createDateField("createdAt", "Created At", {
-        max: "2019-10-23",
-        min: "2019-09-09"
-      }),
-      active: true
-    },
-    {
-      ...createOptionsField("status", "Status", ["val1"], false, [
+    active: true
+  },
+  {
+    ...createOptionsField("status", "Status", ["val1"], false, [
+      {
+        label: "Value 1",
+        value: "val1"
+      },
+      {
+        label: "Value 2",
+        value: "val2"
+      },
+      {
+        label: "Value 3",
+        value: "val3"
+      }
+    ]),
+    active: true
+  },
+  {
+    ...createOptionsField(
+      "multiplOptions",
+      "Multiple Options",
+      ["val1", "val2"],
+      true,
+      [
         {
           label: "Value 1",
           value: "val1"
@@ -37,33 +58,15 @@ const props: FilterContentProps = {
           label: "Value 3",
           value: "val3"
         }
-      ]),
-      active: true
-    },
-    {
-      ...createOptionsField(
-        "multiplOptions",
-        "Multiple Options",
-        ["val1", "val2"],
-        true,
-        [
-          {
-            label: "Value 1",
-            value: "val1"
-          },
-          {
-            label: "Value 2",
-            value: "val2"
-          },
-          {
-            label: "Value 3",
-            value: "val3"
-          }
-        ]
-      ),
-      active: false
-    }
-  ],
+      ]
+    ),
+    active: false
+  }
+];
+
+const props: FilterContentProps = {
+  filters: filtersData,
+  dataStructure: filtersData,
   onClear: () => undefined,
   onFilterPropertyChange: () => undefined,
   onSubmit: () => undefined
diff --git a/src/storybook/stories/plugins/PluginDetailsPage.tsx b/src/storybook/stories/plugins/PluginDetailsPage.tsx
index 0e0c787f3..0ff3f358d 100644
--- a/src/storybook/stories/plugins/PluginDetailsPage.tsx
+++ b/src/storybook/stories/plugins/PluginDetailsPage.tsx
@@ -17,7 +17,8 @@ const props: PluginsDetailsPageProps = {
   onEdit: () => undefined,
   onSubmit: () => undefined,
   plugin,
-  saveButtonBarState: "default"
+  saveButtonBarState: "default",
+  setSelectedChannelId: () => undefined
 };
 
 storiesOf("Views / Plugins / Plugin details", module)
@@ -49,8 +50,7 @@ storiesOf("Views / Plugins / Plugin details", module)
     <PluginsDetailsPage
       {...props}
       plugin={{
-        ...plugin,
-        configuration: null
+        ...plugin
       }}
     />
   ));
diff --git a/src/storybook/stories/plugins/PluginsListPage.tsx b/src/storybook/stories/plugins/PluginsListPage.tsx
index b5c171f9e..453a0bb5b 100644
--- a/src/storybook/stories/plugins/PluginsListPage.tsx
+++ b/src/storybook/stories/plugins/PluginsListPage.tsx
@@ -1,4 +1,5 @@
 import { PluginListUrlSortField } from "@saleor/plugins/urls";
+import { PluginConfigurationType } from "@saleor/types/globalTypes";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -21,6 +22,25 @@ const props: PluginsListPageProps = {
     isActive: {
       active: false,
       value: true
+    },
+    channels: {
+      active: false,
+      choices: [],
+      displayValues: [],
+      initialSearch: "",
+      hasMore: false,
+      loading: false,
+      onFetchMore: () => undefined,
+      onSearchChange: () => undefined,
+      value: []
+    },
+    status: {
+      active: false,
+      value: false
+    },
+    type: {
+      active: false,
+      value: PluginConfigurationType.GLOBAL
     }
   },
   onBack: () => undefined,
diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts
index ddef892e6..ed6f86f9e 100644
--- a/src/types/globalTypes.ts
+++ b/src/types/globalTypes.ts
@@ -793,6 +793,11 @@ export enum PermissionGroupSortField {
   NAME = "NAME",
 }
 
+export enum PluginConfigurationType {
+  GLOBAL = "GLOBAL",
+  PER_CHANNEL = "PER_CHANNEL",
+}
+
 export enum PluginErrorCode {
   GRAPHQL_ERROR = "GRAPHQL_ERROR",
   INVALID = "INVALID",
@@ -1602,8 +1607,9 @@ export interface PermissionGroupUpdateInput {
 }
 
 export interface PluginFilterInput {
-  active?: boolean | null;
+  statusInChannels?: PluginStatusInChannelsInput | null;
   search?: string | null;
+  type?: PluginConfigurationType | null;
 }
 
 export interface PluginSortingInput {
@@ -1611,6 +1617,11 @@ export interface PluginSortingInput {
   field: PluginSortField;
 }
 
+export interface PluginStatusInChannelsInput {
+  active: boolean;
+  channels: string[];
+}
+
 export interface PluginUpdateInput {
   active?: boolean | null;
   configuration?: (ConfigurationItemInput | null)[] | null;
diff --git a/src/utils/filters/fields.ts b/src/utils/filters/fields.ts
index 993c1165b..35959ff44 100644
--- a/src/utils/filters/fields.ts
+++ b/src/utils/filters/fields.ts
@@ -105,7 +105,7 @@ export function createTextField<T extends string>(
 export function createBooleanField<T extends string>(
   name: T,
   label: string,
-  defaultValue: boolean,
+  defaultValue: boolean | undefined,
   labels: Record<"positive" | "negative", string>
 ): IFilterElement<T> {
   return {
@@ -124,6 +124,6 @@ export function createBooleanField<T extends string>(
       }
     ],
     type: FieldType.boolean,
-    value: [defaultValue.toString()]
+    value: [defaultValue?.toString()]
   };
 }