Repository: saleor/saleor

Issue:
Implement discount section in dashboard



Discussion:
In the static dashboard, by "discounts" we understand two sections:
- sales (these are the actual discounts)
- vouchers

Maybe we should split this issue into two separate ones as these will be two sections.

Resolving patch:
diff --git a/saleor/graphql/discount/mutations.py b/saleor/graphql/discount/mutations.py
--- a/saleor/graphql/discount/mutations.py
+++ b/saleor/graphql/discount/mutations.py
@@ -1,7 +1,7 @@
 import graphene
 from graphql_jwt.decorators import permission_required
 
-from ...discount import VoucherType, models
+from ...discount import models
 from ...discount.utils import generate_voucher_code
 from ..core.mutations import BaseMutation, ModelDeleteMutation, ModelMutation
 from ..core.scalars import Decimal
@@ -10,30 +10,18 @@
 from .types import Sale, Voucher
 
 
-def validate_voucher(voucher_data):
-    voucher_type = voucher_data.get('type')
-    errors = []
-    if voucher_type == VoucherType.PRODUCT:
-        if not voucher_data.get('products'):
-            errors.append(('products', 'This field is required.'))
-    elif voucher_type == VoucherType.COLLECTION:
-        if not voucher_data.get('collections'):
-            errors.append(('collections', 'This field is required.'))
-    elif voucher_type == VoucherType.CATEGORY:
-        if not voucher_data.get('categories'):
-            errors.append(('categories', 'This field is required.'))
-    return errors
-
-
 class CatalogueInput(graphene.InputObjectType):
     products = graphene.List(
-        graphene.ID, description='Products related to the discount.',
+        graphene.ID,
+        description='Products related to the discount.',
         name='products')
     categories = graphene.List(
-        graphene.ID, description='Categories related to the discount.',
+        graphene.ID,
+        description='Categories related to the discount.',
         name='categories')
     collections = graphene.List(
-        graphene.ID, description='Collections related to the discount.',
+        graphene.ID,
+        description='Collections related to the discount.',
         name='collections')
 
 
@@ -91,13 +79,16 @@ class VoucherInput(graphene.InputObjectType):
         description='Choices: fixed or percentage.')
     discount_value = Decimal(description='Value of the voucher.')
     products = graphene.List(
-        graphene.ID, description='Products discounted by the voucher.',
+        graphene.ID,
+        description='Products discounted by the voucher.',
         name='products')
     collections = graphene.List(
-        graphene.ID, description='Collections discounted by the voucher.',
+        graphene.ID,
+        description='Collections discounted by the voucher.',
         name='collections')
     categories = graphene.List(
-        graphene.ID, description='Categories discounted by the voucher.',
+        graphene.ID,
+        description='Categories discounted by the voucher.',
         name='categories')
     min_amount_spent = Decimal(
         description='Min purchase amount required to apply the voucher.')
@@ -109,8 +100,7 @@ class VoucherInput(graphene.InputObjectType):
 class VoucherCreate(ModelMutation):
     class Arguments:
         input = VoucherInput(
-            required=True,
-            description='Fields required to create a voucher.')
+            required=True, description='Fields required to create a voucher.')
 
     class Meta:
         description = 'Creates a new voucher.'
@@ -126,9 +116,6 @@ def clean_input(cls, info, instance, input, errors):
         if code == '':
             input['code'] = generate_voucher_code()
         cleaned_input = super().clean_input(info, instance, input, errors)
-        voucher_errors = validate_voucher(cleaned_input)
-        for err in voucher_errors:
-            cls.add_error(errors=errors, field=err[0], message=err[1])
         return cleaned_input
 
 
@@ -137,8 +124,7 @@ class Arguments:
         id = graphene.ID(
             required=True, description='ID of a voucher to update.')
         input = VoucherInput(
-            required=True,
-            description='Fields required to update a voucher.')
+            required=True, description='Fields required to update a voucher.')
 
     class Meta:
         description = 'Updates a voucher.'
@@ -161,13 +147,14 @@ def user_is_allowed(cls, user, input):
 
 class VoucherBaseCatalogueMutation(BaseDiscountCatalogueMutation):
     voucher = graphene.Field(
-        Voucher, description=(
-            'Voucher of which catalogue IDs will be modified.'))
+        Voucher,
+        description=('Voucher of which catalogue IDs will be modified.'))
 
     class Arguments:
         id = graphene.ID(required=True, description='ID of a voucher.')
         input = CatalogueInput(
-            required=True, description=(
+            required=True,
+            description=(
                 'Fields required to modify catalogue IDs of voucher.'))
 
     class Meta:
@@ -175,7 +162,6 @@ class Meta:
 
 
 class VoucherAddCatalogues(VoucherBaseCatalogueMutation):
-
     class Meta:
         description = 'Adds products, categories, collections to a voucher.'
 
@@ -191,7 +177,6 @@ def mutate(cls, root, info, id, input):
 
 
 class VoucherRemoveCatalogues(VoucherBaseCatalogueMutation):
-
     class Meta:
         description = (
             'Removes products, categories, collections from a voucher.')
@@ -212,13 +197,16 @@ class SaleInput(graphene.InputObjectType):
     type = DiscountValueTypeEnum(description='Fixed or percentage.')
     value = Decimal(description='Value of the voucher.')
     products = graphene.List(
-        graphene.ID, description='Products related to the discount.',
+        graphene.ID,
+        description='Products related to the discount.',
         name='products')
     categories = graphene.List(
-        graphene.ID, description='Categories related to the discount.',
+        graphene.ID,
+        description='Categories related to the discount.',
         name='categories')
     collections = graphene.List(
-        graphene.ID, description='Collections related to the discount.',
+        graphene.ID,
+        description='Collections related to the discount.',
         name='collections')
     start_date = graphene.Date(
         description='Start date of the sale in ISO 8601 format.')
@@ -229,8 +217,7 @@ class SaleInput(graphene.InputObjectType):
 class SaleCreate(ModelMutation):
     class Arguments:
         input = SaleInput(
-            required=True,
-            description='Fields required to create a sale.')
+            required=True, description='Fields required to create a sale.')
 
     class Meta:
         description = 'Creates a new sale.'
@@ -243,11 +230,9 @@ def user_is_allowed(cls, user, input):
 
 class SaleUpdate(ModelMutation):
     class Arguments:
-        id = graphene.ID(
-            required=True, description='ID of a sale to update.')
+        id = graphene.ID(required=True, description='ID of a sale to update.')
         input = SaleInput(
-            required=True,
-            description='Fields required to update a sale.')
+            required=True, description='Fields required to update a sale.')
 
     class Meta:
         description = 'Updates a sale.'
@@ -260,8 +245,7 @@ def user_is_allowed(cls, user, input):
 
 class SaleDelete(ModelDeleteMutation):
     class Arguments:
-        id = graphene.ID(
-            required=True, description='ID of a sale to delete.')
+        id = graphene.ID(required=True, description='ID of a sale to delete.')
 
     class Meta:
         description = 'Deletes a sale.'
@@ -274,21 +258,19 @@ def user_is_allowed(cls, user, input):
 
 class SaleBaseCatalogueMutation(BaseDiscountCatalogueMutation):
     sale = graphene.Field(
-        Sale, description=(
-            'Sale of which catalogue IDs will be modified.'))
+        Sale, description=('Sale of which catalogue IDs will be modified.'))
 
     class Arguments:
         id = graphene.ID(required=True, description='ID of a sale.')
         input = CatalogueInput(
-            required=True, description=(
-                'Fields required to modify catalogue IDs of sale.'))
+            required=True,
+            description=('Fields required to modify catalogue IDs of sale.'))
 
     class Meta:
         abstract = True
 
 
 class SaleAddCatalogues(SaleBaseCatalogueMutation):
-
     class Meta:
         description = 'Adds products, categories, collections to a voucher.'
 
@@ -304,7 +286,6 @@ def mutate(cls, root, info, id, input):
 
 
 class SaleRemoveCatalogues(SaleBaseCatalogueMutation):
-
     class Meta:
         description = 'Removes products, categories, collections from a sale.'
 


Test patch:
diff --git a/saleor/static/dashboard-next/components/Date/Date.test.tsx b/saleor/static/dashboard-next/components/Date/Date.test.tsx
new file mode 100644
--- /dev/null
+++ b/saleor/static/dashboard-next/components/Date/Date.test.tsx
@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as renderer from "react-test-renderer";
+
+import { TimezoneProvider } from "../Timezone";
+import Date from "./Date";
+
+const testDate = "2018-04-07";
+const expectedDate = "Apr 7, 2018";
+
+test("Render plain date with timezone GMT-11", () => {
+  const date = renderer.create(
+    <TimezoneProvider value="Pacific/Midway">
+      <Date date={testDate} plain />
+    </TimezoneProvider>
+  );
+  expect(date.toJSON()).toEqual(expectedDate);
+});
+
+test("Render plain date with timezone GMT+13", () => {
+  const date = renderer.create(
+    <TimezoneProvider value="Pacific/Tongatapu">
+      <Date date={testDate} plain />
+    </TimezoneProvider>
+  );
+  expect(date.toJSON()).toEqual(expectedDate);
+});
+
+test("Render humanized date with timezone GMT-11", () => {
+  const date = renderer.create(
+    <TimezoneProvider value="Pacific/Midway">
+      <Date date={testDate} />
+    </TimezoneProvider>
+  );
+  expect(date.toJSON().props.dateTime).toEqual(testDate);
+});
+
+test("Render humanized date with timezone GMT+13", () => {
+  const date = renderer.create(
+    <TimezoneProvider value="Pacific/Tongatapu">
+      <Date date={testDate} />
+    </TimezoneProvider>
+  );
+  expect(date.toJSON().props.dateTime).toEqual(testDate);
+});
diff --git a/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap b/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
--- a/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
+++ b/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
@@ -900,6 +900,8 @@ exports[`Storyshots Components / ErrorPage default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Discounts / Select countries default 1`] = `<div />`;
+
 exports[`Storyshots Generics / ActionDialog default 1`] = `<div />`;
 
 exports[`Storyshots Generics / AddressEdit default 1`] = `
@@ -1268,7 +1270,7 @@ exports[`Storyshots Generics / Date default 1`] = `
 <div>
   <time
     class=""
-    datetime="1523097884000"
+    datetime="2018-04-07"
     title="Apr 7, 2018"
   >
     4 months ago
@@ -7978,7 +7980,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         class="CardSpacer-spacer-id"
       />
       <div
-        class="CategoryUpdatePage-tabsBorder-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
@@ -8476,7 +8478,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
         class="CardSpacer-spacer-id"
       />
       <div
-        class="CategoryUpdatePage-tabsBorder-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
@@ -9080,7 +9082,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
         class="CardSpacer-spacer-id"
       />
       <div
-        class="CategoryUpdatePage-tabsBorder-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
@@ -9661,7 +9663,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         class="CardSpacer-spacer-id"
       />
       <div
-        class="CategoryUpdatePage-tabsBorder-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
@@ -10248,7 +10250,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         class="CardSpacer-spacer-id"
       />
       <div
-        class="CategoryUpdatePage-tabsBorder-id"
+        class="TabContainer-root-id"
       >
         <span
           class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
@@ -20772,946 +20774,773 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / HomePage default 1`] = `
+exports[`Storyshots Views / Discounts / Sale create default 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="HomeOrdersCard-headerContainer-id"
+      class="Container-md-id"
     >
-      <h1
-        class="MuiTypography-root-id MuiTypography-headline-id HomeOrdersCard-pageHeader-id"
-      >
-        Hello there, admin@example.com
-      </h1>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
+      <div
+        class="ExtendedPageHeader-root-id"
       >
-        Here are some information we gathered about your store
-      </p>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="HomePage-cardContainer-id"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
+          Create Sale
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
+              class="CardTitle-root-id"
             >
-              <div>
-                <h3
-                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
-                >
-                  Sales
-                </h3>
-                <span
-                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
-                >
-                  Today
-                </span>
-                <h1
-                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
-                >
-                  $57.15
-                </h1>
-              </div>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Informations
+              </span>
               <div
-                class="HomeAnalyticsCard-iconBackground-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SaleInfo-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <path
-                    d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"
-                  />
-                  <path
-                    d="M0 0h24v24H0z"
-                    fill="none"
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
                   />
-                </svg>
+                </div>
               </div>
             </div>
           </div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
+              class="CardTitle-root-id"
             >
-              <div>
-                <h3
-                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
-                >
-                  Orders
-                </h3>
-                <span
-                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
-                >
-                  Today
-                </span>
-                <h1
-                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
-                >
-                  1
-                </h1>
-              </div>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
               <div
-                class="HomeAnalyticsCard-iconBackground-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <path
-                    d="M0 0h24v24H0z"
-                    fill="none"
-                  />
-                  <path
-                    d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value=""
                   />
-                </svg>
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
+                  >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <table
-            class="MuiTable-root-id"
-          >
-            <tbody
-              class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id SalePricing-subheading-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <b>
-                      1 Orders
-                    </b>
-                     are ready to fulfill
-                  </p>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+                Time Frame
+              </h3>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    No payments waiting for capture
-                  </p>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                  Start Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="startDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    No products out of stock
-                  </p>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                  End Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="endDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
         <div
-          class="CardSpacer-spacer-id"
+          class="SaveButtonBar-spacer-id"
         />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="CardTitle-root-id"
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="ConfirmButtonComponent-label-id"
             >
-              Top products
+              Save
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Create Sale
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id HomeProductList-tableRow-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductList-avatarSpacing-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id HomeProductList-avatarProps-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-                  >
-                    Gardner-Martin
-                  </p>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                  >
-                    XS
-                  </p>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                  >
-                    1 Orders
-                  </p>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    $37.65
-                  </p>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              Activity
-            </span>
+                General Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <ul
-            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
-          >
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been placed from draft by admin@example.com
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
-                >
-                  <time
-                    class=""
-                    datetime="1536941427137"
-                    title="Sep 14, 2018 12:10 PM"
-                  >
-                    in a month
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been placed
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
-                >
-                  <time
-                    class=""
-                    datetime="1538573326325"
-                    title="Oct 3, 2018 9:28 AM"
-                  >
-                    in 2 months
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SaleInfo-root-id"
             >
               <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been fully paid
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <time
-                    class=""
-                    datetime="1538573341837"
-                    title="Oct 3, 2018 9:29 AM"
-                  >
-                    in 2 months
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Order #15 had been placed from draft by admin@example.com
-                </p>
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                 >
-                  <time
-                    class=""
-                    datetime="1538614911243"
-                    title="Oct 3, 2018 9:01 PM"
-                  >
-                    in 2 months
-                  </time>
+                  Generic form error
                 </p>
               </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been placed from draft by admin@example.com
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
-                >
-                  <time
-                    class=""
-                    datetime="1538681778831"
-                    title="Oct 4, 2018 3:36 PM"
-                  >
-                    in 2 months
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
+                Pricing
+              </span>
               <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been placed from draft by admin@example.com
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
-                >
-                  <time
-                    class=""
-                    datetime="1538681881420"
-                    title="Oct 4, 2018 3:38 PM"
-                  >
-                    in 2 months
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
               <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  Order #15 had been placed from draft by admin@example.com
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
-                  <time
-                    class=""
-                    datetime="1538742657268"
-                    title="Oct 5, 2018 8:30 AM"
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value=""
+                  />
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
                   >
-                    in 2 months
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been placed
-                </p>
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                </div>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                 >
-                  <time
-                    class=""
-                    datetime="1538992242622"
-                    title="Oct 8, 2018 5:50 AM"
-                  >
-                    in 2 months
-                  </time>
+                  Generic form error
                 </p>
               </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id SalePricing-subheading-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been placed from draft by admin@example.com
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
-                >
-                  <time
-                    class=""
-                    datetime="1539359471665"
-                    title="Oct 12, 2018 11:51 AM"
-                  >
-                    in 2 months
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
+                Time Frame
+              </h3>
               <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been placed
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <time
-                    class=""
-                    datetime="1540466758843"
-                    title="Oct 25, 2018 7:25 AM"
-                  >
-                    in 3 months
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                  Start Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Order #15 had been placed
-                </p>
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="startDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                 >
-                  <time
-                    class=""
-                    datetime="1540546497580"
-                    title="Oct 26, 2018 5:34 AM"
-                  >
-                    in 3 months
-                  </time>
+                  Generic form error
                 </p>
               </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
               <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 had been fully paid
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <time
-                    class=""
-                    datetime="1540546682440"
-                    title="Oct 26, 2018 5:38 AM"
-                  >
-                    in 3 months
-                  </time>
-                </p>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                  End Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Order #15 had been fully paid
-                </p>
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="endDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                 >
-                  <time
-                    class=""
-                    datetime="1540546682467"
-                    title="Oct 26, 2018 5:38 AM"
-                  >
-                    in 3 months
-                  </time>
+                  Generic form error
                 </p>
               </div>
-            </li>
-          </ul>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / HomePage loading 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="HomeOrdersCard-headerContainer-id"
-    >
-      <h1
-        class="MuiTypography-root-id MuiTypography-headline-id HomeOrdersCard-pageHeader-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          style="width:10em"
-        >
-          ‌
-        </span>
-      </h1>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
+      <div
+        class="SaveButtonBar-root-id"
       >
-        <span
-          class="Skeleton-skeleton-id"
-          style="width:10em"
-        >
-          ‌
-        </span>
-      </p>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
         <div
-          class="HomePage-cardContainer-id"
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
             <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
             >
-              <div>
-                <h3
-                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
-                >
-                  Sales
-                </h3>
-                <span
-                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
-                >
-                  Today
-                </span>
-                <h1
-                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    style="width:5em"
-                  >
-                    ‌
-                  </span>
-                </h1>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"
-                  />
-                  <path
-                    d="M0 0h24v24H0z"
-                    fill="none"
-                  />
-                </svg>
-              </div>
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
             </div>
-          </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Create Sale
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
+              class="CardTitle-root-id"
             >
-              <div>
-                <h3
-                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
-                >
-                  Orders
-                </h3>
-                <span
-                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
-                >
-                  Today
-                </span>
-                <h1
-                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    style="width:5em"
-                  >
-                    ‌
-                  </span>
-                </h1>
-              </div>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Informations
+              </span>
               <div
-                class="HomeAnalyticsCard-iconBackground-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SaleInfo-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <path
-                    d="M0 0h24v24H0z"
-                    fill="none"
-                  />
-                  <path
-                    d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                    value=""
                   />
-                </svg>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <table
-            class="MuiTable-root-id"
-          >
-            <tbody
-              class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
           <div
-            class="CardTitle-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              Top products
-            </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <tbody
-              class="MuiTableBody-root-id"
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductList-avatarSpacing-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    disabled=""
+                    min="0"
+                    name="value"
+                    type="number"
+                    value=""
+                  />
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id HomeProductList-avatarProps-id"
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -21720,7 +21549,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
                         d="M0 0h24v24H0z"
@@ -21728,1015 +21557,1477 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                       />
                     </svg>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </p>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              Activity
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
+                </div>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <ul
-            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
-          >
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id SalePricing-subheading-id"
+              >
+                Time Frame
+              </h3>
               <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id HomeProductListCard-loadingProducts-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </p>
+                  Start Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    disabled=""
+                    name="startDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
               </div>
-            </li>
-          </ul>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  End Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    disabled=""
+                    name="endDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / HomePage no data 1`] = `
+exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="HomeOrdersCard-headerContainer-id"
+      class="Container-md-id"
     >
-      <h1
-        class="MuiTypography-root-id MuiTypography-headline-id HomeOrdersCard-pageHeader-id"
-      >
-        Hello there, admin@example.com
-      </h1>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
+      <div
+        class="ExtendedPageHeader-root-id"
       >
-        Here are some information we gathered about your store
-      </p>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="HomePage-cardContainer-id"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
+          Happy minute day!
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
+              class="CardTitle-root-id"
             >
-              <div>
-                <h3
-                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
-                >
-                  Sales
-                </h3>
-                <span
-                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
-                >
-                  Today
-                </span>
-                <h1
-                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
-                >
-                  $57.15
-                </h1>
-              </div>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Informations
+              </span>
               <div
-                class="HomeAnalyticsCard-iconBackground-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SaleInfo-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <path
-                    d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"
-                  />
-                  <path
-                    d="M0 0h24v24H0z"
-                    fill="none"
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="Happy minute day!"
                   />
-                </svg>
+                </div>
               </div>
             </div>
           </div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
+              class="CardTitle-root-id"
             >
-              <div>
-                <h3
-                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
-                >
-                  Orders
-                </h3>
-                <span
-                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
-                >
-                  Today
-                </span>
-                <h1
-                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
-                >
-                  1
-                </h1>
-              </div>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
               <div
-                class="HomeAnalyticsCard-iconBackground-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <path
-                    d="M0 0h24v24H0z"
-                    fill="none"
-                  />
-                  <path
-                    d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="30"
                   />
-                </svg>
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
+                  >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      %
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <table
-            class="MuiTable-root-id"
-          >
-            <tbody
-              class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id SalePricing-subheading-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <b>
-                      1 Orders
-                    </b>
-                     are ready to fulfill
-                  </p>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+                Time Frame
+              </h3>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    No payments waiting for capture
-                  </p>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                  Start Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="startDate"
+                    type="date"
+                    value="2019-01-03"
+                  />
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    No products out of stock
-                  </p>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                  End Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                    />
-                    <path
-                      d="M0 0h24v24H0V0z"
-                      fill="none"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="endDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="CardTitle-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="TabContainer-root-id"
           >
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
             >
-              Top products
+              Categories (2)
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <tbody
-              class="MuiTableBody-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-noProducts-id"
-                >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    No products found
-                  </p>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
+              Collections (4)
+            </span>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
             >
-              Activity
+              Products (4)
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
           </div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
+            class="CardSpacer-spacer-id"
           />
-          <ul
-            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <li
-              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id HomeProductListCard-noProducts-id"
+            <div
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Collections assigned to Happy minute day!
+              </span>
               <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
+                class="CardTitle-toolbar-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  No activities found
-                </p>
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign collections
+                  </span>
+                </button>
               </div>
-            </li>
-          </ul>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-wideColumn-id"
+                    scope="col"
+                  >
+                    Collection name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-textRight-id"
+                    scope="col"
+                  >
+                    Products
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                    colspan="3"
+                  >
+                    <div
+                      class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                    >
+                      <div
+                        class="TablePagination-spacer-id"
+                      />
+                      <div
+                        class="TablePaginationActions-root-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountCollections-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Winter Collection
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-textRight-id"
+                  >
+                    110
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Summary
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Name
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Happy minute day!
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                30%
+              </p>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Start Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jan 3, 2019
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                End Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                -
+              </p>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Not found error page default 1`] = `
-<div>
-  <div
-    class="NotFoundPage-root-id"
-  >
-    <div
-      class="NotFoundPage-container-id"
-    >
       <div
-        class="NotFoundPage-innerContainer-id"
+        class="SaveButtonBar-root-id"
       >
-        <div>
-          <h1
-            class="MuiTypography-root-id MuiTypography-display2-id NotFoundPage-header-id"
-          >
-            Ooops!...
-          </h1>
-          <h1
-            class="MuiTypography-root-id MuiTypography-display1-id NotFoundPage-header-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            Something's missing
-          </h1>
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id"
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            Sorry the page not found
-          </p>
-        </div>
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id NotFoundPage-button-id"
-            tabindex="0"
-            type="button"
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
             <span
-              class="MuiButton-label-id"
+              class="ConfirmButtonComponent-label-id"
             >
-              Go back to dashboard
+              Save
             </span>
-          </button>
-        </div>
-      </div>
-      <div>
-        <span
-          class="isvg pending NotFoundPage-notFoundImage-id"
-        />
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
+exports[`Storyshots Views / Discounts / Sale details default 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+      class="Container-md-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
+      <div
+        class="ExtendedPageHeader-root-id"
       >
-        <span
-          class="MuiIconButton-label-id"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
+          <span
+            class="MuiIconButton-label-id"
           >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        #9
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      />
-    </div>
-    <div
-      class="OrderDetailsPage-date-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
-      >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
+          Happy minute day!
+        </h2>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Unfulfilled (3)
-              </div>
-            </span>
+                General Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
+            <div
+              class="MuiCardContent-root-id SaleInfo-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="Happy minute day!"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
+            class="CardSpacer-spacer-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="30"
+                  />
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    class="TextFieldWithChoices-adornment-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      %
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                </div>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
+            >
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id SalePricing-subheading-id"
+              >
+                Time Frame
+              </h3>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                  Start Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="startDate"
+                    type="date"
+                    value="2019-01-03"
+                  />
+                </div>
+              </div>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                Cancelled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  #9-2
-                </p>
+                  End Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="endDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
               </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
+            </div>
           </div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
+            class="CardSpacer-spacer-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="TabContainer-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+              Categories (2)
+            </span>
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
+              Collections (4)
+            </span>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Cancelled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
-                >
-                  #9-1
-                </p>
-              </div>
+              Products (4)
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
           </div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
+            class="CardSpacer-spacer-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+                Categories assigned to Happy minute day!
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  <span
+                    class="MuiButton-label-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unpaid
+                    Assign categories
+                  </span>
+                </button>
               </div>
-            </span>
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
             <table
-              class="OrderPayment-root-id"
+              class="MuiTable-root-id"
             >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    5 items
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
+                    scope="col"
                   >
-                    $214.95
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    does not apply
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
+                    Category name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
+                    scope="col"
                   >
-                    $0.00
-                  </td>
+                    Products
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
                 </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    Registred priority
-                  </td>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
+                >
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                    colspan="3"
                   >
-                    $19.98
+                    <div
+                      class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                    >
+                      <div
+                        class="TablePagination-spacer-id"
+                      />
+                      <div
+                        class="TablePaginationActions-root-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
                   </td>
                 </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
                 <tr
-                  class="OrderPayment-totalRow-id"
+                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountCategories-tableRow-id"
                 >
-                  <td>
-                    Total
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Apparel
                   </td>
-                  <td />
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
                   >
-                    $234.93
+                    18
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
-          <hr
-            class="Hr-root-id"
-          />
+        </div>
+        <div>
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <table
-              class="OrderPayment-root-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Balance
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    -$234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Summary
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Name
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Happy minute day!
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                30%
+              </p>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Start Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jan 3, 2019
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                End Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                -
+              </p>
+            </div>
           </div>
         </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
-          class="OrderHistory-root-id"
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
+          Happy minute day!
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="ExtendedPageHeader-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              Order timeline
-            </h2>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="ExtendedPageHeader-action-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
+            <div
+              class="MuiCardContent-root-id SaleInfo-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="Happy minute day!"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+            </div>
           </div>
           <div
-            class="Timeline-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <form>
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
               <div
-                class="TimelineAddNote-noteRoot-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Discount Value
+                </label>
                 <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="30"
+                  />
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      %
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -22745,7 +23036,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
                         d="M0 0h24v24H0z"
@@ -22753,495 +23044,603 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       />
                     </svg>
                   </div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                    >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
-                      >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
-                        />
-                      </div>
-                    </div>
-                  </div>
                 </div>
-                <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Add note
-                    </span>
-                  </button>
-                </div>
+                  Generic form error
+                </p>
               </div>
-            </form>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
             <div
-              class="Component-root-id"
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
-              <span
-                class="Component-dot-id"
-              />
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id SalePricing-subheading-id"
+              >
+                Time Frame
+              </h3>
               <div
-                class="Component-noExpander-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Start Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="startDate"
+                    type="date"
+                    value="2019-01-03"
+                  />
+                </div>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                 >
-                  Fulfilled 1 items
+                  Generic form error
                 </p>
+              </div>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  End Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="endDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                 >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
-                  >
-                    in a month
-                  </time>
+                  Generic form error
                 </p>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
           <div
-            class="CardTitle-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="TabContainer-root-id"
           >
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
             >
-              Customer
+              Categories (2)
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
             >
-              Anonymous user
-            </p>
+              Collections (4)
+            </span>
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
+            >
+              Products (4)
+            </span>
           </div>
-          <hr
-            class="Hr-root-id"
+          <div
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="CardTitle-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Contact information
-              </p>
+                Categories assigned to Happy minute day!
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign categories
+                  </span>
+                </button>
+              </div>
             </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                melissa.simon@example.com
-              </p>
-            </a>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
+                    scope="col"
+                  >
+                    Category name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
+                    scope="col"
+                  >
+                    Products
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                    colspan="3"
+                  >
+                    <div
+                      class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                    >
+                      <div
+                        class="TablePagination-spacer-id"
+                      />
+                      <div
+                        class="TablePaginationActions-root-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountCategories-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Apparel
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
+                  >
+                    18
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-          <hr
-            class="Hr-root-id"
-          />
+        </div>
+        <div>
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Summary
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Shipping Address
+                Name
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Happy minute day!
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                30%
               </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <hr
+              class="Hr-root-id"
             />
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Billing Address
+                Start Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jan 3, 2019
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                End Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                -
               </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Same as shipping address
-            </p>
           </div>
         </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
-          class="CardSpacer-spacer-id"
+          class="SaveButtonBar-spacer-id"
         />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="CardTitle-root-id"
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="ConfirmButtonComponent-label-id"
             >
-              Notes
+              Save
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet
-            </p>
-          </div>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details default 1`] = `
+exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+      class="Container-md-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        #9
-      </h2>
       <div
-        class="ExtendedPageHeader-action-id"
+        class="ExtendedPageHeader-root-id"
       >
-        <div
-          class="OrderDetailsPage-menu-id"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+          <span
+            class="MuiIconButton-label-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDetailsPage-date-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
-      >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
+        </h2>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Unfulfilled (3)
-              </div>
-            </span>
+                General Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SaleInfo-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Fulfill
+                Pricing
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  #9-2
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    disabled=""
+                    min="0"
+                    name="value"
+                    type="number"
+                    value=""
+                  />
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -23250,1024 +23649,617 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
-                  </span>
-                </button>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id SalePricing-subheading-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+                Time Frame
+              </h3>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                  Start Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    disabled=""
+                    name="startDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  End Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    disabled=""
+                    name="endDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="TabContainer-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
             >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
+              Categories (…)
+            </span>
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
+            >
+              Collections (…)
+            </span>
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
+            >
+              Products (…)
+            </span>
           </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
           <div
-            class="CardTitle-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Categories assigned to 
+              </span>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="CardTitle-toolbar-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
-                >
-                  #9-1
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
                 <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
                   tabindex="0"
                   type="button"
                 >
                   <span
-                    class="MuiIconButton-label-id"
+                    class="MuiButton-label-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
+                    Assign categories
                   </span>
                 </button>
               </div>
             </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
+                    scope="col"
+                  >
+                    Category name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
+                    scope="col"
+                  >
+                    Products
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                 >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                    colspan="3"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    5 items
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $214.95
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    does not apply
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    Registred priority
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $19.98
+                    <div
+                      class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                    >
+                      <div
+                        class="TablePagination-spacer-id"
+                      />
+                      <div
+                        class="TablePaginationActions-root-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
                   </td>
                 </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
                 <tr
-                  class="OrderPayment-totalRow-id"
+                  class="MuiTableRow-root-id DiscountCategories-tableRow-id"
                 >
-                  <td>
-                    Total
-                  </td>
-                  <td />
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
-                  </td>
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    $234.93
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
                   >
-                    $0.00
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Balance
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
                   >
-                    -$234.93
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
-          <hr
-            class="Hr-root-id"
-          />
+        </div>
+        <div>
           <div
-            class="MuiCardActions-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Capture
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Refund
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Void
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Mark as paid
+                Summary
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="ExtendedPageHeader-root-id"
-          >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-            >
-              Order timeline
-            </h2>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="ExtendedPageHeader-action-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
-          </div>
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
-              <div
-                class="TimelineAddNote-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                    >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
-                      >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Add note
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </form>
             <div
-              class="Component-root-id"
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="Component-dot-id"
-              />
-              <div
-                class="Component-noExpander-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                Name
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
                 >
-                  Fulfilled 1 items
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                  ‌
+                </span>
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
                 >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
-                  >
-                    in a month
-                  </time>
-                </p>
-              </div>
+                  ‌
+                </span>
+              </p>
             </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              Customer
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
+            <hr
+              class="Hr-root-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Anonymous user
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Contact information
+                Start Date
               </p>
-            </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
-            >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                melissa.simon@example.com
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
               </p>
-            </a>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
+              <div
+                class="FormSpacer-spacer-id"
+              />
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Shipping Address
+                End Date
               </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <span
+                  class="Skeleton-skeleton-id"
                 >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
-            </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            />
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Billing Address
+                  ‌
+                </span>
               </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Same as shipping address
-            </p>
           </div>
         </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
-          class="CardSpacer-spacer-id"
+          class="SaveButtonBar-spacer-id"
         />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="CardTitle-root-id"
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="ConfirmButtonComponent-label-id"
             >
-              Notes
+              Save
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet
-            </p>
-          </div>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
+exports[`Storyshots Views / Discounts / Sale details products 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+      class="Container-md-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        #9
-      </h2>
       <div
-        class="ExtendedPageHeader-action-id"
+        class="ExtendedPageHeader-root-id"
       >
-        <div
-          class="OrderDetailsPage-menu-id"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+          <span
+            class="MuiIconButton-label-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDetailsPage-date-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
-      >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
+          Happy minute day!
+        </h2>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Unfulfilled (3)
-              </div>
-            </span>
+                General Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SaleInfo-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="Happy minute day!"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Fulfill
+                Pricing
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  #9-2
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="30"
+                  />
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      %
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -24276,1615 +24268,1560 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
-                  </span>
-                </button>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id SalePricing-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id SalePricing-subheading-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+                Time Frame
+              </h3>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  Start Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="startDate"
+                    type="date"
+                    value="2019-01-03"
+                  />
+                </div>
+              </div>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  #9-1
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                  End Date
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </button>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="endDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
               </div>
             </div>
           </div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
+            class="CardSpacer-spacer-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="TabContainer-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+              Categories (2)
+            </span>
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+              Collections (4)
+            </span>
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Tab-root-id Tab-active-id"
+            >
+              Products (4)
+            </span>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Add tracking
+                Products assigned to Happy minute day!
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="CardTitle-toolbar-id"
               >
-                Unpaid
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign products
+                  </span>
+                </button>
               </div>
-            </span>
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
             <table
-              class="OrderPayment-root-id"
+              class="MuiTable-root-id"
             >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    5 items
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-wideColumn-id"
+                    scope="col"
                   >
-                    $214.95
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    does not apply
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
+                    Product name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-textRight-id"
+                    scope="col"
                   >
-                    $0.00
-                  </td>
+                    Product Type
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-textRight-id"
+                    scope="col"
+                  >
+                    Published
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
                 </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    Registred priority
-                  </td>
+              </thead>
+              <tfoot
+                class="MuiTableFooter-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-footer-id"
+                >
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                    colspan="5"
                   >
-                    $19.98
+                    <div
+                      class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                    >
+                      <div
+                        class="TablePagination-spacer-id"
+                      />
+                      <div
+                        class="TablePaginationActions-root-id"
+                      >
+                        <button
+                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          class="MuiButtonBase-root-id MuiIconButton-root-id"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label-id"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root-id"
+                              focusable="false"
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
                   </td>
                 </tr>
+              </tfoot>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
                 <tr
-                  class="OrderPayment-totalRow-id"
+                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountProducts-tableRow-id"
                 >
-                  <td>
-                    Total
-                  </td>
-                  <td />
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   >
-                    $234.93
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder60x60.png"
+                      />
+                    </div>
                   </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Orange Juice
                   </td>
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-textRight-id"
                   >
-                    $234.93
+                    Juice
                   </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-textRight-id"
+                  >
+                    <div
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                    >
+                      Published
+                    </div>
                   </td>
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-iconCell-id"
                   >
-                    $0.00
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
                   </td>
                 </tr>
                 <tr
-                  class="OrderPayment-totalRow-id"
+                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountProducts-tableRow-id"
                 >
-                  <td>
-                    Balance
-                  </td>
                   <td
-                    class="OrderPayment-textRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   >
-                    -$234.93
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder60x60.png"
+                      />
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Carrot Juice
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-textRight-id"
+                  >
+                    Juice
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-textRight-id"
+                  >
+                    <div
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
                   </td>
                 </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Capture
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Refund
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Void
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Mark as paid
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="ExtendedPageHeader-root-id"
-          >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-            >
-              Order timeline
-            </h2>
-            <div
-              class="ExtendedPageHeader-action-id"
-            />
-          </div>
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
-              <div
-                class="TimelineAddNote-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountProducts-tableRow-id"
                 >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                     >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder60x60.png"
                       />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Bean Juice
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-textRight-id"
+                  >
+                    Juice
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-textRight-id"
                   >
                     <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
+                        <svg
                           aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountProducts-tableRow-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
-                    tabindex="0"
-                    type="button"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                   >
-                    <span
-                      class="MuiButton-label-id"
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                     >
-                      Add note
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </form>
-            <div
-              class="Component-root-id"
-            >
-              <span
-                class="Component-dot-id"
-              />
-              <div
-                class="Component-noExpander-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Fulfilled 1 items
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder60x60.png"
+                      />
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    in a month
-                  </time>
-                </p>
-              </div>
-            </div>
+                    Black Hoodie
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-textRight-id"
+                  >
+                    Top (clothing)
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-textRight-id"
+                  >
+                    <div
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                    >
+                      Published
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+        <div>
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              Customer
-            </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Summary
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Anonymous user
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Contact information
+                Name
               </p>
-            </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
-            >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                melissa.simon@example.com
+                Happy minute day!
               </p>
-            </a>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
+              <div
+                class="FormSpacer-spacer-id"
+              />
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Shipping Address
+                Value
               </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
+                30%
+              </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <hr
+              class="Hr-root-id"
             />
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Billing Address
+                Start Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jan 3, 2019
               </p>
               <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
+                End Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                -
+              </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Same as shipping address
-            </p>
           </div>
         </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
-          class="CardSpacer-spacer-id"
+          class="SaveButtonBar-spacer-id"
         />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="CardTitle-root-id"
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="ConfirmButtonComponent-label-id"
             >
-              Notes
+              Save
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet
-            </p>
-          </div>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details loading 1`] = `
+exports[`Storyshots Views / Discounts / Sale list default 1`] = `
 <div>
   <div
     class="Container-md-id"
   >
     <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+      class="ExtendedPageHeader-root-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        <span
-          class="Skeleton-skeleton-id"
-          style="width:10em"
-        >
-          ‌
-        </span>
+        Sales
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
-        <div
-          class="OrderDetailsPage-menu-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
         >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+          <span
+            class="MuiButton-label-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            Add sale
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
       </div>
     </div>
     <div
-      class="OrderDetailsPage-date-id"
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
     >
-      <span
-        class="Skeleton-skeleton-id"
-        style="width:10em"
+      <table
+        class="MuiTable-root-id"
       >
-        ‌
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        <thead
+          class="MuiTableHead-root-id"
         >
-          <div
-            class="CardTitle-root-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-wideColumn-id"
+              scope="col"
             >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+              Starts
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
             >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+              Ends
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
+            >
+              Value
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
         >
-          <div
-            class="CardTitle-root-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="4"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
-                ‌
-              </span>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
                     <span
-                      class="Skeleton-skeleton-id"
+                      class="MuiIconButton-label-id"
                     >
-                      ‌
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
                     </span>
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Total
-                  </td>
-                  <td />
-                  <td
-                    class="OrderPayment-textRight-id"
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
                   >
                     <span
-                      class="Skeleton-skeleton-id"
+                      class="MuiIconButton-label-id"
                     >
-                      ‌
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
                     </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
           >
-            <table
-              class="OrderPayment-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Balance
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="ExtendedPageHeader-root-id"
-          >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+              Happy front day!
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              Order timeline
-            </h2>
-            <div
-              class="ExtendedPageHeader-action-id"
-            />
-          </div>
-          <span
-            class="Skeleton-skeleton-id"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <time
+                class=""
+                datetime="2019-01-03"
+                title="Jan 3, 2019"
+              >
+                in 5 months
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              Customer
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
+              -
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              ‌
-            </span>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+              40%
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
           >
-            <div
-              class="OrderCustomer-sectionHeader-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              Happy minute day!
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              <time
+                class=""
+                datetime="2019-01-03"
+                title="Jan 3, 2019"
               >
-                Contact information
-              </p>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
+                in 5 months
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              ‌
-            </span>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+              -
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              $30.00
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
           >
-            <div
-              class="OrderCustomer-sectionHeader-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Shipping Address
-              </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+              Happy class day!
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              <time
+                class=""
+                datetime="2019-01-03"
+                title="Jan 3, 2019"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
+                in 5 months
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              ‌
-            </span>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+              -
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              10%
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
           >
-            <div
-              class="OrderCustomer-sectionHeader-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Billing Address
-              </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+              Happy human day!
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              <time
+                class=""
+                datetime="2019-01-03"
+                title="Jan 3, 2019"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
+                in 5 months
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              -
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              Notes
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+              20%
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
           >
-            <span
-              class="Skeleton-skeleton-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              ‌
-            </span>
-          </div>
-        </div>
-      </div>
+              Happy year day!
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              <time
+                class=""
+                datetime="2019-01-03"
+                title="Jan 3, 2019"
+              >
+                in 5 months
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              -
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              10%
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
+exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
 <div>
   <div
     class="Container-md-id"
   >
     <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+      class="ExtendedPageHeader-root-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        #9
+        Sales
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
-        <div
-          class="OrderDetailsPage-menu-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
         >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+          <span
+            class="MuiButton-label-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            Add sale
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
       </div>
     </div>
     <div
-      class="OrderDetailsPage-date-id"
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
     >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
+      <table
+        class="MuiTable-root-id"
       >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
+        <thead
+          class="MuiTableHead-root-id"
         >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-wideColumn-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
+            >
+              Starts
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
+            >
+              Ends
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
+            >
+              Value
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
         >
-          <div
-            class="CardTitle-root-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="4"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
-                Unfulfilled (3)
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
               </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-textRight-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Sales
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Add sale
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-wideColumn-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
+            >
+              Starts
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
+            >
+              Ends
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-textRight-id"
+              scope="col"
+            >
+              Value
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="4"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+              >
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+              colspan="4"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+              No sales found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Create Voucher
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                General Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VoucherInfo-nameInput-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherInfo-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Discount Code
+                  </label>
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="code"
+                      type="text"
+                      value=""
                     />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                </div>
+                <div
+                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                 >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Type of Discount
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <div
+                      class="MuiSelect-root-id"
+                    >
+                      <div
+                        aria-haspopup="true"
+                        aria-pressed="false"
+                        class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
+                        role="button"
+                        tabindex="0"
+                      >
+                        All Products
+                      </div>
+                      <input
+                        name="type"
+                        type="hidden"
+                        value="VALUE"
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Fulfill
+                Detailed Informations
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id VoucherOptions-root-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  #9-2
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="0"
+                  />
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -25893,154 +25830,508 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
-                  </span>
-                </button>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  Usage Limit
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    min="0"
+                    name="usageLimit"
+                    type="number"
+                    value="0"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                  Optional
+                </p>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                Discount Specific Information
+              </h3>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherOptions-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Minimum order value
+                  </label>
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="minAmountSpent"
+                      type="text"
+                      value="0"
                     />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                  >
+                    Optional
+                  </p>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiSwitch-root-id"
                 >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                  <span
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <span
+                        class="MuiSwitch-icon-id"
+                      />
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        name="applyOncePerOrder"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                 >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    Only once per order
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      If this option is disabled, discount will be counted for every eligible product
+                    </span>
+                  </div>
+                </span>
+              </label>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
+              >
+                Time Frame
+              </h3>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherOptions-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    End Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="endDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
             >
-              <span
-                class="MuiButton-label-id"
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
               >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Create Voucher
+        </h2>
         <div
-          class="CardSpacer-spacer-id"
+          class="ExtendedPageHeader-action-id"
         />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Informations
+              </span>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VoucherInfo-nameInput-id"
               >
-                Fulfilled (1)
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                 >
-                  #9-1
+                  Generic form error
                 </p>
               </div>
-            </span>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherInfo-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Discount Code
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="code"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+                <div
+                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Type of Discount
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <div
+                      class="MuiSelect-root-id"
+                    >
+                      <div
+                        aria-haspopup="true"
+                        aria-pressed="false"
+                        class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
+                        role="button"
+                        tabindex="0"
+                      >
+                        All Products
+                      </div>
+                      <input
+                        name="type"
+                        type="hidden"
+                        value="VALUE"
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-root-id"
             >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Detailed Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id VoucherOptions-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="0"
+                  />
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -26049,868 +26340,502 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
-                  </span>
-                </button>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
+                  Usage Limit
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    min="0"
+                    name="usageLimit"
+                    type="number"
+                    value="0"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+                  Generic form error
+                </p>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="MuiButton-label-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
               >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
+                Discount Specific Information
+              </h3>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherOptions-root-id"
               >
-                Unpaid
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    5 items
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $214.95
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    does not apply
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    Registred priority
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $19.98
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <td>
-                    Total
-                  </td>
-                  <td />
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    $234.93
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
+                    Minimum order value
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    $0.00
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Balance
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="minAmountSpent"
+                      type="text"
+                      value="0"
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                   >
-                    -$234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Capture
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Refund
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Void
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Mark as paid
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="ExtendedPageHeader-root-id"
-          >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-            >
-              Order timeline
-            </h2>
-            <div
-              class="ExtendedPageHeader-action-id"
-            />
-          </div>
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
+                    Generic form error
+                  </p>
+                </div>
+              </div>
               <div
-                class="TimelineAddNote-noteRoot-id"
+                class="FormSpacer-spacer-id"
+              />
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                <span
+                  class="MuiSwitch-root-id"
                 >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
+                  <span
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      <span
+                        class="MuiSwitch-icon-id"
                       />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        name="applyOncePerOrder"
+                        type="checkbox"
                       />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                    >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
-                      >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                    </span>
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
-                    tabindex="0"
-                    type="button"
+                  <div
+                    class="ControlledSwitch-label-id"
                   >
+                    Only once per order
                     <span
-                      class="MuiButton-label-id"
+                      class="MuiTypography-root-id MuiTypography-caption-id"
                     >
-                      Add note
+                      If this option is disabled, discount will be counted for every eligible product
                     </span>
-                  </button>
-                </div>
-              </div>
-            </form>
+                  </div>
+                </span>
+              </label>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
             <div
-              class="Component-root-id"
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="Component-dot-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
+              >
+                Time Frame
+              </h3>
+              <div
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="Component-noExpander-id"
+                class="VoucherOptions-root-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  Fulfilled 1 items
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
                   >
-                    in a month
-                  </time>
-                </p>
+                    End Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="endDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
               </div>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
         </div>
       </div>
-      <div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="CardTitle-root-id"
+          <span
+            class="MuiButton-label-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              Customer
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
             >
-              Anonymous user
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Contact information
-              </p>
-            </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-              >
-                melissa.simon@example.com
-              </p>
-            </a>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Shipping Address
-              </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
-            </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            />
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Billing Address
-              </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              Same as shipping address
-            </p>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="ConfirmButtonComponent-label-id"
             >
-              Notes
+              Save
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              No notes from customer
-            </p>
-          </div>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details no payment 1`] = `
+exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+      class="Container-md-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        #9
-      </h2>
       <div
-        class="ExtendedPageHeader-action-id"
+        class="ExtendedPageHeader-root-id"
       >
-        <div
-          class="OrderDetailsPage-menu-id"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+          <span
+            class="MuiIconButton-label-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDetailsPage-date-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
-      >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
+          Big order discount
+        </h2>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Unfulfilled (3)
-              </div>
-            </span>
+                General Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VoucherInfo-nameInput-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="Big order discount"
+                  />
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherInfo-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Discount Code
+                  </label>
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="code"
+                      type="text"
+                      value="DISCOUNT"
                     />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                </div>
+                <div
+                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                 >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Type of Discount
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <div
+                      class="MuiSelect-root-id"
+                    >
+                      <div
+                        aria-haspopup="true"
+                        aria-pressed="false"
+                        class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                        role="button"
+                      >
+                        All Products
+                      </div>
+                      <input
+                        name="type"
+                        type="hidden"
+                        value="VALUE"
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Fulfill
+                Detailed Informations
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id VoucherOptions-root-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  #9-2
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="25"
+                  />
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -26919,489 +26844,641 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
-                  </span>
-                </button>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  Usage Limit
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    min="0"
+                    name="usageLimit"
+                    type="number"
+                    value="0"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                  Optional
+                </p>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                Discount Specific Information
+              </h3>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherOptions-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Minimum order value
+                  </label>
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="minAmountSpent"
+                      type="text"
+                      value="200"
                     />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                  >
+                    Optional
+                  </p>
+                </div>
+              </div>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="FormSpacer-spacer-id"
+              />
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
-                >
-                  #9-1
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <span
+                  class="MuiSwitch-root-id"
                 >
                   <span
-                    class="MuiIconButton-label-id"
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                      <span
+                        class="MuiSwitch-icon-id"
                       />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        name="applyOncePerOrder"
+                        type="checkbox"
                       />
-                    </svg>
+                    </span>
                   </span>
-                </button>
-              </div>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    Only once per order
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      If this option is disabled, discount will be counted for every eligible product
+                    </span>
+                  </div>
+                </span>
+              </label>
             </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+                Time Frame
+              </h3>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherOptions-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Start Date
+                  </label>
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value="2018-11-27"
                     />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    End Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="endDate"
+                      type="date"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Add tracking
+                Summary
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Name
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Big order discount
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Unpaid
-              </div>
-            </span>
+                Applies to
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                All Products
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                $25.00
+              </p>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
             <div
-              class="CardTitle-toolbar-id"
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Start Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Nov 27, 2018
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                End Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                -
+              </p>
+            </div>
+            <hr
+              class="Hr-root-id"
             />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Min. Order Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                $200.00
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Usage Limit
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                -
+              </p>
+            </div>
           </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    5 items
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $214.95
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    does not apply
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    Registred priority
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $19.98
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Total
-                  </td>
-                  <td />
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Balance
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    -$234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardActions-root-id"
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
             >
-              <span
-                class="MuiButton-label-id"
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
               >
-                Capture
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <span
-                class="MuiButton-label-id"
-              >
-                Refund
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Big order discount
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Void
+                General Informations
               </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="MuiButton-label-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VoucherInfo-nameInput-id"
               >
-                Mark as paid
-              </span>
-            </button>
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="Big order discount"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherInfo-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Discount Code
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="code"
+                      type="text"
+                      value="DISCOUNT"
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+                <div
+                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Type of Discount
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <div
+                      class="MuiSelect-root-id"
+                    >
+                      <div
+                        aria-haspopup="true"
+                        aria-pressed="false"
+                        class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                        role="button"
+                      >
+                        All Products
+                      </div>
+                      <input
+                        name="type"
+                        type="hidden"
+                        value="VALUE"
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
           <div
-            class="ExtendedPageHeader-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              Order timeline
-            </h2>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Detailed Informations
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="ExtendedPageHeader-action-id"
+              class="CardTitle-children-id"
             />
-          </div>
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id VoucherOptions-root-id"
+            >
               <div
-                class="TimelineAddNote-noteRoot-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Discount Value
+                </label>
                 <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="25"
+                  />
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -27410,7 +27487,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
                         d="M0 0h24v24H0z"
@@ -27418,525 +27495,641 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       />
                     </svg>
                   </div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                    >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
-                      >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
-                        />
-                      </div>
-                    </div>
-                  </div>
                 </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Usage Limit
+                </label>
                 <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Add note
-                    </span>
-                  </button>
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    min="0"
+                    name="usageLimit"
+                    type="number"
+                    value="0"
+                  />
                 </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                >
+                  Generic form error
+                </p>
               </div>
-            </form>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
             <div
-              class="Component-root-id"
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="Component-dot-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
+              >
+                Discount Specific Information
+              </h3>
+              <div
+                class="FormSpacer-spacer-id"
               />
               <div
-                class="Component-noExpander-id"
+                class="VoucherOptions-root-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Fulfilled 1 items
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    in a month
-                  </time>
-                </p>
+                    Minimum order value
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="minAmountSpent"
+                      type="text"
+                      value="200"
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
               </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiSwitch-root-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <span
+                        class="MuiSwitch-icon-id"
+                      />
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        name="applyOncePerOrder"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    Only once per order
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      If this option is disabled, discount will be counted for every eligible product
+                    </span>
+                  </div>
+                </span>
+              </label>
             </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              Customer
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
+            <hr
+              class="Hr-root-id"
             />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
+              >
+                Time Frame
+              </h3>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherOptions-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Start Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="startDate"
+                      type="date"
+                      value="2018-11-27"
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    End Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="true"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="endDate"
+                      type="date"
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                  >
+                    Generic form error
+                  </p>
+                </div>
+              </div>
+            </div>
           </div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
+            class="CardSpacer-spacer-id"
           />
+        </div>
+        <div>
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <div
+              class="CardTitle-root-id"
             >
-              Anonymous user
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Summary
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Contact information
+                Name
               </p>
-            </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
-            >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                melissa.simon@example.com
+                Big order discount
               </p>
-            </a>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Applies to
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                All Products
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                $25.00
+              </p>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Shipping Address
+                Start Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Nov 27, 2018
               </p>
               <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
+                End Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                -
+              </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <hr
+              class="Hr-root-id"
             />
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Billing Address
+                Min. Order Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                $200.00
               </p>
               <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
+                Usage Limit
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                -
+              </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Same as shipping address
-            </p>
           </div>
         </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
-          class="CardSpacer-spacer-id"
+          class="SaveButtonBar-spacer-id"
         />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="CardTitle-root-id"
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="ConfirmButtonComponent-label-id"
             >
-              Notes
+              Save
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet
-            </p>
-          </div>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
+exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+      class="Container-md-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
+      <div
+        class="ExtendedPageHeader-root-id"
       >
-        <span
-          class="MuiIconButton-label-id"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
+          <span
+            class="MuiIconButton-label-id"
           >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        #9
-      </h2>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
       <div
-        class="ExtendedPageHeader-action-id"
+        class="Grid-root-id Grid-default-id"
       >
-        <div
-          class="OrderDetailsPage-menu-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDetailsPage-date-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
-      >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
-        >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
+                General Informations
+              </span>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unfulfilled (3)
-              </div>
-            </span>
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VoucherInfo-nameInput-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
+                  Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherInfo-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Discount Code
+                  </label>
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      disabled=""
+                      name="code"
+                      type="text"
+                      value=""
                     />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                </div>
+                <div
+                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                 >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Type of Discount
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <div
+                      class="MuiSelect-root-id"
+                    >
+                      <div
+                        aria-haspopup="true"
+                        aria-pressed="false"
+                        class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                        role="button"
+                      >
+                        All Products
+                      </div>
+                      <input
+                        name="type"
+                        type="hidden"
+                        value="VALUE"
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="MuiCardActions-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Fulfill
+                Detailed Informations
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id VoucherOptions-root-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  #9-2
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                  Discount Value
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                    disabled=""
+                    min="0"
+                    name="value"
+                    type="number"
+                    value="0"
+                  />
+                  <div
+                    class="TextFieldWithChoices-adornment-id"
                   >
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      USD
+                    </span>
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -27945,1761 +28138,1331 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                        d="M7 10l5 5 5-5z"
                       />
                       <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
-                  </span>
-                </button>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  Usage Limit
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    disabled=""
+                    min="0"
+                    name="usageLimit"
+                    type="number"
+                    value="0"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id MuiFormHelperText-filled-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                  Optional
+                </p>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                Discount Specific Information
+              </h3>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherOptions-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Minimum order value
+                  </label>
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      disabled=""
+                      name="minAmountSpent"
+                      type="text"
+                      value="0"
                     />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id MuiFormHelperText-filled-id"
+                  >
+                    Optional
+                  </p>
+                </div>
+              </div>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="FormSpacer-spacer-id"
+              />
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
-                >
-                  #9-1
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <span
+                  class="MuiSwitch-root-id"
                 >
                   <span
-                    class="MuiIconButton-label-id"
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
+                    tabindex="-1"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                      <span
+                        class="MuiSwitch-icon-id"
                       />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        disabled=""
+                        name="applyOncePerOrder"
+                        type="checkbox"
                       />
-                    </svg>
+                    </span>
                   </span>
-                </button>
-              </div>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    Only once per order
+                    <span
+                      class="MuiTypography-root-id MuiTypography-caption-id"
+                    >
+                      If this option is disabled, discount will be counted for every eligible product
+                    </span>
+                  </div>
+                </span>
+              </label>
             </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
+            <hr
+              class="Hr-root-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    5 items
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $214.95
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    does not apply
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    Registred priority
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $19.98
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Total
-                  </td>
-                  <td />
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Balance
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    -$234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Capture
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Refund
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Void
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <div
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="MuiButton-label-id"
+              <h3
+                class="MuiTypography-root-id MuiTypography-subheading-id"
               >
-                Mark as paid
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="ExtendedPageHeader-root-id"
-          >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-            >
-              Order timeline
-            </h2>
-            <div
-              class="ExtendedPageHeader-action-id"
-            />
-          </div>
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
+                Time Frame
+              </h3>
               <div
-                class="TimelineAddNote-noteRoot-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="VoucherOptions-root-id"
               >
                 <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
+                    Start Date
+                  </label>
                   <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                    >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
-                      >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
-                        />
-                      </div>
-                    </div>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      disabled=""
+                      name="startDate"
+                      type="date"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
-                    tabindex="0"
-                    type="button"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
                   >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Add note
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </form>
-            <div
-              class="Component-root-id"
-            >
-              <span
-                class="Component-dot-id"
-              />
-              <div
-                class="Component-noExpander-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Fulfilled 1 items
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
+                    End Date
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    in a month
-                  </time>
-                </p>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      disabled=""
+                      name="endDate"
+                      type="date"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
         </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+        <div>
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              Customer
-            </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Summary
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Anonymous user
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Contact information
+                Name
               </p>
-            </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
-            >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                melissa.simon@example.com
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
               </p>
-            </a>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
+              <div
+                class="FormSpacer-spacer-id"
+              />
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Shipping Address
+                Applies to
               </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <span
+                  class="Skeleton-skeleton-id"
                 >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
+                  ‌
+                </span>
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
+            <hr
+              class="Hr-root-id"
+            />
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id"
             >
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Billing Address
+                Start Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
               </p>
               <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                End Date
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
                 >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
+                  ‌
+                </span>
+              </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <hr
+              class="Hr-root-id"
             />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Min. Order Value
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Usage Limit
+              </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </p>
+            </div>
           </div>
         </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
-          class="CardSpacer-spacer-id"
+          class="SaveButtonBar-spacer-id"
         />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="CardTitle-root-id"
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              class="ConfirmButtonComponent-label-id"
             >
-              Notes
+              Save
             </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet
-            </p>
-          </div>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
+exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
 <div>
   <div
     class="Container-md-id"
   >
     <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+      class="ExtendedPageHeader-root-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        #9
+        Vouchers
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
-        <div
-          class="OrderDetailsPage-menu-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
         >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+          <span
+            class="MuiButton-label-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            Add voucher
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
       </div>
     </div>
     <div
-      class="OrderDetailsPage-date-id"
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
     >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
+      <table
+        class="MuiTable-root-id"
       >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
-        >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        <thead
+          class="MuiTableHead-root-id"
         >
-          <div
-            class="CardTitle-root-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-wideColumn-id"
+              scope="col"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unfulfilled (3)
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+              Min. Spent
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+              Starts
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
             >
-              <span
-                class="MuiButton-label-id"
-              >
-                Fulfill
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+              Ends
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Value
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Uses
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
         >
-          <div
-            class="CardTitle-root-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="6"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  #9-2
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </button>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id VoucherList-tableRow-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+              Free shipping
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              -
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              <time
+                class=""
+                datetime="2019-01-03"
+                title="Jan 3, 2019"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
+                in 5 months
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              -
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              100%
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              -
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id VoucherList-tableRow-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
-              <span
-                class="MuiButton-label-id"
+              Big order discount
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              $200.00
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              <time
+                class=""
+                datetime="2019-01-03"
+                title="Jan 3, 2019"
               >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+                in 5 months
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              -
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              $25.00
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            >
+              150
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Vouchers
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="CardTitle-root-id"
+          <span
+            class="MuiButton-label-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            Add voucher
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-wideColumn-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Min. Spent
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Starts
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Ends
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Value
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Uses
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="6"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
-                >
-                  #9-1
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </button>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
+                ‌
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    5 items
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $214.95
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    does not apply
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    Registred priority
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $19.98
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Total
-                  </td>
-                  <td />
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Balance
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    -$234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="Skeleton-skeleton-id"
               >
-                Capture
+                ‌
               </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="Skeleton-skeleton-id"
               >
-                Refund
+                ‌
               </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="Skeleton-skeleton-id"
               >
-                Void
+                ‌
               </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="Skeleton-skeleton-id"
               >
-                Mark as paid
+                ‌
               </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Vouchers
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="ExtendedPageHeader-root-id"
+          <span
+            class="MuiButton-label-id"
           >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+            Add voucher
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              Order timeline
-            </h2>
-            <div
-              class="ExtendedPageHeader-action-id"
-            />
-          </div>
-          <div
-            class="Timeline-root-id"
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <form>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-wideColumn-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Min. Spent
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Starts
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Ends
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Value
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              scope="col"
+            >
+              Uses
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="6"
+            >
               <div
-                class="TimelineAddNote-noteRoot-id"
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
                 <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
                         />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
-                >
+                      </svg>
+                    </span>
+                  </button>
                   <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiButton-label-id"
+                      class="MuiIconButton-label-id"
                     >
-                      Add note
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
                     </span>
                   </button>
                 </div>
               </div>
-            </form>
-            <div
-              class="Component-root-id"
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+              colspan="6"
             >
-              <span
-                class="Component-dot-id"
-              />
-              <div
-                class="Component-noExpander-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Fulfilled 1 items
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
-                  >
-                    in a month
-                  </time>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+              No vouchers found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / HomePage default 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="HomeOrdersCard-headerContainer-id"
+    >
+      <h1
+        class="MuiTypography-root-id MuiTypography-headline-id HomeOrdersCard-pageHeader-id"
+      >
+        Hello there, admin@example.com
+      </h1>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Here are some information we gathered about your store
+      </p>
+    </div>
+    <div
+      class="CardSpacer-spacer-id"
+    />
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
       <div>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          class="HomePage-cardContainer-id"
         >
           <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              Customer
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Anonymous user
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
           >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              <div>
+                <h3
+                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
+                >
+                  Sales
+                </h3>
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
+                >
+                  Today
+                </span>
+                <h1
+                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
+                >
+                  $57.15
+                </h1>
+              </div>
+              <div
+                class="HomeAnalyticsCard-iconBackground-id"
               >
-                Contact information
-              </p>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"
+                  />
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                </svg>
+              </div>
             </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-              >
-                melissa.simon@example.com
-              </p>
-            </a>
           </div>
-          <hr
-            class="Hr-root-id"
-          />
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
           >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Shipping Address
-              </p>
+              <div>
+                <h3
+                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
+                >
+                  Orders
+                </h3>
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
+                >
+                  Today
+                </span>
+                <h1
+                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
+                >
+                  1
+                </h1>
+              </div>
               <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
                 >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                  <path
+                    d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
+                  />
+                </svg>
               </div>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            />
           </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+        </div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <table
+            class="MuiTable-root-id"
           >
-            <div
-              class="OrderCustomer-sectionHeader-id"
+            <tbody
+              class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
               >
-                Billing Address
-              </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    <b>
+                      1 Orders
+                    </b>
+                     are ready to fulfill
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                    />
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  <span
-                    class="MuiButton-label-id"
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
                   >
-                    Edit
-                  </span>
-                </button>
-              </div>
-            </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Same as shipping address
-            </p>
-          </div>
+                    No payments waiting for capture
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                    />
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    No products out of stock
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                    />
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
         <div
           class="CardSpacer-spacer-id"
@@ -29713,7 +29476,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Notes
+              Top products
             </span>
             <div
               class="CardTitle-toolbar-id"
@@ -29725,114 +29488,63 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           <hr
             class="CardTitle-hr-id"
           />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Lorem ipsum dolor sit amet
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        #9
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="OrderDetailsPage-menu-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+          <table
+            class="MuiTable-root-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id HomeProductList-tableRow-id"
               >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductList-avatarSpacing-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id HomeProductList-avatarProps-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                  >
+                    Gardner-Martin
+                  </p>
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                  >
+                    XS
+                  </p>
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                  >
+                    1 Orders
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                  >
+                    $37.65
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
       </div>
-    </div>
-    <div
-      class="OrderDetailsPage-date-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
-      >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
-        >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
       <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
@@ -29843,11 +29555,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unfulfilled (3)
-              </div>
+              Activity
             </span>
             <div
               class="CardTitle-toolbar-id"
@@ -29859,410 +29567,574 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           <hr
             class="CardTitle-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <ul
+            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
+                  <time
+                    class=""
+                    datetime="1536941427137"
+                    title="Sep 14, 2018 12:10 PM"
+                  >
+                    in a month
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
+                  Order #15 had been placed
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                  <time
+                    class=""
+                    datetime="1538573326325"
+                    title="Oct 3, 2018 9:28 AM"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                  Order #15 had been fully paid
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Fulfill
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                  <time
+                    class=""
+                    datetime="1538573341837"
+                    title="Oct 3, 2018 9:29 AM"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                Fulfilled (1)
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  #9-2
+                  Order #15 had been placed from draft by admin@example.com
                 </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <time
+                    class=""
+                    datetime="1538614911243"
+                    title="Oct 3, 2018 9:01 PM"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </button>
+                    in 2 months
+                  </time>
+                </p>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                  <time
+                    class=""
+                    datetime="1538681778831"
+                    title="Oct 4, 2018 3:36 PM"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  <time
+                    class=""
+                    datetime="1538681881420"
+                    title="Oct 4, 2018 3:38 PM"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
+                  <time
+                    class=""
+                    datetime="1538742657268"
+                    title="Oct 5, 2018 8:30 AM"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              <span
-                class="MuiButton-label-id"
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Order #15 had been placed
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    class=""
+                    datetime="1538992242622"
+                    title="Oct 8, 2018 5:50 AM"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                Fulfilled (1)
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  #9-1
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    class=""
+                    datetime="1539359471665"
+                    title="Oct 12, 2018 11:51 AM"
+                  >
+                    in 2 months
+                  </time>
                 </p>
               </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  Order #15 had been placed
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    class=""
+                    datetime="1540466758843"
+                    title="Oct 25, 2018 7:25 AM"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </button>
+                    in 3 months
+                  </time>
+                </p>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
+                  Order #15 had been placed
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  <time
+                    class=""
+                    datetime="1540546497580"
+                    title="Oct 26, 2018 5:34 AM"
+                  >
+                    in 3 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
+                  Order #15 had been fully paid
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                  <time
+                    class=""
+                    datetime="1540546682440"
+                    title="Oct 26, 2018 5:38 AM"
+                  >
+                    in 3 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  Order #15 had been fully paid
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    class=""
+                    datetime="1540546682467"
+                    title="Oct 26, 2018 5:38 AM"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
+                    in 3 months
+                  </time>
+                </p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / HomePage loading 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="HomeOrdersCard-headerContainer-id"
+    >
+      <h1
+        class="MuiTypography-root-id MuiTypography-headline-id HomeOrdersCard-pageHeader-id"
+      >
+        <span
+          class="Skeleton-skeleton-id"
+          style="width:10em"
+        >
+          ‌
+        </span>
+      </h1>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        <span
+          class="Skeleton-skeleton-id"
+          style="width:10em"
+        >
+          ‌
+        </span>
+      </p>
+    </div>
+    <div
+      class="CardSpacer-spacer-id"
+    />
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="HomePage-cardContainer-id"
+        >
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
+          >
+            <div
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
+            >
+              <div>
+                <h3
+                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
+                >
+                  Sales
+                </h3>
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
+                >
+                  Today
+                </span>
+                <h1
+                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                    style="width:5em"
+                  >
+                    ‌
+                  </span>
+                </h1>
+              </div>
+              <div
+                class="HomeAnalyticsCard-iconBackground-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"
+                  />
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
+          >
+            <div
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
+            >
+              <div>
+                <h3
+                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
+                >
+                  Orders
+                </h3>
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
+                >
+                  Today
+                </span>
+                <h1
+                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                    style="width:5em"
+                  >
+                    ‌
+                  </span>
+                </h1>
+              </div>
+              <div
+                class="HomeAnalyticsCard-iconBackground-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                  <path
+                    d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <table
+            class="MuiTable-root-id"
+          >
+            <tbody
+              class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                     />
-                  </div>
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
                 </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  Williams, Garcia and Walker (XS)
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                 >
-                  1
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                    />
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
                 </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  $79.71
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                 >
-                  $79.71
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                    />
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
                 </td>
               </tr>
             </tbody>
           </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
         </div>
         <div
           class="CardSpacer-spacer-id"
@@ -30276,11 +30148,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Paid
-              </div>
+              Top products
             </span>
             <div
               class="CardTitle-toolbar-id"
@@ -30292,193 +30160,20 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           <hr
             class="CardTitle-hr-id"
           />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td>
-                    5 items
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $214.95
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes
-                  </td>
-                  <td>
-                    does not apply
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Shipping
-                  </td>
-                  <td>
-                    Registred priority
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $19.98
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Total
-                  </td>
-                  <td />
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderPayment-root-id"
-            >
-              <tbody>
-                <tr>
-                  <td>
-                    Preauthorized amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $234.93
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Captured amount
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    $0.00
-                  </td>
-                </tr>
-                <tr
-                  class="OrderPayment-totalRow-id"
-                >
-                  <td>
-                    Balance
-                  </td>
-                  <td
-                    class="OrderPayment-textRight-id"
-                  >
-                    -$234.93
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Capture
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Refund
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Void
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Mark as paid
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="ExtendedPageHeader-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              Order timeline
-            </h2>
-            <div
-              class="ExtendedPageHeader-action-id"
-            />
-          </div>
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
-              <div
-                class="TimelineAddNote-noteRoot-id"
+              <tr
+                class="MuiTableRow-root-id"
               >
-                <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductList-avatarSpacing-id"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id HomeProductList-avatarProps-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -30488,7 +30183,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                        d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
                       />
                       <path
                         d="M0 0h24v24H0z"
@@ -30496,87 +30191,36 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       />
                     </svg>
                   </div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                    >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
-                      >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
-                    tabindex="0"
-                    type="button"
+                  <span
+                    class="Skeleton-skeleton-id"
                   >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Add note
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </form>
-            <div
-              class="Component-root-id"
-            >
-              <span
-                class="Component-dot-id"
-              />
-              <div
-                class="Component-noExpander-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Fulfilled 1 items
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
                   >
-                    in a month
-                  </time>
-                </p>
-              </div>
-            </div>
-          </div>
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
       </div>
       <div>
         <div
@@ -30588,7 +30232,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Customer
+              Activity
             </span>
             <div
               class="CardTitle-toolbar-id"
@@ -30600,136 +30244,314 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           <hr
             class="CardTitle-hr-id"
           />
-          <div
-            class="MuiCardContent-root-id"
+          <ul
+            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
           >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
-              Anonymous user
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id HomeProductListCard-loadingProducts-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / HomePage no data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="HomeOrdersCard-headerContainer-id"
+    >
+      <h1
+        class="MuiTypography-root-id MuiTypography-headline-id HomeOrdersCard-pageHeader-id"
+      >
+        Hello there, admin@example.com
+      </h1>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Here are some information we gathered about your store
+      </p>
+    </div>
+    <div
+      class="CardSpacer-spacer-id"
+    />
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="HomePage-cardContainer-id"
+        >
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
           >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              <div>
+                <h3
+                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
+                >
+                  Sales
+                </h3>
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
+                >
+                  Today
+                </span>
+                <h1
+                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
+                >
+                  $57.15
+                </h1>
+              </div>
+              <div
+                class="HomeAnalyticsCard-iconBackground-id"
               >
-                Contact information
-              </p>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"
+                  />
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                </svg>
+              </div>
             </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-              >
-                melissa.simon@example.com
-              </p>
-            </a>
           </div>
-          <hr
-            class="Hr-root-id"
-          />
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
           >
             <div
-              class="OrderCustomer-sectionHeader-id"
+              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Shipping Address
-              </p>
+              <div>
+                <h3
+                  class="MuiTypography-root-id MuiTypography-subheading-id HomeAnalyticsCard-cardTitle-id"
+                >
+                  Orders
+                </h3>
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
+                >
+                  Today
+                </span>
+                <h1
+                  class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
+                >
+                  1
+                </h1>
+              </div>
               <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                class="HomeAnalyticsCard-iconBackground-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
                 >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                  <path
+                    d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
+                  />
+                </svg>
               </div>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+          </div>
+        </div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <table
+            class="MuiTable-root-id"
+          >
+            <tbody
+              class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
             >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    <b>
+                      1 Orders
+                    </b>
+                     are ready to fulfill
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                    />
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    No payments waiting for capture
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                    />
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    No products out of stock
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                    />
+                    <path
+                      d="M0 0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </svg>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+              Top products
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             />
           </div>
+          <div
+            class="CardTitle-children-id"
+          />
           <hr
-            class="Hr-root-id"
+            class="CardTitle-hr-id"
           />
-          <div
-            class="MuiCardContent-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <div
-              class="OrderCustomer-sectionHeader-id"
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Billing Address
-              </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+              <tr
+                class="MuiTableRow-root-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-noProducts-id"
                 >
-                  <span
-                    class="MuiButton-label-id"
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
                   >
-                    Edit
-                  </span>
-                </button>
-              </div>
-            </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Same as shipping address
-            </p>
-          </div>
+                    No products found
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
         <div
           class="CardSpacer-spacer-id"
         />
+      </div>
+      <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -30739,7 +30561,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Notes
+              Activity
             </span>
             <div
               class="CardTitle-toolbar-id"
@@ -30751,15 +30573,23 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           <hr
             class="CardTitle-hr-id"
           />
-          <div
-            class="MuiCardContent-root-id"
+          <ul
+            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
           >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id HomeProductListCard-noProducts-id"
             >
-              Lorem ipsum dolor sit amet
-            </p>
-          </div>
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  No activities found
+                </p>
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -30767,7 +30597,59 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details payment error 1`] = `
+exports[`Storyshots Views / Not found error page default 1`] = `
+<div>
+  <div
+    class="NotFoundPage-root-id"
+  >
+    <div
+      class="NotFoundPage-container-id"
+    >
+      <div
+        class="NotFoundPage-innerContainer-id"
+      >
+        <div>
+          <h1
+            class="MuiTypography-root-id MuiTypography-display2-id NotFoundPage-header-id"
+          >
+            Ooops!...
+          </h1>
+          <h1
+            class="MuiTypography-root-id MuiTypography-display1-id NotFoundPage-header-id"
+          >
+            Something's missing
+          </h1>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Sorry, the page was not found
+          </p>
+        </div>
+        <div>
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id NotFoundPage-button-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Go back to dashboard
+            </span>
+          </button>
+        </div>
+      </div>
+      <div>
+        <span
+          class="isvg pending NotFoundPage-notFoundImage-id"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -30807,45 +30689,13 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="OrderDetailsPage-menu-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDetailsPage-date-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
+      />
+    </div>
+    <div
+      class="OrderDetailsPage-date-id"
+    >
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
       >
         <time
           class=""
@@ -30962,21 +30812,6 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               </tr>
             </tbody>
           </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Fulfill
-              </span>
-            </button>
-          </div>
         </div>
         <div
           class="CardSpacer-spacer-id"
@@ -30991,9 +30826,9 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Fulfilled (1)
+                Cancelled (1)
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
                 >
@@ -31003,37 +30838,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             </span>
             <div
               class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-            </div>
+            />
           </div>
           <div
             class="CardTitle-children-id"
@@ -31118,21 +30923,6 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               </tr>
             </tbody>
           </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
         </div>
         <div
           class="CardSpacer-spacer-id"
@@ -31147,9 +30937,9 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Fulfilled (1)
+                Cancelled (1)
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
                 >
@@ -31159,37 +30949,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             </span>
             <div
               class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-            </div>
+            />
           </div>
           <div
             class="CardTitle-children-id"
@@ -31274,21 +31034,6 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               </tr>
             </tbody>
           </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
         </div>
         <div
           class="CardSpacer-spacer-id"
@@ -31425,57 +31170,6 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               </tbody>
             </table>
           </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Capture
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Refund
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Void
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Mark as paid
-              </span>
-            </button>
-          </div>
         </div>
         <div
           class="OrderHistory-root-id"
@@ -31675,21 +31369,6 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               >
                 Shipping Address
               </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
             </div>
             <p
               class="MuiTypography-root-id MuiTypography-body1-id"
@@ -31730,21 +31409,6 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               >
                 Billing Address
               </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit
-                  </span>
-                </button>
-              </div>
             </div>
             <p
               class="MuiTypography-root-id MuiTypography-body1-id"
@@ -31793,7 +31457,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
+exports[`Storyshots Views / Orders / Order details default 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -32819,7 +32483,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
+exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -33355,9 +33019,9 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Refunded
+                Unpaid
               </div>
             </span>
             <div
@@ -33845,7 +33509,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
+exports[`Storyshots Views / Orders / Order details loading 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -33881,7 +33545,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        #9
+        <span
+          class="Skeleton-skeleton-id"
+          style="width:10em"
+        >
+          ‌
+        </span>
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
@@ -33923,21 +33592,19 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
       class="OrderDetailsPage-date-id"
     >
       <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
+        class="Skeleton-skeleton-id"
+        style="width:10em"
       >
-        <time
-          class=""
-          datetime="1536658648185"
-          title="Sep 11, 2018 5:37 AM"
-        >
-          in a month
-        </time>
+        ‌
       </span>
     </div>
     <div
       class="Grid-root-id Grid-default-id"
     >
       <div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -33947,11 +33614,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                Unfulfilled (3)
-              </div>
+                ‌
+              </span>
             </span>
             <div
               class="CardTitle-toolbar-id"
@@ -33963,162 +33630,6 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           <hr
             class="CardTitle-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Watkins-Gonzalez (Soft)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
-                >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
-                >
-                  $18.51
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
-                >
-                  $55.53
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Fulfill
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
-                >
-                  #9-2
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
           <table
             class="MuiTable-root-id"
           >
@@ -34159,95 +33670,13 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               class="MuiTableBody-root-id"
             >
               <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+                class="MuiTableRow-root-id"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
                   <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Williams, Garcia and Walker (XS)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
-                >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
-                >
-                  $79.71
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Fulfilled (1)
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
-                >
-                  #9-1
-                </p>
-              </div>
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <div>
-                <button
-                  aria-haspopup="true"
-                  aria-label="More"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                   >
                     <svg
                       aria-hidden="true"
@@ -34257,116 +33686,54 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
+                        d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
                       />
                       <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
-                  colspan="2"
-                  scope="col"
-                >
-                  Product
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
-                  scope="col"
-                >
-                  Total
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  Williams, Garcia and Walker (XS)
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
                 >
-                  1
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
                 >
-                  $79.71
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
                 >
-                  $79.71
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
                 </td>
               </tr>
             </tbody>
           </table>
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add tracking
-              </span>
-            </button>
-          </div>
         </div>
         <div
           class="CardSpacer-spacer-id"
@@ -34380,11 +33747,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                Unpaid
-              </div>
+                ‌
+              </span>
             </span>
             <div
               class="CardTitle-toolbar-id"
@@ -34408,12 +33775,20 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     Subtotal
                   </td>
                   <td>
-                    5 items
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                   <td
                     class="OrderPayment-textRight-id"
                   >
-                    $214.95
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                 </tr>
                 <tr>
@@ -34421,12 +33796,20 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     Taxes
                   </td>
                   <td>
-                    does not apply
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                   <td
                     class="OrderPayment-textRight-id"
                   >
-                    $0.00
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                 </tr>
                 <tr>
@@ -34434,12 +33817,20 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     Shipping
                   </td>
                   <td>
-                    Registred priority
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                   <td
                     class="OrderPayment-textRight-id"
                   >
-                    $19.98
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                 </tr>
                 <tr
@@ -34452,7 +33843,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   <td
                     class="OrderPayment-textRight-id"
                   >
-                    $234.93
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                 </tr>
               </tbody>
@@ -34475,7 +33870,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   <td
                     class="OrderPayment-textRight-id"
                   >
-                    $234.93
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                 </tr>
                 <tr>
@@ -34485,7 +33884,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   <td
                     class="OrderPayment-textRight-id"
                   >
-                    $0.00
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                 </tr>
                 <tr
@@ -34497,63 +33900,16 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   <td
                     class="OrderPayment-textRight-id"
                   >
-                    -$234.93
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardActions-root-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Capture
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Refund
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Void
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Mark as paid
-              </span>
-            </button>
-          </div>
         </div>
         <div
           class="OrderHistory-root-id"
@@ -34570,124 +33926,19 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               class="ExtendedPageHeader-action-id"
             />
           </div>
+          <span
+            class="Skeleton-skeleton-id"
+          >
+            ‌
+          </span>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="Timeline-root-id"
-          >
-            <form>
-              <div
-                class="TimelineAddNote-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                    >
-                      <div
-                        class="MuiPrivateTextarea-root-id"
-                      >
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                          readonly=""
-                          rows="1"
-                          tabindex="-1"
-                        />
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                          name="message"
-                          placeholder="Leave your note here..."
-                          rows="1"
-                          style="height:19px"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Add note
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </form>
-            <div
-              class="Component-root-id"
-            >
-              <span
-                class="Component-dot-id"
-              />
-              <div
-                class="Component-noExpander-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Fulfilled 1 items
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  <time
-                    class=""
-                    datetime="1537190544376"
-                    title="Sep 17, 2018 9:22 AM"
-                  >
-                    in a month
-                  </time>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
+            class="CardTitle-root-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
@@ -34707,11 +33958,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           <div
             class="MuiCardContent-root-id"
           >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <span
+              class="Skeleton-skeleton-id"
             >
-              Anonymous user
-            </p>
+              ‌
+            </span>
           </div>
           <hr
             class="Hr-root-id"
@@ -34728,16 +33979,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 Contact information
               </p>
             </div>
-            <a
-              class="ExternalLink-link-id"
-              href="mailto:melissa.simon@example.com"
+            <span
+              class="Skeleton-skeleton-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-              >
-                melissa.simon@example.com
-              </p>
-            </a>
+              ‌
+            </span>
           </div>
           <hr
             class="Hr-root-id"
@@ -34757,8 +34003,9 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
+                  disabled=""
+                  tabindex="-1"
                   type="button"
                 >
                   <span
@@ -34769,30 +34016,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 </button>
               </div>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Melissa Simon
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              487 Roberto Shores
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              66272 West Patriciastad
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <span
+              class="Skeleton-skeleton-id"
             >
-              Wyspy Salomona
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            />
+              ‌
+            </span>
           </div>
           <hr
             class="Hr-root-id"
@@ -34812,8 +34040,9 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
+                  disabled=""
+                  tabindex="-1"
                   type="button"
                 >
                   <span
@@ -34824,11 +34053,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                 </button>
               </div>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <span
+              class="Skeleton-skeleton-id"
             >
-              Same as shipping address
-            </p>
+              ‌
+            </span>
           </div>
         </div>
         <div
@@ -34858,11 +34087,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           <div
             class="MuiCardContent-root-id"
           >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <span
+              class="Skeleton-skeleton-id"
             >
-              Lorem ipsum dolor sit amet
-            </p>
+              ‌
+            </span>
           </div>
         </div>
       </div>
@@ -34871,7 +34100,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
+exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -35885,9 +35114,9 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             class="MuiCardContent-root-id"
           >
             <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
             >
-              Lorem ipsum dolor sit amet
+              No notes from customer
             </p>
           </div>
         </div>
@@ -35897,13 +35126,13 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order draft default 1`] = `
+exports[`Storyshots Views / Orders / Order details no payment 1`] = `
 <div>
   <div
     class="Container-md-id"
   >
     <div
-      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
       <button
         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
@@ -35933,13 +35162,13 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        #24
+        #9
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="OrderDraftPage-menu-id"
+          class="OrderDetailsPage-menu-id"
         >
           <button
             aria-haspopup="true"
@@ -35972,15 +35201,15 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
       </div>
     </div>
     <div
-      class="OrderDraftPage-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <span
         class="MuiTypography-root-id MuiTypography-caption-id"
       >
         <time
           class=""
-          datetime="1537485819811"
-          title="Sep 20, 2018 7:23 PM"
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
         >
           in a month
         </time>
@@ -35999,23 +35228,15 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Order details
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unfulfilled (3)
+              </div>
             </span>
             <div
               class="CardTitle-toolbar-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add products
-                </span>
-              </button>
-            </div>
+            />
           </div>
           <div
             class="CardTitle-children-id"
@@ -36033,41 +35254,37 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                 class="MuiTableRow-root-id MuiTableRow-head-id"
               >
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
                   colspan="2"
                   scope="col"
                 >
                   Product
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
                   scope="col"
                 >
                   Quantity
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
                   scope="col"
                 >
                   Price
                 </th>
                 <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
                   scope="col"
                 >
                   Total
                 </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
               </tr>
             </thead>
             <tbody
               class="MuiTableBody-root-id"
             >
               <tr
-                class="MuiTableRow-root-id"
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
@@ -36084,80 +35301,146 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Davis Group (Hard)
-                  </p>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    58-1338
-                  </span>
+                  Watkins-Gonzalez (Soft)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
                 >
-                  <form>
-                    <div
-                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id OrderDraftDetailsProducts-quantityField-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                          name="quantity"
-                          type="number"
-                          value="2"
-                        />
-                      </div>
-                    </div>
-                  </form>
+                  3
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
                 >
-                  $65.95
+                  $18.51
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
                 >
-                  $131.90
+                  $55.53
                 </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-iconCell-id"
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Fulfill
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  #9-2
+                </p>
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
               </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
               <tr
-                class="MuiTableRow-root-id"
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
@@ -36174,124 +35457,383 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Anderson PLC (15-1337)
-                  </p>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    15-1337
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
-                >
-                  <form>
-                    <div
-                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id OrderDraftDetailsProducts-quantityField-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                          name="quantity"
-                          type="number"
-                          value="2"
-                        />
-                      </div>
-                    </div>
-                  </form>
+                  Williams, Garcia and Walker (XS)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
                 >
-                  $68.20
+                  1
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
                 >
-                  $136.40
+                  $79.71
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-iconCell-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  $79.71
                 </td>
               </tr>
             </tbody>
           </table>
           <div
-            class="MuiCardContent-root-id"
+            class="MuiCardActions-root-id"
           >
-            <table
-              class="OrderDraftDetailsSummary-root-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <tbody>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    $168.30
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    No applicable shipping carriers
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes (VAT included)
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    $68.30
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Total
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    $168.30
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+              <span
+                class="MuiButton-label-id"
+              >
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-1
+                </p>
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
+            >
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
+            >
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Capture
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Mark as paid
+              </span>
+            </button>
           </div>
         </div>
         <div
@@ -36391,6 +35933,33 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                 </div>
               </div>
             </form>
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="Component-dot-id"
+              />
+              <div
+                class="Component-noExpander-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -36408,19 +35977,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             </span>
             <div
               class="CardTitle-toolbar-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit
-                </span>
-              </button>
-            </div>
+            />
           </div>
           <div
             class="CardTitle-children-id"
@@ -36452,11 +36009,16 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                 Contact information
               </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
             >
-              Not set
-            </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+              >
+                melissa.simon@example.com
+              </p>
+            </a>
           </div>
           <hr
             class="Hr-root-id"
@@ -36491,8 +36053,27 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             <p
               class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Not set
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              66272 West Patriciastad
             </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
           </div>
           <hr
             class="Hr-root-id"
@@ -36527,59 +36108,69 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
             <p
               class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Not set
+              Same as shipping address
+            </p>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Notes
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Lorem ipsum dolor sit amet
             </p>
           </div>
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
     <div
-      class="SaveButtonBar-root-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
-      <div
-        class="SaveButtonBar-spacer-id"
-      />
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Cancel
-        </span>
-      </button>
       <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id undefined"
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
         tabindex="0"
         type="button"
       >
         <span
-          class="MuiButton-label-id"
+          class="MuiIconButton-label-id"
         >
-          <div
-            class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-            role="progressbar"
-            style="width:24px;height:24px"
-          >
-            <svg
-              class="MuiCircularProgress-svg-id"
-              viewBox="22 22 44 44"
-            >
-              <circle
-                class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                cx="44"
-                cy="44"
-                fill="none"
-                r="20.2"
-                stroke-width="3.6"
-              />
-            </svg>
-          </div>
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+            class="MuiSvgIcon-root-id"
             focusable="false"
             role="presentation"
             viewBox="0 0 24 24"
@@ -36589,50 +36180,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
               fill="none"
             />
             <path
-              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-            />
-          </svg>
-          <span
-            class="ConfirmButtonComponent-label-id"
-          >
-            Finalize
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order draft loading 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
             />
           </svg>
         </span>
@@ -36640,18 +36188,13 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        <span
-          class="Skeleton-skeleton-id"
-          style="width:10em"
-        >
-          ‌
-        </span>
+        #9
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
         <div
-          class="OrderDraftPage-menu-id"
+          class="OrderDetailsPage-menu-id"
         >
           <button
             aria-haspopup="true"
@@ -36684,13 +36227,18 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
       </div>
     </div>
     <div
-      class="OrderDraftPage-date-id"
+      class="OrderDetailsPage-date-id"
     >
       <span
-        class="Skeleton-skeleton-id"
-        style="width:10em"
+        class="MuiTypography-root-id MuiTypography-caption-id"
       >
-        ‌
+        <time
+          class=""
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
+        >
+          in a month
+        </time>
       </span>
     </div>
     <div
@@ -36706,23 +36254,15 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Order details
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unfulfilled (3)
+              </div>
             </span>
             <div
               class="CardTitle-toolbar-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add products
-                </span>
-              </button>
-            </div>
+            />
           </div>
           <div
             class="CardTitle-children-id"
@@ -36733,181 +36273,99 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
           <table
             class="MuiTable-root-id"
           >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
             <tbody
               class="MuiTableBody-root-id"
             >
               <tr
-                class="MuiTableRow-root-id"
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
                   <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                      />
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                    </svg>
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
                   </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
+                  Watkins-Gonzalez (Soft)
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
+                  3
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
+                  $18.51
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-iconCell-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                  $55.53
                 </td>
               </tr>
             </tbody>
           </table>
           <div
-            class="MuiCardContent-root-id"
+            class="MuiCardActions-root-id"
           >
-            <table
-              class="OrderDraftDetailsSummary-root-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <tbody>
-                <tr>
-                  <td
-                    colspan="2"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    colspan="2"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    colspan="2"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    colspan="2"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+              <span
+                class="MuiButton-label-id"
+              >
+                Fulfill
+              </span>
+            </button>
           </div>
         </div>
         <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="ExtendedPageHeader-root-id"
-          >
-            <h2
-              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-            >
-              Order timeline
-            </h2>
-            <div
-              class="ExtendedPageHeader-action-id"
-            />
-          </div>
-          <span
-            class="Skeleton-skeleton-id"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-      <div>
+          class="CardSpacer-spacer-id"
+        />
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -36917,22 +36375,49 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Customer
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-2
+                </p>
+              </div>
             </span>
             <div
               class="CardTitle-toolbar-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  Edit
-                </span>
-              </button>
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
           <div
@@ -36941,278 +36426,258 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
           <hr
             class="CardTitle-hr-id"
           />
-          <div
-            class="MuiCardContent-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <span
-              class="Skeleton-skeleton-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              ‌
-            </span>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <div
-            class="MuiCardContent-root-id"
+            class="MuiCardActions-root-id"
           >
-            <div
-              class="OrderCustomer-sectionHeader-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Contact information
-              </p>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-            >
-              ‌
-            </span>
+                Add tracking
+              </span>
+            </button>
           </div>
-          <hr
-            class="Hr-root-id"
-          />
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiCardContent-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="OrderCustomer-sectionHeader-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-              >
-                Shipping Address
-              </p>
               <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-1
+                </p>
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <div>
                 <button
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
-                  disabled=""
-                  tabindex="-1"
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
                   type="button"
                 >
                   <span
-                    class="MuiButton-label-id"
+                    class="MuiIconButton-label-id"
                   >
-                    Edit
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
                   </span>
                 </button>
               </div>
             </div>
-            <span
-              class="Skeleton-skeleton-id"
-            >
-              ‌
-            </span>
           </div>
+          <div
+            class="CardTitle-children-id"
+          />
           <hr
-            class="Hr-root-id"
+            class="CardTitle-hr-id"
           />
-          <div
-            class="MuiCardContent-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <div
-              class="OrderCustomer-sectionHeader-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Billing Address
-              </p>
-              <div
-                class="OrderCustomer-sectionHeaderToolbar-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
-                  <span
-                    class="MuiButton-label-id"
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    Edit
-                  </span>
-                </button>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="SaveButtonBar-root-id"
-    >
-      <div
-        class="SaveButtonBar-spacer-id"
-      />
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Cancel
-        </span>
-      </button>
-      <button
-        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-        disabled=""
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <div
-            class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-            role="progressbar"
-            style="width:24px;height:24px"
-          >
-            <svg
-              class="MuiCircularProgress-svg-id"
-              viewBox="22 22 44 44"
-            >
-              <circle
-                class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                cx="44"
-                cy="44"
-                fill="none"
-                r="20.2"
-                stroke-width="3.6"
-              />
-            </svg>
-          </div>
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-            />
-          </svg>
-          <span
-            class="ConfirmButtonComponent-label-id"
-          >
-            Finalize
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        #24
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="OrderDraftPage-menu-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
-            tabindex="0"
-            type="button"
+            class="MuiCardActions-root-id"
           >
-            <span
-              class="MuiIconButton-label-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
+              <span
+                class="MuiButton-label-id"
               >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-                <path
-                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                />
-              </svg>
-            </span>
-          </button>
+                Add tracking
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-    </div>
-    <div
-      class="OrderDraftPage-date-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-caption-id"
-      >
-        <time
-          class=""
-          datetime="1537485819811"
-          title="Sep 20, 2018 7:23 PM"
-        >
-          in a month
-        </time>
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -37222,23 +36687,15 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Order details
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
             </span>
             <div
               class="CardTitle-toolbar-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add products
-                </span>
-              </button>
-            </div>
+            />
           </div>
           <div
             class="CardTitle-children-id"
@@ -37246,24 +36703,164 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
           <hr
             class="CardTitle-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
+          <div
+            class="MuiCardContent-root-id"
           >
-            <tbody
-              class="MuiTableBody-root-id"
+            <table
+              class="OrderPayment-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="5"
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
                 >
-                  No Products added to Order
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
+            >
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Capture
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Mark as paid
+              </span>
+            </button>
+          </div>
         </div>
         <div
           class="OrderHistory-root-id"
@@ -37362,6 +36959,33 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
                 </div>
               </div>
             </form>
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="Component-dot-id"
+              />
+              <div
+                class="Component-noExpander-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -37379,19 +37003,7 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
             </span>
             <div
               class="CardTitle-toolbar-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit
-                </span>
-              </button>
-            </div>
+            />
           </div>
           <div
             class="CardTitle-children-id"
@@ -37423,11 +37035,16 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
                 Contact information
               </p>
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
             >
-              Not set
-            </p>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+              >
+                melissa.simon@example.com
+              </p>
+            </a>
           </div>
           <hr
             class="Hr-root-id"
@@ -37498,59 +37115,88 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
             <p
               class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Not set
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              66272 West Patriciastad
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Notes
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Lorem ipsum dolor sit amet
             </p>
           </div>
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
     <div
-      class="SaveButtonBar-root-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
-      <div
-        class="SaveButtonBar-spacer-id"
-      />
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Cancel
-        </span>
-      </button>
       <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id undefined"
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
         tabindex="0"
         type="button"
       >
         <span
-          class="MuiButton-label-id"
+          class="MuiIconButton-label-id"
         >
-          <div
-            class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-            role="progressbar"
-            style="width:24px;height:24px"
-          >
-            <svg
-              class="MuiCircularProgress-svg-id"
-              viewBox="22 22 44 44"
-            >
-              <circle
-                class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                cx="44"
-                cy="44"
-                fill="none"
-                r="20.2"
-                stroke-width="3.6"
-              />
-            </svg>
-          </div>
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+            class="MuiSvgIcon-root-id"
             focusable="false"
             role="presentation"
             viewBox="0 0 24 24"
@@ -37560,3333 +37206,5352 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
               fill="none"
             />
             <path
-              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
             />
           </svg>
-          <span
-            class="ConfirmButtonComponent-label-id"
-          >
-            Finalize
-          </span>
         </span>
       </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order list default 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        Orders
+        #9
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
-          tabindex="0"
-          type="button"
+        <div
+          class="OrderDetailsPage-menu-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
           >
-            Create order 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <span
+              class="MuiIconButton-label-id"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
     <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      class="OrderDetailsPage-date-id"
     >
-      <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
       >
+        <time
+          class=""
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
+        >
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
         <div
-          class="MuiTabs-flexContainer-id"
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
           <div
-            class="MuiTabs-scroller-id MuiTabs-fixed-id"
-            role="tablist"
-            style="margin-bottom:0"
+            class="CardTitle-root-id"
           >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unfulfilled (3)
+              </div>
+            </span>
             <div
-              class="MuiTabs-flexContainer-id"
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
+                  colspan="2"
+                  scope="col"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      All Orders
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Ready to fulfill
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Watkins-Gonzalez (Soft)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
+                >
+                  3
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $18.51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $55.53
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                Fulfill
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-2
+                </p>
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
                   <span
-                    class="MuiTab-labelContainer-id"
+                    class="MuiIconButton-label-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      Ready to capture
-                    </span>
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Payment
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Fulfillment status
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="6"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #20
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658650376"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Laura Stone 1 2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                Paid
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-1
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Cancelled
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $305.17
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #19
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <time
-                class=""
-                datetime="1536658650124"
-                title="Sep 11, 2018 5:37 AM"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              Elizabeth Vaughn
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Cancelled
+                Unpaid
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
             >
-              $1,215.89
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <table
+              class="OrderPayment-root-id"
             >
-              #18
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658650019"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              david.lawson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Capture
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Draft
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $321.71
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #17
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658649864"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Aaron Randall
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $271.95
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                Mark as paid
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="OrderHistory-root-id"
+        >
+          <div
+            class="ExtendedPageHeader-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #16
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658649610"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Laura Jensen
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
             >
+              Order timeline
+            </h2>
+            <div
+              class="ExtendedPageHeader-action-id"
+            />
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="TimelineAddNote-noteRoot-id"
               >
-                Unpaid
+                <div
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
+                      >
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiButton-label-id"
+                    >
+                      Add note
+                    </span>
+                  </button>
+                </div>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </form>
+            <div
+              class="Component-root-id"
             >
+              <span
+                class="Component-dot-id"
+              />
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="Component-noExpander-id"
               >
-                Cancelled
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $335.84
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #15
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <time
-                class=""
-                datetime="1536658649336"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Customer
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Jenna Villa
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Contact information
+              </p>
+            </div>
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $1,042.15
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                melissa.simon@example.com
+              </p>
+            </a>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #14
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658649103"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Wesley Davis
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
+                Shipping Address
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                Cancelled
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $213.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              #13
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <time
-                class=""
-                datetime="1536658648921"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              66272 West Patriciastad
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
+                Billing Address
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                Cancelled
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $367.03
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              Same as shipping address
+            </p>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              #12
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Notes
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <time
-                class=""
-                datetime="1536658648750"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Denise Freeman
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Lorem ipsum dolor sit amet
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        #9
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="OrderDetailsPage-menu-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="OrderDetailsPage-date-id"
+    >
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
+      >
+        <time
+          class=""
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
+        >
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Cancelled
+                Unfulfilled (3)
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $298.76
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              #11
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <time
-                class=""
-                datetime="1536658648598"
-                title="Sep 11, 2018 5:37 AM"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Watkins-Gonzalez (Soft)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
+                >
+                  3
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $18.51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $55.53
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              James Ball
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <span
+                class="MuiButton-label-id"
+              >
+                Fulfill
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                Paid
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-2
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unfulfilled
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $663.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #10
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658648409"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Michael Martinez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
               >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $280.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #9
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658648185"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Melissa Simon
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                Unpaid
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-1
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $234.93
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #8
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658647953"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Justin Mccoy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
               >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $485.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #7
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658647828"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
                 Paid
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $223.54
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #6
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658647636"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Bradley Ford
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            <table
+              class="OrderPayment-root-id"
             >
-              $237.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <table
+              class="OrderPayment-root-id"
             >
-              #5
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658647420"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              David Lawson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Capture
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $453.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658647230"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Lauren Watson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Mark as paid
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="OrderHistory-root-id"
+        >
+          <div
+            class="ExtendedPageHeader-root-id"
+          >
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
             >
+              Order timeline
+            </h2>
+            <div
+              class="ExtendedPageHeader-action-id"
+            />
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="TimelineAddNote-noteRoot-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <div
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
+                      >
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiButton-label-id"
+                    >
+                      Add note
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </form>
+            <div
+              class="Component-root-id"
             >
+              <span
+                class="Component-dot-id"
+              />
               <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                class="Component-noExpander-id"
               >
-                Partially fulfilled
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              $812.67
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              Customer
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              #3
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <time
-                class=""
-                datetime="1536658646972"
-                title="Sep 11, 2018 5:37 AM"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Mark Lee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Contact information
+              </p>
+            </div>
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                melissa.simon@example.com
+              </p>
+            </a>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Shipping Address
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                Partially fulfilled
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $481.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              #2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <time
-                class=""
-                datetime="1536658646751"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              66272 West Patriciastad
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Kara Murphy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
+                Billing Address
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                Partially fulfilled
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $569.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              Same as shipping address
+            </p>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #1
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658646314"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Curtis Bailey
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+              Notes
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $557.00
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              Lorem ipsum dolor sit amet
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots Views / Orders / Order list loading 1`] = `
+exports[`Storyshots Views / Orders / Order details payment error 1`] = `
 <div>
   <div
     class="Container-md-id"
   >
     <div
-      class="ExtendedPageHeader-root-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        Orders
+        #9
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
+        <div
+          class="OrderDetailsPage-menu-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
           >
-            Create order 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <span
+              class="MuiIconButton-label-id"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
     <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      class="OrderDetailsPage-date-id"
     >
-      <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
       >
+        <time
+          class=""
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
+        >
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
         <div
-          class="MuiTabs-flexContainer-id"
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
           <div
-            class="MuiTabs-scroller-id MuiTabs-fixed-id"
-            role="tablist"
-            style="margin-bottom:0"
+            class="CardTitle-root-id"
           >
-            <div
-              class="MuiTabs-flexContainer-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      All Orders
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                Unfulfilled (3)
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
+                  colspan="2"
+                  scope="col"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Ready to fulfill
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Ready to capture
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Watkins-Gonzalez (Soft)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
+                >
+                  3
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $18.51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $55.53
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Payment
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Fulfillment status
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-              scope="col"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
+              <span
+                class="MuiButton-label-id"
+              >
+                Fulfill
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="6"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  #9-2
+                </p>
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
               <span
-                class="Skeleton-skeleton-id"
+                class="MuiButton-label-id"
               >
-                ‌
+                Add tracking
               </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-1
+                </p>
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order list when no data 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Orders
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            Create order 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
-      >
+              <span
+                class="MuiButton-label-id"
+              >
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
         <div
-          class="MuiTabs-flexContainer-id"
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
           <div
-            class="MuiTabs-scroller-id MuiTabs-fixed-id"
-            role="tablist"
-            style="margin-bottom:0"
+            class="CardTitle-root-id"
           >
-            <div
-              class="MuiTabs-flexContainer-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                Unpaid
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
+            >
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      All Orders
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Ready to fulfill
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiTab-wrapper-id"
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Ready to capture
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-        </div>
-      </div>
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
+            <table
+              class="OrderPayment-root-id"
             >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
+              <span
+                class="MuiButton-label-id"
+              >
+                Capture
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              Payment
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
+              <span
+                class="MuiButton-label-id"
+              >
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              Fulfillment status
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-              scope="col"
+              <span
+                class="MuiButton-label-id"
+              >
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
+              <span
+                class="MuiButton-label-id"
+              >
+                Mark as paid
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="OrderHistory-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <div
+            class="ExtendedPageHeader-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="6"
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
             >
+              Order timeline
+            </h2>
+            <div
+              class="ExtendedPageHeader-action-id"
+            />
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="TimelineAddNote-noteRoot-id"
               >
                 <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <path
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
                       >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
                         />
-                      </svg>
-                    </span>
-                  </button>
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                >
                   <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="MuiButton-label-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
+                      Add note
                     </span>
                   </button>
                 </div>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="6"
-            >
-              No orders found
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Orders
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Create order 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            </form>
+            <div
+              class="Component-root-id"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
+              <span
+                class="Component-dot-id"
               />
-            </svg>
-          </span>
-        </button>
+              <div
+                class="Component-noExpander-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
-      >
+      <div>
         <div
-          class="MuiTabs-flexContainer-id"
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
           <div
-            class="MuiTabs-scroller-id MuiTabs-fixed-id"
-            role="tablist"
-            style="margin-bottom:0"
+            class="CardTitle-root-id"
           >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Customer
+            </span>
             <div
-              class="MuiTabs-flexContainer-id"
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      All Orders
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                Contact information
+              </p>
+            </div>
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Ready to fulfill
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                melissa.simon@example.com
+              </p>
+            </a>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                Shipping Address
+              </p>
+              <div
+                class="OrderCustomer-sectionHeaderToolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
                   <span
-                    class="MuiTab-labelContainer-id"
+                    class="MuiButton-label-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Ready to capture
-                    </span>
+                    Edit
                   </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                </button>
+              </div>
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              66272 West Patriciastad
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                Billing Address
+              </p>
+              <div
+                class="OrderCustomer-sectionHeaderToolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
                   <span
-                    class="MuiTab-labelContainer-id"
+                    class="MuiButton-label-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Custom Filter
-                    </span>
+                    Edit
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Same as shipping address
+            </p>
           </div>
         </div>
-      </div>
-      <div
-        class="FilterChips-filterContainer-id"
-      >
         <div
-          class="FilterChips-filterButton-id"
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
-          >
-            Gardner-Schultz
-          </p>
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
+          <div
+            class="CardTitle-root-id"
           >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Notes
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             />
-          </svg>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Lorem ipsum dolor sit amet
+            </p>
+          </div>
         </div>
-        <div
-          class="FilterChips-filterButton-id"
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
         >
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
-          >
-            Davis, Brown and Ray
-          </p>
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
+            class="MuiSvgIcon-root-id"
             focusable="false"
             role="presentation"
             viewBox="0 0 24 24"
           >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
             <path
               d="M0 0h24v24H0z"
               fill="none"
             />
-          </svg>
-        </div>
-        <div
-          class="FilterChips-filterButton-id"
-        >
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
-          >
-            Franklin Inc
-          </p>
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
             <path
-              d="M0 0h24v24H0z"
-              fill="none"
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
             />
           </svg>
-        </div>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        #9
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
         <div
-          class="FilterChips-filterButton-id FilterChips-addFilterButtonPrimary-id"
+          class="OrderDetailsPage-menu-id"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-          </svg>
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-addFilterText-id"
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
           >
-            Add Filter
-          </p>
+            <span
+              class="MuiIconButton-label-id"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
         </div>
       </div>
-      <table
-        class="MuiTable-root-id"
+    </div>
+    <div
+      class="OrderDetailsPage-date-id"
+    >
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <time
+          class=""
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              No. of Order
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Customer
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Payment
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
-              scope="col"
-            >
-              Fulfillment status
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-              scope="col"
-            >
-              Total
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="6"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
+                Unfulfilled (3)
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #20
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658650376"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Laura Stone 1 2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
               >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $305.17
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Watkins-Gonzalez (Soft)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
+                >
+                  3
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $18.51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $55.53
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #19
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658650124"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Elizabeth Vaughn
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Fulfill
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                Paid
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-2
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Cancelled
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $1,215.89
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #18
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658650019"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              david.lawson@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
               >
-                Draft
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $321.71
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #17
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658649864"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Aaron Randall
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                Unpaid
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-1
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Cancelled
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $271.95
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #16
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658649610"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Laura Jensen
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
               >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $335.84
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #15
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658649336"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Jenna Villa
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $1,042.15
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #14
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658649103"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Wesley Davis
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
                 Unpaid
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
             >
-              $213.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <table
+              class="OrderPayment-root-id"
             >
-              #13
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658648921"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Capture
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Cancelled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              $367.03
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              <span
+                class="MuiButton-label-id"
+              >
+                Mark as paid
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="OrderHistory-root-id"
+        >
+          <div
+            class="ExtendedPageHeader-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #12
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
             >
-              <time
-                class=""
-                datetime="1536658648750"
-                title="Sep 11, 2018 5:37 AM"
+              Order timeline
+            </h2>
+            <div
+              class="ExtendedPageHeader-action-id"
+            />
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
+              <div
+                class="TimelineAddNote-noteRoot-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Denise Freeman
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Unpaid
+                <div
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
+                      >
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiButton-label-id"
+                    >
+                      Add note
+                    </span>
+                  </button>
+                </div>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </form>
+            <div
+              class="Component-root-id"
             >
+              <span
+                class="Component-dot-id"
+              />
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="Component-noExpander-id"
               >
-                Cancelled
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              $298.76
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              Customer
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              #11
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <time
-                class=""
-                datetime="1536658648598"
-                title="Sep 11, 2018 5:37 AM"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              James Ball
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Contact information
+              </p>
+            </div>
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
-                Paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                melissa.simon@example.com
+              </p>
+            </a>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Shipping Address
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                Unfulfilled
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $663.69
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              #10
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <time
-                class=""
-                datetime="1536658648409"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              66272 West Patriciastad
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Michael Martinez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
+                Billing Address
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                Cancelled
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $280.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              Same as shipping address
+            </p>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              #9
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Notes
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <time
-                class=""
-                datetime="1536658648185"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Lorem ipsum dolor sit amet
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        #9
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="OrderDetailsPage-menu-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label-id"
             >
-              Melissa Simon
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="OrderDetailsPage-date-id"
+    >
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
+      >
+        <time
+          class=""
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
+        >
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Unpaid
+                Unfulfilled (3)
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              $234.93
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Watkins-Gonzalez (Soft)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
+                >
+                  3
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $18.51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $55.53
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #8
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658647953"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Justin Mccoy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Fulfill
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                Unpaid
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-2
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-              >
-                Partially fulfilled
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $485.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              #7
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <time
-                class=""
-                datetime="1536658647828"
-                title="Sep 11, 2018 5:37 AM"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              Anthony Gonzalez
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <span
+                class="MuiButton-label-id"
+              >
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                Paid
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-1
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-              >
-                Partially fulfilled
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $223.54
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #6
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <time
-                class=""
-                datetime="1536658647636"
-                title="Sep 11, 2018 5:37 AM"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              Bradley Ford
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
                 class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                Fulfilled
+                Refunded
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $237.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #5
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <table
+              class="OrderPayment-root-id"
             >
-              <time
-                class=""
-                datetime="1536658647420"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
             >
-              David Lawson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Capture
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              <span
+                class="MuiButton-label-id"
               >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
-            >
-              $453.55
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #4
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <time
-                class=""
-                datetime="1536658647230"
-                title="Sep 11, 2018 5:37 AM"
+              <span
+                class="MuiButton-label-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              Lauren Watson
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              <span
+                class="MuiButton-label-id"
+              >
+                Mark as paid
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="OrderHistory-root-id"
+        >
+          <div
+            class="ExtendedPageHeader-root-id"
+          >
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
             >
+              Order timeline
+            </h2>
+            <div
+              class="ExtendedPageHeader-action-id"
+            />
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+                class="TimelineAddNote-noteRoot-id"
               >
-                Unpaid
+                <div
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
+                      >
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiButton-label-id"
+                    >
+                      Add note
+                    </span>
+                  </button>
+                </div>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            </form>
+            <div
+              class="Component-root-id"
             >
+              <span
+                class="Component-dot-id"
+              />
               <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                class="Component-noExpander-id"
               >
-                Partially fulfilled
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              $812.67
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              Customer
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              #3
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <time
-                class=""
-                datetime="1536658646972"
-                title="Sep 11, 2018 5:37 AM"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Mark Lee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                Contact information
+              </p>
+            </div>
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
               >
-                Unpaid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                melissa.simon@example.com
+              </p>
+            </a>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Shipping Address
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                Partially fulfilled
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $481.41
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              #2
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <time
-                class=""
-                datetime="1536658646751"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              66272 West Patriciastad
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Kara Murphy
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Billing Address
+              </p>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                Paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-              >
-                Partially fulfilled
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $569.19
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+              Same as shipping address
+            </p>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              #1
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <time
-                class=""
-                datetime="1536658646314"
-                title="Sep 11, 2018 5:37 AM"
-              >
-                in a month
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              Curtis Bailey
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Paid
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
-              >
-                Partially fulfilled
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+              Notes
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              $557.00
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              Lorem ipsum dolor sit amet
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots Views / Pages / Page details when loading 1`] = `
+exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
 <div>
-  <form>
+  <div
+    class="Container-md-id"
+  >
     <div
-      class="Container-md-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
-      <div
-        class="ExtendedPageHeader-root-id"
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
       >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
+        <span
+          class="MuiIconButton-label-id"
         >
-          <span
-            class="MuiIconButton-label-id"
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        #9
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="OrderDetailsPage-menu-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            style="width:10em"
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
           >
-            ‌
-          </span>
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
+            <span
+              class="MuiIconButton-label-id"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
       </div>
-      <div
-        class="Grid-root-id Grid-default-id"
+    </div>
+    <div
+      class="OrderDetailsPage-date-id"
+    >
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
       >
-        <div>
+        <time
+          class=""
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
+        >
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="MuiCardContent-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id PageContent-addHelperTextPadding-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Title
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autofocus=""
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                    disabled=""
-                    name="title"
-                    type="text"
-                    value=""
-                  />
-                </div>
+                Unfulfilled (3)
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id"
-                style="width:100%"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
+                  colspan="2"
+                  scope="col"
                 >
-                  Content
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
                   <div
-                    class="MuiPrivateTextarea-root-id"
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      disabled=""
-                      name="content"
-                      rows="1"
-                      style="height:19px"
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
                     />
                   </div>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  Select text to enable text-formatting tools.
-                </p>
-              </div>
-            </div>
+                  Watkins-Gonzalez (Soft)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
+                >
+                  3
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $18.51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $55.53
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Fulfill
+              </span>
+            </button>
           </div>
         </div>
-        <div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="MuiCardContent-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Slug
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                    disabled=""
-                    name="slug"
-                    type="text"
-                    value=""
-                  />
-                </div>
+                Fulfilled (1)
                 <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
                 >
-                  Slug is being used to create page URL
+                  #9-2
                 </p>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Publication date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    disabled=""
-                    name="publicationDate"
-                    type="date"
-                    value=""
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -40899,310 +42564,150 @@ exports[`Storyshots Views / Pages / Page details when loading 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                       />
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isPublished"
-                      type="checkbox"
-                    />
                   </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Published
-                </span>
-              </label>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
-            >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
-              >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
-            >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page details with initial data 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Lorem Ipsum
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <div
-              class="MuiCardContent-root-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id PageContent-addHelperTextPadding-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
                 >
-                  Title
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
                 >
-                  <input
-                    aria-invalid="false"
-                    autofocus=""
-                    class="MuiInputBase-input-id MuiInput-input-id"
-                    name="title"
-                    type="text"
-                    value="Lorem Ipsum"
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id"
-                style="width:100%"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
                 >
-                  Content
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
                   <div
-                    class="MuiPrivateTextarea-root-id"
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
                     />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum et justo sit amet viverra. Maecenas euismod auctor nisi et tincidunt. Maecenas ante urna, aliquet at odio sed, gravida efficitur purus. Morbi ut dapibus ante. Nulla eu neque sit amet odio tincidunt porttitor eu quis purus. Aliquam at diam sit amet turpis varius semper vitae non lectus. Vivamus lectus ligula, molestie eu augue eu, cursus tincidunt sem. Nam ornare egestas tincidunt.
-                    </textarea>
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      name="content"
-                      rows="1"
-                      style="height:19px"
-                    >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum et justo sit amet viverra. Maecenas euismod auctor nisi et tincidunt. Maecenas ante urna, aliquet at odio sed, gravida efficitur purus. Morbi ut dapibus ante. Nulla eu neque sit amet odio tincidunt porttitor eu quis purus. Aliquam at diam sit amet turpis varius semper vitae non lectus. Vivamus lectus ligula, molestie eu augue eu, cursus tincidunt sem. Nam ornare egestas tincidunt.
-                    </textarea>
                   </div>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  Select text to enable text-formatting tools.
-                </p>
-              </div>
-            </div>
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Add tracking
+              </span>
+            </button>
           </div>
         </div>
-        <div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="MuiCardContent-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Slug
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id"
-                    name="slug"
-                    type="text"
-                    value="lorem-ipsum-dolor"
-                  />
-                </div>
+                Fulfilled (1)
                 <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
                 >
-                  Slug is being used to create page URL
+                  #9-1
                 </p>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Publication date
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    name="publicationDate"
-                    type="date"
-                    value="2018-03-20T16:39:08.850105+00:00"
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -41215,782 +42720,864 @@ exports[`Storyshots Views / Pages / Page details with initial data 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                       />
                     </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isPublished"
-                      type="checkbox"
-                    />
                   </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Published
-                </span>
-              </label>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page list default 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Pages
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardActions-root-id"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
+              <span
+                class="MuiButton-label-id"
+              >
+                Add tracking
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <div
+            class="CardTitle-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
             >
-              Url
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
             >
-              Visibility
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardActions-root-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Capture
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Mark as paid
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="OrderHistory-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <div
+            class="ExtendedPageHeader-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
             >
+              Order timeline
+            </h2>
+            <div
+              class="ExtendedPageHeader-action-id"
+            />
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="TimelineAddNote-noteRoot-id"
               >
                 <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <path
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
                       >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
                         />
-                      </svg>
-                    </span>
-                  </button>
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                >
                   <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="MuiButton-label-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
+                      Add note
                     </span>
                   </button>
                 </div>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PageList-link-id"
-            >
-              About
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              /about
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            </form>
+            <div
+              class="Component-root-id"
             >
+              <span
+                class="Component-dot-id"
+              />
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="Component-noExpander-id"
               >
-                Published
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
               </div>
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id"
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PageList-link-id"
-            >
-              Terms of use
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              /terms-of-use
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              Customer
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
-              >
-                Not published
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page list loading 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Pages
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Contact information
+              </p>
+            </div>
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+              >
+                melissa.simon@example.com
+              </p>
+            </a>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Shipping Address
+              </p>
+              <div
+                class="OrderCustomer-sectionHeaderToolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
+              </div>
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Url
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Visibility
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              66272 West Patriciastad
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Billing Address
+              </p>
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <span
+                    class="MuiButton-label-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
+                    Edit
+                  </span>
+                </button>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Same as shipping address
+            </p>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id"
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PageList-link-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              Notes
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              Lorem ipsum dolor sit amet
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots Views / Pages / Page list no data 1`] = `
+exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
 <div>
   <div
     class="Container-md-id"
   >
     <div
-      class="ExtendedPageHeader-root-id"
+      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
     >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        Pages
+        #9
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id"
-          tabindex="0"
-          type="button"
+        <div
+          class="OrderDetailsPage-menu-id"
         >
-          <span
-            class="MuiIconButton-label-id"
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <span
+              class="MuiIconButton-label-id"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
     <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      class="OrderDetailsPage-date-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <time
+          class=""
+          datetime="1536658648185"
+          title="Sep 11, 2018 5:37 AM"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Url
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Visibility
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
+                Unfulfilled (3)
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="3"
-            >
-              No pages found
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Create product type default 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Create product type
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                Information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
-                  Product Type Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
+                  Watkins-Gonzalez (Soft)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textCenter-id"
+                >
+                  3
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $18.51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-textRight-id"
+                >
+                  $55.53
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardActions-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                class="MuiButton-label-id"
               >
-                Shipping
+                Fulfill
               </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
+                >
+                  #9-2
+                </p>
+              </div>
+            </span>
             <div
-              class="MuiCardContent-root-id"
+              class="CardTitle-toolbar-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -42003,592 +43590,715 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                       />
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
                   </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
+                </button>
+              </div>
             </div>
           </div>
           <div
-            class="CardSpacer-spacer-id"
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
           />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardActions-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                class="MuiButton-label-id"
               >
-                Taxes
+                Add tracking
               </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
               <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
+                Fulfilled (1)
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id OrderFulfillment-orderNumber-id"
                 >
-                  Tax rate (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  #9-1
+                </p>
+              </div>
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <div>
+                <button
+                  aria-haspopup="true"
+                  aria-label="More"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <div
-                    class="MuiSelect-root-id"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Standard
-                    </div>
-                    <input
-                      name="taxRate"
-                      type="hidden"
-                      value="STANDARD"
-                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      class="MuiSvgIcon-root-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M7 10l5 5 5-5z"
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                       />
                     </svg>
-                  </div>
-                </div>
+                  </span>
+                </button>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
-            >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Create product type loading 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-wideCell-id"
+                  colspan="2"
+                  scope="col"
+                >
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textCenter-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            style="width:10em"
-          >
-            ‌
-          </span>
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                  >
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Williams, Garcia and Walker (XS)
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textCenter-id"
+                >
+                  1
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-textRight-id"
+                >
+                  $79.71
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
+            class="MuiCardActions-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                class="MuiButton-label-id"
               >
-                Information
+                Add tracking
               </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Product Type Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
+            </button>
           </div>
         </div>
-        <div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Shipping
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </span>
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
+              class="CardTitle-toolbar-id"
             />
-            <div
-              class="MuiCardContent-root-id"
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
+                  <td>
+                    5 items
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                    $214.95
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes
+                  </td>
+                  <td>
+                    does not apply
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Shipping
+                  </td>
+                  <td>
+                    Registred priority
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $19.98
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
                 >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
+                  <td>
+                    Total
+                  </td>
+                  <td />
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
+          <hr
+            class="Hr-root-id"
+          />
           <div
-            class="CardSpacer-spacer-id"
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderPayment-root-id"
+            >
+              <tbody>
+                <tr>
+                  <td>
+                    Preauthorized amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $234.93
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Captured amount
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    $0.00
+                  </td>
+                </tr>
+                <tr
+                  class="OrderPayment-totalRow-id"
+                >
+                  <td>
+                    Balance
+                  </td>
+                  <td
+                    class="OrderPayment-textRight-id"
+                  >
+                    -$234.93
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <hr
+            class="Hr-root-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardActions-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
             >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                class="MuiButton-label-id"
               >
-                Taxes
+                Capture
               </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Refund
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Void
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Mark as paid
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="OrderHistory-root-id"
+        >
+          <div
+            class="ExtendedPageHeader-root-id"
+          >
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+            >
+              Order timeline
+            </h2>
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
+              class="ExtendedPageHeader-action-id"
             />
-            <div
-              class="MuiCardContent-root-id"
-            >
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
               <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                class="TimelineAddNote-noteRoot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Tax rate (optional)
-                </label>
                 <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                 >
                   <div
-                    class="MuiSelect-root-id"
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
                   >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      role="button"
-                    >
-                      Standard
-                    </div>
-                    <input
-                      name="taxRate"
-                      type="hidden"
-                      value="STANDARD"
-                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      class="MuiSvgIcon-root-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M7 10l5 5 5-5z"
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
                   </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
+                      >
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiButton-label-id"
+                    >
+                      Add note
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </form>
             <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+              class="Component-root-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              <span
+                class="Component-dot-id"
+              />
+              <div
+                class="Component-noExpander-id"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Fulfilled 1 items
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  <time
+                    class=""
+                    datetime="1537190544376"
+                    title="Sep 17, 2018 9:22 AM"
+                  >
+                    in a month
+                  </time>
+                </p>
+              </div>
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
             <span
-              class="ConfirmButtonComponent-label-id"
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Save
+              Customer
             </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Product type details default 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          E-books
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
+            class="MuiCardContent-root-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="OrderCustomer-sectionHeader-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
+                Contact information
+              </p>
             </div>
+            <a
+              class="ExternalLink-link-id"
+              href="mailto:melissa.simon@example.com"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+              >
+                melissa.simon@example.com
+              </p>
+            </a>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+              class="OrderCustomer-sectionHeader-id"
             >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Shipping Address
+              </p>
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Product Type Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id"
-                    name="name"
-                    type="text"
-                    value="E-books"
-                  />
-                </div>
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
               </div>
             </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Melissa Simon
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              487 Roberto Shores
+              <br />
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              66272 West Patriciastad
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Wyspy Salomona
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
           </div>
-          <div
-            class="CardSpacer-spacer-id"
+          <hr
+            class="Hr-root-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardContent-root-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="OrderCustomer-sectionHeader-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Product Attributes
-              </span>
+                Billing Address
+              </p>
               <div
-                class="CardTitle-toolbar-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
@@ -42598,250 +44308,483 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                   <span
                     class="MuiButton-label-id"
                   >
-                    Add attribute
+                    Edit
                   </span>
                 </button>
               </div>
             </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Same as shipping address
+            </p>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Notes
+            </span>
             <div
-              class="CardTitle-children-id"
+              class="CardTitle-toolbar-id"
             />
-            <hr
-              class="CardTitle-hr-id"
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Lorem ipsum dolor sit amet
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Orders / Order draft default 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
             />
-            <table
-              class="MuiTable-root-id"
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        #24
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="OrderDraftPage-menu-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="OrderDraftPage-date-id"
+    >
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
+      >
+        <time
+          class=""
+          datetime="1537485819811"
+          title="Sep 20, 2018 7:23 PM"
+        >
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Order details
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Attribute name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-textLeft-id"
-                    scope="col"
-                  >
-                    Values
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
+                  Add products
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  colspan="2"
+                  scope="col"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-textLeft-id"
+                  Product
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-textRight-id"
+                  scope="col"
+                >
+                  Quantity
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-textRight-id"
+                  scope="col"
+                >
+                  Price
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-textRight-id"
+                  scope="col"
+                >
+                  Total
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    John Doe, Milionare Pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                    Davis Group (Hard)
+                  </p>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-caption-id"
+                  >
+                    58-1338
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                >
+                  <form>
+                    <div
+                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id OrderDraftDetailsProducts-quantityField-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <div
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                          <path
-                            d="M0 0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                          name="quantity"
+                          type="number"
+                          value="2"
+                        />
+                      </div>
+                    </div>
+                  </form>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  $65.95
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                >
+                  $131.90
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-iconCell-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
                   >
-                    Language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-textLeft-id"
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                >
+                  <div
+                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                   >
-                    English, Pirate
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                    <img
+                      class="MuiAvatar-img-id"
+                      src="placeholder60x60.png"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                    Anderson PLC (15-1337)
+                  </p>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-caption-id"
+                  >
+                    15-1337
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                >
+                  <form>
+                    <div
+                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id OrderDraftDetailsProducts-quantityField-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <div
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                          <path
-                            d="M0 0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                          name="quantity"
+                          type="number"
+                          value="2"
+                        />
+                      </div>
+                    </div>
+                  </form>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                >
+                  $68.20
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                >
+                  $136.40
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-iconCell-id"
                 >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderDraftDetailsSummary-root-id"
+            >
+              <tbody>
+                <tr>
+                  <td>
+                    Subtotal
+                  </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    Publisher
+                    $168.30
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    No applicable shipping carriers
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Taxes (VAT included)
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-textLeft-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    Mirumee Press, Saleor Publishing
+                    $68.30
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    Total
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                    class="OrderDraftDetailsSummary-textRight-id"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                          <path
-                            d="M0 0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
+                    $168.30
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <label
-            class="MuiFormControlLabel-root-id"
-          >
-            <span
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                  />
-                </svg>
-                <input
-                  class="MuiPrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  name="hasVariants"
-                  type="checkbox"
-                />
-              </span>
-            </span>
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-            >
-              This product type has variants
-            </span>
-          </label>
         </div>
-        <div>
+        <div
+          class="OrderHistory-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="ExtendedPageHeader-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Shipping
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+              Order timeline
+            </h2>
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
+              class="ExtendedPageHeader-action-id"
             />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
+              <div
+                class="TimelineAddNote-noteRoot-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+                <div
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
                   >
                     <svg
                       aria-hidden="true"
@@ -42851,354 +44794,515 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
                       />
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                  </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
+                      >
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
                 >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
+                  <button
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiButton-label-id"
+                    >
+                      Add note
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </form>
           </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-root-id"
           >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Customer
+            </span>
             <div
-              class="CardTitle-root-id"
+              class="CardTitle-toolbar-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
               >
-                Taxes
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Edit
+                </span>
+              </button>
             </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
+              class="OrderCustomer-sectionHeader-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Contact information
+              </p>
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Not set
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
             <div
-              class="MuiCardContent-root-id"
+              class="OrderCustomer-sectionHeader-id"
             >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Shipping Address
+              </p>
               <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  Tax rate (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
+              </div>
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Not set
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="OrderCustomer-sectionHeader-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+              >
+                Billing Address
+              </p>
+              <div
+                class="OrderCustomer-sectionHeaderToolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <div
-                    class="MuiSelect-root-id"
+                  <span
+                    class="MuiButton-label-id"
                   >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Standard
-                    </div>
-                    <input
-                      name="taxRate"
-                      type="hidden"
-                      value="STANDARD"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
+                    Edit
+                  </span>
+                </button>
               </div>
             </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Not set
+            </p>
           </div>
         </div>
       </div>
+    </div>
+    <div
+      class="SaveButtonBar-root-id"
+    >
       <div
-        class="SaveButtonBar-root-id"
+        class="SaveButtonBar-spacer-id"
+      />
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+        tabindex="0"
+        type="button"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
+        <span
+          class="MuiButton-label-id"
         >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
+          Cancel
+        </span>
+      </button>
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id undefined"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <div
+            class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+            role="progressbar"
+            style="width:24px;height:24px"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
-            >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
-              >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
             <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+              class="MuiCircularProgress-svg-id"
+              viewBox="22 22 44 44"
             >
-              <path
-                d="M0 0h24v24H0z"
+              <circle
+                class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                cx="44"
+                cy="44"
                 fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                r="20.2"
+                stroke-width="3.6"
               />
             </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
-            >
-              Save
-            </span>
+          </div>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+            />
+          </svg>
+          <span
+            class="ConfirmButtonComponent-label-id"
+          >
+            Finalize
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
-  </form>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Views / Product types / Product type details loading 1`] = `
+exports[`Storyshots Views / Orders / Order draft loading 1`] = `
 <div>
-  <form>
+  <div
+    class="Container-md-id"
+  >
     <div
-      class="Container-md-id"
+      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
     >
-      <div
-        class="ExtendedPageHeader-root-id"
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
       >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
+        <span
+          class="MuiIconButton-label-id"
         >
-          <span
-            class="MuiIconButton-label-id"
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        <span
+          class="Skeleton-skeleton-id"
+          style="width:10em"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            style="width:10em"
-          >
-            ‌
-          </span>
-        </h2>
+          ‌
+        </span>
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
         <div
-          class="ExtendedPageHeader-action-id"
-        />
+          class="OrderDraftPage-menu-id"
+        >
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label-id"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
       </div>
-      <div
-        class="Grid-root-id Grid-default-id"
+    </div>
+    <div
+      class="OrderDraftPage-date-id"
+    >
+      <span
+        class="Skeleton-skeleton-id"
+        style="width:10em"
       >
-        <div>
+        ‌
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
+              Order details
+            </span>
             <div
-              class="MuiCardContent-root-id"
+              class="CardTitle-toolbar-id"
             >
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Product Type Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                <span
+                  class="MuiButton-label-id"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
+                  Add products
+                </span>
+              </button>
             </div>
           </div>
           <div
-            class="CardSpacer-spacer-id"
+            class="CardTitle-children-id"
           />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Product Attributes
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
+              <tr
+                class="MuiTableRow-root-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                 >
-                  <span
-                    class="MuiButton-label-id"
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                   >
-                    Add attribute
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <table
-              class="MuiTable-root-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
                   >
-                    Attribute name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-textLeft-id"
-                    scope="col"
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
                   >
-                    Values
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-textRight-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-iconCell-id"
                 >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <table
+              class="OrderDraftDetailsSummary-root-id"
+            >
+              <tbody>
+                <tr>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    colspan="2"
                   >
                     <span
                       class="Skeleton-skeleton-id"
@@ -43206,8 +45310,10 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                       ‌
                     </span>
                   </td>
+                </tr>
+                <tr>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-textLeft-id"
+                    colspan="2"
                   >
                     <span
                       class="Skeleton-skeleton-id"
@@ -43215,575 +45321,724 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                       ‌
                     </span>
                   </td>
+                </tr>
+                <tr>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                    colspan="2"
                   >
-                    <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id"
-                      tabindex="0"
-                      type="button"
+                    <span
+                      class="Skeleton-skeleton-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                          <path
-                            d="M0 0h24v24H0z"
-                            fill="none"
-                          />
-                        </svg>
-                      </span>
-                    </button>
+                      ‌
+                    </span>
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    colspan="2"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
+        </div>
+        <div
+          class="OrderHistory-root-id"
+        >
           <div
-            class="CardSpacer-spacer-id"
-          />
-          <label
-            class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+            class="ExtendedPageHeader-root-id"
+          >
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+            >
+              Order timeline
+            </h2>
+            <div
+              class="ExtendedPageHeader-action-id"
+            />
+          </div>
+          <span
+            class="Skeleton-skeleton-id"
+          >
+            ‌
+          </span>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
             <span
-              class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-              tabindex="-1"
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              <span
-                class="MuiIconButton-label-id"
+              Customer
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                <span
+                  class="MuiButton-label-id"
                 >
-                  <path
-                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                  />
-                </svg>
-                <input
-                  class="MuiPrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  disabled=""
-                  name="hasVariants"
-                  type="checkbox"
-                />
-              </span>
-            </span>
+                  Edit
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
             <span
-              class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+              class="Skeleton-skeleton-id"
             >
-              This product type has variants
+              ‌
             </span>
-          </label>
-        </div>
-        <div>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardContent-root-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="OrderCustomer-sectionHeader-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Shipping
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
+                Contact information
+              </p>
             </div>
+            <span
+              class="Skeleton-skeleton-id"
+            >
+              ‌
+            </span>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+              class="OrderCustomer-sectionHeader-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                Shipping Address
+              </p>
+              <div
+                class="OrderCustomer-sectionHeaderToolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
+                  disabled=""
                   tabindex="-1"
+                  type="button"
                 >
                   <span
-                    class="MuiIconButton-label-id"
+                    class="MuiButton-label-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
+                    Edit
                   </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
+                </button>
+              </div>
             </div>
+            <span
+              class="Skeleton-skeleton-id"
+            >
+              ‌
+            </span>
           </div>
-          <div
-            class="CardSpacer-spacer-id"
+          <hr
+            class="Hr-root-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardContent-root-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="OrderCustomer-sectionHeader-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Taxes
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
+                Billing Address
+              </p>
               <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                class="OrderCustomer-sectionHeaderToolbar-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Tax rate (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
                 >
-                  <div
-                    class="MuiSelect-root-id"
+                  <span
+                    class="MuiButton-label-id"
                   >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      role="button"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </div>
-                    <input
-                      name="taxRate"
-                      type="hidden"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
+                    Edit
+                  </span>
+                </button>
               </div>
             </div>
+            <span
+              class="Skeleton-skeleton-id"
+            >
+              ‌
+            </span>
           </div>
         </div>
       </div>
+    </div>
+    <div
+      class="SaveButtonBar-root-id"
+    >
       <div
-        class="SaveButtonBar-root-id"
+        class="SaveButtonBar-spacer-id"
+      />
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+        tabindex="0"
+        type="button"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
+        <span
+          class="MuiButton-label-id"
         >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
+          Cancel
+        </span>
+      </button>
+      <button
+        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+        disabled=""
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <div
+            class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+            role="progressbar"
+            style="width:24px;height:24px"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
-            >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
-              >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
             <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+              class="MuiCircularProgress-svg-id"
+              viewBox="22 22 44 44"
             >
-              <path
-                d="M0 0h24v24H0z"
+              <circle
+                class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                cx="44"
+                cy="44"
                 fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                r="20.2"
+                stroke-width="3.6"
               />
             </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
-            >
-              Save
-            </span>
+          </div>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+            />
+          </svg>
+          <span
+            class="ConfirmButtonComponent-label-id"
+          >
+            Finalize
           </span>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
-  </form>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Views / Product types / Product types list default 1`] = `
+exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
 <div>
   <div
     class="Container-md-id"
   >
     <div
-      class="ExtendedPageHeader-root-id"
+      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
     >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        Product types
+        #24
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
-          tabindex="0"
-          type="button"
+        <div
+          class="OrderDraftPage-menu-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <button
+            aria-haspopup="true"
+            aria-label="More"
+            class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+            tabindex="0"
+            type="button"
           >
-            Add product type 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <span
+              class="MuiIconButton-label-id"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
     <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      class="OrderDraftPage-date-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <span
+        class="MuiTypography-root-id MuiTypography-caption-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <time
+          class=""
+          datetime="1537485819811"
+          title="Sep 20, 2018 7:23 PM"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          in a month
+        </time>
+      </span>
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-wideCell-id"
-              scope="col"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Type Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-leftText-id"
-              scope="col"
+              Order details
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              Type
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-leftText-id"
-              scope="col"
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add products
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              Tax
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  colspan="5"
+                >
+                  No Products added to Order
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="OrderHistory-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          <div
+            class="ExtendedPageHeader-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
+            <h2
+              class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
             >
+              Order timeline
+            </h2>
+            <div
+              class="ExtendedPageHeader-action-id"
+            />
+          </div>
+          <div
+            class="Timeline-root-id"
+          >
+            <form>
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="TimelineAddNote-noteRoot-id"
               >
                 <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <div
+                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
+                    style="background:#673ab7"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <path
+                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                      />
+                      <path
+                        d="M0 0h24v24H0z"
+                        fill="none"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                    >
+                      <div
+                        class="MuiPrivateTextarea-root-id"
                       >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
                         />
-                      </svg>
-                    </span>
-                  </button>
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                          readonly=""
+                          rows="1"
+                          tabindex="-1"
+                        />
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                          name="message"
+                          placeholder="Leave your note here..."
+                          rows="1"
+                          style="height:19px"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiCardActions-root-id TimelineAddNote-cardActions-id"
+                >
                   <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id MuiCardActions-action-id"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="MuiButton-label-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
+                      Add note
                     </span>
                   </button>
                 </div>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
+            </form>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
+          <div
+            class="CardTitle-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Candy
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Configurable
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
-            >
-              Physical
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
             >
-              Foodstuffs
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              Customer
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
             >
-              E-books
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id"
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
               >
-                Simple product
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
-            >
-              Digital
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Edit
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Standard
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
+              Anonymous user
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              Mugs
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Simple product
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
-            >
-              Physical
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+                Contact information
+              </p>
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Standard
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
+              Not set
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              Coffee
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Configurable
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
-            >
-              Physical
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+                Shipping Address
+              </p>
+              <div
+                class="OrderCustomer-sectionHeaderToolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
+              </div>
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Standard
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
+              Not set
+            </p>
+          </div>
+          <hr
+            class="Hr-root-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <div
+              class="OrderCustomer-sectionHeader-id"
             >
-              T-Shirt
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
               >
-                Configurable
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+                Billing Address
+              </p>
+              <div
+                class="OrderCustomer-sectionHeaderToolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit
+                  </span>
+                </button>
+              </div>
+            </div>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              Physical
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+              Not set
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="SaveButtonBar-root-id"
+    >
+      <div
+        class="SaveButtonBar-spacer-id"
+      />
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
+        >
+          Cancel
+        </span>
+      </button>
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id undefined"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
+        >
+          <div
+            class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+            role="progressbar"
+            style="width:24px;height:24px"
+          >
+            <svg
+              class="MuiCircularProgress-svg-id"
+              viewBox="22 22 44 44"
             >
-              Standard
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <circle
+                class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                cx="44"
+                cy="44"
+                fill="none"
+                r="20.2"
+                stroke-width="3.6"
+              />
+            </svg>
+          </div>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+            />
+          </svg>
+          <span
+            class="ConfirmButtonComponent-label-id"
+          >
+            Finalize
+          </span>
+        </span>
+      </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots Views / Product types / Product types list loading 1`] = `
+exports[`Storyshots Views / Orders / Order list default 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -43794,21 +46049,20 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        Product types
+        Orders
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
           type="button"
         >
           <span
             class="MuiButton-label-id"
           >
-            Add product type 
+            Create order 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -43831,6 +46085,84 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
     >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      All Orders
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Ready to fulfill
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Ready to capture
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
       <table
         class="MuiTable-root-id"
       >
@@ -43841,22 +46173,40 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
             class="MuiTableRow-root-id MuiTableRow-head-id"
           >
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-wideCell-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
               scope="col"
             >
-              Type Name
+              No. of Order
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-leftText-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
               scope="col"
             >
-              Type
+              Date
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-leftText-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
               scope="col"
             >
-              Tax
+              Customer
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Payment
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Fulfillment status
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+              scope="col"
+            >
+              Total
             </th>
           </tr>
         </thead>
@@ -43868,7 +46218,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
+              colspan="6"
             >
               <div
                 class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
@@ -43902,9 +46252,8 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
                     </span>
                   </button>
                   <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
                     type="button"
                   >
                     <span
@@ -43932,1817 +46281,998 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
           class="MuiTableBody-root-id"
         >
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              #20
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658650376"
+                title="Sep 11, 2018 5:37 AM"
               >
-                ‌
-              </span>
+                in a month
+              </time>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              Laura Stone 1 2
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                ‌
-              </span>
+                Paid
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                ‌
-              </span>
+                Cancelled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $305.17
             </td>
           </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product When loading 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Add product
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
+              #19
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <time
+                class=""
+                datetime="1536658650124"
+                title="Sep 11, 2018 5:37 AM"
               >
-                General information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Elizabeth Vaughn
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductDetailsForm-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      disabled=""
-                      name="name"
-                      rows="5"
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                </div>
+                Paid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id"
-                style="width:100%"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                >
-                  <div
-                    class="MuiPrivateTextarea-root-id"
-                  >
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      disabled=""
-                      name="description"
-                      rows="1"
-                      style="height:19px"
-                    />
-                  </div>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id"
-                >
-                  Select text to enable text-formatting tools.
-                </p>
+                Cancelled
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $1,215.89
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #18
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658650019"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Pricing
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              david.lawson@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="chargeTaxes"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Charge taxes for this item
-                </span>
-              </label>
-            </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductPricing-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                    for="price"
-                  >
-                    Price
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      name="price"
-                      type="number"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                    >
-                      <p
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        USD
-                      </p>
-                    </div>
-                  </div>
-                </div>
+                Draft
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $321.71
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #17
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658649864"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Search Engine Preview
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Aaron Randall
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
+                Unpaid
               </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Add search engine title and description to make this product easier to find
-              </p>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
+                Cancelled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $271.95
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #16
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658649610"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Organize Product
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Laura Jensen
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Product Type
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      type="text"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Unpaid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Is it configurable?
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      role="button"
-                    >
-                      No
-                    </div>
-                    <input
-                      name="hasVariants"
-                      type="hidden"
-                      value="false"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
+                Cancelled
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $335.84
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #15
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658649336"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Jenna Villa
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      type="text"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Unpaid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="MultiAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Cancelled
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $1,042.15
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #14
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658649103"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Availability
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Wesley Davis
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductAvailabilityForm-switchContainer-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    class="MuiSwitch-root-id"
-                  >
-                    <span
-                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <span
-                          class="MuiSwitch-icon-id"
-                        />
-                        <input
-                          class="MuiPrivateSwitchBase-input-id"
-                          disabled=""
-                          name="available"
-                          type="checkbox"
-                        />
-                      </span>
-                    </span>
-                    <span
-                      class="MuiSwitch-bar-id"
-                    />
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    <div
-                      class="ControlledSwitch-label-id"
-                    >
-                      Published in storefront
-                    </div>
-                  </span>
-                </label>
+                Cancelled
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
-            >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
-              >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
             >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product default 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
+              $213.69
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Add product
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
+              #13
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <time
+                class=""
+                datetime="1536658648921"
+                title="Sep 11, 2018 5:37 AM"
               >
-                General information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Anthony Gonzalez
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductDetailsForm-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id"
-                      name="name"
-                      rows="5"
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                </div>
+                Unpaid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id"
-                style="width:100%"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                >
-                  <div
-                    class="MuiPrivateTextarea-root-id"
-                  >
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      name="description"
-                      rows="1"
-                      style="height:19px"
-                    />
-                  </div>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id"
-                >
-                  Select text to enable text-formatting tools.
-                </p>
+                Cancelled
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $367.03
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Pricing
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              #12
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id"
+              <time
+                class=""
+                datetime="1536658648750"
+                title="Sep 11, 2018 5:37 AM"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="chargeTaxes"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Charge taxes for this item
-                </span>
-              </label>
-            </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Denise Freeman
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductPricing-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                    for="price"
-                  >
-                    Price
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                      name="price"
-                      type="number"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                    >
-                      <p
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        USD
-                      </p>
-                    </div>
-                  </div>
-                </div>
+                Unpaid
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Search Engine Preview
-              </span>
               <div
-                class="CardTitle-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
+                Cancelled
               </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </p>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
+              $298.76
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #11
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658648598"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Organize Product
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              James Ball
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Product Type
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Unfulfilled
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $663.69
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #10
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658648409"
+                title="Sep 11, 2018 5:37 AM"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Is it configurable?
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      role="button"
-                    >
-                      No
-                    </div>
-                    <input
-                      name="hasVariants"
-                      type="hidden"
-                      value="false"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Michael Martinez
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Unpaid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="MultiAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Cancelled
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $280.41
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #9
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658648185"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Availability
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Melissa Simon
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductAvailabilityForm-switchContainer-id"
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
               >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    class="MuiSwitch-root-id"
-                  >
-                    <span
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <span
-                          class="MuiSwitch-icon-id"
-                        />
-                        <input
-                          class="MuiPrivateSwitchBase-input-id"
-                          name="available"
-                          type="checkbox"
-                        />
-                      </span>
-                    </span>
-                    <span
-                      class="MuiSwitch-bar-id"
-                    />
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    <div
-                      class="ControlledSwitch-label-id"
-                    >
-                      Published in storefront
-                    </div>
-                  </span>
-                </label>
+                Partially fulfilled
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $234.93
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              #8
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647953"
+                title="Sep 11, 2018 5:37 AM"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
+              Justin Mccoy
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product variant default 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Add variant
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $485.19
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Variants
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <table
-              class="MuiTable-root-id"
+              #7
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <time
+                class=""
+                datetime="1536658647828"
+                title="Sep 11, 2018 5:37 AM"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
-                  >
-                    Cordoba Oro
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
-                  >
-                    silver
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductVariantAttributes-card-id"
-          >
-            <div
-              class="CardTitle-root-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              Anthony Gonzalez
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                General Information
-              </span>
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id ProductVariantAttributes-grid-id"
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $223.54
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #6
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647636"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Bradley Ford
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Color
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Unpaid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $237.55
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #5
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647420"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Pricing
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              David Lawson
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductVariantPrice-grid-id"
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
               >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                      for="priceOverride"
-                    >
-                      Selling price override
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                        name="priceOverride"
-                        type="number"
-                        value=""
-                      />
-                      <div
-                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                      >
-                        <p
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          USD
-                        </p>
-                      </div>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id"
-                    >
-                      Optional
-                    </p>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                      for="costPrice"
-                    >
-                      Cost price override
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                        name="costPrice"
-                        type="number"
-                        value=""
-                      />
-                      <div
-                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                      >
-                        <p
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          USD
-                        </p>
-                      </div>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id"
-                    >
-                      Optional
-                    </p>
-                  </div>
-                </div>
+                Partially fulfilled
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $453.55
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #4
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647230"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Stock
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Lauren Watson
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductVariantStock-grid-id"
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
               >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
-                    >
-                      Inventory
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id"
-                        name="quantity"
-                        type="text"
-                        value="0"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                    >
-                      SKU (Stock Keeping Unit)
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id"
-                        name="sku"
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                </div>
+                Partially fulfilled
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $812.67
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              #3
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658646972"
+                title="Sep 11, 2018 5:37 AM"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
+              Mark Lee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              Save variant
-            </span>
-          </span>
-        </button>
-      </div>
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $481.41
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #2
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658646751"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Kara Murphy
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $569.19
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #1
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658646314"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Curtis Bailey
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $557.00
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </form>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Views / Products / Create product variant when loading data 1`] = `
+exports[`Storyshots Views / Orders / Order list loading 1`] = `
 <div>
-  <form>
+  <div
+    class="Container-md-id"
+  >
     <div
-      class="Container-md-id"
+      class="ExtendedPageHeader-root-id"
     >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Orders
+      </h2>
       <div
-        class="ExtendedPageHeader-root-id"
+        class="ExtendedPageHeader-action-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
           type="button"
         >
           <span
-            class="MuiIconButton-label-id"
+            class="MuiButton-label-id"
           >
+            Create order 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -45751,63 +47281,172 @@ exports[`Storyshots Views / Products / Create product variant when loading data
               viewBox="0 0 24 24"
             >
               <path
-                d="M0 0h24v24H0z"
-                fill="none"
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
               />
               <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                d="M0 0h24v24H0z"
+                fill="none"
               />
             </svg>
           </span>
         </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Add variant
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
       </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
       <div
-        class="Grid-root-id Grid-inverted-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
-        <div>
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiTabs-flexContainer-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
               >
-                Variants
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      All Orders
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Ready to fulfill
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Ready to capture
+                    </span>
+                  </span>
+                </span>
+              </button>
             </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <table
-              class="MuiTable-root-id"
+          </div>
+        </div>
+      </div>
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              No. of Order
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Date
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Customer
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Payment
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Fulfillment status
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+              scope="col"
+            >
+              Total
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="6"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
-                <tr
-                  class="MuiTableRow-root-id ProductVariantNavigation-link-id"
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
                       <svg
                         aria-hidden="true"
@@ -45817,339 +47456,391 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                         viewBox="0 0 24 24"
                       >
                         <path
-                          d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                        />
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
                         />
                       </svg>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
                     <span
-                      class="Skeleton-skeleton-id"
+                      class="MuiIconButton-label-id"
                     >
-                      ‌
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
                     </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductVariantAttributes-card-id"
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                class="Skeleton-skeleton-id"
               >
-                General Information
+                ‌
               </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id ProductVariantAttributes-grid-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <span
                 class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                class="Skeleton-skeleton-id"
               >
-                Pricing
+                ‌
               </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <div
-                class="ProductVariantPrice-grid-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                      for="priceOverride"
-                    >
-                      Selling price override
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                        disabled=""
-                        name="priceOverride"
-                        type="number"
-                        value=""
-                      />
-                      <div
-                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                      >
-                        <p
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          USD
-                        </p>
-                      </div>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id"
-                    >
-                      Optional
-                    </p>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                      for="costPrice"
-                    >
-                      Cost price override
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                        disabled=""
-                        name="costPrice"
-                        type="number"
-                        value=""
-                      />
-                      <div
-                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                      >
-                        <p
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          USD
-                        </p>
-                      </div>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id"
-                    >
-                      Optional
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                class="Skeleton-skeleton-id"
               >
-                Stock
+                ‌
               </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
             >
-              <div
-                class="ProductVariantStock-grid-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
-                    >
-                      Inventory
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                        disabled=""
-                        name="quantity"
-                        type="text"
-                        value="0"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                    >
-                      SKU (Stock Keeping Unit)
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                        disabled=""
-                        name="sku"
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+                ‌
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Orders / Order list when no data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Orders
+      </h2>
       <div
-        class="SaveButtonBar-root-id"
+        class="ExtendedPageHeader-action-id"
       >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
           tabindex="0"
           type="button"
         >
           <span
             class="MuiButton-label-id"
           >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
-            >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
-              >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
+            Create order 
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              class="MuiSvgIcon-root-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
             >
               <path
-                d="M0 0h24v24H0z"
-                fill="none"
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
               />
               <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                d="M0 0h24v24H0z"
+                fill="none"
               />
             </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
-            >
-              Save variant
-            </span>
           </span>
         </button>
       </div>
     </div>
-  </form>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      All Orders
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Ready to fulfill
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Ready to capture
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              No. of Order
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Date
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Customer
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Payment
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Fulfillment status
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+              scope="col"
+            >
+              Total
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="6"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+              >
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+              colspan="6"
+            >
+              No orders found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Views / Products / Create product variant with errors 1`] = `
+exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
 <div>
-  <form>
+  <div
+    class="Container-md-id"
+  >
     <div
-      class="Container-md-id"
+      class="ExtendedPageHeader-root-id"
     >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Orders
+      </h2>
       <div
-        class="ExtendedPageHeader-root-id"
+        class="ExtendedPageHeader-action-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
           type="button"
         >
           <span
-            class="MuiIconButton-label-id"
+            class="MuiButton-label-id"
           >
+            Create order 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -46158,1540 +47849,1304 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
               viewBox="0 0 24 24"
             >
               <path
-                d="M0 0h24v24H0z"
-                fill="none"
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
               />
               <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                d="M0 0h24v24H0z"
+                fill="none"
               />
             </svg>
           </span>
         </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Add variant
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
       </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
       <div
-        class="Grid-root-id Grid-inverted-id"
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
       >
-        <div>
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
           >
             <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Variants
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <table
-              class="MuiTable-root-id"
+              class="MuiTabs-flexContainer-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                <span
+                  class="MuiTab-wrapper-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  <span
+                    class="MuiTab-labelContainer-id"
                   >
-                    <div
-                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
-                  >
-                    Cordoba Oro
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                      All Orders
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  <span
+                    class="MuiTab-labelContainer-id"
                   >
-                    <div
-                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                      Ready to fulfill
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
                   >
-                    silver
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Ready to capture
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Custom Filter
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
           </div>
         </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductVariantAttributes-card-id"
+      </div>
+      <div
+        class="FilterChips-filterContainer-id"
+      >
+        <div
+          class="FilterChips-filterButton-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
           >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                General Information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+            Gardner-Schultz
+          </p>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
             />
-            <hr
-              class="CardTitle-hr-id"
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
             />
-            <div
-              class="MuiCardContent-root-id ProductVariantAttributes-grid-id"
+          </svg>
+        </div>
+        <div
+          class="FilterChips-filterButton-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
+          >
+            Davis, Brown and Ray
+          </p>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <div
+          class="FilterChips-filterButton-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
+          >
+            Franklin Inc
+          </p>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <div
+          class="FilterChips-filterButton-id FilterChips-addFilterButtonPrimary-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-addFilterText-id"
+          >
+            Add Filter
+          </p>
+        </div>
+      </div>
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              No. of Order
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Date
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Customer
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Payment
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+              scope="col"
+            >
+              Fulfillment status
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+              scope="col"
+            >
+              Total
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="6"
             >
               <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
                 <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    Color
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      <g
-                        style="fill-rule:evenodd"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
                         <path
-                          d="M7 10l5 5 5-5z"
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
                         />
-                      </g>
-                    </svg>
-                  </div>
+                      </svg>
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #20
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658650376"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Pricing
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Laura Stone 1 2
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductVariantPrice-grid-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                      for="priceOverride"
-                    >
-                      Selling price override
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="true"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                        name="priceOverride"
-                        type="number"
-                        value=""
-                      />
-                      <div
-                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                      >
-                        <p
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          USD
-                        </p>
-                      </div>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
-                    >
-                      Generic error
-                    </p>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                      for="costPrice"
-                    >
-                      Cost price override
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="true"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                        name="costPrice"
-                        type="number"
-                        value=""
-                      />
-                      <div
-                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                      >
-                        <p
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          USD
-                        </p>
-                      </div>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
-                    >
-                      Generic error
-                    </p>
-                  </div>
-                </div>
+                Cancelled
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $305.17
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #19
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658650124"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Stock
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Elizabeth Vaughn
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductVariantStock-grid-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
-                    >
-                      Inventory
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id"
-                        name="quantity"
-                        type="text"
-                        value="0"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                    >
-                      SKU (Stock Keeping Unit)
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <input
-                        aria-invalid="true"
-                        class="MuiInputBase-input-id MuiInput-input-id"
-                        name="sku"
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
-                    >
-                      Generic error
-                    </p>
-                  </div>
-                </div>
+                Cancelled
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $1,215.89
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              #18
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658650019"
+                title="Sep 11, 2018 5:37 AM"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
+              david.lawson@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              Save variant
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Ergonomic Plastic Bacon
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Draft
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $321.71
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #17
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658649864"
+                title="Sep 11, 2018 5:37 AM"
               >
-                General information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Aaron Randall
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductDetailsForm-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id"
-                      name="name"
-                      rows="5"
-                      type="text"
-                      value="Ergonomic Plastic Bacon"
-                    />
-                  </div>
-                </div>
+                Unpaid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id"
-                style="width:100%"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
-                >
-                  <div
-                    class="MuiPrivateTextarea-root-id"
-                  >
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    >
-                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
-                    </textarea>
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      name="description"
-                      rows="1"
-                      style="height:19px"
-                    >
-                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
-                    </textarea>
-                  </div>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
-                >
-                  Select text to enable text-formatting tools.
-                </p>
+                Cancelled
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $271.95
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #16
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658649610"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Images
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Laura Jensen
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  class="ProductImages-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
+                Unpaid
               </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="ProductImages-imageGridContainer-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ImageUpload-photosIconContainer-id ProductImages-imageUpload-id"
-                tabindex="0"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="ProductImages-imageUploadIcon-id"
-                >
-                  <input
-                    autocomplete="off"
-                    class="ImageUpload-fileField-id"
-                    multiple=""
-                    style="display:none"
-                    tabindex="-1"
-                    type="file"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <defs>
-                      <path
-                        d="M24 24H0V0h24v24z"
-                        id="a"
-                      />
-                    </defs>
-                    <path
-                      d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"
-                    />
-                  </svg>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
-                  >
-                    Drop here to upload
-                  </p>
-                </div>
+                Cancelled
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $335.84
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #15
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658649336"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Jenna Villa
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="ProductImages-root-id"
-                >
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
+                Unpaid
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Cancelled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $1,042.15
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #14
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658649103"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Pricing
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id"
+              Wesley Davis
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="chargeTaxes"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Charge taxes for this item
-                </span>
-              </label>
-            </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductPricing-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                    for="price"
-                  >
-                    Price
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                      name="price"
-                      type="number"
-                      value="339.39"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
-                    >
-                      <p
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        NZD
-                      </p>
-                    </div>
-                  </div>
-                </div>
+                Cancelled
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $213.69
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #13
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658648921"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Variants
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Anthony Gonzalez
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit attributes
-                  </span>
-                </button>
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add variant
-                  </span>
-                </button>
+                Unpaid
               </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Use variants for products that come in a variety of version for example different sizes or colors
-              </p>
-            </div>
-            <table
-              class="MuiTable-root-id ProductVariants-denseTable-id"
+                Cancelled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-textLeft-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    SKU
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-textLeft-id ProductVariants-link-id"
-                  >
-                    Cordoba Oro
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                    >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    87192-94370
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-textLeft-id ProductVariants-link-id"
-                  >
-                    silver
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-                    >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    69055-15190
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+              $367.03
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #12
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658648750"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Search Engine Preview
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Denise Freeman
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
+                Unpaid
               </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Add search engine title and description to make this product easier to find
-              </p>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
+                Cancelled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $298.76
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #11
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658648598"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Organize Product
-              </span>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              James Ball
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Product Type
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      type="text"
-                      value="Versatile"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Unfulfilled
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $663.69
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #10
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658648409"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Michael Martinez
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Is it configurable?
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      role="button"
-                    >
-                      Yes
-                    </div>
-                    <input
-                      name="hasVariants"
-                      type="hidden"
-                      value="true"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
+                Cancelled
               </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id ProductOrganization-cardSubtitle-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $280.41
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #9
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658648185"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Attributes
-              </p>
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Melissa Simon
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Borders
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="portals"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Unpaid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Legacy
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="Auto Loan Account"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Partially fulfilled
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $234.93
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #8
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647953"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Justin Mccoy
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Category
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Unpaid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="MultiAutocompleteSelectField-container-id"
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiChip-root-id MuiChip-deletable-id MultiAutocompleteSelectField-chip-id"
-                      role="button"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiChip-label-id"
-                      >
-                        Winter sale
-                      </span>
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiChip-deleteIcon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
-                        />
-                      </svg>
-                    </div>
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
+                Partially fulfilled
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $485.19
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              #7
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647828"
+                title="Sep 11, 2018 5:37 AM"
               >
-                Availability
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Anthony Gonzalez
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
               <div
-                class="ProductAvailabilityForm-expandedSwitchContainer-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    class="MuiSwitch-root-id"
-                  >
-                    <span
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <span
-                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
-                        />
-                        <input
-                          checked=""
-                          class="MuiPrivateSwitchBase-input-id"
-                          name="available"
-                          type="checkbox"
-                        />
-                      </span>
-                    </span>
-                    <span
-                      class="MuiSwitch-bar-id"
-                    />
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    <div
-                      class="ControlledSwitch-label-id"
-                    >
-                      Published in storefront
-                    </div>
-                  </span>
-                </label>
+                Paid
               </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id ProductAvailabilityForm-date-id"
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Publish product on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    name="publicationDate"
-                    type="date"
-                    value="2018-08-25T18:45:54.125Z"
-                  />
-                </div>
+                Partially fulfilled
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $223.54
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #6
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647636"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Bradley Ford
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $237.55
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              #5
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647420"
+                title="Sep 11, 2018 5:37 AM"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
+              David Lawson
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
             >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $453.55
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #4
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658647230"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Lauren Watson
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $812.67
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #3
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658646972"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Mark Lee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
+              >
+                Unpaid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $481.41
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #2
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658646751"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Kara Murphy
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $569.19
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              #1
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <time
+                class=""
+                datetime="1536658646314"
+                title="Sep 11, 2018 5:37 AM"
+              >
+                in a month
+              </time>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              Curtis Bailey
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Paid
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
+              >
+                Partially fulfilled
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-textRight-id"
+            >
+              $557.00
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </form>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
+exports[`Storyshots Views / Pages / Page details when loading 1`] = `
 <div>
   <form>
     <div
@@ -47746,52 +49201,30 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                General information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="ProductDetailsForm-root-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id PageContent-addHelperTextPadding-id"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Title
+                </label>
                 <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      disabled=""
-                      name="name"
-                      rows="5"
-                      type="text"
-                      value=""
-                    />
-                  </div>
+                  <input
+                    aria-invalid="false"
+                    autofocus=""
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                    disabled=""
+                    name="title"
+                    type="text"
+                    value=""
+                  />
                 </div>
               </div>
               <div
@@ -47805,7 +49238,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
                   data-shrink="false"
                 >
-                  Description
+                  Content
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
@@ -47831,7 +49264,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                       aria-invalid="false"
                       class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
                       disabled=""
-                      name="description"
+                      name="content"
                       rows="1"
                       style="height:19px"
                     />
@@ -47845,89 +49278,72 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
               </div>
             </div>
           </div>
+        </div>
+        <div>
           <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Images
-              </span>
               <div
-                class="CardTitle-toolbar-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  class="ProductImages-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
+                  Slug
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                    disabled=""
+                    name="slug"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id"
+                >
+                  Slug is being used to create page URL
+                </p>
               </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="ProductImages-imageGridContainer-id"
-            >
               <div
-                class="MuiCardContent-root-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Publication date
+                </label>
                 <div
-                  class="ProductImages-root-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <div
-                    class="ProductImages-imageContainer-id"
-                  >
-                    <img
-                      class="ProductImages-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Pricing
-              </span>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    disabled=""
+                    name="publicationDate"
+                    type="date"
+                    value=""
+                  />
+                </div>
+              </div>
               <div
-                class="CardTitle-toolbar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
               />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            >
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
@@ -47953,7 +49369,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                       class="MuiPrivateSwitchBase-input-id"
                       data-indeterminate="false"
                       disabled=""
-                      name="chargeTaxes"
+                      name="isPublished"
                       type="checkbox"
                     />
                   </span>
@@ -47961,465 +49377,27 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  Charge taxes for this item
+                  Published
                 </span>
               </label>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductPricing-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                    for="price"
-                  >
-                    Price
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      name="price"
-                      type="number"
-                      value=""
-                    />
-                    <span />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Inventory
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStock-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      disabled=""
-                      name="sku"
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Inventory
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                      disabled=""
-                      name="stockQuantity"
-                      type="number"
-                      value="0"
-                    />
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id MuiFormHelperText-filled-id"
-                  >
-                    Allocated: 
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Search Engine Preview
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </p>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Organize Product
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Product Type
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      type="text"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Is it configurable?
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      role="button"
-                    >
-                      No
-                    </div>
-                    <input
-                      name="hasVariants"
-                      type="hidden"
-                      value="false"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      type="text"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="MultiAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Availability
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductAvailabilityForm-switchContainer-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    class="MuiSwitch-root-id"
-                  >
-                    <span
-                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <span
-                          class="MuiSwitch-icon-id"
-                        />
-                        <input
-                          class="MuiPrivateSwitchBase-input-id"
-                          disabled=""
-                          name="available"
-                          type="checkbox"
-                        />
-                      </span>
-                    </span>
-                    <span
-                      class="MuiSwitch-bar-id"
-                    />
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    <div
-                      class="ControlledSwitch-label-id"
-                    >
-                      Published in storefront
-                    </div>
-                  </span>
-                </label>
-              </div>
-            </div>
           </div>
         </div>
       </div>
       <div
         class="SaveButtonBar-root-id"
       >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
           class="SaveButtonBar-spacer-id"
         />
@@ -48490,7 +49468,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product edit when product has no images 1`] = `
+exports[`Storyshots Views / Pages / Page details with initial data 1`] = `
 <div>
   <form>
     <div
@@ -48527,7 +49505,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          Ergonomic Plastic Bacon
+          Lorem Ipsum
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
@@ -48541,50 +49519,28 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                General information
-              </span>
               <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductDetailsForm-root-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id PageContent-addHelperTextPadding-id"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Title
+                </label>
                 <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id"
-                      name="name"
-                      rows="5"
-                      type="text"
-                      value="Ergonomic Plastic Bacon"
-                    />
-                  </div>
+                  <input
+                    aria-invalid="false"
+                    autofocus=""
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="title"
+                    type="text"
+                    value="Lorem Ipsum"
+                  />
                 </div>
               </div>
               <div
@@ -48598,7 +49554,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                   class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
                   data-shrink="true"
                 >
-                  Description
+                  Content
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
@@ -48620,16 +49576,16 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                       rows="1"
                       tabindex="-1"
                     >
-                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum et justo sit amet viverra. Maecenas euismod auctor nisi et tincidunt. Maecenas ante urna, aliquet at odio sed, gravida efficitur purus. Morbi ut dapibus ante. Nulla eu neque sit amet odio tincidunt porttitor eu quis purus. Aliquam at diam sit amet turpis varius semper vitae non lectus. Vivamus lectus ligula, molestie eu augue eu, cursus tincidunt sem. Nam ornare egestas tincidunt.
                     </textarea>
                     <textarea
                       aria-invalid="false"
                       class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      name="description"
+                      name="content"
                       rows="1"
                       style="height:19px"
                     >
-                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum et justo sit amet viverra. Maecenas euismod auctor nisi et tincidunt. Maecenas ante urna, aliquet at odio sed, gravida efficitur purus. Morbi ut dapibus ante. Nulla eu neque sit amet odio tincidunt porttitor eu quis purus. Aliquam at diam sit amet turpis varius semper vitae non lectus. Vivamus lectus ligula, molestie eu augue eu, cursus tincidunt sem. Nam ornare egestas tincidunt.
                     </textarea>
                   </div>
                 </div>
@@ -48641,112 +49597,70 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               </div>
             </div>
           </div>
+        </div>
+        <div>
           <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="CardTitle-root-id"
+              class="MuiCardContent-root-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Images
-              </span>
               <div
-                class="CardTitle-toolbar-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  class="ProductImages-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
+                  Slug
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="slug"
+                    type="text"
+                    value="lorem-ipsum-dolor"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                >
+                  Slug is being used to create page URL
+                </p>
               </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="ProductImages-imageGridContainer-id"
-            >
               <div
-                class="ImageUpload-photosIconContainer-id"
-                tabindex="0"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Publication date
+                </label>
                 <div
-                  class=""
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
                   <input
-                    autocomplete="off"
-                    class="ImageUpload-fileField-id"
-                    multiple=""
-                    style="display:none"
-                    tabindex="-1"
-                    type="file"
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="publicationDate"
+                    type="date"
+                    value="2018-03-20T16:39:08.850105+00:00"
                   />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <defs>
-                      <path
-                        d="M24 24H0V0h24v24z"
-                        id="a"
-                      />
-                    </defs>
-                    <path
-                      d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"
-                    />
-                  </svg>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
-                  >
-                    Drop here to upload
-                  </p>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Pricing
-              </span>
               <div
-                class="CardTitle-toolbar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
               />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            >
               <label
                 class="MuiFormControlLabel-root-id"
               >
@@ -48771,7 +49685,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                       checked=""
                       class="MuiPrivateSwitchBase-input-id"
                       data-indeterminate="false"
-                      name="chargeTaxes"
+                      name="isPublished"
                       type="checkbox"
                     />
                   </span>
@@ -48779,195 +49693,691 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                 <span
                   class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                 >
-                  Charge taxes for this item
+                  Published
                 </span>
               </label>
             </div>
-            <hr
-              class="CardTitle-hr-id"
-            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Pages / Page list default 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Pages
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Url
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Visibility
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="3"
             >
               <div
-                class="ProductPricing-root-id"
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
                 <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                    for="price"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    Price
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
                   >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                      name="price"
-                      type="number"
-                      value="339.39"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      <p
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
                       >
-                        NZD
-                      </p>
-                    </div>
-                  </div>
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id PageList-link-id"
+            >
+              About
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              /about
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Variants
-              </span>
               <div
-                class="CardTitle-toolbar-id"
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit attributes
-                  </span>
-                </button>
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add variant
-                  </span>
-                </button>
+                Published
               </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id PageList-link-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              Terms of use
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              /terms-of-use
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
               >
-                Use variants for products that come in a variety of version for example different sizes or colors
-              </p>
-            </div>
-            <table
-              class="MuiTable-root-id ProductVariants-denseTable-id"
+                Not published
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Pages / Page list loading 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Pages
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Url
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Visibility
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="3"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-textLeft-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    Status
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    SKU
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id PageList-link-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Pages / Page list no data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Pages
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Url
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Visibility
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="3"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+              >
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-textLeft-id ProductVariants-link-id"
-                  >
-                    Cordoba Oro
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    <div
-                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    87192-94370
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-textLeft-id ProductVariants-link-id"
-                  >
-                    silver
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
                   >
-                    <div
-                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                    <span
+                      class="MuiIconButton-label-id"
                     >
-                      Available
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    69055-15190
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+              colspan="3"
+            >
+              No pages found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Product types / Create product type default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Create product type
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
           >
             <div
               class="CardTitle-root-id"
@@ -48975,23 +50385,11 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Search Engine Preview
+                Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
+              />
             </div>
             <div
               class="CardTitle-children-id"
@@ -49002,17 +50400,33 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                Add search engine title and description to make this product easier to find
-              </p>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Product Type Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
               class="CardTitle-root-id"
@@ -49020,7 +50434,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Organize Product
+                Shipping
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -49035,308 +50449,40 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
             <div
               class="MuiCardContent-root-id"
             >
-              <div
-                class="SingleAutocompleteSelectField-container-id"
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Product Type
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      type="text"
-                      value="Versatile"
-                    />
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Is it configurable?
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      role="button"
-                    >
-                      Yes
-                    </div>
-                    <input
-                      name="hasVariants"
-                      type="hidden"
-                      value="true"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
                     >
                       <path
-                        d="M7 10l5 5 5-5z"
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
                     </svg>
-                  </div>
-                </div>
-              </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id ProductOrganization-cardSubtitle-id"
-              >
-                Attributes
-              </p>
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Borders
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="portals"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Legacy
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="Auto Loan Account"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Category
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
                     <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="Apparel"
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="isShippingRequired"
+                      type="checkbox"
                     />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="MultiAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiChip-root-id MuiChip-deletable-id MultiAutocompleteSelectField-chip-id"
-                      role="button"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiChip-label-id"
-                      >
-                        Winter sale
-                      </span>
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiChip-deleteIcon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
-                        />
-                      </svg>
-                    </div>
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
+                  Is this product shippable?
+                </span>
+              </label>
             </div>
           </div>
           <div
@@ -49351,7 +50497,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Availability
+                Taxes
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -49367,65 +50513,46 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               class="MuiCardContent-root-id"
             >
               <div
-                class="ProductAvailabilityForm-expandedSwitchContainer-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    class="MuiSwitch-root-id"
-                  >
-                    <span
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <span
-                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
-                        />
-                        <input
-                          checked=""
-                          class="MuiPrivateSwitchBase-input-id"
-                          name="available"
-                          type="checkbox"
-                        />
-                      </span>
-                    </span>
-                    <span
-                      class="MuiSwitch-bar-id"
-                    />
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    <div
-                      class="ControlledSwitch-label-id"
-                    >
-                      Published in storefront
-                    </div>
-                  </span>
-                </label>
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id ProductAvailabilityForm-date-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
                   class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
                   data-shrink="true"
                 >
-                  Publish product on
+                  Tax rate (optional)
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    name="publicationDate"
-                    type="date"
-                    value="2018-08-25T18:45:54.125Z"
-                  />
+                  <div
+                    class="MuiSelect-root-id"
+                  >
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Standard
+                    </div>
+                    <input
+                      name="taxRate"
+                      type="hidden"
+                      value="STANDARD"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
                 </div>
               </div>
             </div>
@@ -49505,7 +50632,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product edit when product has no variants 1`] = `
+exports[`Storyshots Views / Product types / Create product type loading 1`] = `
 <div>
   <form>
     <div
@@ -49542,7 +50669,12 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          Ergonomic Plastic Bacon
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
@@ -49553,7 +50685,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
           >
             <div
               class="CardTitle-root-id"
@@ -49561,7 +50693,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                General information
+                Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -49577,90 +50709,33 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               class="MuiCardContent-root-id"
             >
               <div
-                class="ProductDetailsForm-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id"
-                      name="name"
-                      rows="5"
-                      type="text"
-                      value="Ergonomic Plastic Bacon"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id"
-                style="width:100%"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  Description
+                  Product Type Name
                 </label>
                 <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <div
-                    class="MuiPrivateTextarea-root-id"
-                  >
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    >
-                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
-                    </textarea>
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      name="description"
-                      rows="1"
-                      style="height:19px"
-                    >
-                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
-                    </textarea>
-                  </div>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                    value=""
+                  />
                 </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
-                >
-                  Select text to enable text-formatting tools.
-                </p>
               </div>
             </div>
           </div>
+        </div>
+        <div>
           <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
               class="CardTitle-root-id"
@@ -49668,28 +50743,11 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Images
+                Shipping
               </span>
               <div
                 class="CardTitle-toolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  class="ProductImages-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
-              </div>
+              />
             </div>
             <div
               class="CardTitle-children-id"
@@ -49698,163 +50756,14 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               class="CardTitle-hr-id"
             />
             <div
-              class="ProductImages-imageGridContainer-id"
-            >
-              <div
-                class="ImageUpload-photosIconContainer-id ProductImages-imageUpload-id"
-                tabindex="0"
-              >
-                <div
-                  class="ProductImages-imageUploadIcon-id"
-                >
-                  <input
-                    autocomplete="off"
-                    class="ImageUpload-fileField-id"
-                    multiple=""
-                    style="display:none"
-                    tabindex="-1"
-                    type="file"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
-                    focusable="false"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                  >
-                    <defs>
-                      <path
-                        d="M24 24H0V0h24v24z"
-                        id="a"
-                      />
-                    </defs>
-                    <path
-                      d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"
-                    />
-                  </svg>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
-                  >
-                    Drop here to upload
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductImages-root-id"
-                >
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="ImageTile-imageContainer-id"
-                  >
-                    <div
-                      class="ImageTile-imageOverlay-id"
-                    >
-                      <div
-                        class="ImageTile-imageOverlayToolbar-id"
-                      />
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="ImageTile-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Pricing
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
+              class="MuiCardContent-root-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -49867,25 +50776,47 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
                     </svg>
                     <input
-                      checked=""
                       class="MuiPrivateSwitchBase-input-id"
                       data-indeterminate="false"
-                      name="chargeTaxes"
+                      disabled=""
+                      name="isShippingRequired"
                       type="checkbox"
                     />
                   </span>
                 </span>
                 <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  Charge taxes for this item
+                  Is this product shippable?
                 </span>
               </label>
             </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Taxes
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
             <hr
               class="CardTitle-hr-id"
             />
@@ -49893,47 +50824,173 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               class="MuiCardContent-root-id"
             >
               <div
-                class="ProductPricing-root-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Tax rate (optional)
+                </label>
                 <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                    for="price"
-                  >
-                    Price
-                  </label>
                   <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    class="MuiSelect-root-id"
                   >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                      name="price"
-                      type="number"
-                      value="339.39"
-                    />
                     <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
                     >
-                      <p
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        NZD
-                      </p>
+                      Standard
                     </div>
+                    <input
+                      name="taxRate"
+                      type="hidden"
+                      value="STANDARD"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Product types / Product type details default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          E-books
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
           <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
           >
             <div
               class="CardTitle-root-id"
@@ -49941,7 +50998,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Inventory
+                Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -49957,54 +51014,24 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               class="MuiCardContent-root-id"
             >
               <div
-                class="ProductStock-root-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <div
-                  class="MuiFormControl-root-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id"
-                      name="sku"
-                      type="text"
-                      value="87192-94370"
-                    />
-                  </div>
-                </div>
+                  Product Type Name
+                </label>
                 <div
-                  class="MuiFormControl-root-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Inventory
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                      name="stockQuantity"
-                      type="number"
-                      value="12"
-                    />
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
-                  >
-                    Allocated: 1
-                  </p>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="E-books"
+                  />
                 </div>
               </div>
             </div>
@@ -50021,7 +51048,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Search Engine Preview
+                Product Attributes
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -50034,7 +51061,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   <span
                     class="MuiButton-label-id"
                   >
-                    Edit website SEO
+                    Add attribute
                   </span>
                 </button>
               </div>
@@ -50045,326 +51072,240 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
             <hr
               class="CardTitle-hr-id"
             />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </p>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Organize Product
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            <table
+              class="MuiTable-root-id"
             >
-              <div
-                class="SingleAutocompleteSelectField-container-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
                   >
-                    Product Type
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
+                    Attribute name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-textLeft-id"
+                    scope="col"
                   >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
-                      disabled=""
-                      type="text"
-                      value="Versatile"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                    Values
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Is it configurable?
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
                 >
-                  <div
-                    class="MuiSelect-root-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                      role="button"
-                    >
-                      No
-                    </div>
-                    <input
-                      name="hasVariants"
-                      type="hidden"
-                      value="false"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id ProductOrganization-cardSubtitle-id"
-              >
-                Attributes
-              </p>
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
+                    Author
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-textLeft-id"
                   >
-                    Borders
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
+                    John Doe, Milionare Pirate
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
                   >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="portals"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <g
-                        style="fill-rule:evenodd"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    Legacy
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
+                    Language
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-textLeft-id"
                   >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="Auto Loan Account"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    English, Pirate
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <g
-                        style="fill-rule:evenodd"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
-                    Category
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
+                    Publisher
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-textLeft-id"
                   >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    Mirumee Press, Saleor Publishing
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
                     >
-                      <g
-                        style="fill-rule:evenodd"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <label
+            class="MuiFormControlLabel-root-id"
+          >
+            <span
+              class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                  />
+                </svg>
+                <input
+                  class="MuiPrivateSwitchBase-input-id"
+                  data-indeterminate="false"
+                  name="hasVariants"
+                  type="checkbox"
+                />
+              </span>
+            </span>
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+            >
+              This product type has variants
+            </span>
+          </label>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Shipping
+              </span>
               <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="ProductOrganization-hr-id"
+                class="CardTitle-toolbar-id"
               />
-              <div
-                class="MultiAutocompleteSelectField-container-id"
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
                 >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <div
-                      class="MuiChip-root-id MuiChip-deletable-id MultiAutocompleteSelectField-chip-id"
-                      role="button"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiChip-label-id"
-                      >
-                        Winter sale
-                      </span>
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiChip-deleteIcon-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
-                        />
-                      </svg>
-                    </div>
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                    />
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -50372,17 +51313,24 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
                     </svg>
-                  </div>
-                </div>
-              </div>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="isShippingRequired"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Is this product shippable?
+                </span>
+              </label>
             </div>
           </div>
           <div
@@ -50397,7 +51345,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Availability
+                Taxes
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -50413,65 +51361,46 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               class="MuiCardContent-root-id"
             >
               <div
-                class="ProductAvailabilityForm-expandedSwitchContainer-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormControlLabel-root-id"
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <span
-                    class="MuiSwitch-root-id"
+                  Tax rate (optional)
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
                   >
-                    <span
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
+                      role="button"
+                      tabindex="0"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <span
-                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
-                        />
-                        <input
-                          checked=""
-                          class="MuiPrivateSwitchBase-input-id"
-                          name="available"
-                          type="checkbox"
-                        />
-                      </span>
-                    </span>
-                    <span
-                      class="MuiSwitch-bar-id"
+                      Standard
+                    </div>
+                    <input
+                      name="taxRate"
+                      type="hidden"
+                      value="STANDARD"
                     />
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    <div
-                      class="ControlledSwitch-label-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      Published in storefront
-                    </div>
-                  </span>
-                </label>
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id ProductAvailabilityForm-date-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Publish product on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    name="publicationDate"
-                    type="date"
-                    value="2018-08-25T18:45:54.125Z"
-                  />
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
                 </div>
               </div>
             </div>
@@ -50481,6 +51410,17 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
       <div
         class="SaveButtonBar-root-id"
       >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
           class="SaveButtonBar-spacer-id"
         />
@@ -50551,7 +51491,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product image details when loaded data 1`] = `
+exports[`Storyshots Views / Product types / Product type details loading 1`] = `
 <div>
   <form>
     <div
@@ -50588,18 +51528,23 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          Edit Photo
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
         />
       </div>
       <div
-        class="Grid-root-id Grid-inverted-id"
+        class="Grid-root-id Grid-default-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImageNavigation-card-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
           >
             <div
               class="CardTitle-root-id"
@@ -50607,7 +51552,7 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                All photos
+                Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -50623,75 +51568,190 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
               class="MuiCardContent-root-id"
             >
               <div
-                class="ProductImageNavigation-root-id"
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <div
-                  class="ProductImageNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductImageNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductImageNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductImageNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductImageNavigation-imageContainer-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <img
-                    class="ProductImageNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
+                  Product Type Name
+                </label>
                 <div
-                  class="ProductImageNavigation-imageContainer-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <img
-                    class="ProductImageNavigation-image-id"
-                    src="placeholder1080x1080.png"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                    value=""
                   />
                 </div>
-                <div
-                  class="ProductImageNavigation-imageContainer-id"
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Product Attributes
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <img
-                    class="ProductImageNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductImageNavigation-imageContainer-id"
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add attribute
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <img
-                    class="ProductImageNavigation-image-id"
-                    src="placeholder1080x1080.png"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Attribute name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-textLeft-id"
+                    scope="col"
+                  >
+                    Values
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
                   />
-                </div>
-                <div
-                  class="ProductImageNavigation-imageContainer-id"
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
                 >
-                  <img
-                    class="ProductImageNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductImageNavigation-imageContainer-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-textLeft-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <label
+            class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+          >
+            <span
+              class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+              tabindex="-1"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
                 >
-                  <img
-                    class="ProductImageNavigation-image-id"
-                    src="placeholder1080x1080.png"
+                  <path
+                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                   />
-                </div>
-              </div>
-            </div>
-          </div>
+                </svg>
+                <input
+                  class="MuiPrivateSwitchBase-input-id"
+                  data-indeterminate="false"
+                  disabled=""
+                  name="hasVariants"
+                  type="checkbox"
+                />
+              </span>
+            </span>
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+            >
+              This product type has variants
+            </span>
+          </label>
+        </div>
+        <div>
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -50701,7 +51761,7 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Photo Information
+                Shipping
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -50716,58 +51776,47 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
             <div
               class="MuiCardContent-root-id"
             >
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
                 >
-                  <div
-                    class="MuiPrivateTextarea-root-id"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
+                    <svg
                       aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    >
-                      Lorem ipsum
-                    </textarea>
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      name="description"
-                      rows="1"
-                      style="height:19px"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      Lorem ipsum
-                    </textarea>
-                  </div>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="isShippingRequired"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  Optional
-                </p>
-              </div>
+                  Is this product shippable?
+                </span>
+              </label>
             </div>
           </div>
-        </div>
-        <div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -50777,7 +51826,7 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Photo View
+                Taxes
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -50793,12 +51842,48 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
               class="MuiCardContent-root-id"
             >
               <div
-                class="ProductImagePage-imageContainer-id"
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
-                <img
-                  class="ProductImagePage-image-id"
-                  src="placeholder1080x1080.png"
-                />
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Tax rate (optional)
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
+                  >
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </div>
+                    <input
+                      name="taxRate"
+                      type="hidden"
+                      value=""
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -50807,6 +51892,17 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
       <div
         class="SaveButtonBar-root-id"
       >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
         <div
           class="SaveButtonBar-spacer-id"
         />
@@ -50877,23 +51973,31 @@ exports[`Storyshots Views / Products / Product image details when loaded data 1`
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product image details when loading data 1`] = `
+exports[`Storyshots Views / Product types / Product types list default 1`] = `
 <div>
-  <form>
+  <div
+    class="Container-md-id"
+  >
     <div
-      class="Container-md-id"
+      class="ExtendedPageHeader-root-id"
     >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Product types
+      </h2>
       <div
-        class="ExtendedPageHeader-root-id"
+        class="ExtendedPageHeader-action-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiIconButton-label-id"
+            class="MuiButton-label-id"
           >
+            Add product type 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -50902,239 +52006,247 @@ exports[`Storyshots Views / Products / Product image details when loading data 1
               viewBox="0 0 24 24"
             >
               <path
-                d="M0 0h24v24H0z"
-                fill="none"
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
               />
               <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                d="M0 0h24v24H0z"
+                fill="none"
               />
             </svg>
           </span>
         </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Edit Photo
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
       </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
       >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImageNavigation-card-id"
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-wideCell-id"
+              scope="col"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                All photos
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+              Type Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-leftText-id"
+              scope="col"
             >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
+              Type
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-leftText-id"
+              scope="col"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Photo Information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+              Tax
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="3"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Description
-                </label>
                 <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
                 >
-                  <div
-                    class="MuiPrivateTextarea-root-id"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
                   >
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                      readonly=""
-                      rows="1"
-                      tabindex="-1"
-                    />
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
-                      disabled=""
-                      name="description"
-                      rows="1"
-                      style="height:19px"
-                    />
-                  </div>
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
                 </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id"
-                >
-                  Optional
-                </p>
               </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
+              Candy
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+                class="MuiTypography-root-id MuiTypography-caption-id"
               >
-                Photo View
+                Configurable
               </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
             >
+              Physical
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+            >
+              Foodstuffs
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              E-books
               <span
-                class="Skeleton-skeleton-id"
+                class="MuiTypography-root-id MuiTypography-caption-id"
               >
-                ‌
+                Simple product
               </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+            >
+              Digital
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+            >
+              Standard
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
           >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Mugs
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id"
+              >
+                Simple product
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+            >
+              Physical
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+            >
+              Standard
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              Coffee
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+                Configurable
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
+              Physical
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
             >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
+              Standard
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              T-Shirt
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id"
+              >
+                Configurable
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+            >
+              Physical
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
+            >
+              Standard
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </form>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product list default 1`] = `
+exports[`Storyshots Views / Product types / Product types list loading 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -51145,20 +52257,21 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        Products
+        Product types
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
-          tabindex="0"
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
           type="button"
         >
           <span
             class="MuiButton-label-id"
           >
-            Add product 
+            Add product type 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -51181,84 +52294,6 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
     >
-      <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
-      >
-        <div
-          class="MuiTabs-flexContainer-id"
-        >
-          <div
-            class="MuiTabs-scroller-id MuiTabs-fixed-id"
-            role="tablist"
-            style="margin-bottom:0"
-          >
-            <div
-              class="MuiTabs-flexContainer-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      All Products
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Available
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Out Of Stock
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
       <table
         class="MuiTable-root-id"
       >
@@ -51269,32 +52304,22 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             class="MuiTableRow-root-id MuiTableRow-head-id"
           >
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textLeft-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-wideCell-id"
               scope="col"
             >
-              Name
+              Type Name
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-leftText-id"
               scope="col"
             >
               Type
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Published
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-leftText-id"
               scope="col"
             >
-              Price
+              Tax
             </th>
           </tr>
         </thead>
@@ -51306,7 +52331,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="5"
+              colspan="3"
             >
               <div
                 class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
@@ -51340,8 +52365,9 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                     </span>
                   </button>
                   <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
                     type="button"
                   >
                     <span
@@ -51369,403 +52395,34 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
           class="MuiTableBody-root-id"
         >
           <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+            class="MuiTableRow-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Gardner-Schultz
-            </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Coffee
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
             >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                Published
-              </div>
+                ‌
+              </span>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-leftText-id"
             >
-              $83.30
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              James, Martinez and Murray
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $68.27
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Curtis, Joyce and Turner
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $21.43
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Davis, Brown and Ray
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $62.76
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Gallegos Ltd
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $7.13
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Franklin Inc
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $48.82
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Williams-Taylor
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $27.34
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Riddle, Evans and Hicks
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $75.42
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Hebert-Sherman
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $86.62
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Carter and Sons
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $48.66
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
             </td>
           </tr>
         </tbody>
@@ -51775,31 +52432,23 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product list loading 1`] = `
+exports[`Storyshots Views / Products / Create product When loading 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id"
+      class="Container-md-id"
     >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Products
-      </h2>
       <div
-        class="ExtendedPageHeader-action-id"
+        class="ExtendedPageHeader-root-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiButton-label-id"
+            class="MuiIconButton-label-id"
           >
-            Add product 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -51807,551 +52456,657 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
               role="presentation"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
               <path
                 d="M0 0h24v24H0z"
                 fill="none"
               />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
             </svg>
           </span>
         </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Add product
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
       </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
       <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+        class="Grid-root-id Grid-default-id"
       >
-        <div
-          class="MuiTabs-flexContainer-id"
-        >
+        <div>
           <div
-            class="MuiTabs-scroller-id MuiTabs-fixed-id"
-            role="tablist"
-            style="margin-bottom:0"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="MuiTabs-flexContainer-id"
+              class="CardTitle-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      All Products
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                General information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductDetailsForm-root-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Available
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                    Name
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      disabled=""
+                      name="name"
+                      rows="5"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id"
+                style="width:100%"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                  Description
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                >
+                  <div
+                    class="MuiPrivateTextarea-root-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Out Of Stock
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textLeft-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Type
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Published
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textRight-id"
-              scope="col"
-            >
-              Price
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="5"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
-              >
-                <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                      disabled=""
+                      name="description"
+                      rows="1"
+                      style="height:19px"
+                    />
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  role="presentation"
-                  viewBox="0 0 24 24"
+                <p
+                  class="MuiFormHelperText-root-id"
                 >
-                  <path
-                    d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
-                  />
-                  <path
-                    d="M0 0h24v24H0z"
-                    fill="none"
-                  />
-                </svg>
+                  Select text to enable text-formatting tools.
+                </p>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="Skeleton-skeleton-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                ‌
+                Pricing
               </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list no data 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Products
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Add product 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
+              <div
+                class="CardTitle-toolbar-id"
               />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
-      >
-        <div
-          class="MuiTabs-flexContainer-id"
-        >
-          <div
-            class="MuiTabs-scroller-id MuiTabs-fixed-id"
-            role="tablist"
-            style="margin-bottom:0"
-          >
+            </div>
             <div
-              class="MuiTabs-flexContainer-id"
+              class="CardTitle-children-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <span
-                  class="MuiTab-wrapper-id"
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
                 >
                   <span
-                    class="MuiTab-labelContainer-id"
+                    class="MuiIconButton-label-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      All Products
-                    </span>
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="chargeTaxes"
+                      type="checkbox"
+                    />
                   </span>
                 </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
-              >
                 <span
-                  class="MuiTab-wrapper-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                  Charge taxes for this item
+                </span>
+              </label>
+            </div>
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductPricing-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                    for="price"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    Price
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                      disabled=""
+                      name="price"
+                      type="number"
+                      value=""
+                    />
+                    <div
+                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                     >
-                      Available
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                      <p
+                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                      >
+                        USD
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                Search Engine Preview
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
                   <span
-                    class="MuiTab-labelContainer-id"
+                    class="MuiButton-label-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Out Of Stock
-                    </span>
+                    Edit website SEO
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Add search engine title and description to make this product easier to find
+              </p>
             </div>
           </div>
         </div>
-      </div>
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textLeft-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Type
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Published
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textRight-id"
-              scope="col"
+            <div
+              class="CardTitle-root-id"
             >
-              Price
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="5"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Organize Product
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
                 <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                    Product Type
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
+                      disabled=""
+                      type="text"
+                      value=""
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
                       >
                         <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                          d="M7 10l5 5 5-5z"
                         />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Is it configurable?
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      No
+                    </div>
+                    <input
+                      name="hasVariants"
+                      type="hidden"
+                      value="false"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Category
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
+                      disabled=""
+                      type="text"
+                      value=""
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
                       >
                         <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                          d="M7 10l5 5 5-5z"
                         />
-                      </svg>
-                    </span>
-                  </button>
+                      </g>
+                    </svg>
+                  </div>
                 </div>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="MultiAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Collections
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Availability
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductAvailabilityForm-switchContainer-id"
+              >
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <span
+                    class="MuiSwitch-root-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <span
+                          class="MuiSwitch-icon-id"
+                        />
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          disabled=""
+                          name="available"
+                          type="checkbox"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiSwitch-bar-id"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    <div
+                      class="ControlledSwitch-label-id"
+                    >
+                      Published in storefront
+                    </div>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <tr
-            class="MuiTableRow-root-id"
+          <span
+            class="MuiButton-label-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="5"
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
             >
-              No products found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
+exports[`Storyshots Views / Products / Create product default 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id"
+      class="Container-md-id"
     >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Products
-      </h2>
       <div
-        class="ExtendedPageHeader-action-id"
+        class="ExtendedPageHeader-root-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiButton-label-id"
+            class="MuiIconButton-label-id"
           >
-            Add product 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -52359,782 +53114,490 @@ exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
               role="presentation"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
               <path
                 d="M0 0h24v24H0z"
                 fill="none"
               />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
             </svg>
           </span>
         </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Add product
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
       </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
       <div
-        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+        class="Grid-root-id Grid-default-id"
       >
-        <div
-          class="MuiTabs-flexContainer-id"
-        >
+        <div>
           <div
-            class="MuiTabs-scroller-id MuiTabs-fixed-id"
-            role="tablist"
-            style="margin-bottom:0"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="MuiTabs-flexContainer-id"
+              class="CardTitle-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      All Products
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                General information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductDetailsForm-root-id"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Available
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiTab-wrapper-id"
-                >
-                  <span
-                    class="MuiTab-labelContainer-id"
+                    Name
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Out Of Stock
-                    </span>
-                  </span>
-                </span>
-              </button>
-              <button
-                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-                role="tab"
-                tabindex="0"
-                type="button"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="name"
+                      rows="5"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id"
+                style="width:100%"
               >
-                <span
-                  class="MuiTab-wrapper-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <span
-                    class="MuiTab-labelContainer-id"
-                  >
-                    <span
-                      class="MuiTab-label-id FilterTab-tabLabel-id"
-                    >
-                      Custom Filter
-                    </span>
-                  </span>
-                </span>
-              </button>
+                  Description
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                >
+                  <div
+                    class="MuiPrivateTextarea-root-id"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                      name="description"
+                      rows="1"
+                      style="height:19px"
+                    />
+                  </div>
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id"
+                >
+                  Select text to enable text-formatting tools.
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="FilterChips-filterContainer-id"
-      >
-        <div
-          class="FilterChips-filterButton-id"
-        >
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
-          >
-            Gardner-Schultz
-          </p>
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-          </svg>
-        </div>
-        <div
-          class="FilterChips-filterButton-id"
-        >
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
-          >
-            Davis, Brown and Ray
-          </p>
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-          </svg>
-        </div>
-        <div
-          class="FilterChips-filterButton-id"
-        >
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
-          >
-            Franklin Inc
-          </p>
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-          </svg>
-        </div>
-        <div
-          class="FilterChips-filterButton-id FilterChips-addFilterButtonPrimary-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-          </svg>
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-addFilterText-id"
-          >
-            Add Filter
-          </p>
-        </div>
-      </div>
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            />
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textLeft-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Type
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+            <div
+              class="CardTitle-root-id"
             >
-              Published
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textRight-id"
-              scope="col"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
             >
-              Price
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="5"
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="chargeTaxes"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Charge taxes for this item
+                </span>
+              </label>
+            </div>
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="ProductPricing-root-id"
               >
                 <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                    for="price"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                    Price
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                      name="price"
+                      type="number"
+                      value=""
+                    />
+                    <div
+                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <p
+                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                       >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        USD
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Gardner-Schultz
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
+                Search Engine Preview
+              </span>
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="CardTitle-toolbar-id"
               >
-                Published
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit website SEO
+                  </span>
+                </button>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              $83.30
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Add search engine title and description to make this product easier to find
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              James, Martinez and Murray
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                Organize Product
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
-                Published
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Product Type
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value=""
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $68.27
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
               <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Curtis, Joyce and Turner
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $21.43
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Davis, Brown and Ray
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $62.76
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Gallegos Ltd
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $7.13
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Franklin Inc
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $48.82
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Williams-Taylor
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $27.34
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
-              <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Riddle, Evans and Hicks
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
-              >
-                Published
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Is it configurable?
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
+                  >
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
+                    >
+                      No
+                    </div>
+                    <input
+                      name="hasVariants"
+                      type="hidden"
+                      value="false"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $75.42
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
               <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Hebert-Sherman
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
-                Published
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Category
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value=""
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $86.62
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-            >
               <div
-                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
-              >
-                <img
-                  class="MuiAvatar-img-id"
-                  src="placeholder255x255.png"
-                />
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
-            >
-              Carter and Sons
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Coffee
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
               <div
-                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                class="MultiAutocompleteSelectField-container-id"
               >
-                Published
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Collections
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
-            >
-              $48.66
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product variant details when loaded data 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Extended Hard
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      />
-    </div>
-    <form>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -53144,7 +53607,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Variants
+                Availability
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -53156,54 +53619,200 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             <hr
               class="CardTitle-hr-id"
             />
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tbody
-                class="MuiTableBody-root-id"
+              <div
+                class="ProductAvailabilityForm-switchContainer-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                <label
+                  class="MuiFormControlLabel-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
+                  <span
+                    class="MuiSwitch-root-id"
                   >
-                    <div
-                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
-                  >
-                    Extended Hard
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <span
+                          class="MuiSwitch-icon-id"
+                        />
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="available"
+                          type="checkbox"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiSwitch-bar-id"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                   >
                     <div
-                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                      class="ControlledSwitch-label-id"
                     >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
-                      />
+                      Published in storefront
                     </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
-                  >
-                    Extended Soft
-                  </td>
-                </tr>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Products / Create product variant default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Add variant
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-inverted-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Variants
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <tbody
+                class="MuiTableBody-root-id"
+              >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                 >
@@ -53215,14 +53824,14 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     >
                       <img
                         class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
+                        src="placeholder255x255.png"
                       />
                     </div>
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
                   >
-                    Normal Hard
+                    Cordoba Oro
                   </td>
                 </tr>
                 <tr
@@ -53236,14 +53845,14 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     >
                       <img
                         class="MuiAvatar-img-id"
-                        src="placeholder60x60.png"
+                        src="placeholder255x255.png"
                       />
                     </div>
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
                   >
-                    Normal Soft
+                    silver
                   </td>
                 </tr>
               </tbody>
@@ -53282,56 +53891,10 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
                   <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Borders
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="portals"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
                   >
-                    Legacy
+                    Color
                   </label>
                   <div
                     aria-autocomplete="list"
@@ -53344,7 +53907,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       autocomplete="off"
                       class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
                       type="text"
-                      value="Auto Loan Account"
+                      value=""
                     />
                     <svg
                       aria-hidden="true"
@@ -53369,86 +53932,6 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
               />
             </div>
           </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Images
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Choose photos
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductVariantImages-root-id"
-              >
-                <div
-                  class="ProductVariantImages-imageContainer-id"
-                >
-                  <img
-                    class="ProductVariantImages-image-id"
-                    src="placeholder60x60.png"
-                  />
-                </div>
-                <div
-                  class="ProductVariantImages-imageContainer-id"
-                >
-                  <img
-                    class="ProductVariantImages-image-id"
-                    src="placeholder60x60.png"
-                  />
-                </div>
-                <div
-                  class="ProductVariantImages-imageContainer-id"
-                >
-                  <img
-                    class="ProductVariantImages-image-id"
-                    src="placeholder60x60.png"
-                  />
-                </div>
-                <div
-                  class="ProductVariantImages-imageContainer-id"
-                >
-                  <img
-                    class="ProductVariantImages-image-id"
-                    src="placeholder60x60.png"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -53481,8 +53964,8 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
                     <label
-                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
                       for="priceOverride"
                     >
                       Selling price override
@@ -53495,7 +53978,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                         class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
                         name="priceOverride"
                         type="number"
-                        value="100"
+                        value=""
                       />
                       <div
                         class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
@@ -53508,7 +53991,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       </div>
                     </div>
                     <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                      class="MuiFormHelperText-root-id"
                     >
                       Optional
                     </p>
@@ -53519,8 +54002,8 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
                     <label
-                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
                       for="costPrice"
                     >
                       Cost price override
@@ -53533,7 +54016,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                         class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
                         name="costPrice"
                         type="number"
-                        value="12"
+                        value=""
                       />
                       <div
                         class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
@@ -53546,7 +54029,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       </div>
                     </div>
                     <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                      class="MuiFormHelperText-root-id"
                     >
                       Optional
                     </p>
@@ -53555,9 +54038,6 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
               </div>
             </div>
           </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -53603,14 +54083,9 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                         class="MuiInputBase-input-id MuiInput-input-id"
                         name="quantity"
                         type="text"
-                        value="19"
+                        value="0"
                       />
                     </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
-                    >
-                      Allocated: 12
-                    </p>
                   </div>
                 </div>
                 <div>
@@ -53618,8 +54093,8 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
                     <label
-                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
                     >
                       SKU (Stock Keeping Unit)
                     </label>
@@ -53631,7 +54106,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                         class="MuiInputBase-input-id MuiInput-input-id"
                         name="sku"
                         type="text"
-                        value="1230959124123"
+                        value=""
                       />
                     </div>
                   </div>
@@ -53704,64 +54179,59 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             <span
               class="ConfirmButtonComponent-label-id"
             >
-              Save
+              Save variant
             </span>
           </span>
         </button>
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Products / Product variant details when loading data 1`] = `
+exports[`Storyshots Views / Products / Create product variant when loading data 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id"
+      class="Container-md-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
+      <div
+        class="ExtendedPageHeader-root-id"
       >
-        <span
-          class="MuiIconButton-label-id"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
+          <span
+            class="MuiIconButton-label-id"
           >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          style="width:10em"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          ‌
-        </span>
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      />
-    </div>
-    <form>
+          Add variant
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
       <div
         class="Grid-root-id Grid-inverted-id"
       >
@@ -53865,60 +54335,6 @@ exports[`Storyshots Views / Products / Product variant details when loading data
               </span>
             </div>
           </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Images
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Choose photos
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductVariantImages-root-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                >
-                  ‌
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -53968,13 +54384,21 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                         type="number"
                         value=""
                       />
-                      <span />
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id"
-                    >
-                      Optional
-                    </p>
+                      <div
+                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                      >
+                        <p
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          USD
+                        </p>
+                      </div>
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id"
+                    >
+                      Optional
+                    </p>
                   </div>
                 </div>
                 <div>
@@ -53999,7 +54423,15 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                         type="number"
                         value=""
                       />
-                      <span />
+                      <div
+                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                      >
+                        <p
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          USD
+                        </p>
+                      </div>
                     </div>
                     <p
                       class="MuiFormHelperText-root-id"
@@ -54011,9 +54443,6 @@ exports[`Storyshots Views / Products / Product variant details when loading data
               </div>
             </div>
           </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -54046,8 +54475,8 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                     class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
                     <label
-                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
+                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                      data-shrink="true"
                     >
                       Inventory
                     </label>
@@ -54060,7 +54489,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                         disabled=""
                         name="quantity"
                         type="text"
-                        value=""
+                        value="0"
                       />
                     </div>
                   </div>
@@ -54084,6 +54513,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                         disabled=""
                         name="sku"
                         type="text"
+                        value=""
                       />
                     </div>
                   </div>
@@ -54156,17 +54586,17 @@ exports[`Storyshots Views / Products / Product variant details when loading data
             <span
               class="ConfirmButtonComponent-label-id"
             >
-              Save
+              Save variant
             </span>
           </span>
         </button>
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Site settings / Page default 1`] = `
+exports[`Storyshots Views / Products / Create product variant with errors 1`] = `
 <div>
   <form>
     <div
@@ -54175,291 +54605,17 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
       <div
         class="ExtendedPageHeader-root-id"
       >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          General Information
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id"
-        >
-          Site Settings
-        </h2>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              General Information
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                data-shrink="true"
-              >
-                Name of your store
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiInput-input-id"
-                  name="name"
-                  type="text"
-                  value="Saleor e-commerce"
-                />
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
-              >
-                Name of your store is shown on tab in web browser
-              </p>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                data-shrink="true"
-              >
-                URL of your online store
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiInput-input-id"
-                  name="domain"
-                  type="text"
-                  value="localhost:8000"
-                />
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                data-shrink="true"
-              >
-                Store Description
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiInput-input-id"
-                  name="description"
-                  type="text"
-                  value="Lorem ipsum dolor sit amet"
-                />
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
-              >
-                Store description is shown on taskbar after your store name
-              </p>
-            </div>
-          </div>
-        </div>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id"
-        >
-          Authentication keys
-        </h2>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              Authentication Keys
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add key
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Authentication Type
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Key
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Facebook
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  n1n62jkn2123:123n
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            class="MuiIconButton-label-id"
           >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
-            >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
-              >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              class="MuiSvgIcon-root-id"
               focusable="false"
               role="presentation"
               viewBox="0 0 24 24"
@@ -54469,35 +54625,15 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
                 fill="none"
               />
               <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
               />
             </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
-            >
-              Save
-            </span>
           </span>
         </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Site settings / Page form errors 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          General Information
+          Add variant
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
@@ -54506,234 +54642,340 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
       <div
         class="Grid-root-id Grid-inverted-id"
       >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id"
-        >
-          Site Settings
-        </h2>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              General Information
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
+        <div>
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              class="CardTitle-root-id"
             >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                data-shrink="true"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Name of your store
-              </label>
+                Variants
+              </span>
               <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-              >
-                <input
-                  aria-invalid="true"
-                  class="MuiInputBase-input-id MuiInput-input-id"
-                  name="name"
-                  type="text"
-                  value="Saleor e-commerce"
-                />
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-              >
-                Generic form error
-              </p>
+                class="CardTitle-toolbar-id"
+              />
             </div>
             <div
-              class="FormSpacer-spacer-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
+            <table
+              class="MuiTable-root-id"
+            >
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                  >
+                    Cordoba Oro
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder255x255.png"
+                      />
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                  >
+                    silver
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductVariantAttributes-card-id"
+          >
             <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              class="CardTitle-root-id"
             >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                data-shrink="true"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                URL of your online store
-              </label>
+                General Information
+              </span>
               <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-              >
-                <input
-                  aria-invalid="true"
-                  class="MuiInputBase-input-id MuiInput-input-id"
-                  name="domain"
-                  type="text"
-                  value="localhost:8000"
-                />
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-              >
-                Generic form error
-              </p>
+                class="CardTitle-toolbar-id"
+              />
             </div>
             <div
-              class="FormSpacer-spacer-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              class="MuiCardContent-root-id ProductVariantAttributes-grid-id"
             >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                data-shrink="true"
-              >
-                Store Description
-              </label>
               <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <input
-                  aria-invalid="true"
-                  class="MuiInputBase-input-id MuiInput-input-id"
-                  name="description"
-                  type="text"
-                  value="Lorem ipsum dolor sit amet"
-                />
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Color
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value=""
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
               </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-              >
-                Generic form error
-              </p>
+              <div
+                class="FormSpacer-spacer-id"
+              />
             </div>
           </div>
-        </div>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id"
-        >
-          Authentication keys
-        </h2>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              Authentication Keys
-            </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
+              <div
+                class="ProductVariantPrice-grid-id"
               >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add key
-                </span>
-              </button>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                      for="priceOverride"
+                    >
+                      Selling price override
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                        name="priceOverride"
+                        type="number"
+                        value=""
+                      />
+                      <div
+                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                      >
+                        <p
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          USD
+                        </p>
+                      </div>
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic error
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                      for="costPrice"
+                    >
+                      Cost price override
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                        name="costPrice"
+                        type="number"
+                        value=""
+                      />
+                      <div
+                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                      >
+                        <p
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          USD
+                        </p>
+                      </div>
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic error
+                    </p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Authentication Type
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Key
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                Stock
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              <div
+                class="ProductVariantStock-grid-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Facebook
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  n1n62jkn2123:123n
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                      data-shrink="true"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                      Inventory
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id"
+                        name="quantity"
+                        type="text"
+                        value="0"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      SKU (Stock Keeping Unit)
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInputBase-input-id MuiInput-input-id"
+                        name="sku"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic error
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -54799,7 +55041,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
             <span
               class="ConfirmButtonComponent-label-id"
             >
-              Save
+              Save variant
             </span>
           </span>
         </button>
@@ -54809,7 +55051,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Site settings / Page loading 1`] = `
+exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`] = `
 <div>
   <form>
     <div
@@ -54818,499 +55060,324 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
       <div
         class="ExtendedPageHeader-root-id"
       >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          General Information
+          Ergonomic Plastic Bacon
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
         />
       </div>
       <div
-        class="Grid-root-id Grid-inverted-id"
+        class="Grid-root-id Grid-default-id"
       >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id"
-        >
-          Site Settings
-        </h2>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
+        <div>
           <div
-            class="CardTitle-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            <div
+              class="CardTitle-root-id"
             >
-              General Information
-            </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
             <div
-              class="CardTitle-toolbar-id"
+              class="CardTitle-children-id"
             />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductDetailsForm-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Name
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="name"
+                      rows="5"
+                      type="text"
+                      value="Ergonomic Plastic Bacon"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id"
+                style="width:100%"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Description
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                >
+                  <div
+                    class="MuiPrivateTextarea-root-id"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    >
+                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
+                    </textarea>
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                      name="description"
+                      rows="1"
+                      style="height:19px"
+                    >
+                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
+                    </textarea>
+                  </div>
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                >
+                  Select text to enable text-formatting tools.
+                </p>
+              </div>
+            </div>
           </div>
           <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
+            class="CardSpacer-spacer-id"
           />
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
           >
             <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              class="CardTitle-root-id"
             >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                data-shrink="false"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Name of your store
-              </label>
+                Images
+              </span>
               <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                class="CardTitle-toolbar-id"
               >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Upload image
+                  </span>
+                </button>
                 <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                  disabled=""
-                  name="name"
-                  type="text"
-                  value=""
+                  class="ProductImages-fileField-id"
+                  id="fileUpload"
+                  type="file"
                 />
               </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id"
-              >
-                Name of your store is shown on tab in web browser
-              </p>
             </div>
             <div
-              class="FormSpacer-spacer-id"
+              class="CardTitle-children-id"
             />
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                data-shrink="false"
-              >
-                URL of your online store
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                  disabled=""
-                  name="domain"
-                  type="text"
-                  value=""
-                />
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
+            <hr
+              class="CardTitle-hr-id"
             />
             <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              class="ProductImages-imageGridContainer-id"
             >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                data-shrink="false"
-              >
-                Store Description
-              </label>
               <div
-                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                  disabled=""
-                  name="description"
-                  type="text"
-                  value=""
-                />
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id"
-              >
-                Store description is shown on taskbar after your store name
-              </p>
-            </div>
-          </div>
-        </div>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id"
-        >
-          Authentication keys
-        </h2>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-            >
-              Authentication Keys
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add key
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Authentication Type
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Key
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
+                class="ImageUpload-photosIconContainer-id ProductImages-imageUpload-id"
+                tabindex="0"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <div
+                  class="ProductImages-imageUploadIcon-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
+                  <input
+                    autocomplete="off"
+                    class="ImageUpload-fileField-id"
+                    multiple=""
+                    style="display:none"
+                    tabindex="-1"
+                    type="file"
+                  />
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
                   >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
+                    <defs>
+                      <path
+                        d="M24 24H0V0h24v24z"
+                        id="a"
+                      />
+                    </defs>
+                    <path
+                      d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"
+                    />
+                  </svg>
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                   >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
+                    Drop here to upload
+                  </p>
+                </div>
+              </div>
+              <div
+                class="MuiCardContent-root-id"
+              >
+                <div
+                  class="ProductImages-root-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                  <div
+                    class="ImageTile-imageContainer-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <div
+                      class="ImageTile-imageOverlay-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
-            >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
-              >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
-            >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff member details default 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Jacob Smith
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Staff Member Information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="StaffProperties-root-id"
-              >
-                <div>
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
                   <div
-                    class="StaffProperties-avatar-id"
+                    class="ImageTile-imageContainer-id"
                   >
-                    <p
-                      class="MuiTypography-root-id MuiTypography-body1-id StaffProperties-avatarText-id"
+                    <div
+                      class="ImageTile-imageOverlay-id"
                     >
-                      JS
-                    </p>
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
                   </div>
-                </div>
-                <div>
                   <div
-                    class="StaffProperties-propGrid-id"
+                    class="ImageTile-imageContainer-id"
                   >
                     <div
-                      class="StaffProperties-prop-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                          data-shrink="true"
-                        >
-                          First Name
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="firstName"
-                            type="text"
-                            value="Jacob"
-                          />
-                        </div>
-                      </div>
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
                     </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                  >
                     <div
-                      class="StaffProperties-prop-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                          data-shrink="true"
-                        >
-                          Last Name
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="lastName"
-                            type="text"
-                            value="Smith"
-                          />
-                        </div>
-                      </div>
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
                     </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
+                  >
                     <div
-                      class="StaffProperties-prop-id"
+                      class="ImageTile-imageOverlay-id"
                     >
                       <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                          data-shrink="true"
-                        >
-                          E-mail
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="email"
-                            type="text"
-                            value="admin@example.com"
-                          />
-                        </div>
-                      </div>
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
                     </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -55320,7 +55387,7 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Permissions
+                Pricing
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -55328,93 +55395,9 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
             </div>
             <div
               class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Expand or restrict user's permissions to access certain part of saleor system.
-              </p>
-              <div
-                class="StaffPermissions-checkboxContainer-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                        />
-                      </svg>
-                      <input
-                        checked=""
-                        class="MuiPrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="hasFullAccess"
-                        type="checkbox"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    User has full access to the store
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-              >
-                Account Status
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                If you want to disable this account uncheck the box below
-              </p>
-              <label
-                class="MuiFormControlLabel-root-id"
+              <label
+                class="MuiFormControlLabel-root-id"
               >
                 <span
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
@@ -55437,7 +55420,7 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
                       checked=""
                       class="MuiPrivateSwitchBase-input-id"
                       data-indeterminate="false"
-                      name="isActive"
+                      name="chargeTaxes"
                       type="checkbox"
                     />
                   </span>
@@ -55445,142 +55428,56 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                 >
-                  User is active
+                  Charge taxes for this item
                 </span>
               </label>
             </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SaveButtonBar-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
-        <div
-          class="SaveButtonBar-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
+            <hr
+              class="CardTitle-hr-id"
+            />
             <div
-              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
-              role="progressbar"
-              style="width:24px;height:24px"
+              class="MuiCardContent-root-id"
             >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
+              <div
+                class="ProductPricing-root-id"
               >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                    for="price"
+                  >
+                    Price
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                      name="price"
+                      type="number"
+                      value="339.39"
+                    />
+                    <div
+                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                    >
+                      <p
+                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                      >
+                        NZD
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-              />
-            </svg>
-            <span
-              class="ConfirmButtonComponent-label-id"
-            >
-              Save
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        />
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -55590,11 +55487,34 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Staff Member Information
+                Variants
               </span>
               <div
                 class="CardTitle-toolbar-id"
-              />
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit attributes
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add variant
+                  </span>
+                </button>
+              </div>
             </div>
             <div
               class="CardTitle-children-id"
@@ -55605,101 +55525,96 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <div
-                class="StaffProperties-root-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <div>
-                  <div
-                    class="StaffProperties-avatar-id"
+                Use variants for products that come in a variety of version for example different sizes or colors
+              </p>
+            </div>
+            <table
+              class="MuiTable-root-id ProductVariants-denseTable-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-textLeft-id"
+                    scope="col"
                   >
-                    <p
-                      class="MuiTypography-root-id MuiTypography-body1-id StaffProperties-avatarText-id"
-                    />
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="StaffProperties-propGrid-id"
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Status
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-textLeft-id ProductVariants-link-id"
+                  >
+                    Cordoba Oro
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
                   >
                     <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                          data-shrink="false"
-                        >
-                          First Name
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="firstName"
-                            type="text"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
-                      <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                          data-shrink="false"
-                        >
-                          Last Name
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="lastName"
-                            type="text"
-                          />
-                        </div>
-                      </div>
+                      Available
                     </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    87192-94370
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-textLeft-id ProductVariants-link-id"
+                  >
+                    silver
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
                     <div
-                      class="StaffProperties-prop-id"
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                     >
-                      <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                          data-shrink="false"
-                        >
-                          E-mail
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="email"
-                            type="text"
-                          />
-                        </div>
-                      </div>
+                      Available
                     </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    69055-15190
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-        </div>
-        <div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -55709,11 +55624,23 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Permissions
+                Search Engine Preview
               </span>
               <div
                 class="CardTitle-toolbar-id"
-              />
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit website SEO
+                  </span>
+                </button>
+              </div>
             </div>
             <div
               class="CardTitle-children-id"
@@ -55727,101 +55654,62 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                Expand or restrict user's permissions to access certain part of saleor system.
+                Add search engine title and description to make this product easier to find
               </p>
-              <div
-                class="StaffPermissions-checkboxContainer-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        name="hasFullAccess"
-                        type="checkbox"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    User has full access to the store
-                  </span>
-                </label>
-              </div>
             </div>
-            <hr
-              class="StaffPermissions-hr-id"
-            />
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
+          >
             <div
-              class="MuiCardContent-root-id"
+              class="CardTitle-root-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
+                Organize Product
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Product Type
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
                     <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
                       disabled=""
-                      name="IMPERSONATE_USERS"
-                      type="checkbox"
+                      type="text"
+                      value="Versatile"
                     />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Impersonate customers
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -55829,143 +55717,92 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_DISCOUNTS"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage sales and vouchers
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  Is it configurable?
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
+                      Yes
+                    </div>
                     <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_MENUS"
-                      type="checkbox"
+                      name="hasVariants"
+                      type="hidden"
+                      value="true"
                     />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage navigation
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        d="M7 10l5 5 5-5z"
                       />
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_ORDERS"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage orders
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                  </div>
+                </div>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id ProductOrganization-cardSubtitle-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
+                Attributes
+              </p>
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Borders
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
                     <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_PAGES"
-                      type="checkbox"
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="portals"
                     />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage pages
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -55973,35 +55810,45 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_PRODUCTS"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage products
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Legacy
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="Auto Loan Account"
+                    />
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -56009,35 +55856,48 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_SETTINGS"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage settings
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Category
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="Apparel"
+                    />
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -56045,71 +55905,69 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_SHIPPING"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage shipping
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="MultiAutocompleteSelectField-container-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    Collections
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <div
+                      class="MuiChip-root-id MuiChip-deletable-id MultiAutocompleteSelectField-chip-id"
+                      role="button"
+                      tabindex="-1"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
+                      <span
+                        class="MuiChip-label-id"
+                      >
+                        Winter sale
+                      </span>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiChip-deleteIcon-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                        />
+                      </svg>
+                    </div>
                     <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_STAFF"
-                      type="checkbox"
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
                     />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage staff
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -56117,25 +55975,17 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
                     </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="MANAGE_USERS"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  Manage customers
-                </span>
-              </label>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -56150,7 +56000,7 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Account Status
+                Availability
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -56165,47 +56015,68 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                If you want to disable this account uncheck the box below
-              </p>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              <div
+                class="ProductAvailabilityForm-expandedSwitchContainer-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
-                  tabindex="-1"
+                <label
+                  class="MuiFormControlLabel-root-id"
                 >
                   <span
-                    class="MuiIconButton-label-id"
+                    class="MuiSwitch-root-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                     >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
-                    <input
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isActive"
-                      type="checkbox"
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <span
+                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
+                        />
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="available"
+                          type="checkbox"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiSwitch-bar-id"
                     />
                   </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                  >
+                    <div
+                      class="ControlledSwitch-label-id"
+                    >
+                      Published in storefront
+                    </div>
+                  </span>
+                </label>
+              </div>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id ProductAvailabilityForm-date-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  User is active
-                </span>
-              </label>
+                  Publish product on
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="publicationDate"
+                    type="date"
+                    value="2018-08-25T18:45:54.125Z"
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -56213,17 +56084,6 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
       <div
         class="SaveButtonBar-root-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
         <div
           class="SaveButtonBar-spacer-id"
         />
@@ -56294,7 +56154,7 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
+exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
 <div>
   <form>
     <div
@@ -56331,7 +56191,12 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          Jacob Smith
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
@@ -56350,7 +56215,7 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Staff Member Information
+                General information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -56366,107 +56231,88 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
               class="MuiCardContent-root-id"
             >
               <div
-                class="StaffProperties-root-id"
+                class="ProductDetailsForm-root-id"
               >
-                <div>
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Name
+                  </label>
                   <div
-                    class="StaffProperties-avatar-id"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <p
-                      class="MuiTypography-root-id MuiTypography-body1-id StaffProperties-avatarText-id"
-                    >
-                      JS
-                    </p>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      disabled=""
+                      name="name"
+                      rows="5"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
-                <div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id"
+                style="width:100%"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Description
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                >
                   <div
-                    class="StaffProperties-propGrid-id"
+                    class="MuiPrivateTextarea-root-id"
                   >
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                          data-shrink="true"
-                        >
-                          First Name
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="firstName"
-                            type="text"
-                            value="Jacob"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                          data-shrink="true"
-                        >
-                          Last Name
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="lastName"
-                            type="text"
-                            value="Smith"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                          data-shrink="true"
-                        >
-                          E-mail
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiInput-input-id"
-                            name="email"
-                            type="text"
-                            value="admin@example.com"
-                          />
-                        </div>
-                      </div>
-                    </div>
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                      disabled=""
+                      name="description"
+                      rows="1"
+                      style="height:19px"
+                    />
                   </div>
                 </div>
+                <p
+                  class="MuiFormHelperText-root-id"
+                >
+                  Select text to enable text-formatting tools.
+                </p>
               </div>
             </div>
           </div>
-        </div>
-        <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
           >
             <div
               class="CardTitle-root-id"
@@ -56474,11 +56320,28 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Permissions
+                Images
               </span>
               <div
                 class="CardTitle-toolbar-id"
-              />
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Upload image
+                  </span>
+                </button>
+                <input
+                  class="ProductImages-fileField-id"
+                  id="fileUpload"
+                  type="file"
+                />
+              </div>
             </div>
             <div
               class="CardTitle-children-id"
@@ -56487,63 +56350,53 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="ProductImages-imageGridContainer-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Expand or restrict user's permissions to access certain part of saleor system.
-              </p>
               <div
-                class="StaffPermissions-checkboxContainer-id"
+                class="MuiCardContent-root-id"
               >
-                <label
-                  class="MuiFormControlLabel-root-id"
+                <div
+                  class="ProductImages-root-id"
                 >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="hasFullAccess"
-                        type="checkbox"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                  <div
+                    class="ProductImages-imageContainer-id"
                   >
-                    User has full access to the store
-                  </span>
-                </label>
+                    <img
+                      class="ProductImages-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
-            <hr
-              class="StaffPermissions-hr-id"
-            />
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
             <div
-              class="MuiCardContent-root-id"
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
                 <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
                 >
                   <span
                     class="MuiIconButton-label-id"
@@ -56562,166 +56415,235 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                     <input
                       class="MuiPrivateSwitchBase-input-id"
                       data-indeterminate="false"
-                      name="IMPERSONATE_USERS"
+                      disabled=""
+                      name="chargeTaxes"
                       type="checkbox"
                     />
                   </span>
                 </span>
                 <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  Impersonate customers
+                  Charge taxes for this item
                 </span>
               </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+            </div>
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductPricing-root-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                    for="price"
+                  >
+                    Price
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
                     <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_DISCOUNTS"
-                      type="checkbox"
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                      disabled=""
+                      name="price"
+                      type="number"
+                      value=""
                     />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage sales and vouchers
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+                    <span />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                Inventory
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductStock-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    SKU (Stock Keeping Unit)
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
                     <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_MENUS"
-                      type="checkbox"
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      disabled=""
+                      name="sku"
+                      type="text"
+                      value=""
                     />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage navigation
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Inventory
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
                     <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_ORDERS"
-                      type="checkbox"
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      disabled=""
+                      name="stockQuantity"
+                      type="number"
+                      value="0"
                     />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage orders
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id MuiFormHelperText-filled-id"
+                  >
+                    Allocated: 
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                Search Engine Preview
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
                   <span
-                    class="MuiIconButton-label-id"
+                    class="MuiButton-label-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_PAGES"
-                      type="checkbox"
-                    />
+                    Edit website SEO
                   </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage pages
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                Add search engine title and description to make this product easier to find
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Organize Product
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Product Type
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
+                      disabled=""
+                      type="text"
+                      value=""
+                    />
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -56729,104 +56651,94 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
                     </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_PRODUCTS"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage products
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  Is it configurable?
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
+                      No
+                    </div>
                     <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_SETTINGS"
-                      type="checkbox"
+                      name="hasVariants"
+                      type="hidden"
+                      value="false"
                     />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage settings
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                       focusable="false"
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        d="M7 10l5 5 5-5z"
                       />
                     </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_SHIPPING"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage shipping
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
+                  >
+                    Category
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
+                      disabled=""
+                      type="text"
+                      value=""
+                    />
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -56834,34 +56746,47 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
                     </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_STAFF"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage staff
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="MultiAutocompleteSelectField-container-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Collections
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                    />
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root-id"
@@ -56869,25 +56794,17 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
                       role="presentation"
                       viewBox="0 0 24 24"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
                     </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="MANAGE_USERS"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Manage customers
-                </span>
-              </label>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -56902,7 +56819,7 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Account Status
+                Availability
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -56917,46 +56834,48 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                If you want to disable this account uncheck the box below
-              </p>
-              <label
-                class="MuiFormControlLabel-root-id"
+              <div
+                class="ProductAvailabilityForm-switchContainer-id"
               >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
                   <span
-                    class="MuiIconButton-label-id"
+                    class="MuiSwitch-root-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
+                    <span
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
+                      tabindex="-1"
                     >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <span
+                          class="MuiSwitch-icon-id"
+                        />
+                        <input
+                          class="MuiPrivateSwitchBase-input-id"
+                          disabled=""
+                          name="available"
+                          type="checkbox"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiSwitch-bar-id"
                     />
                   </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  User is active
-                </span>
-              </label>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    <div
+                      class="ControlledSwitch-label-id"
+                    >
+                      Published in storefront
+                    </div>
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
         </div>
@@ -56964,17 +56883,6 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
       <div
         class="SaveButtonBar-root-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
         <div
           class="SaveButtonBar-spacer-id"
         />
@@ -57045,31 +56953,23 @@ exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Staff / Staff members default 1`] = `
+exports[`Storyshots Views / Products / Product edit when product has no images 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id"
+      class="Container-md-id"
     >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Staff members
-      </h2>
       <div
-        class="ExtendedPageHeader-action-id"
+        class="ExtendedPageHeader-root-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiButton-label-id"
+            class="MuiIconButton-label-id"
           >
-            Add staff member
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -57077,697 +56977,998 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
               role="presentation"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
               <path
                 d="M0 0h24v24H0z"
                 fill="none"
               />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
             </svg>
           </span>
         </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Ergonomic Plastic Bacon
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
       </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="Grid-root-id Grid-default-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id StaffList-wideColumn-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+            <div
+              class="CardTitle-root-id"
             >
-              Email Address
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="ProductDetailsForm-root-id"
               >
                 <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id"
-                    tabindex="0"
-                    type="button"
+                    Name
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="name"
+                      rows="5"
+                      type="text"
+                      value="Ergonomic Plastic Bacon"
+                    />
+                  </div>
                 </div>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
               <div
-                class="StaffList-avatar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id"
+                style="width:100%"
               >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Description
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
+                >
+                  <div
+                    class="MuiPrivateTextarea-root-id"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    >
+                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
+                    </textarea>
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                      name="description"
+                      rows="1"
+                      style="height:19px"
+                    >
+                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
+                    </textarea>
+                  </div>
+                </div>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
                 >
-                  CC
+                  Select text to enable text-formatting tools.
                 </p>
               </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Chris Cooper
-              </p>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
               <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Active
+                Images
               </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
               <div
-                class="StaffList-avatar-id"
+                class="CardTitle-toolbar-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  JS
-                </p>
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Upload image
+                  </span>
+                </button>
+                <input
+                  class="ProductImages-fileField-id"
+                  id="fileUpload"
+                  type="file"
+                />
               </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="ProductImages-imageGridContainer-id"
+            >
+              <div
+                class="ImageUpload-photosIconContainer-id"
+                tabindex="0"
               >
-                Jacob Smith
-              </p>
+                <div
+                  class=""
+                >
+                  <input
+                    autocomplete="off"
+                    class="ImageUpload-fileField-id"
+                    multiple=""
+                    style="display:none"
+                    tabindex="-1"
+                    type="file"
+                  />
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <defs>
+                      <path
+                        d="M24 24H0V0h24v24z"
+                        id="a"
+                      />
+                    </defs>
+                    <path
+                      d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"
+                    />
+                  </svg>
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
+                  >
+                    Drop here to upload
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
               <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Inactive
+                Pricing
               </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
             >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="chargeTaxes"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Charge taxes for this item
+                </span>
+              </label>
+            </div>
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
-                class="StaffList-avatar-id"
+                class="ProductPricing-root-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  JS
-                </p>
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                    for="price"
+                  >
+                    Price
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                      name="price"
+                      type="number"
+                      value="339.39"
+                    />
+                    <div
+                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                    >
+                      <p
+                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                      >
+                        NZD
+                      </p>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </p>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
               <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Active
+                Variants
               </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
               <div
-                class="StaffList-avatar-id"
+                class="CardTitle-toolbar-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  JS
-                </p>
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit attributes
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add variant
+                  </span>
+                </button>
               </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
               <p
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                Jacob Smith
+                Use variants for products that come in a variety of version for example different sizes or colors
               </p>
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
-              >
-                Active
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            </div>
+            <table
+              class="MuiTable-root-id ProductVariants-denseTable-id"
             >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <div
-                class="StaffList-avatar-id"
+              <thead
+                class="MuiTableHead-root-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  JS
-                </p>
-              </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </p>
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-textLeft-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Status
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                Active
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-textLeft-id ProductVariants-link-id"
+                  >
+                    Cordoba Oro
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <div
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                    >
+                      Available
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    87192-94370
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-textLeft-id ProductVariants-link-id"
+                  >
+                    silver
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <div
+                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+                    >
+                      Available
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    69055-15190
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="StaffList-avatar-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
-                >
-                  JS
-                </p>
-              </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </p>
               <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Active
+                Search Engine Preview
               </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
               <div
-                class="StaffList-avatar-id"
+                class="CardTitle-toolbar-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  JS
-                </p>
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Edit website SEO
+                  </span>
+                </button>
               </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
               <p
                 class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                Jacob Smith
+                Add search engine title and description to make this product easier to find
               </p>
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
-              >
-                Inactive
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <div
-                class="StaffList-avatar-id"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
-                >
-                  JS
-                </p>
-              </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </p>
               <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Active
+                Organize Product
               </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
-                class="StaffList-avatar-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  JS
-                </p>
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Product Type
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
+                      disabled=""
+                      type="text"
+                      value="Versatile"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
               </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </p>
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
-              >
-                Active
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
               <div
-                class="StaffList-avatar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  JS
-                </p>
+                  Is it configurable?
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
+                  >
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
+                    >
+                      Yes
+                    </div>
+                    <input
+                      name="hasVariants"
+                      type="hidden"
+                      value="true"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
               <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id MuiTypography-body1-id ProductOrganization-cardSubtitle-id"
               >
-                Jacob Smith
+                Attributes
               </p>
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
-              >
-                Inactive
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
               <div
-                class="StaffList-avatar-id"
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  JS
-                </p>
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Borders
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="portals"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
               </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </p>
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
-              >
-                Inactive
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
               <div
-                class="StaffList-avatar-id"
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  JS
-                </p>
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Legacy
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="Auto Loan Account"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
               </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jacob Smith
-              </p>
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
               >
-                Active
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              admin@example.com
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Staff members
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Add staff member
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Category
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="Apparel"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
               />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
+              <hr
+                class="ProductOrganization-hr-id"
               />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <table
-        class="MuiTable-root-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id StaffList-wideColumn-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Email Address
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
-            >
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="MultiAutocompleteSelectField-container-id"
               >
                 <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    Collections
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <div
+                      class="MuiChip-root-id MuiChip-deletable-id MultiAutocompleteSelectField-chip-id"
+                      role="button"
+                      tabindex="-1"
                     >
+                      <span
+                        class="MuiChip-label-id"
+                      >
+                        Winter sale
+                      </span>
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
+                        class="MuiSvgIcon-root-id MuiChip-deleteIcon-id"
                         focusable="false"
                         role="presentation"
                         viewBox="0 0 24 24"
                       >
                         <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                          d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
                         />
                       </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
+                    </div>
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
+                      <g
+                        style="fill-rule:evenodd"
                       >
                         <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                          d="M7 10l5 5 5-5z"
                         />
-                      </svg>
-                    </span>
-                  </button>
+                      </g>
+                    </svg>
+                  </div>
                 </div>
               </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <div
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Availability
+              </span>
               <div
-                class="StaffList-avatar-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductAvailabilityForm-expandedSwitchContainer-id"
               >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
-                />
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <span
+                    class="MuiSwitch-root-id"
+                  >
+                    <span
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <span
+                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
+                        />
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="available"
+                          type="checkbox"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      class="MuiSwitch-bar-id"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                  >
+                    <div
+                      class="ControlledSwitch-label-id"
+                    >
+                      Published in storefront
+                    </div>
+                  </span>
+                </label>
               </div>
-              <p
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id ProductAvailabilityForm-date-id"
               >
-                <span
-                  class="Skeleton-skeleton-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  ‌
-                </span>
-              </p>
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
+                  Publish product on
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  ‌
-                </span>
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="publicationDate"
+                    type="date"
+                    value="2018-08-25T18:45:54.125Z"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Taxes / Country List default 1`] = `
+exports[`Storyshots Views / Products / Product edit when product has no variants 1`] = `
 <div>
   <form>
     <div
@@ -57776,10 +57977,35 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
       <div
         class="ExtendedPageHeader-root-id"
       >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          Taxes
+          Ergonomic Plastic Bacon
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
@@ -57792,577 +58018,510 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <table
-              class="MuiTable-root-id"
+            <div
+              class="CardTitle-root-id"
             >
-              <thead
-                class="MuiTableHead-root-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Country Code
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Country Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
-                    scope="col"
-                  >
-                    Reduced Tax Rates
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
+                General information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductDetailsForm-root-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    AT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    Austria
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                    Name
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="name"
+                      rows="5"
+                      type="text"
+                      value="Ergonomic Plastic Bacon"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id"
+                style="width:100%"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    BE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Belgia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                  Description
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    BG
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Bułgaria
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  <div
+                    class="MuiPrivateTextarea-root-id"
                   >
-                    1
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    >
+                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
+                    </textarea>
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                      name="description"
+                      rows="1"
+                      style="height:19px"
+                    >
+                      Omnis rerum ea. Fugit dignissimos modi est rerum. Qui corrupti expedita et. Dolorem dolorum illo doloremque. Officia perspiciatis facilis ab maxime voluptatem eligendi ipsam. Quisquam impedit repudiandae eos. Id sit dolores adipisci qui omnis dolores qui. Illo deleniti mollitia perspiciatis.
+                    </textarea>
+                  </div>
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  Select text to enable text-formatting tools.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Images
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
                   >
-                    CY
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    Upload image
+                  </span>
+                </button>
+                <input
+                  class="ProductImages-fileField-id"
+                  id="fileUpload"
+                  type="file"
+                />
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="ProductImages-imageGridContainer-id"
+            >
+              <div
+                class="ImageUpload-photosIconContainer-id ProductImages-imageUpload-id"
+                tabindex="0"
+              >
+                <div
+                  class="ProductImages-imageUploadIcon-id"
+                >
+                  <input
+                    autocomplete="off"
+                    class="ImageUpload-fileField-id"
+                    multiple=""
+                    style="display:none"
+                    tabindex="-1"
+                    type="file"
+                  />
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
                   >
-                    Cypr
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                    <defs>
+                      <path
+                        d="M24 24H0V0h24v24z"
+                        id="a"
+                      />
+                    </defs>
+                    <path
+                      d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"
+                    />
+                  </svg>
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                   >
-                    11
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                    Drop here to upload
+                  </p>
+                </div>
+              </div>
+              <div
+                class="MuiCardContent-root-id"
+              >
+                <div
+                  class="ProductImages-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    CZ
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <div
+                    class="ImageTile-imageContainer-id"
                   >
-                    Czechy
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
                   >
-                    11
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
                   >
-                    DE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
                   >
-                    Niemcy
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                  <div
+                    class="ImageTile-imageContainer-id"
                   >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                    <div
+                      class="ImageTile-imageOverlay-id"
+                    >
+                      <div
+                        class="ImageTile-imageOverlayToolbar-id"
+                      />
+                    </div>
+                    <img
+                      alt="Id sit dolores adipisci"
+                      class="ImageTile-image-id"
+                      src="placeholder255x255.png"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    DK
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="chargeTaxes"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Charge taxes for this item
+                </span>
+              </label>
+            </div>
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductPricing-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                    for="price"
                   >
-                    Dania
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                    Price
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
                   >
-                    0
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                      name="price"
+                      type="number"
+                      value="339.39"
+                    />
+                    <div
+                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                    >
+                      <p
+                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                      >
+                        NZD
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Inventory
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductStock-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    EE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    Estonia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                    SKU (Stock Keeping Unit)
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    4
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id"
+                      name="sku"
+                      type="text"
+                      value="87192-94370"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    ES
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    Inventory
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id"
                   >
-                    Hiszpania
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                      name="stockQuantity"
+                      type="number"
+                      value="12"
+                    />
+                  </div>
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
                   >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    FI
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Finlandia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    FR
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Francja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    13
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    GB
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Wielka Brytania
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    GR
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Grecja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    9
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    HR
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Chorwacja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    2
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    HU
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Węgry
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    5
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    IE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Irlandia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    IT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Włochy
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    LT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Litwa
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    3
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    LU
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Luksemburg
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    17
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    LV
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Łotwa
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    5
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    MT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Malta
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    NL
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Holandia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    9
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    PL
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Polska
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    10
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    PT
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Portugalia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    8
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    RO
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Rumunia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    9
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    SE
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Szwecja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    2
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    SI
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Słowenia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    9
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                    Allocated: 1
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Search Engine Preview
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    SK
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    Słowacja
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  <span
+                    class="MuiButton-label-id"
                   >
-                    6
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    Edit website SEO
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Add search engine title and description to make this product easier to find
+              </p>
+            </div>
           </div>
         </div>
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
           >
             <div
               class="CardTitle-root-id"
@@ -58370,7 +58529,7 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Configuration
+                Organize Product
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -58383,240 +58542,315 @@ exports[`Storyshots Views / Taxes / Country List default 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id TaxConfiguration-content-id"
+              class="MuiCardContent-root-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id"
+              <div
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <span
-                  class="MuiSwitch-root-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <span
-                        class="MuiSwitch-icon-id"
-                      />
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        name="includeTax"
-                        type="checkbox"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-bar-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
+                    Product Type
+                  </label>
                   <div
-                    class="ControlledSwitch-label-id"
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
-                    All products prices are entered with tax included
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputAdornedEnd-id"
+                      disabled=""
+                      type="text"
+                      value="Versatile"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
                   </div>
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
-                <span
-                  class="MuiSwitch-root-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
+                  Is it configurable?
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <span
-                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
-                      />
-                      <input
-                        checked=""
-                        class="MuiPrivateSwitchBase-input-id"
-                        name="showGross"
-                        type="checkbox"
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
+                    >
+                      No
+                    </div>
+                    <input
+                      name="hasVariants"
+                      type="hidden"
+                      value="false"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
                       />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-bar-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id ProductOrganization-cardSubtitle-id"
+              >
+                Attributes
+              </p>
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Borders
+                  </label>
                   <div
-                    class="ControlledSwitch-label-id"
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
-                    Show gross prices to customers in the storefront
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="portals"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
                   </div>
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <span
-                  class="MuiSwitch-root-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <span
-                        class="MuiSwitch-icon-id"
-                      />
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        name="chargeTaxesOnShipping"
-                        type="checkbox"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-bar-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
+                    Legacy
+                  </label>
                   <div
-                    class="ControlledSwitch-label-id"
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
-                    Charge taxes on shipping rates
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="Auto Loan Account"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
                   </div>
-                </span>
-              </label>
+                </div>
+              </div>
               <div
                 class="FormSpacer-spacer-id"
               />
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fetch taxes
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Country List loading 1`] = `
-<div>
-  <form>
-    <div
-      class="Container-md-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id"
-      >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-        >
-          Taxes
-        </h2>
-        <div
-          class="ExtendedPageHeader-action-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
-            <table
-              class="MuiTable-root-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
               >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Country Code
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    Country Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
-                    scope="col"
+                    Category
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
-                    Reduced Tax Rates
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="Apparel"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="ProductOrganization-hr-id"
+              />
+              <div
+                class="MultiAutocompleteSelectField-container-id"
               >
-                <tr
-                  class="MuiTableRow-root-id"
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
                   >
-                    <span
-                      class="Skeleton-skeleton-id"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    Collections
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedStart-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
                   >
-                    <span
-                      class="Skeleton-skeleton-id"
+                    <div
+                      class="MuiChip-root-id MuiChip-deletable-id MultiAutocompleteSelectField-chip-id"
+                      role="button"
+                      tabindex="-1"
                     >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
+                      <span
+                        class="MuiChip-label-id"
+                      >
+                        Winter sale
+                      </span>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiChip-deleteIcon-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                        />
+                      </svg>
+                    </div>
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
                     >
-                      ‌
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-        <div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
@@ -58626,7 +58860,7 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Configuration
+                Availability
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -58639,461 +58873,148 @@ exports[`Storyshots Views / Taxes / Country List loading 1`] = `
               class="CardTitle-hr-id"
             />
             <div
-              class="MuiCardContent-root-id TaxConfiguration-content-id"
+              class="MuiCardContent-root-id"
             >
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              <div
+                class="ProductAvailabilityForm-expandedSwitchContainer-id"
               >
-                <span
-                  class="MuiSwitch-root-id"
+                <label
+                  class="MuiFormControlLabel-root-id"
                 >
                   <span
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
-                    tabindex="-1"
+                    class="MuiSwitch-root-id"
                   >
                     <span
-                      class="MuiIconButton-label-id"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                     >
                       <span
-                        class="MuiSwitch-icon-id"
-                      />
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        disabled=""
-                        name="includeTax"
-                        type="checkbox"
-                      />
+                        class="MuiIconButton-label-id"
+                      >
+                        <span
+                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
+                        />
+                        <input
+                          checked=""
+                          class="MuiPrivateSwitchBase-input-id"
+                          name="available"
+                          type="checkbox"
+                        />
+                      </span>
                     </span>
+                    <span
+                      class="MuiSwitch-bar-id"
+                    />
                   </span>
                   <span
-                    class="MuiSwitch-bar-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  <div
-                    class="ControlledSwitch-label-id"
-                  >
-                    All products prices are entered with tax included
-                  </div>
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  class="MuiSwitch-root-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
-                    tabindex="-1"
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
+                    <div
+                      class="ControlledSwitch-label-id"
                     >
-                      <span
-                        class="MuiSwitch-icon-id"
-                      />
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        disabled=""
-                        name="showGross"
-                        type="checkbox"
-                      />
-                    </span>
+                      Published in storefront
+                    </div>
                   </span>
-                  <span
-                    class="MuiSwitch-bar-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  <div
-                    class="ControlledSwitch-label-id"
-                  >
-                    Show gross prices to customers in the storefront
-                  </div>
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                </label>
+              </div>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id ProductAvailabilityForm-date-id"
               >
-                <span
-                  class="MuiSwitch-root-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
                 >
-                  <span
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <span
-                        class="MuiSwitch-icon-id"
-                      />
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        disabled=""
-                        name="chargeTaxesOnShipping"
-                        type="checkbox"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-bar-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  Publish product on
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
                 >
-                  <div
-                    class="ControlledSwitch-label-id"
-                  >
-                    Charge taxes on shipping rates
-                  </div>
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardActions-root-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id MuiCardActions-action-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fetch taxes
-                </span>
-              </button>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
+                    name="publicationDate"
+                    type="date"
+                    value="2018-08-25T18:45:54.125Z"
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Tax Rates in Austria
-      </h2>
       <div
-        class="ExtendedPageHeader-action-id"
-      />
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <table
-            class="MuiTable-root-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
-                  scope="col"
-                >
-                  Category
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Tax Rate
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Admission to cultural events
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Admission to entertainment events
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Books
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Foodstuffs
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Hotels
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Newspapers
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Passenger transport
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Pharmaceuticals
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  10
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
-<div>
-  <div
-    class="Container-md-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
-        tabindex="0"
-        type="button"
+        class="SaveButtonBar-root-id"
       >
-        <span
-          class="MuiIconButton-label-id"
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
+          <span
+            class="MuiButton-label-id"
           >
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </span>
-      </button>
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          style="width:10em"
-        >
-          ‌
-        </span>
-      </h2>
-      <div
-        class="ExtendedPageHeader-action-id"
-      />
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
         >
-          <table
-            class="MuiTable-root-id"
+          <span
+            class="MuiButton-label-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
-                  scope="col"
-                >
-                  Category
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Tax Rate
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Vouchers / Voucher details default 1`] = `
+exports[`Storyshots Views / Products / Product image details when loaded data 1`] = `
 <div>
   <form>
     <div
@@ -59130,46 +59051,134 @@ exports[`Storyshots Views / Vouchers / Voucher details default 1`] = `
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          aut odit
+          Edit Photo
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
         />
       </div>
       <div
-        class="VoucherDetailsPage-root-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImageNavigation-card-id"
           >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                All photos
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="ProductImageNavigation-root-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
+                <div
+                  class="ProductImageNavigation-imageContainer-id"
                 >
-                  Code
-                </label>
+                  <img
+                    class="ProductImageNavigation-image-id"
+                    src="placeholder1080x1080.png"
+                  />
+                </div>
                 <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  class="ProductImageNavigation-imageContainer-id"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id"
-                    name="code"
-                    type="text"
-                    value="COPY"
+                  <img
+                    class="ProductImageNavigation-image-id"
+                    src="placeholder1080x1080.png"
+                  />
+                </div>
+                <div
+                  class="ProductImageNavigation-imageContainer-id"
+                >
+                  <img
+                    class="ProductImageNavigation-image-id"
+                    src="placeholder1080x1080.png"
+                  />
+                </div>
+                <div
+                  class="ProductImageNavigation-imageContainer-id"
+                >
+                  <img
+                    class="ProductImageNavigation-image-id"
+                    src="placeholder1080x1080.png"
+                  />
+                </div>
+                <div
+                  class="ProductImageNavigation-imageContainer-id"
+                >
+                  <img
+                    class="ProductImageNavigation-image-id"
+                    src="placeholder1080x1080.png"
+                  />
+                </div>
+                <div
+                  class="ProductImageNavigation-imageContainer-id"
+                >
+                  <img
+                    class="ProductImageNavigation-image-id"
+                    src="placeholder1080x1080.png"
+                  />
+                </div>
+                <div
+                  class="ProductImageNavigation-imageContainer-id"
+                >
+                  <img
+                    class="ProductImageNavigation-image-id"
+                    src="placeholder1080x1080.png"
+                  />
+                </div>
+                <div
+                  class="ProductImageNavigation-imageContainer-id"
+                >
+                  <img
+                    class="ProductImageNavigation-image-id"
+                    src="placeholder1080x1080.png"
                   />
                 </div>
               </div>
+            </div>
+          </div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Photo Information
+              </span>
               <div
-                class="FormSpacer-spacer-id"
+                class="CardTitle-toolbar-id"
               />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
@@ -59177,107 +59186,53 @@ exports[`Storyshots Views / Vouchers / Voucher details default 1`] = `
                   class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
                   data-shrink="true"
                 >
-                  Name
+                  Description
                 </label>
                 <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id"
-                    name="name"
-                    type="text"
-                    value="aut odit"
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
                 >
-                  Optional
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="VoucherDetails-grid-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
-                    >
-                      Discount value
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                        name="discountValue"
-                        type="number"
-                        value="71"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div>
                   <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                    class="MuiPrivateTextarea-root-id"
                   >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
                     >
-                      Discount type
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                      Lorem ipsum
+                    </textarea>
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                      name="description"
+                      rows="1"
+                      style="height:19px"
                     >
-                      <div
-                        class="MuiSelect-root-id"
-                      >
-                        <div
-                          aria-haspopup="true"
-                          aria-pressed="false"
-                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          USD
-                        </div>
-                        <input
-                          name="discountValueType"
-                          type="hidden"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      Lorem ipsum
+                    </textarea>
                   </div>
                 </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                >
+                  Optional
+                </p>
               </div>
             </div>
           </div>
+        </div>
+        <div>
           <div
-            class="VoucherDetailsPage-cardSpacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id VoucherProperties-card-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
               class="CardTitle-root-id"
@@ -59285,7 +59240,7 @@ exports[`Storyshots Views / Vouchers / Voucher details default 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Voucher type
+                Photo View
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -59297,314 +59252,16 @@ exports[`Storyshots Views / Vouchers / Voucher details default 1`] = `
             <hr
               class="CardTitle-hr-id"
             />
-            <div
-              class="MuiFormControl-root-id VoucherProperties-formControl-id"
-            >
-              <div
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        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 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        name="type"
-                        type="radio"
-                        value="VALUE"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    Whole cart
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        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 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        name="type"
-                        type="radio"
-                        value="SHIPPING"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    Shipping
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <input
-                        checked=""
-                        class="MuiPrivateSwitchBase-input-id"
-                        name="type"
-                        type="radio"
-                        value="PRODUCT"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    Product
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        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 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        name="type"
-                        type="radio"
-                        value="CATEGORY"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                  >
-                    Category
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="SingleAutocompleteSelectField-container-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                    data-shrink="true"
-                  >
-                    Discounted product
-                  </label>
-                  <div
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                    role="combobox"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
-                      type="text"
-                      value="Gorgeous Wooden Tuna"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <g
-                        style="fill-rule:evenodd"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
-                    <input
-                      checked=""
-                      class="MuiPrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyToAll"
-                      type="checkbox"
-                    />
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
-                >
-                  Apply to whole cart
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
             <div
               class="MuiCardContent-root-id"
             >
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Active since
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    name="startDate"
-                    type="date"
-                    value="2018-08-17T07:26:05.192Z"
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Active until
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    name="endDate"
-                    type="date"
-                    value="2027-07-23T12:08:56.291Z"
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="ProductImagePage-imageContainer-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Usage limit
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id"
-                    name="usageLimit"
-                    type="text"
-                    value="525"
-                  />
-                </div>
+                <img
+                  class="ProductImagePage-image-id"
+                  src="placeholder1080x1080.png"
+                />
               </div>
             </div>
           </div>
@@ -59613,17 +59270,6 @@ exports[`Storyshots Views / Vouchers / Voucher details default 1`] = `
       <div
         class="SaveButtonBar-root-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
         <div
           class="SaveButtonBar-spacer-id"
         />
@@ -59694,7 +59340,7 @@ exports[`Storyshots Views / Vouchers / Voucher details default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Vouchers / Voucher details when loading 1`] = `
+exports[`Storyshots Views / Products / Product image details when loading data 1`] = `
 <div>
   <form>
     <div
@@ -59731,52 +59377,71 @@ exports[`Storyshots Views / Vouchers / Voucher details when loading 1`] = `
         <h2
           class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
-            style="width:10em"
-          >
-            ‌
-          </span>
+          Edit Photo
         </h2>
         <div
           class="ExtendedPageHeader-action-id"
         />
       </div>
       <div
-        class="VoucherDetailsPage-root-id"
+        class="Grid-root-id Grid-inverted-id"
       >
         <div>
           <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImageNavigation-card-id"
           >
             <div
-              class="MuiCardContent-root-id"
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                All photos
+              </span>
               <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Code
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                    disabled=""
-                    name="code"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
+                ‌
+              </span>
+            </div>
+          </div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Photo Information
+              </span>
               <div
-                class="FormSpacer-spacer-id"
+                class="CardTitle-toolbar-id"
               />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
@@ -59784,19 +59449,37 @@ exports[`Storyshots Views / Vouchers / Voucher details when loading 1`] = `
                   class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
                   data-shrink="false"
                 >
-                  Name
+                  Description
                 </label>
                 <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
+                  <div
+                    class="MuiPrivateTextarea-root-id"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id"
+                      disabled=""
+                      name="description"
+                      rows="1"
+                      style="height:19px"
+                    />
+                  </div>
                 </div>
                 <p
                   class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id"
@@ -59804,90 +59487,12 @@ exports[`Storyshots Views / Vouchers / Voucher details when loading 1`] = `
                   Optional
                 </p>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="VoucherDetails-grid-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                      data-shrink="true"
-                    >
-                      Discount value
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                        disabled=""
-                        name="discountValue"
-                        type="number"
-                        value="0"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                      data-shrink="false"
-                    >
-                      Discount type
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                    >
-                      <div
-                        class="MuiSelect-root-id"
-                      >
-                        <div
-                          aria-haspopup="true"
-                          aria-pressed="false"
-                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                          role="button"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </div>
-                        <input
-                          name="discountValueType"
-                          type="hidden"
-                          value=""
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                          focusable="false"
-                          role="presentation"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
+        </div>
+        <div>
           <div
-            class="VoucherDetailsPage-cardSpacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id VoucherProperties-card-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
               class="CardTitle-root-id"
@@ -59895,7 +59500,7 @@ exports[`Storyshots Views / Vouchers / Voucher details when loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                Voucher type
+                Photo View
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -59907,271 +59512,14 @@ exports[`Storyshots Views / Vouchers / Voucher details when loading 1`] = `
             <hr
               class="CardTitle-hr-id"
             />
-            <div
-              class="MuiFormControl-root-id VoucherProperties-formControl-id"
-            >
-              <div
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <input
-                        checked=""
-                        class="MuiPrivateSwitchBase-input-id"
-                        disabled=""
-                        name="type"
-                        type="radio"
-                        value="VALUE"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    Whole cart
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        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 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        disabled=""
-                        name="type"
-                        type="radio"
-                        value="SHIPPING"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    Shipping
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        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 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        disabled=""
-                        name="type"
-                        type="radio"
-                        value="PRODUCT"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    Product
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        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 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <input
-                        class="MuiPrivateSwitchBase-input-id"
-                        disabled=""
-                        name="type"
-                        type="radio"
-                        value="CATEGORY"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    Category
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                  for="limit"
-                >
-                  Minimal cart value
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
-                    disabled=""
-                    name="limit"
-                    type="number"
-                    value=""
-                  />
-                  <span />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id"
-                >
-                  Optional
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-          >
             <div
               class="MuiCardContent-root-id"
             >
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Active since
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    disabled=""
-                    name="startDate"
-                    type="date"
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-                  data-shrink="true"
-                >
-                  Active until
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id"
-                    disabled=""
-                    name="endDate"
-                    type="date"
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              <span
+                class="Skeleton-skeleton-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-                  data-shrink="false"
-                >
-                  Usage limit
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
-                    disabled=""
-                    name="usageLimit"
-                    type="text"
-                  />
-                </div>
-              </div>
+                ‌
+              </span>
             </div>
           </div>
         </div>
@@ -60179,17 +59527,6 @@ exports[`Storyshots Views / Vouchers / Voucher details when loading 1`] = `
       <div
         class="SaveButtonBar-root-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Remove
-          </span>
-        </button>
         <div
           class="SaveButtonBar-spacer-id"
         />
@@ -60260,7 +59597,7 @@ exports[`Storyshots Views / Vouchers / Voucher details when loading 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Vouchers / Voucher list default 1`] = `
+exports[`Storyshots Views / Products / Product list default 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -60271,7 +59608,7 @@ exports[`Storyshots Views / Vouchers / Voucher list default 1`] = `
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        Vouchers
+        Products
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
@@ -60284,7 +59621,7 @@ exports[`Storyshots Views / Vouchers / Voucher list default 1`] = `
           <span
             class="MuiButton-label-id"
           >
-            Add voucher 
+            Add product 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -60307,6 +59644,84 @@ exports[`Storyshots Views / Vouchers / Voucher list default 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
     >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      All Products
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Available
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Out Of Stock
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
       <table
         class="MuiTable-root-id"
       >
@@ -60319,32 +59734,30 @@ exports[`Storyshots Views / Vouchers / Voucher list default 1`] = `
             <th
               class="MuiTableCell-root-id MuiTableCell-head-id"
               scope="col"
-            >
-              Name
-            </th>
+            />
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textLeft-id"
               scope="col"
             >
-              Start date
+              Name
             </th>
             <th
               class="MuiTableCell-root-id MuiTableCell-head-id"
               scope="col"
             >
-              End date
+              Type
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id"
               scope="col"
             >
-              Discount
+              Published
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textRight-id"
               scope="col"
             >
-              Limit
+              Price
             </th>
           </tr>
         </thead>
@@ -60419,872 +59832,7424 @@ exports[`Storyshots Views / Vouchers / Voucher list default 1`] = `
           class="MuiTableBody-root-id"
         >
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                aut odit
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1534490765192"
-                title="Aug 17, 2018"
-              >
-                in 10 days
-              </time>
+              Gardner-Schultz
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <time
-                class=""
-                datetime="1816344536291"
-                title="Jul 23, 2027"
-              >
-                in 9 years
-              </time>
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              $71.00
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              -
+              $83.30
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                omnis quia
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1534377534945"
-                title="Aug 15, 2018"
-              >
-                in 8 days
-              </time>
+              James, Martinez and Murray
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <time
-                class=""
-                datetime="1545762986959"
-                title="Dec 25, 2018"
-              >
-                in 5 months
-              </time>
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              61%
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              CHF 20.00
+              $68.27
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                89% discount for Steel
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1534075924133"
-                title="Aug 12, 2018"
-              >
-                in 5 days
-              </time>
+              Curtis, Joyce and Turner
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              -
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              89%
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              -
+              $21.43
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
-              >
-                75% discount for shipping
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <time
-                class=""
-                datetime="1534171679997"
-                title="Aug 13, 2018"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                in 6 days
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              75%
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              EEK 0.00
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id"
-          >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <span
-                class="VoucherList-link-id"
-              >
-                quod dolor
-              </span>
+              Davis, Brown and Ray
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <time
-                class=""
-                datetime="1534688649321"
-                title="Aug 19, 2018"
-              >
-                in 12 days
-              </time>
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <time
-                class=""
-                datetime="1614233133803"
-                title="Feb 25, 2021"
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
               >
-                in 3 years
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              10%
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              -
+              $62.76
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                libero nemo
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1534073505570"
-                title="Aug 12, 2018"
-              >
-                in 5 days
-              </time>
+              Gallegos Ltd
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              -
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              39%
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              -
+              $7.13
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                vel nobis
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1534006995977"
-                title="Aug 11, 2018"
-              >
-                in 4 days
-              </time>
+              Franklin Inc
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              -
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              41%
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              XTS 0.00
+              $48.82
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                non optio
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1533985747002"
-                title="Aug 11, 2018"
-              >
-                in 4 days
-              </time>
+              Williams-Taylor
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              -
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              43%
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              -
+              $27.34
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                numquam modi
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1534728479891"
-                title="Aug 19, 2018"
-              >
-                in 12 days
-              </time>
+              Riddle, Evans and Hicks
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <time
-                class=""
-                datetime="1705486586589"
-                title="Jan 17, 2024"
-              >
-                in 5 years
-              </time>
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              $83.00
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              -
+              $75.42
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                sunt odit
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1534650171965"
-                title="Aug 18, 2018"
-              >
-                in 12 days
-              </time>
+              Hebert-Sherman
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              -
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              38%
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              CFA 70
+              $86.62
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
             >
-              <span
-                class="VoucherList-link-id"
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
               >
-                distinctio aliquam
-              </span>
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
             >
-              <time
-                class=""
-                datetime="1534753770527"
-                title="Aug 20, 2018"
-              >
-                in 13 days
-              </time>
+              Carter and Sons
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <time
-                class=""
-                datetime="1817661377717"
-                title="Aug 7, 2027"
-              >
-                in 9 years
-              </time>
+              Coffee
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              44%
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
             >
-              ₹70.00
+              $48.66
             </td>
           </tr>
-          <tr
-            class="MuiTableRow-root-id"
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Products / Product list loading 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Products
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            Add product 
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <span
-                class="VoucherList-link-id"
-              >
-                52 USD discount for Handmade Metal Computer
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
             >
-              <time
-                class=""
-                datetime="1534027497412"
-                title="Aug 11, 2018"
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
               >
-                in 4 days
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <time
-                class=""
-                datetime="1540299884374"
-                title="Oct 23, 2018"
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      All Products
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
               >
-                in 3 months
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              $52.00
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              -
-            </td>
-          </tr>
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Available
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Out Of Stock
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="VoucherList-link-id"
-              >
-                17 USD discount for shipping
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            />
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textLeft-id"
+              scope="col"
             >
-              <time
-                class=""
-                datetime="1534675024055"
-                title="Aug 19, 2018"
-              >
-                in 12 days
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
             >
-              <time
-                class=""
-                datetime="1717508908823"
-                title="Jun 4, 2024"
-              >
-                in 6 years
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              Type
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
             >
-              $17.00
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              Published
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textRight-id"
+              scope="col"
             >
-              -
-            </td>
+              Price
+            </th>
           </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="VoucherList-link-id"
-              >
-                id porro
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="5"
             >
-              <time
-                class=""
-                datetime="1534239164445"
-                title="Aug 14, 2018"
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
               >
-                in 7 days
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              -
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                  />
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                </svg>
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
               >
                 ‌
               </span>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              -
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Products / Product list no data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Products
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Add product 
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      All Products
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Available
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Out Of Stock
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textLeft-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Type
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Published
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textRight-id"
+              scope="col"
+            >
+              Price
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="5"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+              >
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
             </td>
           </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
           <tr
             class="MuiTableRow-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+              colspan="5"
+            >
+              No products found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Products
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Add product 
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      All Products
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Available
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Out Of Stock
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Custom Filter
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="FilterChips-filterContainer-id"
+      >
+        <div
+          class="FilterChips-filterButton-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
+          >
+            Gardner-Schultz
+          </p>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <div
+          class="FilterChips-filterButton-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
+          >
+            Davis, Brown and Ray
+          </p>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <div
+          class="FilterChips-filterButton-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-filterText-id"
+          >
+            Franklin Inc
+          </p>
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <div
+          class="FilterChips-filterButton-id FilterChips-addFilterButtonPrimary-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id FilterChips-addFilterText-id"
+          >
+            Add Filter
+          </p>
+        </div>
+      </div>
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            />
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textLeft-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Type
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Published
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id ProductList-textRight-id"
+              scope="col"
+            >
+              Price
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="5"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+              >
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Gardner-Schultz
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $83.30
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              James, Martinez and Murray
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $68.27
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Curtis, Joyce and Turner
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $21.43
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Davis, Brown and Ray
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $62.76
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Gallegos Ltd
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $7.13
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Franklin Inc
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $48.82
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Williams-Taylor
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $27.34
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Riddle, Evans and Hicks
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $75.42
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Hebert-Sherman
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $86.62
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+            >
+              <div
+                class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+              >
+                <img
+                  class="MuiAvatar-img-id"
+                  src="placeholder255x255.png"
+                />
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textLeft-id"
+            >
+              Carter and Sons
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Coffee
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
+              >
+                Published
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ProductList-textRight-id"
+            >
+              $48.66
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Products / Product variant details when loaded data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Extended Hard
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      />
+    </div>
+    <form>
+      <div
+        class="Grid-root-id Grid-inverted-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Variants
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder60x60.png"
+                      />
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                  >
+                    Extended Hard
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder60x60.png"
+                      />
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                  >
+                    Extended Soft
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder60x60.png"
+                      />
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                  >
+                    Normal Hard
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="placeholder60x60.png"
+                      />
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                  >
+                    Normal Soft
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductVariantAttributes-card-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ProductVariantAttributes-grid-id"
+            >
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Borders
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="portals"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                    data-shrink="true"
+                  >
+                    Legacy
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputAdornedEnd-id"
+                      type="text"
+                      value="Auto Loan Account"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        style="fill-rule:evenodd"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Images
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Choose photos
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductVariantImages-root-id"
+              >
+                <div
+                  class="ProductVariantImages-imageContainer-id"
+                >
+                  <img
+                    class="ProductVariantImages-image-id"
+                    src="placeholder60x60.png"
+                  />
+                </div>
+                <div
+                  class="ProductVariantImages-imageContainer-id"
+                >
+                  <img
+                    class="ProductVariantImages-image-id"
+                    src="placeholder60x60.png"
+                  />
+                </div>
+                <div
+                  class="ProductVariantImages-imageContainer-id"
+                >
+                  <img
+                    class="ProductVariantImages-image-id"
+                    src="placeholder60x60.png"
+                  />
+                </div>
+                <div
+                  class="ProductVariantImages-imageContainer-id"
+                >
+                  <img
+                    class="ProductVariantImages-image-id"
+                    src="placeholder60x60.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductVariantPrice-grid-id"
+              >
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                      data-shrink="true"
+                      for="priceOverride"
+                    >
+                      Selling price override
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                        name="priceOverride"
+                        type="number"
+                        value="100"
+                      />
+                      <div
+                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                      >
+                        <p
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          USD
+                        </p>
+                      </div>
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                    >
+                      Optional
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                      data-shrink="true"
+                      for="costPrice"
+                    >
+                      Cost price override
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                        name="costPrice"
+                        type="number"
+                        value="12"
+                      />
+                      <div
+                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
+                      >
+                        <p
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          USD
+                        </p>
+                      </div>
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                    >
+                      Optional
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Stock
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductVariantStock-grid-id"
+              >
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                      data-shrink="true"
+                    >
+                      Inventory
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id"
+                        name="quantity"
+                        type="text"
+                        value="19"
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                    >
+                      Allocated: 12
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                      data-shrink="true"
+                    >
+                      SKU (Stock Keeping Unit)
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id"
+                        name="sku"
+                        type="text"
+                        value="1230959124123"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Products / Product variant details when loading data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        <span
+          class="Skeleton-skeleton-id"
+          style="width:10em"
+        >
+          ‌
+        </span>
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      />
+    </div>
+    <form>
+      <div
+        class="Grid-root-id Grid-inverted-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Variants
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id ProductVariantNavigation-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductVariantAttributes-card-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ProductVariantAttributes-grid-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Images
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Choose photos
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductVariantImages-root-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductVariantPrice-grid-id"
+              >
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                      for="priceOverride"
+                    >
+                      Selling price override
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                        disabled=""
+                        name="priceOverride"
+                        type="number"
+                        value=""
+                      />
+                      <span />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id"
+                    >
+                      Optional
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                      for="costPrice"
+                    >
+                      Cost price override
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-inputType-id MuiInput-inputType-id MuiInputBase-inputAdornedEnd-id"
+                        disabled=""
+                        name="costPrice"
+                        type="number"
+                        value=""
+                      />
+                      <span />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id"
+                    >
+                      Optional
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Stock
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="ProductVariantStock-grid-id"
+              >
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Inventory
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                        disabled=""
+                        name="quantity"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      SKU (Stock Keeping Unit)
+                    </label>
+                    <div
+                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                        disabled=""
+                        name="sku"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Site settings / Page default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          General Information
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-inverted-id"
+      >
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id"
+        >
+          Site Settings
+        </h2>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              General Information
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                Name of your store
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiInput-input-id"
+                  name="name"
+                  type="text"
+                  value="Saleor e-commerce"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+              >
+                Name of your store is shown on tab in web browser
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                URL of your online store
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiInput-input-id"
+                  name="domain"
+                  type="text"
+                  value="localhost:8000"
+                />
+              </div>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                Store Description
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiInput-input-id"
+                  name="description"
+                  type="text"
+                  value="Lorem ipsum dolor sit amet"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+              >
+                Store description is shown on taskbar after your store name
+              </p>
+            </div>
+          </div>
+        </div>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id"
+        >
+          Authentication keys
+        </h2>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Authentication Keys
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add key
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Authentication Type
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Key
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Facebook
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  n1n62jkn2123:123n
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Site settings / Page form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          General Information
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-inverted-id"
+      >
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id"
+        >
+          Site Settings
+        </h2>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              General Information
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                Name of your store
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="true"
+                  class="MuiInputBase-input-id MuiInput-input-id"
+                  name="name"
+                  type="text"
+                  value="Saleor e-commerce"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+              >
+                Generic form error
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                URL of your online store
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="true"
+                  class="MuiInputBase-input-id MuiInput-input-id"
+                  name="domain"
+                  type="text"
+                  value="localhost:8000"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+              >
+                Generic form error
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                Store Description
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="true"
+                  class="MuiInputBase-input-id MuiInput-input-id"
+                  name="description"
+                  type="text"
+                  value="Lorem ipsum dolor sit amet"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+              >
+                Generic form error
+              </p>
+            </div>
+          </div>
+        </div>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id"
+        >
+          Authentication keys
+        </h2>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Authentication Keys
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add key
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Authentication Type
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Key
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Facebook
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  n1n62jkn2123:123n
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Site settings / Page loading 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          General Information
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-inverted-id"
+      >
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id"
+        >
+          Site Settings
+        </h2>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              General Information
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                data-shrink="false"
+              >
+                Name of your store
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                  disabled=""
+                  name="name"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id"
+              >
+                Name of your store is shown on tab in web browser
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                data-shrink="false"
+              >
+                URL of your online store
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                  disabled=""
+                  name="domain"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                data-shrink="false"
+              >
+                Store Description
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                  disabled=""
+                  name="description"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id"
+              >
+                Store description is shown on taskbar after your store name
+              </p>
+            </div>
+          </div>
+        </div>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id"
+        >
+          Authentication keys
+        </h2>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Authentication Keys
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
+                disabled=""
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add key
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Authentication Type
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Key
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-iconCell-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id MuiSvgIcon-colorSecondary-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Staff / Staff member details default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Jacob Smith
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Staff Member Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="StaffProperties-root-id"
+              >
+                <div>
+                  <div
+                    class="StaffProperties-avatar-id"
+                  >
+                    <p
+                      class="MuiTypography-root-id MuiTypography-body1-id StaffProperties-avatarText-id"
+                    >
+                      JS
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="StaffProperties-propGrid-id"
+                  >
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                          data-shrink="true"
+                        >
+                          First Name
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="firstName"
+                            type="text"
+                            value="Jacob"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                          data-shrink="true"
+                        >
+                          Last Name
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="lastName"
+                            type="text"
+                            value="Smith"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                          data-shrink="true"
+                        >
+                          E-mail
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="email"
+                            type="text"
+                            value="admin@example.com"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Permissions
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Expand or restrict user's permissions to access certain part of saleor system.
+              </p>
+              <div
+                class="StaffPermissions-checkboxContainer-id"
+              >
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        />
+                      </svg>
+                      <input
+                        checked=""
+                        class="MuiPrivateSwitchBase-input-id"
+                        data-indeterminate="false"
+                        name="hasFullAccess"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                  >
+                    User has full access to the store
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Account Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                If you want to disable this account uncheck the box below
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  User is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        />
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Staff Member Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="StaffProperties-root-id"
+              >
+                <div>
+                  <div
+                    class="StaffProperties-avatar-id"
+                  >
+                    <p
+                      class="MuiTypography-root-id MuiTypography-body1-id StaffProperties-avatarText-id"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="StaffProperties-propGrid-id"
+                  >
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                          data-shrink="false"
+                        >
+                          First Name
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="firstName"
+                            type="text"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                          data-shrink="false"
+                        >
+                          Last Name
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="lastName"
+                            type="text"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                          data-shrink="false"
+                        >
+                          E-mail
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="email"
+                            type="text"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Permissions
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Expand or restrict user's permissions to access certain part of saleor system.
+              </p>
+              <div
+                class="StaffPermissions-checkboxContainer-id"
+              >
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        />
+                      </svg>
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        data-indeterminate="false"
+                        disabled=""
+                        name="hasFullAccess"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    User has full access to the store
+                  </span>
+                </label>
+              </div>
+            </div>
+            <hr
+              class="StaffPermissions-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="IMPERSONATE_USERS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Impersonate customers
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_DISCOUNTS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage sales and vouchers
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_MENUS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage navigation
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_ORDERS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage orders
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_PAGES"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage pages
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_PRODUCTS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage products
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_SETTINGS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage settings
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_SHIPPING"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage shipping
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_STAFF"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage staff
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="MANAGE_USERS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage customers
+                </span>
+              </label>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Account Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                If you want to disable this account uncheck the box below
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  User is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Jacob Smith
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Staff Member Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="StaffProperties-root-id"
+              >
+                <div>
+                  <div
+                    class="StaffProperties-avatar-id"
+                  >
+                    <p
+                      class="MuiTypography-root-id MuiTypography-body1-id StaffProperties-avatarText-id"
+                    >
+                      JS
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="StaffProperties-propGrid-id"
+                  >
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                          data-shrink="true"
+                        >
+                          First Name
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="firstName"
+                            type="text"
+                            value="Jacob"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                          data-shrink="true"
+                        >
+                          Last Name
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="lastName"
+                            type="text"
+                            value="Smith"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="StaffProperties-prop-id"
+                    >
+                      <div
+                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                      >
+                        <label
+                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                          data-shrink="true"
+                        >
+                          E-mail
+                        </label>
+                        <div
+                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input-id MuiInput-input-id"
+                            name="email"
+                            type="text"
+                            value="admin@example.com"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Permissions
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Expand or restrict user's permissions to access certain part of saleor system.
+              </p>
+              <div
+                class="StaffPermissions-checkboxContainer-id"
+              >
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        />
+                      </svg>
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        data-indeterminate="false"
+                        name="hasFullAccess"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                  >
+                    User has full access to the store
+                  </span>
+                </label>
+              </div>
+            </div>
+            <hr
+              class="StaffPermissions-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                    <input
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="IMPERSONATE_USERS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Impersonate customers
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_DISCOUNTS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage sales and vouchers
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_MENUS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage navigation
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_ORDERS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage orders
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_PAGES"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage pages
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_PRODUCTS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage products
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_SETTINGS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage settings
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_SHIPPING"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage shipping
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_STAFF"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage staff
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="MANAGE_USERS"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  Manage customers
+                </span>
+              </label>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Account Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                If you want to disable this account uncheck the box below
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                    <input
+                      checked=""
+                      class="MuiPrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  User is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Staff / Staff members default 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Staff members
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Add staff member
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id StaffList-wideColumn-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Email Address
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="3"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+              >
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  CC
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Chris Cooper
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Active
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Inactive
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Active
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Active
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Active
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Active
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Inactive
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Active
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Active
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Inactive
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Inactive
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                >
+                  JS
+                </p>
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Jacob Smith
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                Active
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Staff members
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Add staff member
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id StaffList-wideColumn-id"
+              scope="col"
+            >
+              Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            >
+              Email Address
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="3"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+              >
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <div
+                class="StaffList-avatar-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id StaffList-avatarText-id"
+                />
+              </div>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </p>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Taxes / Country List default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Taxes
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Country Code
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Country Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
+                    scope="col"
+                  >
+                    Reduced Tax Rates
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    AT
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Austria
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    8
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    BE
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Belgia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    BG
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Bułgaria
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    1
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    CY
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Cypr
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    11
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    CZ
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Czechy
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    11
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    DE
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Niemcy
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    8
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    DK
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Dania
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    0
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    EE
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Estonia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    4
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    ES
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Hiszpania
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    8
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    FI
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Finlandia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    FR
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Francja
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    13
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    GB
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Wielka Brytania
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    8
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    GR
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Grecja
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    9
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    HR
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Chorwacja
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    2
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    HU
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Węgry
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    5
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    IE
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Irlandia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    IT
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Włochy
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    LT
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Litwa
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    3
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    LU
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Luksemburg
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    17
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    LV
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Łotwa
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    5
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    MT
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Malta
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    8
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    NL
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Holandia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    9
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    PL
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Polska
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    10
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    PT
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Portugalia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    8
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    RO
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Rumunia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    9
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    SE
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Szwecja
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    2
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    SI
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Słowenia
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    9
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id CountryList-tableRow-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    SK
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    Słowacja
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    6
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
             >
               <span
-                class="VoucherList-link-id"
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
               >
-                22% discount for Bedfordshire
+                Configuration
               </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <time
-                class=""
-                datetime="1534544750902"
-                title="Aug 17, 2018"
-              >
-                in 10 days
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id TaxConfiguration-content-id"
             >
-              <time
-                class=""
-                datetime="1849179786531"
-                title="Aug 6, 2028"
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                in 10 years
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              22%
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              -
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="VoucherList-link-id"
+                <span
+                  class="MuiSwitch-root-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <span
+                        class="MuiSwitch-icon-id"
+                      />
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        name="includeTax"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    All products prices are entered with tax included
+                  </div>
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                non et
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <time
-                class=""
-                datetime="1534285402199"
-                title="Aug 14, 2018"
+                <span
+                  class="MuiSwitch-root-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <span
+                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
+                      />
+                      <input
+                        checked=""
+                        class="MuiPrivateSwitchBase-input-id"
+                        name="showGross"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    Show gross prices to customers in the storefront
+                  </div>
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                in 7 days
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+                <span
+                  class="MuiSwitch-root-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <span
+                        class="MuiSwitch-icon-id"
+                      />
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        name="chargeTaxesOnShipping"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    Charge taxes on shipping rates
+                  </div>
+                </span>
+              </label>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardActions-root-id"
             >
-              <time
-                class=""
-                datetime="1737917511823"
-                title="Jan 26, 2025"
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+                tabindex="0"
+                type="button"
               >
-                in 6 years
-              </time>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              $97.00
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
-            >
-              GTQ 90.00
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Fetch taxes
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Vouchers / Voucher list no data 1`] = `
+exports[`Storyshots Views / Taxes / Country List loading 1`] = `
 <div>
-  <div
-    class="Container-md-id"
-  >
+  <form>
     <div
-      class="ExtendedPageHeader-root-id"
+      class="Container-md-id"
     >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
-      >
-        Vouchers
-      </h2>
       <div
-        class="ExtendedPageHeader-action-id"
+        class="ExtendedPageHeader-root-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
         >
-          <span
-            class="MuiButton-label-id"
-          >
-            Add voucher 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
+          Taxes
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
       </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <table
-        class="MuiTable-root-id"
+      <div
+        class="Grid-root-id Grid-default-id"
       >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Start date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              End date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
-              scope="col"
-            >
-              Discount
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
-              scope="col"
+            <table
+              class="MuiTable-root-id"
             >
-              Limit
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Country Code
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  >
+                    Country Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
+                    scope="col"
+                  >
+                    Reduced Tax Rates
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="5"
+            <div
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Configuration
+              </span>
               <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id TaxConfiguration-content-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
-                <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
+                <span
+                  class="MuiSwitch-root-id"
                 >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
+                  <span
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                     tabindex="-1"
-                    type="button"
                   >
                     <span
                       class="MuiIconButton-label-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
+                      <span
+                        class="MuiSwitch-icon-id"
+                      />
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        disabled=""
+                        name="includeTax"
+                        type="checkbox"
+                      />
                     </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    All products prices are entered with tax included
+                  </div>
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiSwitch-root-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                     tabindex="-1"
-                    type="button"
                   >
                     <span
                       class="MuiIconButton-label-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
+                      <span
+                        class="MuiSwitch-icon-id"
+                      />
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        disabled=""
+                        name="showGross"
+                        type="checkbox"
+                      />
+                    </span>
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    Show gross prices to customers in the storefront
+                  </div>
+                </span>
+              </label>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  class="MuiSwitch-root-id"
+                >
+                  <span
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <span
+                        class="MuiSwitch-icon-id"
+                      />
+                      <input
+                        class="MuiPrivateSwitchBase-input-id"
+                        disabled=""
+                        name="chargeTaxesOnShipping"
+                        type="checkbox"
+                      />
                     </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="5"
+                  </span>
+                  <span
+                    class="MuiSwitch-bar-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  <div
+                    class="ControlledSwitch-label-id"
+                  >
+                    Charge taxes on shipping rates
+                  </div>
+                </span>
+              </label>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardActions-root-id"
             >
-              No vouchers found
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <button
+                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id MuiCardActions-action-id"
+                disabled=""
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Fetch taxes
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Vouchers / Voucher list when loading 1`] = `
+exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
 <div>
   <div
     class="Container-md-id"
@@ -61292,209 +67257,300 @@ exports[`Storyshots Views / Vouchers / Voucher list when loading 1`] = `
     <div
       class="ExtendedPageHeader-root-id"
     >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
       <h2
         class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
       >
-        Vouchers
+        Tax Rates in Austria
       </h2>
       <div
         class="ExtendedPageHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
+      />
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <table
+            class="MuiTable-root-id"
           >
-            Add voucher 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </span>
-        </button>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
+                  scope="col"
+                >
+                  Category
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Tax Rate
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Admission to cultural events
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  10
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Admission to entertainment events
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  10
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Books
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  10
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Foodstuffs
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  10
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Hotels
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  10
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Newspapers
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  10
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Passenger transport
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  10
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Pharmaceuticals
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  10
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
     <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      class="ExtendedPageHeader-root-id"
     >
-      <table
-        class="MuiTable-root-id"
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+        tabindex="0"
+        type="button"
       >
-        <thead
-          class="MuiTableHead-root-id"
+        <span
+          class="MuiIconButton-label-id"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Start date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              End date
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
-              scope="col"
-            >
-              Discount
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-textRight-id"
-              scope="col"
-            >
-              Limit
-            </th>
-          </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+        </span>
+      </button>
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        <span
+          class="Skeleton-skeleton-id"
+          style="width:10em"
         >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="5"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
-              >
-                <div
-                  class="TablePagination-spacer-id"
-                />
-                <div
-                  class="TablePaginationActions-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
+          ‌
+        </span>
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      />
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <tr
-            class="MuiTableRow-root-id"
+          <table
+            class="MuiTable-root-id"
           >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+            <thead
+              class="MuiTableHead-root-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
               >
-                ‌
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-textRight-id"
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
+                  scope="col"
+                >
+                  Category
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Tax Rate
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
+              <tr
+                class="MuiTableRow-root-id"
               >
-                ‌
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/tests/api/test_discount.py b/tests/api/test_discount.py
--- a/tests/api/test_discount.py
+++ b/tests/api/test_discount.py
@@ -243,8 +243,8 @@ def test_voucher_delete_mutation(
 
 
 def test_voucher_add_catalogues(
-        staff_api_client, voucher, category,
-        product, collection, permission_manage_discounts):
+        staff_api_client, voucher, category, product, collection,
+        permission_manage_discounts):
     query = """
         mutation voucherCataloguesAdd($id: ID!, $input: CatalogueInput!) {
             voucherCataloguesAdd(id: $id, input: $input) {
@@ -277,8 +277,8 @@ def test_voucher_add_catalogues(
 
 
 def test_voucher_remove_catalogues(
-        staff_api_client, voucher, category,
-        product, collection, permission_manage_discounts):
+        staff_api_client, voucher, category, product, collection,
+        permission_manage_discounts):
     voucher.products.add(product)
     voucher.collections.add(collection)
     voucher.categories.add(category)
@@ -344,8 +344,8 @@ def test_voucher_add_no_catalogues(
 
 
 def test_voucher_remove_no_catalogues(
-        staff_api_client, voucher, category,
-        product, collection, permission_manage_discounts):
+        staff_api_client, voucher, category, product, collection,
+        permission_manage_discounts):
     voucher.products.add(product)
     voucher.collections.add(collection)
     voucher.categories.add(category)
@@ -476,8 +476,8 @@ def test_sale_delete_mutation(
 
 
 def test_sale_add_catalogues(
-        staff_api_client, sale, category,
-        product, collection, permission_manage_discounts):
+        staff_api_client, sale, category, product, collection,
+        permission_manage_discounts):
     query = """
         mutation saleCataloguesAdd($id: ID!, $input: CatalogueInput!) {
             saleCataloguesAdd(id: $id, input: $input) {
@@ -510,8 +510,8 @@ def test_sale_add_catalogues(
 
 
 def test_sale_remove_catalogues(
-        staff_api_client, sale, category,
-        product, collection, permission_manage_discounts):
+        staff_api_client, sale, category, product, collection,
+        permission_manage_discounts):
     sale.products.add(product)
     sale.collections.add(collection)
     sale.categories.add(category)
@@ -577,8 +577,8 @@ def test_sale_add_no_catalogues(
 
 
 def test_sale_remove_no_catalogues(
-        staff_api_client, sale, category,
-        product, collection, permission_manage_discounts):
+        staff_api_client, sale, category, product, collection,
+        permission_manage_discounts):
     sale.products.add(product)
     sale.collections.add(collection)
     sale.categories.add(category)
@@ -608,33 +608,3 @@ def test_sale_remove_no_catalogues(
     assert sale.products.exists()
     assert sale.categories.exists()
     assert sale.collections.exists()
-
-
-@pytest.mark.parametrize('voucher_type,field_name', (
-    (VoucherTypeEnum.CATEGORY, 'categories'),
-    (VoucherTypeEnum.PRODUCT, 'products'),
-    (VoucherTypeEnum.COLLECTION, 'collections')))
-def test_validate_voucher(
-        voucher_type, field_name, voucher,
-        staff_api_client, permission_manage_discounts):
-    query = """
-    mutation  voucherUpdate(
-        $id: ID!, $type: VoucherTypeEnum) {
-            voucherUpdate(
-            id: $id, input: {type: $type}) {
-                errors {
-                    field
-                    message
-                }
-            }
-        }
-    """
-    staff_api_client.user.user_permissions.add(permission_manage_discounts)
-    response = staff_api_client.post_graphql(query, {
-        'type': voucher_type.name,
-        'id': graphene.Node.to_global_id('Voucher', voucher.id)})
-
-    content = get_graphql_content(response)
-    data = content['data']['voucherUpdate']['errors'][0]
-    assert data['field'] == field_name
-    assert data['message'] == 'This field is required.'