Repository: saleor/saleor

Issue:
Implement customers section in dashboard



Discussion:

Resolving patch:
diff --git a/saleor/graphql/account/resolvers.py b/saleor/graphql/account/resolvers.py
--- a/saleor/graphql/account/resolvers.py
+++ b/saleor/graphql/account/resolvers.py
@@ -18,6 +18,7 @@ def resolve_customers(info, query):
         Q(is_staff=False) | (Q(is_staff=True) & Q(orders__isnull=False)))
     qs = filter_by_query_param(
         queryset=qs, query=query, search_fields=USER_SEARCH_FIELDS)
+    qs = qs.order_by('email')
     qs = qs.distinct()
     return gql_optimizer.query(qs, info)
 
@@ -26,6 +27,7 @@ def resolve_staff_users(info, query):
     qs = models.User.objects.filter(is_staff=True)
     qs = filter_by_query_param(
         queryset=qs, query=query, search_fields=USER_SEARCH_FIELDS)
+    qs = qs.order_by('email')
     qs = qs.distinct()
     return gql_optimizer.query(qs, info)
 
diff --git a/saleor/graphql/product/resolvers.py b/saleor/graphql/product/resolvers.py
--- a/saleor/graphql/product/resolvers.py
+++ b/saleor/graphql/product/resolvers.py
@@ -35,6 +35,7 @@ def resolve_attributes(info, category_id, query):
         qs = qs.filter(
             Q(product_type__in=product_types)
             | Q(product_variant_type__in=product_types))
+    qs = qs.order_by('name')
     qs = qs.distinct()
     return gql_optimizer.query(qs, info)
 
@@ -44,6 +45,8 @@ def resolve_categories(info, query, level=None):
     if level is not None:
         qs = qs.filter(level=level)
     qs = filter_by_query_param(qs, query, CATEGORY_SEARCH_FIELDS)
+    qs = qs.order_by('name')
+    qs = qs.distinct()
     return gql_optimizer.query(qs, info)
 
 
@@ -51,6 +54,7 @@ def resolve_collections(info, query):
     user = info.context.user
     qs = models.Collection.objects.visible_to_user(user)
     qs = filter_by_query_param(qs, query, COLLECTION_SEARCH_FIELDS)
+    qs = qs.order_by('name')
     return gql_optimizer.query(qs, info)
 
 
@@ -89,6 +93,7 @@ def resolve_products(
 
 def resolve_product_types(info):
     qs = models.ProductType.objects.all()
+    qs = qs.order_by('name')
     return gql_optimizer.query(qs, info)
 
 


Test patch:
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
@@ -888,7 +888,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
               class="MuiInput-input-id"
               name="firstName"
               type="text"
-              value="Alexander"
+              value="Elizabeth"
             />
           </div>
         </div>
@@ -911,7 +911,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
               class="MuiInput-input-id"
               name="lastName"
               type="text"
-              value="Simonis"
+              value="Vaughn"
             />
           </div>
         </div>
@@ -921,23 +921,53 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
       class="Component-spacer-id"
     />
     <div
-      class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+      class="Component-root-id"
     >
-      <label
-        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-        data-shrink="false"
-      >
-        Company
-      </label>
-      <div
-        class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
-      >
-        <input
-          aria-invalid="false"
-          class="MuiInput-input-id"
-          name="companyName"
-          type="text"
-        />
+      <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"
+          >
+            Company
+          </label>
+          <div
+            class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+          >
+            <input
+              aria-invalid="false"
+              class="MuiInput-input-id"
+              name="companyName"
+              type="text"
+              value=""
+            />
+          </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"
+          >
+            Phone
+          </label>
+          <div
+            class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+          >
+            <input
+              aria-invalid="false"
+              class="MuiInput-input-id"
+              name="phone"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
       </div>
     </div>
     <div
@@ -950,7 +980,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
         class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
         data-shrink="true"
       >
-        Address
+        Address line 1
       </label>
       <div
         class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
@@ -960,7 +990,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
           class="MuiInput-input-id"
           name="streetAddress1"
           type="text"
-          value="83772 Savanah Summit"
+          value="419 Ruiz Orchard Apt. 199"
         />
       </div>
     </div>
@@ -974,7 +1004,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
         class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
         data-shrink="false"
       >
-        Address
+        Address line 2
       </label>
       <div
         class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
@@ -984,6 +1014,7 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
           class="MuiInput-input-id"
           name="streetAddress2"
           type="text"
+          value=""
         />
       </div>
     </div>
@@ -991,196 +1022,160 @@ exports[`Storyshots Generics / AddressEdit default 1`] = `
       class="Component-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"
-      >
-        City
-      </label>
-      <div
-        class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
-      >
-        <input
-          aria-invalid="false"
-          class="MuiInput-input-id"
-          name="city"
-          type="text"
-          value="Thompsontown"
-        />
-      </div>
-    </div>
-    <div
-      class="Component-spacer-id"
-    />
-    <div
-      class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+      class="Component-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"
-      >
-        City area
-      </label>
-      <div
-        class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
-      >
-        <input
-          aria-invalid="false"
-          class="MuiInput-input-id"
-          name="cityArea"
-          type="text"
-          value="Rhode Island"
-        />
+      <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"
+          >
+            City
+          </label>
+          <div
+            class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+          >
+            <input
+              aria-invalid="false"
+              class="MuiInput-input-id"
+              name="city"
+              type="text"
+              value="Port Danielshire"
+            />
+          </div>
+        </div>
       </div>
-    </div>
-    <div
-      class="Component-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"
-      >
-        Postal code
-      </label>
-      <div
-        class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
-      >
-        <input
-          aria-invalid="false"
-          class="MuiInput-input-id"
-          name="postalCode"
-          type="text"
-          value="47639-5237"
-        />
+      <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"
+          >
+            ZIP / Postal code
+          </label>
+          <div
+            class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+          >
+            <input
+              aria-invalid="false"
+              class="MuiInput-input-id"
+              name="postalCode"
+              type="text"
+              value="52203"
+            />
+          </div>
+        </div>
       </div>
     </div>
     <div
       class="Component-spacer-id"
     />
     <div
-      class="MuiFormControl-root-id Component-formControl-id"
+      class="Component-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"
-      >
-        Country
-      </label>
-      <div
-        class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
-      >
+      <div>
         <div
-          class="MuiSelect-root-id"
+          class="MuiFormControl-root-id Component-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"
+          >
+            Country
+          </label>
           <div
-            aria-haspopup="true"
-            aria-pressed="false"
-            class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInput-input-id"
-            role="button"
-            tabindex="0"
+            class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
           >
-            <span>
-              ​
-            </span>
+            <div
+              class="MuiSelect-root-id"
+            >
+              <div
+                aria-haspopup="true"
+                aria-pressed="false"
+                class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInput-input-id"
+                role="button"
+                tabindex="0"
+              >
+                <span>
+                  ​
+                </span>
+              </div>
+              <input
+                name="country"
+                type="hidden"
+                value="SE"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7 10l5 5 5-5z"
+                />
+              </svg>
+            </div>
           </div>
-          <input
-            name="country"
-            type="hidden"
-            value="SW"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id"
-            focusable="false"
-            viewBox="0 0 24 24"
+        </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"
           >
-            <path
-              d="M7 10l5 5 5-5z"
+            Country area
+          </label>
+          <div
+            class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+          >
+            <input
+              aria-invalid="false"
+              class="MuiInput-input-id"
+              name="countryArea"
+              type="text"
+              value=""
             />
-          </svg>
+          </div>
         </div>
       </div>
     </div>
-    <div
-      class="Component-spacer-id"
-    />
-    <div
-      class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+  </div>
+</div>
+`;
+
+exports[`Storyshots Generics / AddressFormatter default 1`] = `
+<div>
+  <address
+    style="font-style:inherit"
+  >
+    <span
+      class="MuiTypography-root-id MuiTypography-body1-id"
     >
-      <label
-        class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-        data-shrink="true"
-      >
-        Country area
-      </label>
-      <div
-        class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
-      >
-        <input
-          aria-invalid="false"
-          class="MuiInput-input-id"
-          name="countryArea"
-          type="text"
-          value="Buckinghamshire"
-        />
-      </div>
-    </div>
-    <div
-      class="Component-spacer-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"
-      >
-        Phone
-      </label>
-      <div
-        class="MuiInput-root-id MuiInput-formControl-id MuiInput-underline-id"
-      >
-        <input
-          aria-invalid="false"
-          class="MuiInput-input-id"
-          name="phone"
-          type="text"
-          value="+17 253-928-8945"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / AddressFormatter default 1`] = `
-<div>
-  <address>
-    <span
-      class="MuiTypography-root-id MuiTypography-body1-id"
-    >
-      Alexander Simonis
+      Elizabeth Vaughn
     </span>
     <span
       class="MuiTypography-root-id MuiTypography-body1-id"
     >
-      83772 Savanah Summit
+      419 Ruiz Orchard Apt. 199
       <br />
     </span>
     <span
       class="MuiTypography-root-id MuiTypography-body1-id"
     >
-       47639-5237 Thompsontown, Rhode Island
+       52203 Port Danielshire
     </span>
     <span
       class="MuiTypography-root-id MuiTypography-body1-id"
     >
-      Buckinghamshire, Swaziland
+      Szwecja
     </span>
   </address>
 </div>
@@ -12456,1299 +12451,4525 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
 </div>
 `;
 
-exports[`Storyshots Views / Customers / Customer details default 1`] = `
+exports[`Storyshots Views / Customers / Create customer default 1`] = `
 <div>
-  <div
-    class="Component-md-id"
-  >
+  <form>
     <div
-      class="Component-root-id"
+      class="Component-md-id"
     >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
-      >
-        alexander_simonis@example.com
-      </h2>
       <div
-        class="Component-action-id"
-      />
-    </div>
-    <div
-      class="Component-root-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Component-root-id"
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          <div
-            class="Component-root-id"
+          <span
+            class="MuiIconButton-label-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
             >
-              User details
-            </span>
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          Add customer
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
             <div
-              class="Component-toolbar-id"
+              class="Component-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"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit customer
-                </span>
-                <span
-                  class="MuiTouchRipple-root-id"
-                />
-              </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="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
               >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Remove customer
-                </span>
-                <span
-                  class="MuiTouchRipple-root-id"
-                />
-              </button>
+                Customer overview
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
             </div>
-          </div>
-          <div
-            class="Component-children-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id"
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
               <div
-                class="Component-root-id Component-status-id Component-successDot-id"
+                class="Component-root-id"
               >
-                Active
+                <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="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInput-input-id MuiInput-inputType-id"
+                      name="email"
+                      type="email"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
-            </span>
+            </div>
           </div>
-          <hr
-            class="Component-hr-id"
+          <div
+            class="Component-spacer-id"
           />
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
             <div
-              class="Component-date-id"
+              class="Component-root-id"
             >
               <span
-                class="MuiTypography-root-id MuiTypography-caption-id Component-userJoinDate-id"
-              >
-                Joined
-              </span>
-               
-              <span
-                class="MuiTypography-root-id MuiTypography-caption-id"
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
               >
-                <time
-                  datetime="1507728150831"
-                  title="Wed Oct 11 2017 09:22:30 GMT-0400"
-                >
-                  10 months ago
-                </time>
+                Primary address
               </span>
+              <div
+                class="Component-toolbar-id"
+              />
             </div>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              No note
-            </p>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <table
-            class="MuiTable-root-id"
-            padding="default"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  #
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Created
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Status
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-textRight-id"
-                  scope="col"
-                >
-                  Price
-                </th>
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
+                The primary address of this customer.
+              </p>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                  colspan="4"
-                >
+                <div>
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                    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="TablePagination-spacer-id"
-                    />
-                    <div
-                      class="TablePaginationActions-root-id"
+                      class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-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"
-                            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"
-                            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="MuiInput-input-id"
+                        name="firstName"
+                        type="text"
+                        value=""
+                      />
                     </div>
                   </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  20
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658650376"
-                    title="Tue Sep 11 2018 05:37:30 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                </div>
+                <div>
                   <div
-                    class="Component-root-id undefined Component-errorDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Cancelled
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Last name
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id"
+                        name="lastName"
+                        type="text"
+                        value=""
+                      />
+                    </div>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $305.17
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  19
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658650124"
-                    title="Tue Sep 11 2018 05:37:30 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                <div>
                   <div
-                    class="Component-root-id undefined Component-errorDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Cancelled
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Company
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id"
+                        name="companyName"
+                        type="text"
+                        value=""
+                      />
+                    </div>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $1,215.89
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  18
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658650019"
-                    title="Tue Sep 11 2018 05:37:30 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                </div>
+                <div>
                   <div
-                    class="Component-root-id undefined Component-errorDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Draft
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Phone
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id"
+                        name="phone"
+                        type="text"
+                        value=""
+                      />
+                    </div>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $321.71
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  17
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658649864"
-                    title="Tue Sep 11 2018 05:37:29 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <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"
                 >
-                  <div
-                    class="Component-root-id undefined Component-errorDot-id"
-                  >
-                    Cancelled
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+                  Address line 1
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
                 >
-                  $271.95
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id"
+                    name="streetAddress1"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  16
-                </td>
-                <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"
                 >
-                  <time
-                    datetime="1536658649610"
-                    title="Tue Sep 11 2018 05:37:29 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  Address line 2
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
                 >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id"
+                    name="streetAddress2"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
+              >
+                <div>
                   <div
-                    class="Component-root-id undefined Component-errorDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Cancelled
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $335.84
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  15
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658649336"
-                    title="Tue Sep 11 2018 05:37:29 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <div
-                    class="Component-root-id undefined Component-errorDot-id"
-                  >
-                    Cancelled
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      City
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id"
+                        name="city"
+                        type="text"
+                        value=""
+                      />
+                    </div>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $1,042.15
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  14
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658649103"
-                    title="Tue Sep 11 2018 05:37:29 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                </div>
+                <div>
                   <div
-                    class="Component-root-id undefined Component-errorDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Cancelled
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      ZIP / Postal code
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id"
+                        name="postalCode"
+                        type="text"
+                        value=""
+                      />
+                    </div>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $213.69
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  13
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658648921"
-                    title="Tue Sep 11 2018 05:37:28 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                <div>
                   <div
-                    class="Component-root-id undefined Component-errorDot-id"
+                    class="MuiFormControl-root-id Component-formControl-id"
                   >
-                    Cancelled
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Country
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <div
+                        class="MuiSelect-root-id"
+                      >
+                        <div
+                          aria-haspopup="true"
+                          aria-pressed="false"
+                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInput-input-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </div>
+                        <input
+                          name="country"
+                          type="hidden"
+                          value=""
+                        />
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          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 Component-textRight-id"
-                >
-                  $367.03
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  12
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658648750"
-                    title="Tue Sep 11 2018 05:37:28 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                </div>
+                <div>
                   <div
-                    class="Component-root-id undefined Component-errorDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Cancelled
+                    <label
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Country area
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id"
+                        name="countryArea"
+                        type="text"
+                        value=""
+                      />
+                    </div>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $298.76
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  11
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                Notes
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Enter any extra infotmation regarding this customer.
+              </p>
+              <div
+                class="Component-spacer-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"
                 >
-                  <time
-                    datetime="1536658648598"
-                    title="Tue Sep 11 2018 05:37:28 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
                 >
                   <div
-                    class="Component-root-id undefined Component-errorDot-id"
+                    class="Textarea-root-id"
+                    style="height:19px"
                   >
-                    Unfulfilled
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $663.69
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  10
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658648409"
-                    title="Tue Sep 11 2018 05:37:28 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <div
-                    class="Component-root-id undefined Component-errorDot-id"
-                  >
-                    Cancelled
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                      name="note"
+                      rows="1"
+                      type="text"
+                    />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $280.41
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          Add customer
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  9
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                Customer overview
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="Component-root-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                 >
-                  <time
-                    datetime="1536658648185"
-                    title="Tue Sep 11 2018 05:37:28 GMT-0400"
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                    data-shrink="false"
                   >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                    E-mail
+                  </label>
                   <div
-                    class="Component-root-id undefined Component-neutralDot-id"
+                    class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
                   >
-                    Partially fulfilled
+                    <input
+                      aria-invalid="true"
+                      class="MuiInput-input-id MuiInput-inputType-id"
+                      name="email"
+                      type="email"
+                      value=""
+                    />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $234.93
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  8
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658647953"
-                    title="Tue Sep 11 2018 05:37:27 GMT-0400"
+                  <p
+                    class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                   >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                    Generic form error
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Primary address
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                The primary address of this customer.
+              </p>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
+              >
+                <div>
                   <div
-                    class="Component-root-id undefined Component-neutralDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Partially fulfilled
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $485.19
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  7
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658647828"
-                    title="Tue Sep 11 2018 05:37:27 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      First name
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInput-input-id"
+                        name="firstName"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic form error
+                    </p>
+                  </div>
+                </div>
+                <div>
                   <div
-                    class="Component-root-id undefined Component-neutralDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Partially fulfilled
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Last name
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInput-input-id"
+                        name="lastName"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic form error
+                    </p>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $223.54
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  6
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658647636"
-                    title="Tue Sep 11 2018 05:37:27 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                <div>
                   <div
-                    class="Component-root-id undefined Component-successDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Fulfilled
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Company
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInput-input-id"
+                        name="companyName"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic form error
+                    </p>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $237.55
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  5
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658647420"
-                    title="Tue Sep 11 2018 05:37:27 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
+                </div>
+                <div>
                   <div
-                    class="Component-root-id undefined Component-neutralDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Partially fulfilled
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Phone
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInput-input-id"
+                        name="phone"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic form error
+                    </p>
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $453.55
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  4
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <time
-                    datetime="1536658647230"
-                    title="Tue Sep 11 2018 05:37:27 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  Address line 1
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
                 >
-                  <div
-                    class="Component-root-id undefined Component-neutralDot-id"
-                  >
-                    Partially fulfilled
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+                  <input
+                    aria-invalid="true"
+                    class="MuiInput-input-id"
+                    name="streetAddress1"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                 >
-                  $812.67
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  Generic form error
+                </p>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  3
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  Address line 2
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
                 >
-                  <time
-                    datetime="1536658646972"
-                    title="Tue Sep 11 2018 05:37:26 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <input
+                    aria-invalid="true"
+                    class="MuiInput-input-id"
+                    name="streetAddress2"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
                 >
+                  Generic form error
+                </p>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
+              >
+                <div>
                   <div
-                    class="Component-root-id undefined Component-neutralDot-id"
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                   >
-                    Partially fulfilled
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $481.41
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      City
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInput-input-id"
+                        name="city"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic form error
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      ZIP / Postal code
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInput-input-id"
+                        name="postalCode"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic form error
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
+              >
+                <div>
+                  <div
+                    class="MuiFormControl-root-id Component-formControl-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Country
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <div
+                        class="MuiSelect-root-id"
+                      >
+                        <div
+                          aria-haspopup="true"
+                          aria-pressed="false"
+                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInput-input-id"
+                          role="button"
+                          tabindex="0"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </div>
+                        <input
+                          name="country"
+                          type="hidden"
+                          value=""
+                        />
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic form error
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Country area
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="true"
+                        class="MuiInput-input-id"
+                        name="countryArea"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                    >
+                      Generic form error
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Notes
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Enter any extra infotmation regarding this customer.
+              </p>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+                >
+                  <div
+                    class="Textarea-root-id"
+                    style="height:19px"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="true"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                      name="note"
+                      rows="1"
+                      type="text"
+                    />
+                  </div>
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Customers / Create customer loading 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          Add customer
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Customer overview
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="Component-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"
+                  >
+                    E-mail
+                  </label>
+                  <div
+                    class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInput-input-id MuiInput-disabled-id MuiInput-inputType-id"
+                      disabled=""
+                      name="email"
+                      type="email"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Primary address
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                The primary address of this customer.
+              </p>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-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"
+                    >
+                      First name
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id MuiInput-disabled-id"
+                        disabled=""
+                        name="firstName"
+                        type="text"
+                        value=""
+                      />
+                    </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"
+                    >
+                      Last name
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id MuiInput-disabled-id"
+                        disabled=""
+                        name="lastName"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-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"
+                    >
+                      Company
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id MuiInput-disabled-id"
+                        disabled=""
+                        name="companyName"
+                        type="text"
+                        value=""
+                      />
+                    </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"
+                    >
+                      Phone
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id MuiInput-disabled-id"
+                        disabled=""
+                        name="phone"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="Component-spacer-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"
+                >
+                  Address line 1
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id MuiInput-disabled-id"
+                    disabled=""
+                    name="streetAddress1"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-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"
+                >
+                  Address line 2
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id MuiInput-disabled-id"
+                    disabled=""
+                    name="streetAddress2"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-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"
+                    >
+                      City
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id MuiInput-disabled-id"
+                        disabled=""
+                        name="city"
+                        type="text"
+                        value=""
+                      />
+                    </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"
+                    >
+                      ZIP / Postal code
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id MuiInput-disabled-id"
+                        disabled=""
+                        name="postalCode"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="Component-root-id"
+              >
+                <div>
+                  <div
+                    class="MuiFormControl-root-id Component-formControl-id"
+                  >
+                    <label
+                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                      data-shrink="false"
+                    >
+                      Country
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <div
+                        class="MuiSelect-root-id"
+                      >
+                        <div
+                          aria-haspopup="true"
+                          aria-pressed="false"
+                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInput-input-id MuiInput-disabled-id"
+                          role="button"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </div>
+                        <input
+                          name="country"
+                          type="hidden"
+                          value=""
+                        />
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
+                    </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"
+                    >
+                      Country area
+                    </label>
+                    <div
+                      class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInput-input-id MuiInput-disabled-id"
+                        disabled=""
+                        name="countryArea"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Notes
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id"
+              >
+                Enter any extra infotmation regarding this customer.
+              </p>
+              <div
+                class="Component-spacer-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"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+                >
+                  <div
+                    class="Textarea-root-id"
+                    style="height:19px"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-disabled-id MuiInput-inputMultiline-id"
+                      disabled=""
+                      name="note"
+                      rows="1"
+                      type="text"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Customers / Customer details default 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          elizabeth.vaughn@example.com
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id Component-cardTitle-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                General Information
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Customer since: May 2017
+                </span>
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      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="MuiSwitchBase-input-id"
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  User account active
+                </span>
+              </label>
+              <div
+                class="Component-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"
+                >
+                  E-mail
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id MuiInput-inputType-id"
+                    name="email"
+                    type="email"
+                    value="elizabeth.vaughn@example.com"
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-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"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+                >
+                  <div
+                    class="Textarea-root-id"
+                    style="height:19px"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                      name="note"
+                      rows="1"
+                      type="text"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Recent orders
+              </span>
+              <div
+                class="Component-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"
+                  >
+                    View all orders
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </button>
+              </div>
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+              padding="default"
+            >
+              <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"
+                  >
+                    Status
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Component-textRight-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id Component-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    #8234
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <time
+                      datetime="1525685850124"
+                      title="Mon May 07 2018 05:37:30 GMT-0400"
+                    >
+                      3 months ago
+                    </time>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <div
+                      class="Component-root-id undefined Component-successDot-id"
+                    >
+                      Paid
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id Component-textRight-id"
+                  >
+                    $1,215.89
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Address Information
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id Component-label-id"
+              >
+                Address
+              </p>
+              <address
+                style="font-style:inherit"
+              >
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Elizabeth Vaughn
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  419 Ruiz Orchard Apt. 199
+                  <br />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                   52203 Port Danielshire
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Szwecja
+                </span>
+              </address>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Customer History
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last login
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                <time
+                  datetime="1525685850124"
+                  title="Mon May 07 2018 05:37:30 GMT-0400"
+                >
+                  3 months ago
+                </time>
+              </h2>
+            </div>
+            <hr
+              class="Component-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last order
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                <time
+                  datetime="1525685850124"
+                  title="Mon May 07 2018 05:37:30 GMT-0400"
+                >
+                  3 months ago
+                </time>
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Customers / Customer details different addresses 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          elizabeth.vaughn@example.com
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id Component-cardTitle-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                General Information
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Customer since: May 2017
+                </span>
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      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="MuiSwitchBase-input-id"
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  User account active
+                </span>
+              </label>
+              <div
+                class="Component-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"
+                >
+                  E-mail
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id MuiInput-inputType-id"
+                    name="email"
+                    type="email"
+                    value="elizabeth.vaughn@example.com"
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-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"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+                >
+                  <div
+                    class="Textarea-root-id"
+                    style="height:19px"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                      name="note"
+                      rows="1"
+                      type="text"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Recent orders
+              </span>
+              <div
+                class="Component-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"
+                  >
+                    View all orders
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </button>
+              </div>
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+              padding="default"
+            >
+              <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"
+                  >
+                    Status
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Component-textRight-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id Component-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    #8234
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <time
+                      datetime="1525685850124"
+                      title="Mon May 07 2018 05:37:30 GMT-0400"
+                    >
+                      3 months ago
+                    </time>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <div
+                      class="Component-root-id undefined Component-successDot-id"
+                    >
+                      Paid
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id Component-textRight-id"
+                  >
+                    $1,215.89
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Address Information
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id Component-label-id"
+              >
+                Billing address
+              </p>
+              <address
+                style="font-style:inherit"
+              >
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Elizabeth Vaughn
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  419 Ruiz Orchard Apt. 199
+                  <br />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                   52203 Port Danielshire
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Szwecja
+                </span>
+              </address>
+            </div>
+            <hr
+              class="Component-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id Component-label-id"
+              >
+                Shipping address
+              </p>
+              <address
+                style="font-style:inherit"
+              >
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Elizabeth Vaughn
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  419 Ruiz Orchard Apt. 199
+                  <br />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                   52203 Port Danielshire
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Szwecja
+                </span>
+              </address>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Customer History
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last login
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                <time
+                  datetime="1525685850124"
+                  title="Mon May 07 2018 05:37:30 GMT-0400"
+                >
+                  3 months ago
+                </time>
+              </h2>
+            </div>
+            <hr
+              class="Component-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last order
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                <time
+                  datetime="1525685850124"
+                  title="Mon May 07 2018 05:37:30 GMT-0400"
+                >
+                  3 months ago
+                </time>
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          elizabeth.vaughn@example.com
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id Component-cardTitle-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                General Information
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Customer since: May 2017
+                </span>
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-checked-id MuiCheckbox-checked-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      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="MuiSwitchBase-input-id"
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
+                >
+                  User account active
+                </span>
+              </label>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  E-mail
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInput-input-id MuiInput-inputType-id"
+                    name="email"
+                    type="email"
+                    value="elizabeth.vaughn@example.com"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+                >
+                  <div
+                    class="Textarea-root-id"
+                    style="height:19px"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="true"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                      name="note"
+                      rows="1"
+                      type="text"
+                    />
+                  </div>
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Recent orders
+              </span>
+              <div
+                class="Component-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"
+                  >
+                    View all orders
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </button>
+              </div>
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+              padding="default"
+            >
+              <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"
+                  >
+                    Status
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Component-textRight-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id Component-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    #8234
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <time
+                      datetime="1525685850124"
+                      title="Mon May 07 2018 05:37:30 GMT-0400"
+                    >
+                      3 months ago
+                    </time>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <div
+                      class="Component-root-id undefined Component-successDot-id"
+                    >
+                      Paid
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id Component-textRight-id"
+                  >
+                    $1,215.89
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Address Information
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id Component-label-id"
+              >
+                Address
+              </p>
+              <address
+                style="font-style:inherit"
+              >
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Elizabeth Vaughn
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  419 Ruiz Orchard Apt. 199
+                  <br />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                   52203 Port Danielshire
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Szwecja
+                </span>
+              </address>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Customer History
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last login
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                <time
+                  datetime="1525685850124"
+                  title="Mon May 07 2018 05:37:30 GMT-0400"
+                >
+                  3 months ago
+                </time>
+              </h2>
+            </div>
+            <hr
+              class="Component-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last order
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                <time
+                  datetime="1525685850124"
+                  title="Mon May 07 2018 05:37:30 GMT-0400"
+                >
+                  3 months ago
+                </time>
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Customers / Customer details loading 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id Component-cardTitle-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                General Information
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Customer since: Oct 2018
+                </span>
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-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 MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-disabled-id MuiCheckbox-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      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="MuiSwitchBase-input-id"
+                      disabled=""
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  User account active
+                </span>
+              </label>
+              <div
+                class="Component-spacer-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="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id MuiInput-disabled-id MuiInput-inputType-id"
+                    disabled=""
+                    name="email"
+                    type="email"
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-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"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+                >
+                  <div
+                    class="Textarea-root-id"
+                    style="height:19px"
+                  >
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-disabled-id MuiInput-inputMultiline-id"
+                      disabled=""
+                      name="note"
+                      rows="1"
+                      type="text"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Recent orders
+              </span>
+              <div
+                class="Component-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"
+                  >
+                    View all orders
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </button>
+              </div>
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+              padding="default"
+            >
+              <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"
+                  >
+                    Status
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Component-textRight-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id Component-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"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Address Information
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id Component-label-id"
+              >
+                Address
+              </p>
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Customer History
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last login
+              </aside>
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+            <hr
+              class="Component-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last order
+              </aside>
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          elizabeth.vaughn@example.com
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id Component-cardTitle-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                General Information
+                <span
+                  class="MuiTypography-root-id MuiTypography-caption-id"
+                >
+                  Customer since: May 2017
+                </span>
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
-                >
-                  2
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <time
-                    datetime="1536658646751"
-                    title="Tue Sep 11 2018 05:37:26 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-checked-id MuiCheckbox-checked-id"
                 >
-                  <div
-                    class="Component-root-id undefined Component-neutralDot-id"
+                  <span
+                    class="MuiIconButton-label-id"
                   >
-                    Partially fulfilled
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      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="MuiSwitchBase-input-id"
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                 >
-                  $569.19
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  User account active
+                </span>
+              </label>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-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"
                 >
-                  1
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  E-mail
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
                 >
-                  <time
-                    datetime="1536658646314"
-                    title="Tue Sep 11 2018 05:37:26 GMT-0400"
-                  >
-                    in a month
-                  </time>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id MuiInput-inputType-id"
+                    name="email"
+                    type="email"
+                    value="elizabeth.vaughn@example.com"
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-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"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
                 >
                   <div
-                    class="Component-root-id undefined Component-neutralDot-id"
+                    class="Textarea-root-id"
+                    style="height:19px"
                   >
-                    Partially fulfilled
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                      name="note"
+                      rows="1"
+                      type="text"
+                    />
                   </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
-                >
-                  $557.00
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="Component-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
-            >
-              Default billing address
-            </span>
-            <div
-              class="Component-toolbar-id"
-            />
+                </div>
+              </div>
+            </div>
           </div>
           <div
-            class="Component-children-id"
-          />
-          <hr
-            class="Component-hr-id"
+            class="Component-spacer-id"
           />
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <address>
+            <div
+              class="Component-root-id"
+            >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
               >
-                Alexander Simonis
+                Recent orders
               </span>
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              <div
+                class="Component-toolbar-id"
               >
-                83772 Savanah Summit
-                <br />
-              </span>
-              <span
-                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"
+                  >
+                    View all orders
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </button>
+              </div>
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+              padding="default"
+            >
+              <thead
+                class="MuiTableHead-root-id"
               >
-                 47639-5237 Thompsontown, Rhode Island
-              </span>
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-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"
+                  >
+                    Status
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Component-textRight-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
               >
-                Buckinghamshire, Swaziland
-              </span>
-            </address>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id Component-link-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    #8234
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <time
+                      datetime="1525685850124"
+                      title="Mon May 07 2018 05:37:30 GMT-0400"
+                    >
+                      3 months ago
+                    </time>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <div
+                      class="Component-root-id undefined Component-successDot-id"
+                    >
+                      Paid
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id Component-textRight-id"
+                  >
+                    $1,215.89
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-          <hr
-            class="Component-hr-id"
-          />
+        </div>
+        <div>
           <div
-            class="Component-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            <div
+              class="Component-root-id"
             >
-              Default shipping address
-            </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Address Information
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
             <div
-              class="Component-toolbar-id"
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
             />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id Component-label-id"
+              >
+                Address
+              </p>
+              <address
+                style="font-style:inherit"
+              >
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Elizabeth Vaughn
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  419 Ruiz Orchard Apt. 199
+                  <br />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                   52203 Port Danielshire
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Szwecja
+                </span>
+              </address>
+            </div>
           </div>
           <div
-            class="Component-children-id"
-          />
-          <hr
-            class="Component-hr-id"
+            class="Component-spacer-id"
           />
           <div
-            class="MuiCardContent-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <address>
+            <div
+              class="Component-root-id"
+            >
               <span
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
               >
-                Alexander Simonis
+                Customer History
               </span>
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id"
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
               >
-                780 Jaime Prairie
-                <br />
-              </span>
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                Last login
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
               >
-                 21665 West Bret, North Dakota
-              </span>
-              <span
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                -
+              </h2>
+            </div>
+            <hr
+              class="Component-root-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
               >
-                Sudan
-              </span>
-            </address>
+                Last order
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                <time
+                  datetime="1525685850124"
+                  title="Mon May 07 2018 05:37:30 GMT-0400"
+                >
+                  3 months ago
+                </time>
+              </h2>
+            </div>
           </div>
         </div>
       </div>
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Customers / Customer details when loading 1`] = `
+exports[`Storyshots Views / Customers / Customer details never placed order 1`] = `
 <div>
-  <div
-    class="Component-md-id"
-  >
+  <form>
     <div
-      class="Component-root-id"
+      class="Component-md-id"
     >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+      <div
+        class="Component-root-id"
       >
-        <span
-          class="Skeleton-skeleton-id"
-          style="width:10em"
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          ‌
-        </span>
-      </h2>
-      <div
-        class="Component-action-id"
-      />
-    </div>
-    <div
-      class="Component-root-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Component-root-id"
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
         >
+          elizabeth.vaughn@example.com
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <div>
           <div
-            class="Component-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
-            >
-              User details
-            </span>
             <div
-              class="Component-toolbar-id"
+              class="Component-root-id Component-cardTitle-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"
-                >
-                  Edit customer
-                </span>
-              </button>
-              <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="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
               >
+                General Information
                 <span
-                  class="MuiButton-label-id"
+                  class="MuiTypography-root-id MuiTypography-caption-id"
                 >
-                  Remove customer
+                  Customer since: May 2017
                 </span>
-              </button>
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
             </div>
-          </div>
-          <div
-            class="Component-children-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              style="width:10rem"
-            >
-              ‌
-            </span>
-          </div>
-          <hr
-            class="Component-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <table
-            class="MuiTable-root-id"
-            padding="default"
-          >
-            <thead
-              class="MuiTableHead-root-id"
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <label
+                class="MuiFormControlLabel-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
+                <span
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-checked-id MuiCheckbox-checked-id"
                 >
-                  #
-                </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"
+                      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="MuiSwitchBase-input-id"
+                      name="isActive"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root-id"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiFormControlLabel-label-id"
                 >
-                  Created
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
+                  User account active
+                </span>
+              </label>
+              <div
+                class="Component-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"
                 >
-                  Status
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-textRight-id"
-                  scope="col"
+                  E-mail
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
                 >
-                  Price
-                </th>
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id MuiInput-inputType-id"
+                    name="email"
+                    type="email"
+                    value="elizabeth.vaughn@example.com"
+                  />
+                </div>
+              </div>
+              <div
+                class="Component-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                  colspan="4"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
                 >
                   <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                    class="Textarea-root-id"
+                    style="height:19px"
                   >
-                    <div
-                      class="TablePagination-spacer-id"
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-hidden="true"
+                      class="Textarea-textarea-id Textarea-shadow-id"
+                      readonly=""
+                      rows="1"
+                      tabindex="-1"
+                    />
+                    <textarea
+                      aria-invalid="false"
+                      class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                      name="note"
+                      rows="1"
+                      type="text"
                     />
-                    <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"
-                            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"
-                            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"
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="Component-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-link-id"
+                Recent orders
+              </span>
+              <div
+                class="Component-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="Skeleton-skeleton-id"
+                    class="MuiButton-label-id"
                   >
-                    ‌
+                    View all orders
                   </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"
+                    class="MuiTouchRipple-root-id"
+                  />
+                </button>
+              </div>
+            </div>
+            <div
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+              padding="default"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
+                    scope="col"
                   >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-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"
+                  >
+                    Status
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Component-textRight-id"
+                    scope="col"
+                  >
+                    Total
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id Component-link-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    #8234
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <time
+                      datetime="1525685850124"
+                      title="Mon May 07 2018 05:37:30 GMT-0400"
+                    >
+                      3 months ago
+                    </time>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
+                  >
+                    <div
+                      class="Component-root-id undefined Component-successDot-id"
+                    >
+                      Paid
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id Component-textRight-id"
                   >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    $1,215.89
+                  </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="Component-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            <div
+              class="Component-root-id"
             >
-              Default billing address
-            </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Address Information
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
             <div
-              class="Component-toolbar-id"
+              class="Component-children-id"
             />
-          </div>
-          <div
-            class="Component-children-id"
-          />
-          <hr
-            class="Component-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
             >
-              ‌
-            </span>
+              <p
+                class="MuiTypography-root-id MuiTypography-body1-id Component-label-id"
+              >
+                Address
+              </p>
+              <address
+                style="font-style:inherit"
+              >
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Elizabeth Vaughn
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  419 Ruiz Orchard Apt. 199
+                  <br />
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                   52203 Port Danielshire
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Szwecja
+                </span>
+              </address>
+            </div>
           </div>
-          <hr
-            class="Component-hr-id"
+          <div
+            class="Component-spacer-id"
           />
           <div
-            class="Component-root-id"
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            <div
+              class="Component-root-id"
             >
-              Default shipping address
-            </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+              >
+                Customer History
+              </span>
+              <div
+                class="Component-toolbar-id"
+              />
+            </div>
             <div
-              class="Component-toolbar-id"
+              class="Component-children-id"
+            />
+            <hr
+              class="Component-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last login
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                <time
+                  datetime="1525685850124"
+                  title="Mon May 07 2018 05:37:30 GMT-0400"
+                >
+                  3 months ago
+                </time>
+              </h2>
+            </div>
+            <hr
+              class="Component-root-id"
             />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <aside
+                class="MuiTypography-root-id MuiTypography-body2-id Component-label-id"
+              >
+                Last order
+              </aside>
+              <h2
+                class="MuiTypography-root-id MuiTypography-title-id Component-value-id"
+              >
+                -
+              </h2>
+            </div>
           </div>
-          <div
-            class="Component-children-id"
+        </div>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
           />
-          <hr
-            class="Component-hr-id"
+        </button>
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
           />
-          <div
-            class="MuiCardContent-root-id"
+        </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"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
           >
-            <span
-              class="Skeleton-skeleton-id"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
+            Save
+          </span>
+        </button>
       </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
@@ -13810,22 +17031,16 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
             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"
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-wideCell-id"
               scope="col"
             >
-              E-mail
+              Customer e-mail
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-textRight-id"
               scope="col"
             >
-              Localization
+              Orders
             </th>
           </tr>
         </thead>
@@ -13837,7 +17052,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
+              colspan="2"
             >
               <div
                 class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
@@ -13874,801 +17089,391 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
                     tabindex="0"
                     type="button"
                   >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        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>
-                    <span
-                      class="MuiTouchRipple-root-id"
-                    />
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="Component-link-id"
-              >
-                Alexander Simonis
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              alexander_simonis@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Thompsontown, Swaziland
-            </td>
-          </tr>
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              <span
-                class="Component-link-id"
-              >
-                Augustus Crist
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              augustus_crist@example.com
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Lake Adela, Kenya
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        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>
+                    <span
+                      class="MuiTouchRipple-root-id"
+                    />
+                  </button>
+                </div>
+              </div>
             </td>
           </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Kelton Eichmann
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              kelton_eichmann@example.com
+              curtis.bailey@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              East Raymond, San Marino
+              2
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Magnolia Brakus
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              magnolia_brakus@example.com
+              curtis.bailey@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Torphyton, Chad
+              2
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Adonis Pacocha
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              adonis_pacocha@example.com
+              elizabeth.vaughn@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Port Savanahfort, Greenland
+              1
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Carlie Walsh
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              carlie_walsh@example.com
+              michael.martinez@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              New Eugenia, Iceland
+              1
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Junius Crist
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              junius_crist@example.com
+              kayla.griffin@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Labadiechester, Morocco
+              0
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Pedro Harvey
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              pedro_harvey@example.com
+              donna.robinson@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Lydiahaven, Cambodia
+              0
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Raven Deckow
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              raven_deckow@example.com
+              james.ball@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              East Leilafurt, Bulgaria
+              1
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Paige Lesch
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              paige_lesch@example.com
+              anthony.gonzalez@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Windlerton, Andorra
+              2
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Santino Bins
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              santino_bins@example.com
+              anthony.gonzalez@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Gleichnerborough, Dominica
+              2
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Quinn Barrows
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              quinn_barrows@example.com
+              wesley.davis@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              North Sister, Bangladesh
+              1
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Berry Windler
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              berry_windler@example.com
+              laura.stone@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Kenstad, United Arab Emirates
+              1
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Johnathon Kohler
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              johnathon_kohler@example.com
+              william.miller@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Jamilstad, Uruguay
+              0
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Linwood Windler
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              linwood_windler@example.com
+              donald.solomon@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Keltonland, Denmark
+              0
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Component-link-id"
-              >
-                Timmy Macejkovic
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              timmy_macejkovic@example.com
+              anthony.young@example.com
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              West Feliciamouth, Japan
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer list when loading 1`] = `
-<div>
-  <div
-    class="Component-md-id"
-  >
-    <div
-      class="Component-root-id"
-    >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
-      >
-        Customers
-      </h2>
-      <div
-        class="Component-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 customer 
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              viewBox="0 0 24 24"
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              <g>
-                <path
-                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                />
-              </g>
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-    >
-      <table
-        class="MuiTable-root-id"
-        padding="default"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
+              0
+            </td>
+          </tr>
           <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
-            >
-              Name
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              E-mail
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id"
-              scope="col"
+              sharon.hanson@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Localization
-            </th>
+              0
+            </td>
           </tr>
-        </thead>
-        <tfoot
-          class="MuiTableFooter-root-id"
-        >
           <tr
-            class="MuiTableRow-root-id MuiTableRow-footer-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="3"
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <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"
-                        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"
-                        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>
-                    <span
-                      class="MuiTouchRipple-root-id"
-                    />
-                  </button>
-                </div>
-              </div>
+              laura.jensen@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+            >
+              1
             </td>
           </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
           <tr
-            class="MuiTableRow-root-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
+              mark.lee@example.com
             </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+            >
+              1
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
+              david.lawson@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+            >
+              2
             </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
+              david.lawson@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+            >
+              2
             </td>
           </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Edit customer default 1`] = `
-<div>
-  <form>
-    <div
-      class="Component-md-id"
-    >
-      <div
-        class="Component-root-id"
-      >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
-        >
-          Edit customer
-        </h2>
-        <div
-          class="Component-action-id"
-        />
-      </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"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-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"
             >
-              E-mail
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+              faith.smith@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              <input
-                aria-invalid="false"
-                class="MuiInput-input-id"
-                name="email"
-                type="text"
-                value="alexander_simonis@example.com"
-              />
-            </div>
-          </div>
-          <div
-            class="Component-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              0
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-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"
             >
-              Note
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+              john.jones@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              <textarea
-                aria-invalid="false"
-                class="MuiInput-input-id MuiInput-inputMultiline-id"
-                name="note"
-                rows="10"
-                type="text"
-              />
-            </div>
-            <p
-              class="MuiFormHelperText-root-id"
+              0
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Optional
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="Component-root-id"
-      >
-        <div
-          class="Component-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+              ronald.fisher@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+            >
+              0
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
-            Cancel
-          </span>
-          <span
-            class="MuiTouchRipple-root-id"
-          />
-        </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"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              jason.gray@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+            >
+              0
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
           >
-            Save
-          </span>
-        </button>
-      </div>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              admin@example.com
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
+            >
+              6
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </form>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Views / Customers / Edit customer when adding new customer 1`] = `
+exports[`Storyshots Views / Customers / Customer list loading 1`] = `
 <div>
-  <form>
+  <div
+    class="Component-md-id"
+  >
     <div
-      class="Component-md-id"
+      class="Component-root-id"
     >
-      <div
-        class="Component-root-id"
-      >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
-        >
-          Add customer
-        </h2>
-        <div
-          class="Component-action-id"
-        />
-      </div>
-      <div
-        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
       >
-        <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"
-            >
-              E-mail
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInput-input-id"
-                name="email"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="Component-spacer-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"
-            >
-              Note
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
-            >
-              <textarea
-                aria-invalid="false"
-                class="MuiInput-input-id MuiInput-inputMultiline-id"
-                name="note"
-                rows="10"
-                type="text"
-              />
-            </div>
-            <p
-              class="MuiFormHelperText-root-id"
-            >
-              Optional
-            </p>
-          </div>
-        </div>
-      </div>
+        Customers
+      </h2>
       <div
-        class="Component-root-id"
+        class="Component-action-id"
       >
-        <div
-          class="Component-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-          <span
-            class="MuiTouchRipple-root-id"
-          />
-        </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"
           disabled=""
@@ -14678,247 +17483,304 @@ exports[`Storyshots Views / Customers / Edit customer when adding new customer 1
           <span
             class="MuiButton-label-id"
           >
-            Save
+            Add customer 
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                />
+              </g>
+            </svg>
           </span>
         </button>
       </div>
     </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Edit customer when loading 1`] = `
-<div>
-  <form>
     <div
-      class="Component-md-id"
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
     >
-      <div
-        class="Component-root-id"
-      >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
-        >
-          Edit customer
-        </h2>
-        <div
-          class="Component-action-id"
-        />
-      </div>
-      <div
-        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      <table
+        class="MuiTable-root-id"
+        padding="default"
       >
-        <div
-          class="MuiCardContent-root-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 MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-              data-shrink="false"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-wideCell-id"
+              scope="col"
             >
-              E-mail
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+              Customer e-mail
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-textRight-id"
+              scope="col"
             >
-              <input
-                aria-invalid="false"
-                class="MuiInput-input-id MuiInput-disabled-id"
-                disabled=""
-                name="email"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="Component-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              Orders
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
           >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-              data-shrink="false"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="2"
             >
-              Note
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+              <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"
+                        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"
+                        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"
             >
-              <textarea
-                aria-invalid="false"
-                class="MuiInput-input-id MuiInput-disabled-id MuiInput-inputMultiline-id"
-                disabled=""
-                name="note"
-                rows="10"
-                type="text"
-              />
-            </div>
-            <p
-              class="MuiFormHelperText-root-id"
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              Optional
-            </p>
-          </div>
-        </div>
-      </div>
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Customers / Customer list no data 1`] = `
+<div>
+  <div
+    class="Component-md-id"
+  >
+    <div
+      class="Component-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+      >
+        Customers
+      </h2>
       <div
-        class="Component-root-id"
+        class="Component-action-id"
       >
-        <div
-          class="Component-spacer-id"
-        />
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-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
+            Add customer 
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                />
+              </g>
+            </svg>
           </span>
           <span
             class="MuiTouchRipple-root-id"
           />
         </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"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Save
-          </span>
-        </button>
       </div>
     </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Edit customer with errors 1`] = `
-<div>
-  <form>
     <div
-      class="Component-md-id"
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
     >
-      <div
-        class="Component-root-id"
-      >
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
-        >
-          Edit customer
-        </h2>
-        <div
-          class="Component-action-id"
-        />
-      </div>
-      <div
-        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      <table
+        class="MuiTable-root-id"
+        padding="default"
       >
-        <div
-          class="MuiCardContent-root-id"
+        <thead
+          class="MuiTableHead-root-id"
         >
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiFormLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-              data-shrink="true"
-            >
-              E-mail
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
-            >
-              <input
-                aria-invalid="true"
-                class="MuiInput-input-id"
-                name="email"
-                type="text"
-                value="alexander_simonis@example.com"
-              />
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-            >
-              This field cannot be empty
-            </p>
-          </div>
-          <div
-            class="Component-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <label
-              class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
-              data-shrink="false"
-            >
-              Note
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-wideCell-id"
+              scope="col"
             >
-              <textarea
-                aria-invalid="true"
-                class="MuiInput-input-id MuiInput-inputMultiline-id"
-                name="note"
-                rows="10"
-                type="text"
-              />
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+              Customer e-mail
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-textRight-id"
+              scope="col"
             >
-              this field cannot be empty
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="Component-root-id"
-      >
-        <div
-          class="Component-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
-          tabindex="0"
-          type="button"
+              Orders
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
           >
-            Cancel
-          </span>
-          <span
-            class="MuiTouchRipple-root-id"
-          />
-        </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"
-          disabled=""
-          tabindex="-1"
-          type="button"
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="2"
+            >
+              <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"
+                        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"
+                        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>
+                    <span
+                      class="MuiTouchRipple-root-id"
+                    />
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <tr
+            class="MuiTableRow-root-id"
           >
-            Save
-          </span>
-        </button>
-      </div>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+              colspan="2"
+            >
+              No customers found
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </form>
+  </div>
 </div>
 `;