Repository: saleor/saleor

Issue:
Return ShippingZone after shippingPriceDelete mutation
### What I'm trying to achieve
To refresh ShippingZone's cached object in dashboard 2.0 after shipping method deletion.

### Describe a proposed solution
Return ShippingZone after `shippingPriceDelete` mutation.


Discussion:

Resolving patch:
diff --git a/saleor/graphql/shipping/mutations.py b/saleor/graphql/shipping/mutations.py
--- a/saleor/graphql/shipping/mutations.py
+++ b/saleor/graphql/shipping/mutations.py
@@ -1,31 +1,27 @@
 from textwrap import dedent
 
 import graphene
+from graphql_jwt.decorators import permission_required
 
 from ...dashboard.shipping.forms import default_shipping_zone_exists
 from ...shipping import models
-from ..core.mutations import ModelDeleteMutation, ModelMutation
+from ..core.mutations import BaseMutation, ModelDeleteMutation, ModelMutation
 from ..core.scalars import Decimal, WeightScalar
 from .enums import ShippingMethodTypeEnum
-from .types import ShippingZone
+from .types import ShippingMethod, ShippingZone
 
 
 class ShippingPriceInput(graphene.InputObjectType):
-    name = graphene.String(
-        description='Name of the shipping method. Visible to customers')
+    name = graphene.String(description='Name of the shipping method.')
     price = Decimal(description='Shipping price of the shipping method.')
     minimum_order_price = Decimal(
-        description='Minimum order price to use this shipping method',
-        required=False)
+        description='Minimum order price to use this shipping method')
     maximum_order_price = Decimal(
-        description='Maximum order price to use this shipping method',
-        required=False)
+        description='Maximum order price to use this shipping method')
     minimum_order_weight = WeightScalar(
-        description='Minimum order weight to use this shipping method',
-        required=False)
+        description='Minimum order weight to use this shipping method')
     maximum_order_weight = WeightScalar(
-        description='Maximum order weight to use this shipping method',
-        required=False)
+        description='Maximum order weight to use this shipping method')
     type = ShippingMethodTypeEnum(
         description='Shipping type: price or weight based.')
     shipping_zone = graphene.ID(
@@ -40,18 +36,18 @@ class ShippingZoneInput(graphene.InputObjectType):
         graphene.String,
         description='List of countries in this shipping zone.')
     default = graphene.Boolean(
-        description=dedent("""
+        description=dedent(
+            """
             Is default shipping zone, that will be used
             for countries not covered by other zones."""))
 
 
 class ShippingZoneMixin:
-
     @classmethod
     def clean_input(cls, info, instance, input, errors):
         cleaned_input = super().clean_input(info, instance, input, errors)
         default = cleaned_input.get('default')
-        if default is not None:
+        if default:
             if default_shipping_zone_exists(instance.pk):
                 cls.add_error(
                     errors, 'default', 'Default shipping zone already exists.')
@@ -115,42 +111,37 @@ def user_is_allowed(cls, user, input):
 
 
 class ShippingPriceMixin:
-
     @classmethod
     def clean_input(cls, info, instance, input, errors):
         cleaned_input = super().clean_input(info, instance, input, errors)
         type = cleaned_input.get('type')
-        if not type:
-            return cleaned_input
-
-        if type == ShippingMethodTypeEnum.PRICE.value:
-            min_price = cleaned_input.get('minimum_order_price')
-            max_price = cleaned_input.get('maximum_order_price')
-            if min_price is None:
-                cls.add_error(
-                    errors, 'minimum_order_price',
-                    'Minimum order price is required'
-                    ' for Price Based shipping.')
-            elif max_price is not None and max_price <= min_price:
-                cls.add_error(
-                    errors, 'maximum_order_price',
-                    'Maximum order price should be larger than the minimum.')
-        else:
-            min_weight = cleaned_input.get('minimum_order_weight')
-            max_weight = cleaned_input.get('maximum_order_weight')
-            if min_weight is None:
-                cls.add_error(
-                    errors, 'minimum_order_weight',
-                    'Minimum order weight is required for'
-                    ' Weight Based shipping.')
-            elif max_weight is not None and max_weight <= min_weight:
-                cls.add_error(
-                    errors, 'maximum_order_weight',
-                    'Maximum order weight should be larger than the minimum.')
+        if type:
+            if type == ShippingMethodTypeEnum.PRICE.value:
+                min_price = cleaned_input.get('minimum_order_price')
+                max_price = cleaned_input.get('maximum_order_price')
+                if (min_price is not None and max_price is not None
+                        and max_price <= min_price):
+                    cls.add_error(
+                        errors, 'maximum_order_price',
+                        'Maximum order price should be larger than the '
+                        'minimum order price.')
+            else:
+                min_weight = cleaned_input.get('minimum_order_weight')
+                max_weight = cleaned_input.get('maximum_order_weight')
+                if (min_weight is not None and max_weight is not None
+                        and max_weight <= min_weight):
+                    cls.add_error(
+                        errors, 'maximum_order_weight',
+                        'Maximum order weight should be larger than the '
+                        'minimum order weight.')
         return cleaned_input
 
 
 class ShippingPriceCreate(ShippingPriceMixin, ModelMutation):
+    shipping_zone = graphene.Field(
+        ShippingZone,
+        description='A shipping zone to which the shipping method belongs.')
+
     class Arguments:
         input = ShippingPriceInput(
             description='Fields required to create a shipping price',
@@ -164,8 +155,18 @@ class Meta:
     def user_is_allowed(cls, user, input):
         return user.has_perm('shipping.manage_shipping')
 
+    @classmethod
+    def success_response(cls, instance):
+        response = super().success_response(instance)
+        response.shipping_zone = instance.shipping_zone
+        return response
+
 
 class ShippingPriceUpdate(ShippingPriceMixin, ModelMutation):
+    shipping_zone = graphene.Field(
+        ShippingZone,
+        description='A shipping zone to which the shipping method belongs.')
+
     class Arguments:
         id = graphene.ID(
             description='ID of a shipping price to update.', required=True)
@@ -181,16 +182,42 @@ class Meta:
     def user_is_allowed(cls, user, input):
         return user.has_perm('shipping.manage_shipping')
 
+    @classmethod
+    def success_response(cls, instance):
+        response = super().success_response(instance)
+        response.shipping_zone = instance.shipping_zone
+        return response
+
+
+class ShippingPriceDelete(BaseMutation):
+    shipping_method = graphene.Field(
+        ShippingMethod, description='A shipping method to delete.')
+    shipping_zone = graphene.Field(
+        ShippingZone,
+        description='A shipping zone to which the shipping method belongs.')
 
-class ShippingPriceDelete(ModelDeleteMutation):
     class Arguments:
         id = graphene.ID(
             required=True, description='ID of a shipping price to delete.')
 
     class Meta:
         description = 'Deletes a shipping price.'
-        model = models.ShippingMethod
 
     @classmethod
-    def user_is_allowed(cls, user, input):
-        return user.has_perm('shipping.manage_shipping')
+    @permission_required('shipping.manage_shipping')
+    def mutate(cls, root, info, id):
+        errors = []
+        shipping_method = cls.get_node_or_error(
+            info, id, errors, 'id', only_type=ShippingMethod)
+        if not shipping_method:
+            return ShippingPriceDelete(errors=errors)
+
+        shipping_method_id = shipping_method.id
+        shipping_zone = shipping_method.shipping_zone
+
+        shipping_method.delete()
+        shipping_method.id = shipping_method_id
+        return ShippingPriceDelete(
+            shipping_method=shipping_method,
+            shipping_zone=shipping_zone,
+            errors=errors)


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
@@ -1454,6 +1454,24 @@ exports[`Storyshots Generics / Money formatting default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Generics / Money range from 1`] = `
+<div>
+  from $5.20
+</div>
+`;
+
+exports[`Storyshots Generics / Money range range 1`] = `
+<div>
+  $5.20 - $10.60
+</div>
+`;
+
+exports[`Storyshots Generics / Money range to 1`] = `
+<div>
+  to $10.60
+</div>
+`;
+
 exports[`Storyshots Generics / MultiAutocompleteSelectField with loaded data 1`] = `
 <div>
   <form>
@@ -5358,315 +5376,339 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
 </div>
 `;
 
-exports[`Storyshots Orders / OrderAddressEditDialog billing address 1`] = `<div />`;
-
-exports[`Storyshots Orders / OrderAddressEditDialog shipping address 1`] = `<div />`;
+exports[`Storyshots Generics / Weight default 1`] = `
+<div>
+  8.4 kg
+</div>
+`;
 
-exports[`Storyshots Orders / OrderCancelDialog default 1`] = `<div />`;
+exports[`Storyshots Generics / Weight range from 1`] = `
+<div>
+  from 4.2 kg
+</div>
+`;
 
-exports[`Storyshots Orders / OrderCustomer default 1`] = `
+exports[`Storyshots Generics / Weight range range 1`] = `
 <div>
-  <div
-    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-  >
-    <div
-      class="CardTitle-root-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-      >
-        Customer
-      </span>
-      <div
-        class="CardTitle-toolbar-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Edit
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="CardTitle-children-id"
-    />
-    <hr
-      class="CardTitle-hr-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Anonymous user
-      </p>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-        >
-          Contact information
-        </p>
-      </div>
-      <a
-        class="ExternalLink-link-id"
-        href="mailto:melissa.simon@example.com"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-        >
-          melissa.simon@example.com
-        </p>
-      </a>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-        >
-          Shipping Address
-        </p>
-      </div>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Melissa Simon
-      </p>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        487 Roberto Shores
-        <br />
-      </p>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        66272 West Patriciastad
-      </p>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Wyspy Salomona
-      </p>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      />
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-        >
-          Billing Address
-        </p>
-      </div>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Same as shipping address
-      </p>
-    </div>
-  </div>
+  4.2 kg - 81.9 kg
 </div>
 `;
 
-exports[`Storyshots Orders / OrderCustomer editable 1`] = `
+exports[`Storyshots Generics / Weight range to 1`] = `
 <div>
-  <div
-    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-  >
-    <div
-      class="CardTitle-root-id"
-    >
-      <span
-        class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
-      >
-        Customer
-      </span>
-      <div
-        class="CardTitle-toolbar-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Edit
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="CardTitle-children-id"
-    />
-    <hr
-      class="CardTitle-hr-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Anonymous user
-      </p>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-        >
-          Contact information
-        </p>
-      </div>
-      <a
-        class="ExternalLink-link-id"
-        href="mailto:melissa.simon@example.com"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-        >
-          melissa.simon@example.com
-        </p>
-      </a>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-        >
-          Shipping Address
-        </p>
-        <div
-          class="OrderCustomer-sectionHeaderToolbar-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Edit
-            </span>
-          </button>
-        </div>
-      </div>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Melissa Simon
-      </p>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        487 Roberto Shores
-        <br />
-      </p>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        66272 West Patriciastad
-      </p>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Wyspy Salomona
-      </p>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      />
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
-        >
-          Billing Address
-        </p>
-        <div
-          class="OrderCustomer-sectionHeaderToolbar-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Edit
-            </span>
-          </button>
-        </div>
-      </div>
-      <p
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Same as shipping address
-      </p>
-    </div>
-  </div>
+  to 81.9 kg
 </div>
 `;
 
-exports[`Storyshots Orders / OrderCustomer loading 1`] = `
+exports[`Storyshots Orders / OrderAddressEditDialog billing address 1`] = `<div />`;
+
+exports[`Storyshots Orders / OrderAddressEditDialog shipping address 1`] = `<div />`;
+
+exports[`Storyshots Orders / OrderCancelDialog default 1`] = `<div />`;
+
+exports[`Storyshots Orders / OrderCustomer default 1`] = `
+<div>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+  >
+    <div
+      class="CardTitle-root-id"
+    >
+      <span
+        class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+      >
+        Customer
+      </span>
+      <div
+        class="CardTitle-toolbar-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Edit
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="CardTitle-children-id"
+    />
+    <hr
+      class="CardTitle-hr-id"
+    />
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Anonymous user
+      </p>
+    </div>
+    <hr
+      class="Hr-root-id"
+    />
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <div
+        class="OrderCustomer-sectionHeader-id"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+        >
+          Contact information
+        </p>
+      </div>
+      <a
+        class="ExternalLink-link-id"
+        href="mailto:melissa.simon@example.com"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+        >
+          melissa.simon@example.com
+        </p>
+      </a>
+    </div>
+    <hr
+      class="Hr-root-id"
+    />
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <div
+        class="OrderCustomer-sectionHeader-id"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+        >
+          Shipping Address
+        </p>
+      </div>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Melissa Simon
+      </p>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        487 Roberto Shores
+        <br />
+      </p>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        66272 West Patriciastad
+      </p>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Wyspy Salomona
+      </p>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      />
+    </div>
+    <hr
+      class="Hr-root-id"
+    />
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <div
+        class="OrderCustomer-sectionHeader-id"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+        >
+          Billing Address
+        </p>
+      </div>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Same as shipping address
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Orders / OrderCustomer editable 1`] = `
+<div>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+  >
+    <div
+      class="CardTitle-root-id"
+    >
+      <span
+        class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+      >
+        Customer
+      </span>
+      <div
+        class="CardTitle-toolbar-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Edit
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="CardTitle-children-id"
+    />
+    <hr
+      class="CardTitle-hr-id"
+    />
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Anonymous user
+      </p>
+    </div>
+    <hr
+      class="Hr-root-id"
+    />
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <div
+        class="OrderCustomer-sectionHeader-id"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+        >
+          Contact information
+        </p>
+      </div>
+      <a
+        class="ExternalLink-link-id"
+        href="mailto:melissa.simon@example.com"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+        >
+          melissa.simon@example.com
+        </p>
+      </a>
+    </div>
+    <hr
+      class="Hr-root-id"
+    />
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <div
+        class="OrderCustomer-sectionHeader-id"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+        >
+          Shipping Address
+        </p>
+        <div
+          class="OrderCustomer-sectionHeaderToolbar-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Edit
+            </span>
+          </button>
+        </div>
+      </div>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Melissa Simon
+      </p>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        487 Roberto Shores
+        <br />
+      </p>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        66272 West Patriciastad
+      </p>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Wyspy Salomona
+      </p>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      />
+    </div>
+    <hr
+      class="Hr-root-id"
+    />
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <div
+        class="OrderCustomer-sectionHeader-id"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id OrderCustomer-sectionHeaderTitle-id"
+        >
+          Billing Address
+        </p>
+        <div
+          class="OrderCustomer-sectionHeaderToolbar-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Edit
+            </span>
+          </button>
+        </div>
+      </div>
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
+      >
+        Same as shipping address
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Orders / OrderCustomer loading 1`] = `
 <div>
   <div
     class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
@@ -6098,6 +6140,18 @@ exports[`Storyshots Product types / Edit attribute loading 1`] = `<div />`;
 
 exports[`Storyshots Products / ProductVariantImageSelectDialog default 1`] = `null`;
 
+exports[`Storyshots Shipping / Assign countries default 1`] = `<div />`;
+
+exports[`Storyshots Shipping / Rate details default 1`] = `<div />`;
+
+exports[`Storyshots Shipping / Rate details form errors 1`] = `<div />`;
+
+exports[`Storyshots Shipping / Rate details loading 1`] = `<div />`;
+
+exports[`Storyshots Shipping / Rate details new 1`] = `<div />`;
+
+exports[`Storyshots Shipping / Rate details weight 1`] = `<div />`;
+
 exports[`Storyshots SiteSettings / Add key dialog default 1`] = `<div />`;
 
 exports[`Storyshots SiteSettings / Add key dialog form errors 1`] = `<div />`;
@@ -18048,7 +18102,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         </div>
       </div>
       <div
-        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-cardDisabled-id"
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
       >
         <div
           class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@@ -70262,6 +70316,3651 @@ exports[`Storyshots Views / Products / Product variant details when loading data
 </div>
 `;
 
+exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Create New Shipping Zone
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Shipping Zone Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Countries
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign countries
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id CountryList-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id CountryList-pointer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
+                    >
+                      0 Countries
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Create New Shipping Zone
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Shipping Zone Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Countries
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign countries
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id CountryList-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id CountryList-pointer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
+                    >
+                      0 Countries
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Europe
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Shipping Zone Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="Europe"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Countries
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign countries
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id CountryList-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id CountryList-pointer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
+                    >
+                      51 Countries
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id CardTitle-constantHeight-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Price Based Rates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add rate
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
+                    scope="col"
+                  >
+                    Value Range
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    UPS
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    from $0.00
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    $48.11
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    DHL
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    from $0.00
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    $95.24
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id CardTitle-constantHeight-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Weight Based Rates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add rate
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
+                    scope="col"
+                  >
+                    Weight Range
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    DB Schenker
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    0 kg - 80 kg
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    $45.93
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    Registred priority
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    from 0 kg
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    $73.87
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          Europe
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Shipping Zone Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-error-id MuiInput-error-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value="Europe"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Countries
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign countries
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id CountryList-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id CountryList-pointer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
+                    >
+                      51 Countries
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id CardTitle-constantHeight-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Price Based Rates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add rate
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
+                    scope="col"
+                  >
+                    Value Range
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    UPS
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    from $0.00
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    $48.11
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    DHL
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    from $0.00
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    $95.24
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id CardTitle-constantHeight-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Weight Based Rates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add rate
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
+                    scope="col"
+                  >
+                    Weight Range
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    DB Schenker
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    0 kg - 80 kg
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    $45.93
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    Registred priority
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    from 0 kg
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    $73.87
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
+<div>
+  <form>
+    <div
+      class="Container-md-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id ExtendedPageHeader-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+              />
+            </svg>
+          </span>
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+        >
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
+        </h2>
+        <div
+          class="ExtendedPageHeader-action-id"
+        />
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
+                >
+                  Shipping Zone Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Countries
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign countries
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id CountryList-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id CountryList-pointer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
+                    >
+                      ... Countries
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id CardTitle-constantHeight-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Price Based Rates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add rate
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
+                    scope="col"
+                  >
+                    Value Range
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id CardTitle-constantHeight-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Weight Based Rates
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add rate
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <table
+              class="MuiTable-root-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
+                    scope="col"
+                  >
+                    Weight Range
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
+                    scope="col"
+                  >
+                    Price
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    scope="col"
+                  />
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-alignRight-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id"
+                      disabled=""
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                          <path
+                            d="M0 0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div
+        class="SaveButtonBar-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id SaveButtonBar-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Remove
+          </span>
+        </button>
+        <div
+          class="SaveButtonBar-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id SaveButtonBar-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id undefined"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            <div
+              class="MuiCircularProgress-root-id MuiCircularProgress-indeterminate-id ConfirmButtonComponent-progress-id ConfirmButtonComponent-invisible-id"
+              role="progressbar"
+              style="width:24px;height:24px"
+            >
+              <svg
+                class="MuiCircularProgress-svg-id"
+                viewBox="22 22 44 44"
+              >
+                <circle
+                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                  cx="44"
+                  cy="44"
+                  fill="none"
+                  r="20.2"
+                  stroke-width="3.6"
+                />
+              </svg>
+            </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ConfirmButtonComponent-icon-id ConfirmButtonComponent-invisible-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              />
+            </svg>
+            <span
+              class="ConfirmButtonComponent-label-id"
+            >
+              Save
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Shipping
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      />
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id CardTitle-constantHeight-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Shipping by zone
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add shipping zone
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Name
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Countries
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                  colspan="3"
+                >
+                  <div
+                    class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                  >
+                    <div
+                      class="TablePagination-spacer-id"
+                    />
+                    <div
+                      class="TablePaginationActions-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Europe
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Oceania
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  29
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Asia
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  51
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Americas
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  57
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  Africa
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  60
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorSecondary-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div>
+        <form>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Configuration
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Shipping Weight Unit
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
+                  >
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
+                      role="button"
+                      tabindex="0"
+                    >
+                      kg
+                    </div>
+                    <input
+                      name="unit"
+                      type="hidden"
+                      value="kg"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                >
+                  This unit will be used as default shipping weight
+                </p>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardActions-root-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Save
+                </span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Shipping
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      />
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id CardTitle-constantHeight-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Shipping by zone
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add shipping zone
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Name
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Countries
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                  colspan="3"
+                >
+                  <div
+                    class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                  >
+                    <div
+                      class="TablePagination-spacer-id"
+                    />
+                    <div
+                      class="TablePaginationActions-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                        />
+                        <path
+                          d="M0 0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div>
+        <form>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Configuration
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Shipping Weight Unit
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-disabled-id MuiInput-disabled-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
+                  >
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-disabled-id MuiInput-disabled-id"
+                      role="button"
+                    >
+                      kg
+                    </div>
+                    <input
+                      name="unit"
+                      type="hidden"
+                      value="kg"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-disabled-id MuiFormHelperText-filled-id"
+                >
+                  This unit will be used as default shipping weight
+                </p>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardActions-root-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Save
+                </span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
+<div>
+  <div
+    class="Container-md-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id Component-title-id"
+      >
+        Shipping
+      </h2>
+      <div
+        class="ExtendedPageHeader-action-id"
+      />
+    </div>
+    <div
+      class="Grid-root-id Grid-default-id"
+    >
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id CardTitle-constantHeight-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+            >
+              Shipping by zone
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add shipping zone
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+          >
+            <thead
+              class="MuiTableHead-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-head-id"
+              >
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Name
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                >
+                  Countries
+                </th>
+                <th
+                  class="MuiTableCell-root-id MuiTableCell-head-id"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tfoot
+              class="MuiTableFooter-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-footer-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                  colspan="3"
+                >
+                  <div
+                    class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                  >
+                    <div
+                      class="TablePagination-spacer-id"
+                    />
+                    <div
+                      class="TablePaginationActions-root-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+            <tbody
+              class="MuiTableBody-root-id"
+            >
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  colspan="3"
+                >
+                  No shipping zones found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div>
+        <form>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-body1-id CardTitle-title-id"
+              >
+                Configuration
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                  data-shrink="true"
+                >
+                  Shipping Weight Unit
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id"
+                >
+                  <div
+                    class="MuiSelect-root-id"
+                  >
+                    <div
+                      aria-haspopup="true"
+                      aria-pressed="false"
+                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
+                      role="button"
+                      tabindex="0"
+                    >
+                      kg
+                    </div>
+                    <input
+                      name="unit"
+                      type="hidden"
+                      value="kg"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                >
+                  This unit will be used as default shipping weight
+                </p>
+              </div>
+            </div>
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="MuiCardActions-root-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id MuiCardActions-action-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Save
+                </span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Views / Site settings / Page default 1`] = `
 <div>
   <form>
diff --git a/tests/api/test_shipping_method.py b/tests/api/test_shipping_method.py
--- a/tests/api/test_shipping_method.py
+++ b/tests/api/test_shipping_method.py
@@ -93,7 +93,7 @@ def test_create_shipping_zone(staff_api_client, permission_manage_shipping):
     zone = data['shippingZone']
     assert zone['name'] == 'test shipping'
     assert zone['countries'] == [{'code': 'PL'}]
-    assert zone['default'] == False
+    assert not zone['default']
 
 
 def test_create_default_shipping_zone(
@@ -108,7 +108,7 @@ def test_create_default_shipping_zone(
     zone = data['shippingZone']
     assert zone['name'] == 'test shipping'
     assert zone['countries'] == []
-    assert zone['default'] == True
+    assert zone['default']
 
 
 def test_create_duplicated_default_shipping_zone(
@@ -211,7 +211,7 @@ def test_delete_shipping_zone(
 
 
 PRICE_BASED_SHIPPING_QUERY = """
-    mutation createShipipngPrice(
+    mutation createShippingPrice(
         $type: ShippingMethodTypeEnum, $name: String!, $price: Decimal,
         $shippingZone: ID!, $minimumOrderPrice: Decimal,
         $maximumOrderPrice: Decimal) {
@@ -223,6 +223,9 @@ def test_delete_shipping_zone(
             field
             message
         }
+        shippingZone {
+            id
+        }
         shippingMethod {
             name
             price {
@@ -243,10 +246,11 @@ def test_delete_shipping_zone(
 
 @pytest.mark.parametrize(
     'min_price, max_price, expected_min_price, expected_max_price',
-    ((10.32, 15.43, {
-        'amount': 10.32}, {
-            'amount': 15.43}), (10.33, None, {
-                'amount': 10.33}, None)))
+    (
+        (10.32, 15.43, {'amount': 10.32}, {'amount': 15.43}),
+        (10.33, None, {'amount': 10.33}, None)
+    )
+)
 def test_create_shipping_method(
         staff_api_client, shipping_zone, min_price, max_price,
         expected_min_price, expected_max_price, permission_manage_shipping):
@@ -265,32 +269,18 @@ def test_create_shipping_method(
     response = staff_api_client.post_graphql(
         query, variables, permissions=[permission_manage_shipping])
     content = get_graphql_content(response)
-    data = content['data']['shippingPriceCreate']['shippingMethod']
-    assert 'errors' not in data
-    assert data['name'] == name
-    assert data['price']['amount'] == float(price)
-    assert data['minimumOrderPrice'] == expected_min_price
-    assert data['maximumOrderPrice'] == expected_max_price
-    assert data['type'] == ShippingMethodTypeEnum.PRICE.name
+    data = content['data']['shippingPriceCreate']
+    assert 'errors' not in data['shippingMethod']
+    assert data['shippingMethod']['name'] == name
+    assert data['shippingMethod']['price']['amount'] == float(price)
+    assert data['shippingMethod']['minimumOrderPrice'] == expected_min_price
+    assert data['shippingMethod']['maximumOrderPrice'] == expected_max_price
+    assert data['shippingMethod']['type'] == ShippingMethodTypeEnum.PRICE.name
+    assert data['shippingZone']['id'] == shipping_zone_id
 
 
-@pytest.mark.parametrize(
-    'min_price, max_price, expected_error',
-    ((
-        None, 15.11, {
-            'field':
-            'minimumOrderPrice',
-            'message':
-            'Minimum order price is required'
-            ' for Price Based shipping.'}),
-     (
-         20.21, 15.11, {
-             'field': 'maximumOrderPrice',
-             'message':
-             'Maximum order price should be larger than the minimum.'})))
 def test_create_price_shipping_method_errors(
-        shipping_zone, staff_api_client, min_price, max_price, expected_error,
-        permission_manage_shipping):
+        shipping_zone, staff_api_client, permission_manage_shipping):
     query = PRICE_BASED_SHIPPING_QUERY
     shipping_zone_id = graphene.Node.to_global_id(
         'ShippingZone', shipping_zone.pk)
@@ -298,14 +288,16 @@ def test_create_price_shipping_method_errors(
         'shippingZone': shipping_zone_id,
         'name': 'DHL',
         'price': 12.34,
-        'minimumOrderPrice': min_price,
-        'maximumOrderPrice': max_price,
+        'minimumOrderPrice': 20,
+        'maximumOrderPrice': 15,
         'type': ShippingMethodTypeEnum.PRICE.name}
     response = staff_api_client.post_graphql(
         query, variables, permissions=[permission_manage_shipping])
     content = get_graphql_content(response)
     data = content['data']['shippingPriceCreate']
-    assert data['errors'][0] == expected_error
+    assert (
+        data['errors'][0]['message'] ==
+        'Maximum order price should be larger than the minimum order price.')
 
 
 WEIGHT_BASED_SHIPPING_QUERY = """
@@ -332,6 +324,9 @@ def test_create_price_shipping_method_errors(
                     unit
                 }
             }
+            shippingZone {
+                id
+            }
         }
     }
 """
@@ -364,33 +359,14 @@ def test_create_weight_based_shipping_method(
     response = staff_api_client.post_graphql(
         query, variables, permissions=[permission_manage_shipping])
     content = get_graphql_content(response)
-    data = content['data']['shippingPriceCreate']['shippingMethod']
-    assert data['minimumOrderWeight'] == expected_min_weight
-    assert data['maximumOrderWeight'] == expected_max_weight
+    data = content['data']['shippingPriceCreate']
+    assert data['shippingMethod']['minimumOrderWeight'] == expected_min_weight
+    assert data['shippingMethod']['maximumOrderWeight'] == expected_max_weight
+    assert data['shippingZone']['id'] == shipping_zone_id
 
 
-@pytest.mark.parametrize(
-    'min_weight, max_weight, expected_error',
-    (
-        (
-            None, 15.11, {
-                'field':
-                'minimumOrderWeight',
-                'message':
-                'Minimum order weight is required for'
-                ' Weight Based shipping.'}),
-        (
-            20.21,
-            15.11,
-            {
-                'field':
-                'maximumOrderWeight',
-                'message':
-                'Maximum order weight should be larger than the minimum.'  # noqa
-            })))
 def test_create_weight_shipping_method_errors(
-        shipping_zone, staff_api_client, min_weight, max_weight,
-        expected_error, permission_manage_shipping):
+        shipping_zone, staff_api_client, permission_manage_shipping):
     query = WEIGHT_BASED_SHIPPING_QUERY
     shipping_zone_id = graphene.Node.to_global_id(
         'ShippingZone', shipping_zone.pk)
@@ -398,14 +374,16 @@ def test_create_weight_shipping_method_errors(
         'shippingZone': shipping_zone_id,
         'name': 'DHL',
         'price': 12.34,
-        'minimumOrderWeight': min_weight,
-        'maximumOrderWeight': max_weight,
+        'minimumOrderWeight': 20,
+        'maximumOrderWeight': 15,
         'type': ShippingMethodTypeEnum.WEIGHT.name}
     response = staff_api_client.post_graphql(
         query, variables, permissions=[permission_manage_shipping])
     content = get_graphql_content(response)
     data = content['data']['shippingPriceCreate']
-    assert data['errors'][0] == expected_error
+    assert (
+        data['errors'][0]['message'] ==
+        'Maximum order weight should be larger than the minimum order weight.')
 
 
 def test_update_shipping_method(
@@ -422,6 +400,9 @@ def test_update_shipping_method(
                 field
                 message
             }
+            shippingZone {
+                id
+            }
             shippingMethod {
                 price {
                     amount
@@ -450,8 +431,9 @@ def test_update_shipping_method(
     response = staff_api_client.post_graphql(
         query, variables, permissions=[permission_manage_shipping])
     content = get_graphql_content(response)
-    data = content['data']['shippingPriceUpdate']['shippingMethod']
-    assert data['price']['amount'] == float(price)
+    data = content['data']['shippingPriceUpdate']
+    assert data['shippingMethod']['price']['amount'] == float(price)
+    assert data['shippingZone']['id'] == shipping_zone_id
 
 
 def test_delete_shipping_method(
@@ -459,21 +441,25 @@ def test_delete_shipping_method(
     query = """
         mutation deleteShippingPrice($id: ID!) {
             shippingPriceDelete(id: $id) {
+                shippingZone {
+                    id
+                }
                 shippingMethod {
-                    price {
-                        amount
-                    }
+                    id
                 }
             }
         }
         """
     shipping_method_id = graphene.Node.to_global_id(
         'ShippingMethod', shipping_method.pk)
+    shipping_zone_id = graphene.Node.to_global_id(
+        'ShippingZone', shipping_method.shipping_zone.pk)
     variables = {'id': shipping_method_id}
     response = staff_api_client.post_graphql(
         query, variables, permissions=[permission_manage_shipping])
     content = get_graphql_content(response)
-    data = content['data']['shippingPriceDelete']['shippingMethod']
-    assert data['price']['amount'] == float(shipping_method.price.amount)
+    data = content['data']['shippingPriceDelete']
+    assert data['shippingMethod']['id'] == shipping_method_id
+    assert data['shippingZone']['id'] == shipping_zone_id
     with pytest.raises(shipping_method._meta.model.DoesNotExist):
         shipping_method.refresh_from_db()