diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index dc07dd54b..af213721e 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -28266,7 +28266,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
               >
-                View and update your site settings
+                View and update your webhook and their settings
               </p>
             </div>
           </div>
@@ -28782,7 +28782,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
               >
-                View and update your site settings
+                View and update your webhook and their settings
               </p>
             </div>
           </div>
@@ -103729,7 +103729,7 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
         <h5
           class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
         >
-          Create Webhook
+          Create New Account
         </h5>
         <div
           class="ExtendedPageHeader-action-id"
@@ -103752,7 +103752,7 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Information
+                Service Account Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -103767,11 +103767,6 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                General Information
-              </p>
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
@@ -103779,7 +103774,7 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                   data-shrink="false"
                 >
-                  Webhook Name
+                  Account Name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -103803,398 +103798,45 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                     name="name"
                     type="text"
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                Webhook specific information
-              </p>
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-                  data-shrink="false"
-                >
-                  Assign to Service Account
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:79.5px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      id="select-serviceAccount"
-                      role="button"
-                      tabindex="0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </div>
-                    <input
-                      name="serviceAccount"
-                      type="hidden"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Target URL
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="targetUrl"
-                    type="text"
                     value=""
                   />
                 </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  This URL will recieve webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Secrect Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="secretKey"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
               </div>
             </div>
           </div>
         </div>
-        <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
-              >
-                Events
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+              Permissions
+            </span>
             <div
-              class="CardTitle-children-id"
+              class="CardTitle-toolbar-id"
             />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict webhooks permissions to register certain events in Saleor system.
-              </p>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    name="allEvents"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                >
-                  All events
-                </span>
-              </label>
-              <hr
-                class="Hr-root-id"
-              />
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="CUSTOMER_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    CUSTOMER_CREATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="ORDER_CANCELLED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    ORDER_CANCELLED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="ORDER_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    ORDER_CREATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="ORDER_FULLY_PAID"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    ORDER_FULLY_PAID
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="ORDER_UPDATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    ORDER_UPDATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="PRODUCT_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    PRODUCT_CREATED
-                  </span>
-                </label>
-              </div>
-            </div>
           </div>
           <div
-            class="FormSpacer-spacer-id"
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardContent-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <p
+              class="MuiTypography-root-id MuiTypography-body2-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
-              >
-                Webhook Status
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+              Expand or restrict user's permissions to access certain part of saleor system.
+            </p>
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+              class="AccountPermissions-checkboxContainer-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                If you want to disable this webhook please uncheck the box below.
-              </p>
               <label
                 class="MuiFormControlLabel-root-id"
               >
@@ -104205,7 +103847,7 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 >
                   <input
                     class="Checkbox-box-id"
-                    name="isActive"
+                    name="hasFullAccess"
                     type="checkbox"
                     value="false"
                   />
@@ -104213,11 +103855,303 @@ exports[`Storyshots Views / Services / Create service default 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Webhook is active
+                  User has full access to the store
                 </span>
               </label>
             </div>
           </div>
+          <hr
+            class="AccountPermissions-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="IMPERSONATE_USERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Impersonate customers
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_DISCOUNTS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage sales and vouchers
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_MENUS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage navigation
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_ORDERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage orders
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_PAGES"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage pages
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_PRODUCTS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage products
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_SETTINGS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage settings
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_SHIPPING"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage shipping
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_STAFF"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage staff
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_USERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage customers
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+            >
+              Account Status
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body2-id"
+            >
+              If you want to disable this account uncheck the box below
+            </p>
+            <label
+              class="MuiFormControlLabel-root-id"
+            >
+              <button
+                class="MuiButtonBase-root-id Checkbox-root-id"
+                tabindex="0"
+                type="button"
+              >
+                <input
+                  class="Checkbox-box-id"
+                  name="isActive"
+                  type="checkbox"
+                  value="false"
+                />
+              </button>
+              <span
+                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+              >
+                Service account is active
+              </span>
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -104239,7 +104173,7 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
         <h5
           class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
         >
-          Create Webhook
+          Create New Account
         </h5>
         <div
           class="ExtendedPageHeader-action-id"
@@ -104262,7 +104196,7 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Information
+                Service Account Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -104277,11 +104211,6 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                General Information
-              </p>
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
@@ -104289,7 +104218,7 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                   class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                   data-shrink="false"
                 >
-                  Webhook Name
+                  Account Name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -104313,6 +104242,7 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                     name="name"
                     type="text"
+                    value=""
                   />
                 </div>
                 <p
@@ -104321,395 +104251,41 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                   Generic form error
                 </p>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                Webhook specific information
-              </p>
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-                  data-shrink="false"
-                >
-                  Assign to Service Account
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:79.5px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      id="select-serviceAccount"
-                      role="button"
-                      tabindex="0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </div>
-                    <input
-                      name="serviceAccount"
-                      type="hidden"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Target URL
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="targetUrl"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  This URL will recieve webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Secrect Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="secretKey"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
-              </div>
             </div>
           </div>
         </div>
-        <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
-              >
-                Events
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+              Permissions
+            </span>
             <div
-              class="CardTitle-children-id"
+              class="CardTitle-toolbar-id"
             />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict webhooks permissions to register certain events in Saleor system.
-              </p>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id"
-                    name="allEvents"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                >
-                  All events
-                </span>
-              </label>
-              <hr
-                class="Hr-root-id"
-              />
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="CUSTOMER_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    CUSTOMER_CREATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="ORDER_CANCELLED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    ORDER_CANCELLED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="ORDER_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    ORDER_CREATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="ORDER_FULLY_PAID"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    ORDER_FULLY_PAID
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="ORDER_UPDATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    ORDER_UPDATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id Checkbox-root-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id"
-                      name="PRODUCT_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                  >
-                    PRODUCT_CREATED
-                  </span>
-                </label>
-              </div>
-            </div>
           </div>
           <div
-            class="FormSpacer-spacer-id"
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardContent-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <p
+              class="MuiTypography-root-id MuiTypography-body2-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
-              >
-                Webhook Status
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+              Expand or restrict user's permissions to access certain part of saleor system.
+            </p>
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+              class="AccountPermissions-checkboxContainer-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                If you want to disable this webhook please uncheck the box below.
-              </p>
               <label
                 class="MuiFormControlLabel-root-id"
               >
@@ -104720,7 +104296,7 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 >
                   <input
                     class="Checkbox-box-id"
-                    name="isActive"
+                    name="hasFullAccess"
                     type="checkbox"
                     value="false"
                   />
@@ -104728,11 +104304,303 @@ exports[`Storyshots Views / Services / Create service form errors 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Webhook is active
+                  User has full access to the store
                 </span>
               </label>
             </div>
           </div>
+          <hr
+            class="AccountPermissions-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="IMPERSONATE_USERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Impersonate customers
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_DISCOUNTS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage sales and vouchers
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_MENUS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage navigation
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_ORDERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage orders
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_PAGES"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage pages
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_PRODUCTS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage products
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_SETTINGS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage settings
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_SHIPPING"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage shipping
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_STAFF"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage staff
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="MANAGE_USERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Manage customers
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+            >
+              Account Status
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body2-id"
+            >
+              If you want to disable this account uncheck the box below
+            </p>
+            <label
+              class="MuiFormControlLabel-root-id"
+            >
+              <button
+                class="MuiButtonBase-root-id Checkbox-root-id"
+                tabindex="0"
+                type="button"
+              >
+                <input
+                  class="Checkbox-box-id"
+                  name="isActive"
+                  type="checkbox"
+                  value="false"
+                />
+              </button>
+              <span
+                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+              >
+                Service account is active
+              </span>
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -104754,7 +104622,7 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
         <h5
           class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
         >
-          Create Webhook
+          Create New Account
         </h5>
         <div
           class="ExtendedPageHeader-action-id"
@@ -104777,7 +104645,7 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Information
+                Service Account Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -104792,11 +104660,6 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                General Information
-              </p>
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
@@ -104804,7 +104667,7 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                   class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                   data-shrink="false"
                 >
-                  Webhook Name
+                  Account Name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -104829,414 +104692,45 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                     disabled=""
                     name="name"
                     type="text"
-                  />
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                Webhook specific information
-              </p>
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-                  data-shrink="false"
-                >
-                  Assign to Service Account
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:79.5px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      id="select-serviceAccount"
-                      role="button"
-                      tabindex="0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </div>
-                    <input
-                      name="serviceAccount"
-                      type="hidden"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Target URL
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="targetUrl"
-                    type="text"
                     value=""
                   />
                 </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  This URL will recieve webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Secrect Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="secretKey"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
               </div>
             </div>
           </div>
         </div>
-        <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+        >
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+            class="CardTitle-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <span
+              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
-              >
-                Events
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+              Permissions
+            </span>
             <div
-              class="CardTitle-children-id"
+              class="CardTitle-toolbar-id"
             />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict webhooks permissions to register certain events in Saleor system.
-              </p>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <input
-                    class="Checkbox-box-id Checkbox-disabled-id"
-                    disabled=""
-                    name="allEvents"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  All events
-                </span>
-              </label>
-              <hr
-                class="Hr-root-id"
-              />
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id Checkbox-disabled-id"
-                      disabled=""
-                      name="CUSTOMER_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    CUSTOMER_CREATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id Checkbox-disabled-id"
-                      disabled=""
-                      name="ORDER_CANCELLED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    ORDER_CANCELLED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id Checkbox-disabled-id"
-                      disabled=""
-                      name="ORDER_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    ORDER_CREATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id Checkbox-disabled-id"
-                      disabled=""
-                      name="ORDER_FULLY_PAID"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    ORDER_FULLY_PAID
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id Checkbox-disabled-id"
-                      disabled=""
-                      name="ORDER_UPDATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    ORDER_UPDATED
-                  </span>
-                </label>
-              </div>
-              <div>
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <input
-                      class="Checkbox-box-id Checkbox-disabled-id"
-                      disabled=""
-                      name="PRODUCT_CREATED"
-                      type="checkbox"
-                      value="false"
-                    />
-                  </button>
-                  <span
-                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                  >
-                    PRODUCT_CREATED
-                  </span>
-                </label>
-              </div>
-            </div>
           </div>
           <div
-            class="FormSpacer-spacer-id"
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
           />
           <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+            class="MuiCardContent-root-id"
           >
-            <div
-              class="CardTitle-root-id"
+            <p
+              class="MuiTypography-root-id MuiTypography-body2-id"
             >
-              <span
-                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
-              >
-                Webhook Status
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
+              Expand or restrict user's permissions to access certain part of saleor system.
+            </p>
             <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
+              class="AccountPermissions-checkboxContainer-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                If you want to disable this webhook please uncheck the box below.
-              </p>
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
               >
@@ -105249,7 +104743,7 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                   <input
                     class="Checkbox-box-id Checkbox-disabled-id"
                     disabled=""
-                    name="isActive"
+                    name="hasFullAccess"
                     type="checkbox"
                     value="false"
                   />
@@ -105257,11 +104751,325 @@ exports[`Storyshots Views / Services / Create service loading 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  Webhook is active
+                  User has full access to the store
                 </span>
               </label>
             </div>
           </div>
+          <hr
+            class="AccountPermissions-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="IMPERSONATE_USERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Impersonate customers
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_DISCOUNTS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage sales and vouchers
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_MENUS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage navigation
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_ORDERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage orders
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_PAGES"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage pages
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_PRODUCTS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage products
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_SETTINGS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage settings
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_SHIPPING"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage shipping
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_STAFF"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage staff
+                </span>
+              </label>
+            </div>
+            <div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="MANAGE_USERS"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Manage customers
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="CardSpacer-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+            >
+              Account Status
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body2-id"
+            >
+              If you want to disable this account uncheck the box below
+            </p>
+            <label
+              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                disabled=""
+                tabindex="-1"
+                type="button"
+              >
+                <input
+                  class="Checkbox-box-id Checkbox-disabled-id"
+                  disabled=""
+                  name="isActive"
+                  type="checkbox"
+                  value="false"
+                />
+              </button>
+              <span
+                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+              >
+                Service account is active
+              </span>
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -105289,7 +105097,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
         <h5
           class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
         >
-          ... Details
+          Magento Importer
         </h5>
         <div
           class="ExtendedPageHeader-action-id"
@@ -105312,7 +105120,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Information
+                Service Account Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -105327,19 +105135,14 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                General Information
-              </p>
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
+                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                  data-shrink="true"
                 >
-                  Webhook Name
+                  Account Name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -105351,7 +105154,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   >
                     <legend
                       class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
+                      style="width:0"
                     >
                       <span>
                         ​
@@ -105363,172 +105166,126 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                     name="name"
                     type="text"
-                    value=""
+                    value="Magento Importer"
                   />
                 </div>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                Webhook specific information
-              </p>
-              <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-                  data-shrink="false"
-                >
-                  Assign to Service Account
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:79.5px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      id="select-serviceAccount"
-                      role="button"
-                      tabindex="0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </div>
-                    <input
-                      name="serviceAccount"
-                      type="hidden"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Target URL
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="targetUrl"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  This URL will recieve webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Secrect Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="secretKey"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
-              </div>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Service Account Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Create Token
+                  </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 Hook-colNote-id"
+                    scope="col"
+                  >
+                    Token Note
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-colKey-id"
+                    scope="col"
+                  >
+                    Key
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-colActions-id"
+                    scope="col"
+                  >
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colNote-id"
+                  >
+                    default
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colKey-id"
+                  >
+                    **** AK05
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colActions-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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
@@ -105540,7 +105297,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Events
+                Permissions
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -105558,32 +105315,40 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Expand or restrict webhooks permissions to register certain events in Saleor system.
+                Expand or restrict user's permissions to access certain part of saleor system.
               </p>
-              <label
-                class="MuiFormControlLabel-root-id"
+              <div
+                class="AccountPermissions-checkboxContainer-id"
               >
-                <button
-                  class="MuiButtonBase-root-id Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
+                <label
+                  class="MuiFormControlLabel-root-id"
                 >
-                  <input
-                    class="Checkbox-box-id"
-                    name="allEvents"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                >
-                  All events
-                </span>
-              </label>
-              <hr
-                class="Hr-root-id"
-              />
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="hasFullAccess"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    User has full access to the store
+                  </span>
+                </label>
+              </div>
+            </div>
+            <hr
+              class="AccountPermissions-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
@@ -105595,7 +105360,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="CUSTOMER_CREATED"
+                      name="IMPERSONATE_USERS"
                       type="checkbox"
                       value="false"
                     />
@@ -105603,7 +105368,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    CUSTOMER_CREATED
+                    Impersonate customers
                   </span>
                 </label>
               </div>
@@ -105618,7 +105383,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="ORDER_CANCELLED"
+                      name="MANAGE_DISCOUNTS"
                       type="checkbox"
                       value="false"
                     />
@@ -105626,7 +105391,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    ORDER_CANCELLED
+                    Manage sales and vouchers
                   </span>
                 </label>
               </div>
@@ -105641,7 +105406,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="ORDER_CREATED"
+                      name="MANAGE_MENUS"
                       type="checkbox"
                       value="false"
                     />
@@ -105649,7 +105414,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    ORDER_CREATED
+                    Manage navigation
                   </span>
                 </label>
               </div>
@@ -105664,7 +105429,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="ORDER_FULLY_PAID"
+                      name="MANAGE_ORDERS"
                       type="checkbox"
                       value="false"
                     />
@@ -105672,7 +105437,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    ORDER_FULLY_PAID
+                    Manage orders
                   </span>
                 </label>
               </div>
@@ -105687,7 +105452,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="ORDER_UPDATED"
+                      name="MANAGE_PAGES"
                       type="checkbox"
                       value="false"
                     />
@@ -105695,7 +105460,30 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    ORDER_UPDATED
+                    Manage pages
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-checked-id"
+                      name="MANAGE_PRODUCTS"
+                      type="checkbox"
+                      value="true"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Manage products
                   </span>
                 </label>
               </div>
@@ -105710,7 +105498,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="PRODUCT_CREATED"
+                      name="MANAGE_SETTINGS"
                       type="checkbox"
                       value="false"
                     />
@@ -105718,14 +105506,83 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    PRODUCT_CREATED
+                    Manage settings
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="MANAGE_SHIPPING"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Manage shipping
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="MANAGE_STAFF"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Manage staff
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="MANAGE_USERS"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Manage customers
                   </span>
                 </label>
               </div>
             </div>
           </div>
           <div
-            class="FormSpacer-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
@@ -105736,7 +105593,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Status
+                Account Status
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -105754,7 +105611,7 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                If you want to disable this webhook please uncheck the box below.
+                If you want to disable this account uncheck the box below
               </p>
               <label
                 class="MuiFormControlLabel-root-id"
@@ -105765,16 +105622,16 @@ exports[`Storyshots Views / Services / Service details default 1`] = `
                   type="button"
                 >
                   <input
-                    class="Checkbox-box-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
-                    value="false"
+                    value="true"
                   />
                 </button>
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Webhook is active
+                  Service account is active
                 </span>
               </label>
             </div>
@@ -106447,7 +106304,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
         <h5
           class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
         >
-          ... Details
+          Magento Importer
         </h5>
         <div
           class="ExtendedPageHeader-action-id"
@@ -106470,7 +106327,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Information
+                Service Account Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -106485,19 +106342,14 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                General Information
-              </p>
               <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 MuiInputLabel-outlined-id"
-                  data-shrink="false"
+                  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 MuiInputLabel-outlined-id"
+                  data-shrink="true"
                 >
-                  Webhook Name
+                  Account Name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -106509,7 +106361,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   >
                     <legend
                       class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
+                      style="width:0"
                     >
                       <span>
                         ​
@@ -106521,176 +106373,130 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                     name="name"
                     type="text"
-                    value=""
+                    value="Magento Importer"
                   />
                 </div>
                 <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                 >
                   Generic form error
                 </p>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook specific information
-              </p>
+                Service Account Information
+              </span>
               <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                class="CardTitle-toolbar-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-                  data-shrink="false"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  Assign to Service Account
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:79.5px"
+                  <span
+                    class="MuiButton-label-id"
                   >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      id="select-serviceAccount"
-                      role="button"
-                      tabindex="0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </div>
-                    <input
-                      name="serviceAccount"
-                      type="hidden"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Target URL
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="targetUrl"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  This URL will recieve webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Secrect Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="secretKey"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
+                    Create Token
+                  </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 Hook-colNote-id"
+                    scope="col"
+                  >
+                    Token Note
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-colKey-id"
+                    scope="col"
+                  >
+                    Key
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-colActions-id"
+                    scope="col"
+                  >
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colNote-id"
+                  >
+                    default
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colKey-id"
+                  >
+                    **** AK05
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colActions-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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>
@@ -106703,7 +106509,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Events
+                Permissions
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -106721,32 +106527,40 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Expand or restrict webhooks permissions to register certain events in Saleor system.
+                Expand or restrict user's permissions to access certain part of saleor system.
               </p>
-              <label
-                class="MuiFormControlLabel-root-id"
+              <div
+                class="AccountPermissions-checkboxContainer-id"
               >
-                <button
-                  class="MuiButtonBase-root-id Checkbox-root-id"
-                  tabindex="0"
-                  type="button"
+                <label
+                  class="MuiFormControlLabel-root-id"
                 >
-                  <input
-                    class="Checkbox-box-id"
-                    name="allEvents"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
-                >
-                  All events
-                </span>
-              </label>
-              <hr
-                class="Hr-root-id"
-              />
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="hasFullAccess"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    User has full access to the store
+                  </span>
+                </label>
+              </div>
+            </div>
+            <hr
+              class="AccountPermissions-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
@@ -106758,7 +106572,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="CUSTOMER_CREATED"
+                      name="IMPERSONATE_USERS"
                       type="checkbox"
                       value="false"
                     />
@@ -106766,7 +106580,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    CUSTOMER_CREATED
+                    Impersonate customers
                   </span>
                 </label>
               </div>
@@ -106781,7 +106595,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="ORDER_CANCELLED"
+                      name="MANAGE_DISCOUNTS"
                       type="checkbox"
                       value="false"
                     />
@@ -106789,7 +106603,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    ORDER_CANCELLED
+                    Manage sales and vouchers
                   </span>
                 </label>
               </div>
@@ -106804,7 +106618,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="ORDER_CREATED"
+                      name="MANAGE_MENUS"
                       type="checkbox"
                       value="false"
                     />
@@ -106812,7 +106626,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    ORDER_CREATED
+                    Manage navigation
                   </span>
                 </label>
               </div>
@@ -106827,7 +106641,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="ORDER_FULLY_PAID"
+                      name="MANAGE_ORDERS"
                       type="checkbox"
                       value="false"
                     />
@@ -106835,7 +106649,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    ORDER_FULLY_PAID
+                    Manage orders
                   </span>
                 </label>
               </div>
@@ -106850,7 +106664,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="ORDER_UPDATED"
+                      name="MANAGE_PAGES"
                       type="checkbox"
                       value="false"
                     />
@@ -106858,7 +106672,30 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    ORDER_UPDATED
+                    Manage pages
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-checked-id"
+                      name="MANAGE_PRODUCTS"
+                      type="checkbox"
+                      value="true"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Manage products
                   </span>
                 </label>
               </div>
@@ -106873,7 +106710,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   >
                     <input
                       class="Checkbox-box-id"
-                      name="PRODUCT_CREATED"
+                      name="MANAGE_SETTINGS"
                       type="checkbox"
                       value="false"
                     />
@@ -106881,14 +106718,83 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                   >
-                    PRODUCT_CREATED
+                    Manage settings
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="MANAGE_SHIPPING"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Manage shipping
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="MANAGE_STAFF"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Manage staff
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="MANAGE_USERS"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Manage customers
                   </span>
                 </label>
               </div>
             </div>
           </div>
           <div
-            class="FormSpacer-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
@@ -106899,7 +106805,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Status
+                Account Status
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -106917,7 +106823,7 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                If you want to disable this webhook please uncheck the box below.
+                If you want to disable this account uncheck the box below
               </p>
               <label
                 class="MuiFormControlLabel-root-id"
@@ -106928,16 +106834,16 @@ exports[`Storyshots Views / Services / Service details form errors 1`] = `
                   type="button"
                 >
                   <input
-                    class="Checkbox-box-id"
+                    class="Checkbox-box-id Checkbox-checked-id"
                     name="isActive"
                     type="checkbox"
-                    value="false"
+                    value="true"
                   />
                 </button>
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Webhook is active
+                  Service account is active
                 </span>
               </label>
             </div>
@@ -106963,7 +106869,12 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
         <h5
           class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
         >
-          ... Details
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
         </h5>
         <div
           class="ExtendedPageHeader-action-id"
@@ -106986,7 +106897,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Information
+                Service Account Information
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -107001,11 +106912,6 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
-              >
-                General Information
-              </p>
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
               >
@@ -107013,7 +106919,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                   data-shrink="false"
                 >
-                  Webhook Name
+                  Account Name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -107042,169 +106948,129 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   />
                 </div>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook specific information
-              </p>
+                Service Account Information
+              </span>
               <div
-                class="MuiFormControl-root-id SingleSelectField-formControl-id"
+                class="CardTitle-toolbar-id"
               >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-                  data-shrink="false"
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
+                  tabindex="0"
+                  type="button"
                 >
-                  Assign to Service Account
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:79.5px"
+                  <span
+                    class="MuiButton-label-id"
                   >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <div
-                    class="MuiSelect-root-id"
-                  >
-                    <div
-                      aria-haspopup="true"
-                      aria-pressed="false"
-                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      id="select-serviceAccount"
-                      role="button"
-                      tabindex="0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </div>
-                    <input
-                      name="serviceAccount"
-                      type="hidden"
-                      value=""
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
-                      focusable="false"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Target URL
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="targetUrl"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  This URL will recieve webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Secrect Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <fieldset
-                    aria-hidden="true"
-                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="MuiPrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="secretKey"
-                    type="text"
-                    value=""
-                  />
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
+                    Create Token
+                  </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 Hook-colNote-id"
+                    scope="col"
+                  >
+                    Token Note
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-colKey-id"
+                    scope="col"
+                  >
+                    Key
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-colActions-id"
+                    scope="col"
+                  >
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colNote-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colKey-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-colActions-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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>
@@ -107217,7 +107083,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Events
+                Permissions
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -107235,34 +107101,42 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                Expand or restrict webhooks permissions to register certain events in Saleor system.
+                Expand or restrict user's permissions to access certain part of saleor system.
               </p>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              <div
+                class="AccountPermissions-checkboxContainer-id"
               >
-                <button
-                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                 >
-                  <input
-                    class="Checkbox-box-id Checkbox-disabled-id"
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                     disabled=""
-                    name="allEvents"
-                    type="checkbox"
-                    value="false"
-                  />
-                </button>
-                <span
-                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
-                >
-                  All events
-                </span>
-              </label>
-              <hr
-                class="Hr-root-id"
-              />
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="hasFullAccess"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    User has full access to the store
+                  </span>
+                </label>
+              </div>
+            </div>
+            <hr
+              class="AccountPermissions-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
               <div>
                 <label
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
@@ -107276,7 +107150,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                     <input
                       class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
-                      name="CUSTOMER_CREATED"
+                      name="IMPERSONATE_USERS"
                       type="checkbox"
                       value="false"
                     />
@@ -107284,7 +107158,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                   >
-                    CUSTOMER_CREATED
+                    Impersonate customers
                   </span>
                 </label>
               </div>
@@ -107301,7 +107175,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                     <input
                       class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
-                      name="ORDER_CANCELLED"
+                      name="MANAGE_DISCOUNTS"
                       type="checkbox"
                       value="false"
                     />
@@ -107309,7 +107183,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                   >
-                    ORDER_CANCELLED
+                    Manage sales and vouchers
                   </span>
                 </label>
               </div>
@@ -107326,7 +107200,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                     <input
                       class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
-                      name="ORDER_CREATED"
+                      name="MANAGE_MENUS"
                       type="checkbox"
                       value="false"
                     />
@@ -107334,7 +107208,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                   >
-                    ORDER_CREATED
+                    Manage navigation
                   </span>
                 </label>
               </div>
@@ -107351,7 +107225,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                     <input
                       class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
-                      name="ORDER_FULLY_PAID"
+                      name="MANAGE_ORDERS"
                       type="checkbox"
                       value="false"
                     />
@@ -107359,7 +107233,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                   >
-                    ORDER_FULLY_PAID
+                    Manage orders
                   </span>
                 </label>
               </div>
@@ -107376,7 +107250,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                     <input
                       class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
-                      name="ORDER_UPDATED"
+                      name="MANAGE_PAGES"
                       type="checkbox"
                       value="false"
                     />
@@ -107384,7 +107258,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                   >
-                    ORDER_UPDATED
+                    Manage pages
                   </span>
                 </label>
               </div>
@@ -107401,7 +107275,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                     <input
                       class="Checkbox-box-id Checkbox-disabled-id"
                       disabled=""
-                      name="PRODUCT_CREATED"
+                      name="MANAGE_PRODUCTS"
                       type="checkbox"
                       value="false"
                     />
@@ -107409,14 +107283,114 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                   <span
                     class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                   >
-                    PRODUCT_CREATED
+                    Manage products
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="MANAGE_SETTINGS"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Manage settings
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="MANAGE_SHIPPING"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Manage shipping
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="MANAGE_STAFF"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Manage staff
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="MANAGE_USERS"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Manage customers
                   </span>
                 </label>
               </div>
             </div>
           </div>
           <div
-            class="FormSpacer-spacer-id"
+            class="CardSpacer-spacer-id"
           />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
@@ -107427,7 +107401,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
               <span
                 class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
               >
-                Webhook Status
+                Account Status
               </span>
               <div
                 class="CardTitle-toolbar-id"
@@ -107445,7 +107419,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
               <p
                 class="MuiTypography-root-id MuiTypography-body2-id"
               >
-                If you want to disable this webhook please uncheck the box below.
+                If you want to disable this account uncheck the box below
               </p>
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
@@ -107467,7 +107441,7 @@ exports[`Storyshots Views / Services / Service details loading 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  Webhook is active
+                  Service account is active
                 </span>
               </label>
             </div>
@@ -107492,7 +107466,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
       <h5
         class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
       >
-        Webhooks
+        Service Accounts
       </h5>
       <div
         class="ExtendedPageHeader-action-id"
@@ -107508,7 +107482,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
             <span
               class="MuiButton-label-id"
             >
-              Create webhook
+              Create account
             </span>
           </button>
         </div>
@@ -107517,8 +107491,102 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
     >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
+                    >
+                      All Service Accounts
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Tab X
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="FilterActions-actionContainer-id"
+      >
+        <div
+          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
+        >
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <fieldset
+              aria-hidden="true"
+              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="MuiPrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+            <input
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
+              placeholder="Search Service Accounts"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <hr
+        class="Hr-root-id"
+      />
       <table
-        class="MuiTable-root-id"
+        class="MuiTable-root-id ServiceList-table-id"
       >
         <thead
           class="MuiTableHead-root-id"
@@ -107527,23 +107595,15 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
             class="MuiTableRow-root-id MuiTableRow-head-id"
           >
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id ServiceList-colName-id"
               scope="col"
             >
               Name
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colActive-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id"
               scope="col"
-            >
-              Service Account
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
+            />
           </tr>
         </thead>
         <tfoot
@@ -107554,7 +107614,7 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="4"
+              colspan="2"
             >
               <div
                 class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
@@ -107667,20 +107727,25 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
           class="MuiTableBody-root-id"
         >
           <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id PluginList-link-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ServiceList-tableRow-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colName-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
             >
-              Webhook Test
+              <span
+                data-tc="name"
+              >
+                Slack
+              </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id"
+                data-tc="isActive"
+              >
+                active
+              </span>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colActive-id"
-            >
-              Test Account
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colAction-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -107735,20 +107800,98 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
             </td>
           </tr>
           <tr
-            class="MuiTableRow-root-id MuiTableRow-hover-id PluginList-link-id"
+            class="MuiTableRow-root-id MuiTableRow-hover-id ServiceList-tableRow-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colName-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
             >
-              Webhook Test 2
+              <span
+                data-tc="name"
+              >
+                Facebook Market
+              </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id"
+                data-tc="isActive"
+              >
+                active
+              </span>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colActive-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
             >
-              Test Account 2
+              <button
+                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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>
+              <button
+                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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 ServiceList-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
+            >
+              <span
+                data-tc="name"
+              >
+                Magento Importer
+              </span>
+              <span
+                class="MuiTypography-root-id MuiTypography-caption-id"
+                data-tc="isActive"
+              >
+                inactive
+              </span>
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colAction-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -107822,7 +107965,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
       <h5
         class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
       >
-        Webhooks
+        Service Accounts
       </h5>
       <div
         class="ExtendedPageHeader-action-id"
@@ -107838,7 +107981,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
             <span
               class="MuiButton-label-id"
             >
-              Create webhook
+              Create account
             </span>
           </button>
         </div>
@@ -107847,8 +107990,102 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
     >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
+                    >
+                      All Service Accounts
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Tab X
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="FilterActions-actionContainer-id"
+      >
+        <div
+          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
+        >
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <fieldset
+              aria-hidden="true"
+              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="MuiPrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+            <input
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
+              placeholder="Search Service Accounts"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <hr
+        class="Hr-root-id"
+      />
       <table
-        class="MuiTable-root-id"
+        class="MuiTable-root-id ServiceList-table-id"
       >
         <thead
           class="MuiTableHead-root-id"
@@ -107857,23 +108094,15 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
             class="MuiTableRow-root-id MuiTableRow-head-id"
           >
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id ServiceList-colName-id"
               scope="col"
             >
               Name
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colActive-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id"
               scope="col"
-            >
-              Service Account
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
+            />
           </tr>
         </thead>
         <tfoot
@@ -107884,7 +108113,7 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="4"
+              colspan="2"
             >
               <div
                 class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
@@ -108001,25 +108230,24 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
             class="MuiTableRow-root-id"
           >
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colName-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
             >
               <span
-                class="Skeleton-skeleton-id"
+                data-tc="name"
               >
-                ‌
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
               </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colActive-id"
-            >
               <span
-                class="Skeleton-skeleton-id"
-              >
-                ‌
-              </span>
+                class="MuiTypography-root-id MuiTypography-caption-id"
+                data-tc="isActive"
+              />
             </td>
             <td
-              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colAction-id"
+              class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
             >
               <button
                 class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -108093,7 +108321,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
       <h5
         class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
       >
-        Webhooks
+        Service Accounts
       </h5>
       <div
         class="ExtendedPageHeader-action-id"
@@ -108109,7 +108337,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
             <span
               class="MuiButton-label-id"
             >
-              Create webhook
+              Create account
             </span>
           </button>
         </div>
@@ -108118,8 +108346,102 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
     <div
       class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
     >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
+                    >
+                      All Service Accounts
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Tab X
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="FilterActions-actionContainer-id"
+      >
+        <div
+          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
+        >
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <fieldset
+              aria-hidden="true"
+              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="MuiPrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+            <input
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
+              placeholder="Search Service Accounts"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <hr
+        class="Hr-root-id"
+      />
       <table
-        class="MuiTable-root-id"
+        class="MuiTable-root-id ServiceList-table-id"
       >
         <thead
           class="MuiTableHead-root-id"
@@ -108128,23 +108450,15 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
             class="MuiTableRow-root-id MuiTableRow-head-id"
           >
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id ServiceList-colName-id"
               scope="col"
             >
               Name
             </th>
             <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colActive-id"
+              class="MuiTableCell-root-id MuiTableCell-head-id"
               scope="col"
-            >
-              Service Account
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colAction-id"
-              scope="col"
-            >
-              Action
-            </th>
+            />
           </tr>
         </thead>
         <tfoot
@@ -108155,7 +108469,7 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-              colspan="4"
+              colspan="2"
             >
               <div
                 class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
@@ -108272,9 +108586,9 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
           >
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
-              colspan="4"
+              colspan="2"
             >
-              No webhooks found
+              No service accounts found
             </td>
           </tr>
         </tbody>
@@ -118306,3 +118620,4209 @@ exports[`Storyshots Views / Translations / Language list no data 1`] = `
   </div>
 </div>
 `;
+
+exports[`Storyshots Views / Webhook / Create webhook default 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h5
+          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+        >
+          Create Webhook
+        </h5>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="Component-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                General Informations
+              </p>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Webhook Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="name"
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                Webhook specific information
+              </p>
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Assign to Service Account
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                      type="text"
+                      value=""
+                    />
+                    <div>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          style="fill-rule:evenodd"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Target URL
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="targetUrl"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+                >
+                  This URL will recieve webhook POST requests
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Secrect Key
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="secretKey"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+                >
+                  secret key is used to create a hash signature with each payload. *optional field
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Events
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Expand or restrict webhooks permissions to register certain events in Saleor system.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="allEvents"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  All events
+                </span>
+              </label>
+              <hr
+                class="Hr-root-id"
+              />
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="CUSTOMER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Customer created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_CANCELLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order cancelled
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_FULLY_PAID"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order fully paid
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_UPDATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order updated
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="PRODUCT_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Product created
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="FormSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                If you want to disable this webhook please uncheck the box below.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="isActive"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Webhook is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Webhook / Create webhook form errors 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h5
+          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+        >
+          Create Webhook
+        </h5>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="Component-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                General Informations
+              </p>
+              <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 MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Webhook Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="name"
+                    type="text"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                Webhook specific information
+              </p>
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Assign to Service Account
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                      type="text"
+                      value=""
+                    />
+                    <div>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          style="fill-rule:evenodd"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Target URL
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="targetUrl"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+                >
+                  This URL will recieve webhook POST requests
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Secrect Key
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="secretKey"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+                >
+                  secret key is used to create a hash signature with each payload. *optional field
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Events
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Expand or restrict webhooks permissions to register certain events in Saleor system.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="allEvents"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  All events
+                </span>
+              </label>
+              <hr
+                class="Hr-root-id"
+              />
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="CUSTOMER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Customer created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_CANCELLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order cancelled
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_FULLY_PAID"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order fully paid
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_UPDATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order updated
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="PRODUCT_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Product created
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="FormSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                If you want to disable this webhook please uncheck the box below.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="isActive"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Webhook is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Webhook / Create webhook loading 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h5
+          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+        >
+          Create Webhook
+        </h5>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="Component-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                General Informations
+              </p>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Webhook Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                Webhook specific information
+              </p>
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Assign to Service Account
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                      disabled=""
+                      type="text"
+                      value=""
+                    />
+                    <div>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          style="fill-rule:evenodd"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Target URL
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="targetUrl"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+                >
+                  This URL will recieve webhook POST requests
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Secrect Key
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="secretKey"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+                >
+                  secret key is used to create a hash signature with each payload. *optional field
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Events
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Expand or restrict webhooks permissions to register certain events in Saleor system.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="allEvents"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  All events
+                </span>
+              </label>
+              <hr
+                class="Hr-root-id"
+              />
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="CUSTOMER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Customer created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="ORDER_CANCELLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Order cancelled
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="ORDER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Order created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="ORDER_FULLY_PAID"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Order fully paid
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="ORDER_UPDATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Order updated
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="PRODUCT_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Product created
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="FormSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                If you want to disable this webhook please uncheck the box below.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="isActive"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Webhook is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Webhook / Webhook details default 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h5
+          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+        >
+          ... Details
+        </h5>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="Component-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                General Informations
+              </p>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Webhook Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                Webhook specific information
+              </p>
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Assign to Service Account
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                      type="text"
+                      value=""
+                    />
+                    <div>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          style="fill-rule:evenodd"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Target URL
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="targetUrl"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+                >
+                  This URL will recieve webhook POST requests
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Secrect Key
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="secretKey"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+                >
+                  secret key is used to create a hash signature with each payload. *optional field
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Events
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Expand or restrict webhooks permissions to register certain events in Saleor system.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="allEvents"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  All events
+                </span>
+              </label>
+              <hr
+                class="Hr-root-id"
+              />
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="CUSTOMER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Customer created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_CANCELLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order cancelled
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_FULLY_PAID"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order fully paid
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_UPDATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order updated
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="PRODUCT_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Product created
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="FormSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                If you want to disable this webhook please uncheck the box below.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="isActive"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Webhook is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Webhook / Webhook details form errors 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h5
+          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+        >
+          ... Details
+        </h5>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="Component-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                General Informations
+              </p>
+              <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 MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Webhook Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                >
+                  Generic form error
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                Webhook specific information
+              </p>
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Assign to Service Account
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                      type="text"
+                      value=""
+                    />
+                    <div>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          style="fill-rule:evenodd"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Target URL
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="targetUrl"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+                >
+                  This URL will recieve webhook POST requests
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Secrect Key
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="secretKey"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
+                >
+                  secret key is used to create a hash signature with each payload. *optional field
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Events
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Expand or restrict webhooks permissions to register certain events in Saleor system.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="allEvents"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  All events
+                </span>
+              </label>
+              <hr
+                class="Hr-root-id"
+              />
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="CUSTOMER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Customer created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_CANCELLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order cancelled
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_FULLY_PAID"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order fully paid
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="ORDER_UPDATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Order updated
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id Checkbox-root-id"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id"
+                      name="PRODUCT_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  >
+                    Product created
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="FormSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                If you want to disable this webhook please uncheck the box below.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id Checkbox-root-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id"
+                    name="isActive"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                >
+                  Webhook is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Webhook / Webhook details loading 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id"
+      >
+        <h5
+          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+        >
+          ... Details
+        </h5>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="Component-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                General Informations
+              </p>
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Webhook Name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id Hook-title-id"
+              >
+                Webhook specific information
+              </p>
+              <div
+                class="SingleAutocompleteSelectField-container-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Assign to Service Account
+                  </label>
+                  <div
+                    aria-autocomplete="list"
+                    aria-expanded="false"
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    role="combobox"
+                  >
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="MuiPrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                    <input
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                      disabled=""
+                      type="text"
+                      value=""
+                    />
+                    <div>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          style="fill-rule:evenodd"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Target URL
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="targetUrl"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+                >
+                  This URL will recieve webhook POST requests
+                </p>
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Secrect Key
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="MuiPrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="secretKey"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+                >
+                  secret key is used to create a hash signature with each payload. *optional field
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Events
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                Expand or restrict webhooks permissions to register certain events in Saleor system.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="allEvents"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  All events
+                </span>
+              </label>
+              <hr
+                class="Hr-root-id"
+              />
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="CUSTOMER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Customer created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="ORDER_CANCELLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Order cancelled
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="ORDER_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Order created
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="ORDER_FULLY_PAID"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Order fully paid
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="ORDER_UPDATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Order updated
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <input
+                      class="Checkbox-box-id Checkbox-disabled-id"
+                      disabled=""
+                      name="PRODUCT_CREATED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  >
+                    Product created
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="FormSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+              >
+                Webhook Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <p
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                If you want to disable this webhook please uncheck the box below.
+              </p>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+                  disabled=""
+                  tabindex="-1"
+                  type="button"
+                >
+                  <input
+                    class="Checkbox-box-id Checkbox-disabled-id"
+                    disabled=""
+                    name="isActive"
+                    type="checkbox"
+                    value="false"
+                  />
+                </button>
+                <span
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                >
+                  Webhook is active
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Webhook / Webhook list default 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="Container-root-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h5
+        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+      >
+        Webhooks
+      </h5>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Create webhook
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
+                    >
+                      All Webhooks
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Tab X
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="FilterActions-actionContainer-id"
+      >
+        <div
+          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
+        >
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <fieldset
+              aria-hidden="true"
+              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="MuiPrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+            <input
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
+              placeholder="Search Webhooks"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <hr
+        class="Hr-root-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <table
+          class="MuiTable-root-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colActive-id"
+                scope="col"
+              >
+                Service Account
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                colspan="4"
+              >
+                <div
+                  class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                >
+                  <div
+                    class="TablePagination-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
+                      <div
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-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"
+                          >
+                            20
+                          </div>
+                          <input
+                            type="hidden"
+                            value="20"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="TablePaginationActions-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
+                      data-tc="button-pagination-back"
+                      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="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
+                      data-tc="button-pagination-next"
+                      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="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-hover-id Hook-tableRow-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
+              >
+                Webhook Test
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Hook-colActive-id"
+              >
+                Test Account
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Hook-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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 Hook-tableRow-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
+              >
+                Webhook Test 2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Hook-colActive-id"
+              >
+                Test Account 2
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Hook-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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>
+`;
+
+exports[`Storyshots Views / Webhook / Webhook list loading 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="Container-root-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h5
+        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+      >
+        Webhooks
+      </h5>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Create webhook
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
+                    >
+                      All Webhooks
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Tab X
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="FilterActions-actionContainer-id"
+      >
+        <div
+          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
+        >
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <fieldset
+              aria-hidden="true"
+              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="MuiPrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+            <input
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
+              placeholder="Search Webhooks"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <hr
+        class="Hr-root-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <table
+          class="MuiTable-root-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colActive-id"
+                scope="col"
+              >
+                Service Account
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                colspan="4"
+              >
+                <div
+                  class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                >
+                  <div
+                    class="TablePagination-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
+                      <div
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-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"
+                          >
+                            20
+                          </div>
+                          <input
+                            type="hidden"
+                            value="20"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="TablePaginationActions-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
+                      data-tc="button-pagination-back"
+                      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="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
+                      data-tc="button-pagination-next"
+                      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="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </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 Hook-colName-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Hook-colActive-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Hook-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-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>
+`;
+
+exports[`Storyshots Views / Webhook / Webhook list no data 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="Container-root-id"
+  >
+    <div
+      class="ExtendedPageHeader-root-id"
+    >
+      <h5
+        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
+      >
+        Webhooks
+      </h5>
+      <div
+        class="ExtendedPageHeader-action-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Create webhook
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <div
+        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
+      >
+        <div
+          class="MuiTabs-flexContainer-id"
+        >
+          <div
+            class="MuiTabs-scroller-id MuiTabs-fixed-id"
+            role="tablist"
+            style="margin-bottom:0"
+          >
+            <div
+              class="MuiTabs-flexContainer-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
+                    >
+                      All Webhooks
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <button
+                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
+                role="tab"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTab-wrapper-id"
+                >
+                  <span
+                    class="MuiTab-labelContainer-id"
+                  >
+                    <span
+                      class="MuiTab-label-id FilterTab-tabLabel-id"
+                    >
+                      Tab X
+                    </span>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="FilterActions-actionContainer-id"
+      >
+        <div
+          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
+        >
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <fieldset
+              aria-hidden="true"
+              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="MuiPrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+            <input
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
+              placeholder="Search Webhooks"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <hr
+        class="Hr-root-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <table
+          class="MuiTable-root-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colName-id"
+                scope="col"
+              >
+                Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colActive-id"
+                scope="col"
+              >
+                Service Account
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id Hook-colAction-id"
+                scope="col"
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tfoot
+            class="MuiTableFooter-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-footer-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                colspan="4"
+              >
+                <div
+                  class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
+                >
+                  <div
+                    class="TablePagination-spacer-id"
+                  >
+                    <div>
+                      <span
+                        class="RowNumberSelect-label-id"
+                      >
+                        No of Rows:
+                      </span>
+                      <div
+                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-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"
+                          >
+                            20
+                          </div>
+                          <input
+                            type="hidden"
+                            value="20"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="TablePaginationActions-root-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
+                      data-tc="button-pagination-back"
+                      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="M14 7l-5 5 5 5V7z"
+                          />
+                          <path
+                            d="M24 0v24H0V0h24z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
+                      data-tc="button-pagination-next"
+                      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="M10 17l5-5-5-5v10z"
+                          />
+                          <path
+                            d="M0 24V0h24v24H0z"
+                            fill="none"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="4"
+              >
+                No webhooks found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;