Repository: mirumee/saleor-dashboard
Pull request #222 (2019-10-21 14:21:23)

Add mailing configuration
I want to merge this change because it adds mailing configuration.

### Screenshots
<img width="1578" alt="Screenshot 2019-10-21 at 16 20 55" src="https://user-images.githubusercontent.com/6833443/67213716-c8688500-f41e-11e9-838b-5dd8e3ad5f6c.png">


### Pull Request Checklist

<!-- Please keep this section. It will make maintainer's life easier. -->

1. [x] All visible strings are translated with proper context.
1. [x] All data-formatting is locale-aware (dates, numbers, and so on).
1. [x] Translated strings are extracted to `.pot` file.
1. [x] Number of API calls is optimized.
1. [x] The changes are tested.
1. [x] Type definitions are up to date.
1. [x] Changes are mentioned in the changelog.


codecov[bot]: # [Codecov](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222?src=pr&el=h1) Report
> Merging [#222](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222?src=pr&el=desc) into [master](https://codecov.io/gh/mirumee/saleor-dashboard/commit/d63d9b41befd6948bd52548a574f60b6ebe30aae?src=pr&el=desc) will **increase** coverage by `0.09%`.
> The diff coverage is `100%`.

[![Impacted file tree graph](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/graphs/tree.svg?width=650&token=GuvRMxAgM1&height=150&src=pr)](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##           master     #222      +/-   ##
==========================================
+ Coverage   74.05%   74.14%   +0.09%     
==========================================
  Files         588      589       +1     
  Lines        6140     6158      +18     
  Branches     1032     1034       +2     
==========================================
+ Hits         4547     4566      +19     
  Misses       1411     1411              
+ Partials      182      181       -1
```


| [Impacted Files](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/components/ImageUpload/ImageUpload.tsx](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/diff?src=pr&el=tree#diff-c3JjL2NvbXBvbmVudHMvSW1hZ2VVcGxvYWQvSW1hZ2VVcGxvYWQudHN4) | `90% <ø> (ø)` | :arrow_up: |
| [src/theme.ts](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/diff?src=pr&el=tree#diff-c3JjL3RoZW1lLnRz) | `100% <ø> (ø)` | :arrow_up: |
| [src/siteSettings/fixtures.ts](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/diff?src=pr&el=tree#diff-c3JjL3NpdGVTZXR0aW5ncy9maXh0dXJlcy50cw==) | `100% <ø> (ø)` | :arrow_up: |
| [...s/components/SiteSettingsPage/SiteSettingsPage.tsx](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/diff?src=pr&el=tree#diff-c3JjL3NpdGVTZXR0aW5ncy9jb21wb25lbnRzL1NpdGVTZXR0aW5nc1BhZ2UvU2l0ZVNldHRpbmdzUGFnZS50c3g=) | `100% <100%> (ø)` | :arrow_up: |
| [...torybook/stories/categories/CategoryUpdatePage.tsx](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/diff?src=pr&el=tree#diff-c3JjL3N0b3J5Ym9vay9zdG9yaWVzL2NhdGVnb3JpZXMvQ2F0ZWdvcnlVcGRhdGVQYWdlLnRzeA==) | `61.11% <100%> (ø)` | :arrow_up: |
| [...torybook/stories/siteSettings/SiteSettingsPage.tsx](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/diff?src=pr&el=tree#diff-c3JjL3N0b3J5Ym9vay9zdG9yaWVzL3NpdGVTZXR0aW5ncy9TaXRlU2V0dGluZ3NQYWdlLnRzeA==) | `60% <100%> (ø)` | :arrow_up: |
| [...onents/SiteSettingsMailing/SiteSettingsMailing.tsx](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/diff?src=pr&el=tree#diff-c3JjL3NpdGVTZXR0aW5ncy9jb21wb25lbnRzL1NpdGVTZXR0aW5nc01haWxpbmcvU2l0ZVNldHRpbmdzTWFpbGluZy50c3g=) | `100% <100%> (ø)` | |
| [...mponents/CategoryBackground/CategoryBackground.tsx](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222/diff?src=pr&el=tree#diff-c3JjL2NhdGVnb3JpZXMvY29tcG9uZW50cy9DYXRlZ29yeUJhY2tncm91bmQvQ2F0ZWdvcnlCYWNrZ3JvdW5kLnRzeA==) | `92.3% <0%> (+7.69%)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222?src=pr&el=footer). Last update [d63d9b4...32ff72b](https://codecov.io/gh/mirumee/saleor-dashboard/pull/222?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ae362f29..9fcad426b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,3 +46,4 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix attribute errors - #216 by @dominik-zeglen
 - Fix column picker - #228 by @dominik-zeglen
 - Add readonly mode - #229 by @dominik-zeglen
+- Add mailing configuration - #222 by @dominik-zeglen
diff --git a/locale/messages.pot b/locale/messages.pot
index 4f579a4ac..7814d1e13 100644
--- a/locale/messages.pot
+++ b/locale/messages.pot
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-10-24T12:11:32.946Z\n"
+"POT-Creation-Date: 2019-10-24T13:17:27.157Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -1467,6 +1467,14 @@ msgctxt "section header"
 msgid "Authentication Keys"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
+#. [src.siteSettings.components.SiteSettingsPage.4088830385] - section header
+#. defaultMessage is:
+#. Authentication Methods
+msgctxt "section header"
+msgid "Authentication Methods"
+msgstr ""
+
 #: build/locale/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.json
 #. [src.siteSettings.components.SiteSettingsKeys.1270286507] - authentication provider name
 #. defaultMessage is:
@@ -1476,11 +1484,11 @@ msgid "Authentication Type"
 msgstr ""
 
 #: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
-#. [src.siteSettings.components.SiteSettingsPage.2824577864]
+#. [src.siteSettings.components.SiteSettingsPage.3619898341]
 #. defaultMessage is:
-#. Authentication keys
+#. Authentication method defines additional ways that customers can log in to your ecommerce.
 msgctxt "description"
-msgid "Authentication keys"
+msgid "Authentication method defines additional ways that customers can log in to your ecommerce."
 msgstr ""
 
 #: build/locale/src/siteSettings/components/SiteSettingsKeyDialog/SiteSettingsKeyDialog.json
@@ -1992,11 +2000,11 @@ msgid "Company"
 msgstr ""
 
 #: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
-#. [src.siteSettings.components.SiteSettingsPage.3817101936]
+#. [src.siteSettings.components.SiteSettingsPage.2768400497] - section header
 #. defaultMessage is:
-#. Company information
-msgctxt "description"
-msgid "Company information"
+#. Company Information
+msgctxt "section header"
+msgid "Company Information"
 msgstr ""
 
 #: build/locale/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.json
@@ -2023,6 +2031,14 @@ msgctxt "product type"
 msgid "Configurable"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [src.siteSettings.components.SiteSettingsMailing.297689661]
+#. defaultMessage is:
+#. Configurate your email address from which all automatic emails will be sent to your customers.
+msgctxt "description"
+msgid "Configurate your email address from which all automatic emails will be sent to your customers."
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.configuration] - configuration section name
 #. defaultMessage is:
@@ -2731,6 +2747,14 @@ msgctxt "event"
 msgid "Customer created"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [src.siteSettings.components.SiteSettingsMailing.3211348653]
+#. defaultMessage is:
+#. Customer password reset URL
+msgctxt "description"
+msgid "Customer password reset URL"
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerDetails/CustomerDetails.json
 #. [src.customers.components.CustomerDetails.2200102325] - section subheader
 #. defaultMessage is:
@@ -3603,6 +3627,14 @@ msgctxt "description"
 msgid "Email Address"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
+#. [src.siteSettings.components.SiteSettingsPage.3657173399]
+#. defaultMessage is:
+#. Email adress you provide here will be used as a contact adress for your customers.
+msgctxt "description"
+msgid "Email adress you provide here will be used as a contact adress for your customers."
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.endDate]
 #. defaultMessage is:
@@ -4351,6 +4383,42 @@ msgctxt "button"
 msgid "Login"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [src.siteSettings.components.SiteSettingsMailing.280712237] - section header
+#. defaultMessage is:
+#. Mailing Configuration
+#: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
+#. [src.siteSettings.components.SiteSettingsPage.280712237] - section header
+#. defaultMessage is:
+#. Mailing Configuration
+msgctxt "section header"
+msgid "Mailing Configuration"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [siteSettingsMailingHelperText] - helper text
+#. defaultMessage is:
+#. Mailing Configuration
+msgctxt "helper text"
+msgid "Mailing Configuration"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [src.siteSettings.components.SiteSettingsMailing.1124962330]
+#. defaultMessage is:
+#. Mailing email address
+msgctxt "description"
+msgid "Mailing email address"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [src.siteSettings.components.SiteSettingsMailing.70179174]
+#. defaultMessage is:
+#. Mailing email sender
+msgctxt "description"
+msgid "Mailing email sender"
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.manage] - button
 #. defaultMessage is:
@@ -8051,6 +8119,22 @@ msgctxt "description"
 msgid "These are general information about your store. They define what is the URL of your store and what is shown in brow sers taskbar."
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
+#. [src.siteSettings.components.SiteSettingsPage.3799756739]
+#. defaultMessage is:
+#. These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
+msgctxt "description"
+msgid "These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar."
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [src.siteSettings.components.SiteSettingsMailing.3447841451]
+#. defaultMessage is:
+#. This URL will be used as a main URL for password resets. It will be sent via email.
+msgctxt "description"
+msgid "This URL will be used as a main URL for password resets. It will be sent via email."
+msgstr ""
+
 #: build/locale/src/webhooks/components/WebhookInfo/WebhookInfo.json
 #. [src.webhooks.components.WebhookInfo.3763861707] - webhook target url help text
 #. defaultMessage is:
@@ -8059,6 +8143,14 @@ msgctxt "webhook target url help text"
 msgid "This URL will receive webhook POST requests"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
+#. [src.siteSettings.components.SiteSettingsPage.1004240342]
+#. defaultMessage is:
+#. This adress will be used to generate invoices and calculate shipping rates.
+msgctxt "description"
+msgid "This adress will be used to generate invoices and calculate shipping rates."
+msgstr ""
+
 #: build/locale/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.json
 #. [src.plugins.components.PluginsDetailsPage.4241018152]
 #. defaultMessage is:
@@ -8159,6 +8251,14 @@ msgctxt "product attribute error"
 msgid "This variant already exists"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
+#. [src.siteSettings.components.SiteSettingsPage.866304242]
+#. defaultMessage is:
+#. This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails.
+msgctxt "description"
+msgid "This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails."
+msgstr ""
+
 #: build/locale/src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.json
 #. [src.shipping.components.ShippingZoneRateDialog.1486599614]
 #. defaultMessage is:
@@ -8167,6 +8267,14 @@ msgctxt "description"
 msgid "This will be shown to customers at checkout"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [src.siteSettings.components.SiteSettingsMailing.1672275992] - email sender
+#. defaultMessage is:
+#. This will be visible as "from" name
+msgctxt "email sender"
+msgid "This will be visible as \"from\" name"
+msgstr ""
+
 #: build/locale/src/pages/components/PageInfo/PageInfo.json
 #. [src.pages.components.PageInfo.1124600214] - page title
 #. defaultMessage is:
@@ -8443,6 +8551,14 @@ msgctxt "description"
 msgid "URL Linked"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.json
+#. [src.siteSettings.components.SiteSettingsMailing.50742153]
+#. defaultMessage is:
+#. URL address
+msgctxt "description"
+msgid "URL address"
+msgstr ""
+
 #: build/locale/src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.json
 #. [src.siteSettings.components.SiteSettingsDetails.3808773492]
 #. defaultMessage is:
@@ -8736,19 +8852,19 @@ msgid "Usage Limit"
 msgstr ""
 
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
-#. [src.attributes.components.AttributeProperties.714335445] - use attribute in filtering
+#. [src.attributes.components.AttributeProperties.1318123158] - attribute is filterable in storefront
 #. defaultMessage is:
-#. Use in Filtering
-msgctxt "use attribute in filtering"
-msgid "Use in Filtering"
+#. Use in Faceted Navigation
+msgctxt "attribute is filterable in storefront"
+msgid "Use in Faceted Navigation"
 msgstr ""
 
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
-#. [src.attributes.components.AttributeProperties.1564730914] - attribute is filterable in storefront
+#. [src.attributes.components.AttributeProperties.714335445] - use attribute in filtering
 #. defaultMessage is:
-#. Use in faceted navigation
-msgctxt "attribute is filterable in storefront"
-msgid "Use in faceted navigation"
+#. Use in Filtering
+msgctxt "use attribute in filtering"
+msgid "Use in Filtering"
 msgstr ""
 
 #: build/locale/src/attributes/components/AttributeList/AttributeList.json
diff --git a/schema.graphql b/schema.graphql
index 89b27f930..a2c53e4fc 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -3327,6 +3327,8 @@ type ProductVariantUpdatePrivateMeta {
 type Query {
   webhook(id: ID!): Webhook
   webhooks(filter: WebhookFilterInput, before: String, after: String, first: Int, last: Int): WebhookCountableConnection
+  webhookEvents: [WebhookEvent]
+  webhookSamplePayload(eventType: WebhookEventTypeEnum!): JSONString
   translations(kind: TranslatableKinds!, before: String, after: String, first: Int, last: Int): TranslatableItemConnection
   shop: Shop
   shippingZone(id: ID!): ShippingZone
@@ -3744,6 +3746,8 @@ type Shop {
   currencies: [String]!
   defaultCurrency: String!
   defaultCountry: CountryDisplay
+  defaultMailSenderName: String
+  defaultMailSenderAddress: String
   description: String
   domain: Domain!
   homepageCollection: Collection
@@ -3763,6 +3767,7 @@ type Shop {
   defaultDigitalMaxDownloads: Int
   defaultDigitalUrlValidDays: Int
   companyAddress: Address
+  customerSetPasswordUrl: String
 }
 
 type ShopAddressUpdate {
@@ -3810,6 +3815,9 @@ input ShopSettingsInput {
   automaticFulfillmentDigitalProducts: Boolean
   defaultDigitalMaxDownloads: Int
   defaultDigitalUrlValidDays: Int
+  defaultMailSenderName: String
+  defaultMailSenderAddress: String
+  customerSetPasswordUrl: String
 }
 
 type ShopSettingsTranslate {
@@ -4317,6 +4325,7 @@ enum WebhookErrorCode {
 
 type WebhookEvent {
   eventType: WebhookEventTypeEnum
+  name: String
 }
 
 enum WebhookEventTypeEnum {
diff --git a/src/components/ImageUpload/ImageUpload.tsx b/src/components/ImageUpload/ImageUpload.tsx
index 431b96186..5ffc05d7f 100644
--- a/src/components/ImageUpload/ImageUpload.tsx
+++ b/src/components/ImageUpload/ImageUpload.tsx
@@ -54,6 +54,8 @@ const styles = (theme: Theme) =>
     },
     uploadText: {
       color: theme.typography.body2.color,
+      fontSize: 12,
+      fontWeight: 600,
       textTransform: "uppercase"
     }
   });
@@ -93,7 +95,7 @@ export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
             >
               <input {...getInputProps()} className={classes.fileField} />
               <ImageIcon className={classes.photosIcon} />
-              <Typography className={classes.uploadText} variant="body1">
+              <Typography className={classes.uploadText}>
                 <FormattedMessage
                   defaultMessage="Drop here to upload"
                   description="image upload"
diff --git a/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx b/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx
new file mode 100644
index 000000000..e0bd5f9d2
--- /dev/null
+++ b/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx
@@ -0,0 +1,130 @@
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import { Theme } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/styles";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import CardTitle from "@saleor/components/CardTitle";
+import FormSpacer from "@saleor/components/FormSpacer";
+import Hr from "@saleor/components/Hr";
+import { FormErrors } from "@saleor/types";
+
+export interface SiteSettingsMailingFormData {
+  defaultMailSenderName: string;
+  defaultMailSenderAddress: string;
+  customerSetPasswordUrl: string;
+}
+interface SiteSettingsMailingProps {
+  data: SiteSettingsMailingFormData;
+  errors: FormErrors<
+    | "defaultMailSenderAddress"
+    | "defaultMailSenderName"
+    | "customerSetPasswordUrl"
+  >;
+  disabled: boolean;
+  onChange: (event: React.ChangeEvent<any>) => void;
+}
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    cardHelperText: {
+      position: "relative",
+      top: -theme.spacing.unit
+    },
+    cardHelperTextCaption: {
+      marginBottom: theme.spacing.unit * 2
+    }
+  }),
+  {
+    name: "SiteSettingsMailing"
+  }
+);
+
+const SiteSettingsMailing: React.FC<SiteSettingsMailingProps> = props => {
+  const { data, disabled, errors, onChange } = props;
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Mailing Configuration",
+          description: "section header"
+        })}
+      />
+      <CardContent>
+        <Typography className={classes.cardHelperText}>
+          <FormattedMessage
+            defaultMessage="Mailing Configuration"
+            description="helper text"
+            id="siteSettingsMailingHelperText"
+          />
+        </Typography>
+        <Typography className={classes.cardHelperTextCaption} variant="body1">
+          <FormattedMessage defaultMessage="Configurate your email address from which all automatic emails will be sent to your customers." />
+        </Typography>
+        <TextField
+          disabled={disabled}
+          error={!!errors.defaultMailSenderAddress}
+          fullWidth
+          name="defaultMailSenderAddress"
+          label={intl.formatMessage({
+            defaultMessage: "Mailing email address"
+          })}
+          helperText={errors.defaultMailSenderAddress}
+          value={data.defaultMailSenderAddress}
+          onChange={onChange}
+        />
+        <FormSpacer />
+        <TextField
+          disabled={disabled}
+          error={!!errors.defaultMailSenderName}
+          fullWidth
+          name="defaultMailSenderName"
+          label={intl.formatMessage({
+            defaultMessage: "Mailing email sender"
+          })}
+          helperText={
+            errors.defaultMailSenderName ||
+            intl.formatMessage({
+              defaultMessage: 'This will be visible as "from" name',
+              description: "email sender"
+            })
+          }
+          value={data.defaultMailSenderName}
+          onChange={onChange}
+        />
+        <FormSpacer />
+        <Hr />
+        <FormSpacer />
+        <TextField
+          disabled={disabled}
+          error={!!errors.customerSetPasswordUrl}
+          fullWidth
+          name="customerSetPasswordUrl"
+          label={intl.formatMessage({
+            defaultMessage: "Customer password reset URL"
+          })}
+          placeholder={intl.formatMessage({
+            defaultMessage: "URL address"
+          })}
+          helperText={
+            errors.customerSetPasswordUrl ||
+            intl.formatMessage({
+              defaultMessage:
+                "This URL will be used as a main URL for password resets. It will be sent via email."
+            })
+          }
+          value={data.customerSetPasswordUrl}
+          onChange={onChange}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+SiteSettingsMailing.displayName = "SiteSettingsMailing";
+export default SiteSettingsMailing;
diff --git a/src/siteSettings/components/SiteSettingsMailing/index.ts b/src/siteSettings/components/SiteSettingsMailing/index.ts
new file mode 100644
index 000000000..424ec5bea
--- /dev/null
+++ b/src/siteSettings/components/SiteSettingsMailing/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./SiteSettingsMailing";
+export * from "./SiteSettingsMailing";
diff --git a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
index 6b90808de..cddd97e51 100644
--- a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
+++ b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
@@ -1,4 +1,6 @@
+import { Theme } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/styles";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -7,6 +9,7 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import Hr from "@saleor/components/Hr";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
@@ -20,6 +23,9 @@ import { SiteSettings_shop } from "../../types/SiteSettings";
 import SiteSettingsAddress from "../SiteSettingsAddress/SiteSettingsAddress";
 import SiteSettingsDetails from "../SiteSettingsDetails/SiteSettingsDetails";
 import SiteSettingsKeys from "../SiteSettingsKeys/SiteSettingsKeys";
+import SiteSettingsMailing, {
+  SiteSettingsMailingFormData
+} from "../SiteSettingsMailing";
 
 export interface SiteSettingsPageAddressFormData {
   city: string;
@@ -33,7 +39,8 @@ export interface SiteSettingsPageAddressFormData {
 }
 
 export interface SiteSettingsPageFormData
-  extends SiteSettingsPageAddressFormData {
+  extends SiteSettingsPageAddressFormData,
+    SiteSettingsMailingFormData {
   description: string;
   domain: string;
   name: string;
@@ -50,34 +57,54 @@ export interface SiteSettingsPageProps {
   onSubmit: (data: SiteSettingsPageFormData) => void;
 }
 
-const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
-  disabled,
-  errors,
-  saveButtonBarState,
-  shop,
-  onBack,
-  onKeyAdd,
-  onKeyRemove,
-  onSubmit
-}) => {
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    hr: {
+      gridColumnEnd: "span 2",
+      margin: `${theme.spacing.unit}px 0`
+    }
+  }),
+  {
+    name: "SiteSettingsPage"
+  }
+);
+
+const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
+  const {
+    disabled,
+    errors,
+    saveButtonBarState,
+    shop,
+    onBack,
+    onKeyAdd,
+    onKeyRemove,
+    onSubmit
+  } = props;
+  const classes = useStyles(props);
   const intl = useIntl();
   const [displayCountry, setDisplayCountry] = useStateFromProps(
     maybe(() => shop.companyAddress.country.code, "")
   );
 
-  const initialForm: SiteSettingsPageFormData = {
+  const initialFormAddress: SiteSettingsPageAddressFormData = {
     city: maybe(() => shop.companyAddress.city, ""),
     companyName: maybe(() => shop.companyAddress.companyName, ""),
     country: maybe(() => shop.companyAddress.country.code, ""),
     countryArea: maybe(() => shop.companyAddress.countryArea, ""),
-    description: maybe(() => shop.description, ""),
-    domain: maybe(() => shop.domain.host, ""),
-    name: maybe(() => shop.name, ""),
     phone: maybe(() => shop.companyAddress.phone, ""),
     postalCode: maybe(() => shop.companyAddress.postalCode, ""),
     streetAddress1: maybe(() => shop.companyAddress.streetAddress1, ""),
     streetAddress2: maybe(() => shop.companyAddress.streetAddress2, "")
   };
+  const initialForm: SiteSettingsPageFormData = {
+    ...initialFormAddress,
+    customerSetPasswordUrl: maybe(() => shop.customerSetPasswordUrl, ""),
+    defaultMailSenderAddress: maybe(() => shop.defaultMailSenderAddress, ""),
+    defaultMailSenderName: maybe(() => shop.defaultMailSenderName, ""),
+    description: maybe(() => shop.description, ""),
+    domain: maybe(() => shop.domain.host, ""),
+    name: maybe(() => shop.name, "")
+  };
 
   return (
     <Form
@@ -105,18 +132,51 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
               title={intl.formatMessage(commonMessages.generalInformations)}
             />
             <Grid variant="inverted">
-              <Typography variant="h6">
-                {intl.formatMessage(sectionNames.siteSettings)}
-              </Typography>
+              <div>
+                <Typography>
+                  {intl.formatMessage(sectionNames.siteSettings)}
+                </Typography>
+                <Typography variant="body1">
+                  <FormattedMessage defaultMessage="These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar." />
+                </Typography>
+              </div>
               <SiteSettingsDetails
                 data={data}
                 errors={formErrors}
                 disabled={disabled}
                 onChange={change}
               />
-              <Typography variant="h6">
-                <FormattedMessage defaultMessage="Company information" />
-              </Typography>
+              <Hr className={classes.hr} />
+              <div>
+                <Typography>
+                  <FormattedMessage
+                    defaultMessage="Mailing Configuration"
+                    description="section header"
+                  />
+                </Typography>
+                <Typography variant="body1">
+                  <FormattedMessage defaultMessage="This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails." />
+                </Typography>
+              </div>
+              <SiteSettingsMailing
+                data={data}
+                errors={formErrors}
+                disabled={disabled}
+                onChange={change}
+              />
+              <Hr className={classes.hr} />
+              <div>
+                <Typography>
+                  <FormattedMessage
+                    defaultMessage="Company Information"
+                    description="section header"
+                  />
+                </Typography>
+                <Typography variant="body1">
+                  <FormattedMessage defaultMessage="This adress will be used to generate invoices and calculate shipping rates." />
+                  <FormattedMessage defaultMessage="Email adress you provide here will be used as a contact adress for your customers." />
+                </Typography>
+              </div>
               <SiteSettingsAddress
                 data={data}
                 displayCountry={displayCountry}
@@ -126,9 +186,18 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
                 onChange={change}
                 onCountryChange={handleCountryChange}
               />
-              <Typography variant="h6">
-                <FormattedMessage defaultMessage="Authentication keys" />
-              </Typography>
+              <Hr className={classes.hr} />
+              <div>
+                <Typography>
+                  <FormattedMessage
+                    defaultMessage="Authentication Methods"
+                    description="section header"
+                  />
+                </Typography>
+                <Typography variant="body1">
+                  <FormattedMessage defaultMessage="Authentication method defines additional ways that customers can log in to your ecommerce. " />
+                </Typography>
+              </div>
               <SiteSettingsKeys
                 disabled={disabled}
                 keys={maybe(() => shop.authorizationKeys)}
@@ -148,5 +217,6 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
     </Form>
   );
 };
+
 SiteSettingsPage.displayName = "SiteSettingsPage";
 export default SiteSettingsPage;
diff --git a/src/siteSettings/fixtures.ts b/src/siteSettings/fixtures.ts
index 59e41ca41..78bbd3a72 100644
--- a/src/siteSettings/fixtures.ts
+++ b/src/siteSettings/fixtures.ts
@@ -36,6 +36,9 @@ export const shop: SiteSettings_shop = {
       country: "United Arab Emirates"
     }
   ],
+  customerSetPasswordUrl: "https://example.com/reset-password",
+  defaultMailSenderAddress: "noreply@example.com",
+  defaultMailSenderName: "Saleor",
   description: "Lorem ipsum dolor sit amet",
   domain: {
     __typename: "Domain",
diff --git a/src/siteSettings/mutations.ts b/src/siteSettings/mutations.ts
index 048217b7a..09f7ef0f0 100644
--- a/src/siteSettings/mutations.ts
+++ b/src/siteSettings/mutations.ts
@@ -63,7 +63,7 @@ const shopSettingsUpdate = gql`
   mutation ShopSettingsUpdate(
     $shopDomainInput: SiteDomainInput!
     $shopSettingsInput: ShopSettingsInput!
-    $addressInput: AddressInput!
+    $addressInput: AddressInput
   ) {
     shopSettingsUpdate(input: $shopSettingsInput) {
       errors {
diff --git a/src/siteSettings/queries.ts b/src/siteSettings/queries.ts
index b6a57c61a..d4e01c203 100644
--- a/src/siteSettings/queries.ts
+++ b/src/siteSettings/queries.ts
@@ -17,6 +17,9 @@ export const shopFragment = gql`
       code
       country
     }
+    customerSetPasswordUrl
+    defaultMailSenderAddress
+    defaultMailSenderName
     description
     domain {
       host
diff --git a/src/siteSettings/types/AuthorizationKeyAdd.ts b/src/siteSettings/types/AuthorizationKeyAdd.ts
index a326a9cca..bc8205925 100644
--- a/src/siteSettings/types/AuthorizationKeyAdd.ts
+++ b/src/siteSettings/types/AuthorizationKeyAdd.ts
@@ -58,6 +58,9 @@ export interface AuthorizationKeyAdd_authorizationKeyAdd_shop {
   authorizationKeys: (AuthorizationKeyAdd_authorizationKeyAdd_shop_authorizationKeys | null)[];
   companyAddress: AuthorizationKeyAdd_authorizationKeyAdd_shop_companyAddress | null;
   countries: (AuthorizationKeyAdd_authorizationKeyAdd_shop_countries | null)[];
+  customerSetPasswordUrl: string | null;
+  defaultMailSenderAddress: string | null;
+  defaultMailSenderName: string | null;
   description: string | null;
   domain: AuthorizationKeyAdd_authorizationKeyAdd_shop_domain;
   name: string;
diff --git a/src/siteSettings/types/AuthorizationKeyDelete.ts b/src/siteSettings/types/AuthorizationKeyDelete.ts
index 024e7f599..2e6451869 100644
--- a/src/siteSettings/types/AuthorizationKeyDelete.ts
+++ b/src/siteSettings/types/AuthorizationKeyDelete.ts
@@ -58,6 +58,9 @@ export interface AuthorizationKeyDelete_authorizationKeyDelete_shop {
   authorizationKeys: (AuthorizationKeyDelete_authorizationKeyDelete_shop_authorizationKeys | null)[];
   companyAddress: AuthorizationKeyDelete_authorizationKeyDelete_shop_companyAddress | null;
   countries: (AuthorizationKeyDelete_authorizationKeyDelete_shop_countries | null)[];
+  customerSetPasswordUrl: string | null;
+  defaultMailSenderAddress: string | null;
+  defaultMailSenderName: string | null;
   description: string | null;
   domain: AuthorizationKeyDelete_authorizationKeyDelete_shop_domain;
   name: string;
diff --git a/src/siteSettings/types/ShopFragment.ts b/src/siteSettings/types/ShopFragment.ts
index d27566ab8..aaf4326c9 100644
--- a/src/siteSettings/types/ShopFragment.ts
+++ b/src/siteSettings/types/ShopFragment.ts
@@ -52,6 +52,9 @@ export interface ShopFragment {
   authorizationKeys: (ShopFragment_authorizationKeys | null)[];
   companyAddress: ShopFragment_companyAddress | null;
   countries: (ShopFragment_countries | null)[];
+  customerSetPasswordUrl: string | null;
+  defaultMailSenderAddress: string | null;
+  defaultMailSenderName: string | null;
   description: string | null;
   domain: ShopFragment_domain;
   name: string;
diff --git a/src/siteSettings/types/ShopSettingsUpdate.ts b/src/siteSettings/types/ShopSettingsUpdate.ts
index 2fa80ac0d..f583dc589 100644
--- a/src/siteSettings/types/ShopSettingsUpdate.ts
+++ b/src/siteSettings/types/ShopSettingsUpdate.ts
@@ -58,6 +58,9 @@ export interface ShopSettingsUpdate_shopSettingsUpdate_shop {
   authorizationKeys: (ShopSettingsUpdate_shopSettingsUpdate_shop_authorizationKeys | null)[];
   companyAddress: ShopSettingsUpdate_shopSettingsUpdate_shop_companyAddress | null;
   countries: (ShopSettingsUpdate_shopSettingsUpdate_shop_countries | null)[];
+  customerSetPasswordUrl: string | null;
+  defaultMailSenderAddress: string | null;
+  defaultMailSenderName: string | null;
   description: string | null;
   domain: ShopSettingsUpdate_shopSettingsUpdate_shop_domain;
   name: string;
diff --git a/src/siteSettings/types/SiteSettings.ts b/src/siteSettings/types/SiteSettings.ts
index ee049f738..6b0064451 100644
--- a/src/siteSettings/types/SiteSettings.ts
+++ b/src/siteSettings/types/SiteSettings.ts
@@ -52,6 +52,9 @@ export interface SiteSettings_shop {
   authorizationKeys: (SiteSettings_shop_authorizationKeys | null)[];
   companyAddress: SiteSettings_shop_companyAddress | null;
   countries: (SiteSettings_shop_countries | null)[];
+  customerSetPasswordUrl: string | null;
+  defaultMailSenderAddress: string | null;
+  defaultMailSenderName: string | null;
   description: string | null;
   domain: SiteSettings_shop_domain;
   name: string;
diff --git a/src/siteSettings/views/index.tsx b/src/siteSettings/views/index.tsx
index 77758cb18..4ed3cfb05 100644
--- a/src/siteSettings/views/index.tsx
+++ b/src/siteSettings/views/index.tsx
@@ -13,6 +13,7 @@ import SiteSettingsKeyDialog, {
   SiteSettingsKeyDialogForm
 } from "../components/SiteSettingsKeyDialog";
 import SiteSettingsPage, {
+  SiteSettingsPageAddressFormData,
   SiteSettingsPageFormData
 } from "../components/SiteSettingsPage";
 import {
@@ -124,10 +125,21 @@ export const SiteSettings: React.StatelessComponent<SiteSettingsProps> = ({
                       });
                     const handleUpdateShopSettings = (
                       data: SiteSettingsPageFormData
-                    ) =>
-                      updateShopSettings({
-                        variables: {
-                          addressInput: {
+                    ) => {
+                      const areAddressInputFieldsModified = ([
+                        "city",
+                        "companyName",
+                        "country",
+                        "countryArea",
+                        "phone",
+                        "postalCode",
+                        "streetAddress1",
+                        "streetAddress2"
+                      ] as Array<keyof SiteSettingsPageAddressFormData>)
+                        .map(key => data[key])
+                        .some(field => field !== "");
+                      const addressInput = areAddressInputFieldsModified
+                        ? {
                             city: data.city,
                             companyName: data.companyName,
                             country: data.country,
@@ -136,16 +148,25 @@ export const SiteSettings: React.StatelessComponent<SiteSettingsProps> = ({
                             postalCode: data.postalCode,
                             streetAddress1: data.streetAddress1,
                             streetAddress2: data.streetAddress2
-                          },
+                          }
+                        : null;
+                      updateShopSettings({
+                        variables: {
+                          addressInput,
                           shopDomainInput: {
                             domain: data.domain,
                             name: data.name
                           },
                           shopSettingsInput: {
+                            customerSetPasswordUrl: data.customerSetPasswordUrl,
+                            defaultMailSenderAddress:
+                              data.defaultMailSenderAddress,
+                            defaultMailSenderName: data.defaultMailSenderName,
                             description: data.description
                           }
                         }
                       });
+                    };
 
                     const formTransitionState = getMutationState(
                       updateShopSettingsOpts.called,
diff --git a/src/storybook/stories/categories/CategoryUpdatePage.tsx b/src/storybook/stories/categories/CategoryUpdatePage.tsx
index 86d508e79..6bcd78919 100644
--- a/src/storybook/stories/categories/CategoryUpdatePage.tsx
+++ b/src/storybook/stories/categories/CategoryUpdatePage.tsx
@@ -53,7 +53,13 @@ storiesOf("Views / Categories / Update category", module)
     />
   ))
   .add("no background", () => (
-    <CategoryUpdatePage {...updateProps} category={category} />
+    <CategoryUpdatePage
+      {...updateProps}
+      category={{
+        ...category,
+        backgroundImage: null
+      }}
+    />
   ))
   .add("no subcategories", () => (
     <CategoryUpdatePage {...updateProps} subcategories={[]} />
diff --git a/src/storybook/stories/siteSettings/SiteSettingsPage.tsx b/src/storybook/stories/siteSettings/SiteSettingsPage.tsx
index 66c3e62ee..51925caa0 100644
--- a/src/storybook/stories/siteSettings/SiteSettingsPage.tsx
+++ b/src/storybook/stories/siteSettings/SiteSettingsPage.tsx
@@ -29,6 +29,13 @@ storiesOf("Views / Site settings / Page", module)
   .add("form errors", () => (
     <SiteSettingsPage
       {...props}
-      errors={["description", "domain", "name"].map(field => formError(field))}
+      errors={[
+        "description",
+        "domain",
+        "name",
+        "defaultMailSenderAddress",
+        "defaultMailSenderName",
+        "customerSetPasswordUrl"
+      ].map(field => formError(field))}
     />
   ));
diff --git a/src/theme.ts b/src/theme.ts
index a6e8a37b1..53faeb902 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -523,8 +523,7 @@ export default (colors: IThemeColors): Theme =>
         fontFamily
       },
       body1: {
-        fontSize: "0.75rem",
-        fontWeight: 600 as 600
+        fontSize: 14
       },
       body2: {
         fontSize: "1rem"
diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts
index 029e1ff9d..e282a14af 100644
--- a/src/types/globalTypes.ts
+++ b/src/types/globalTypes.ts
@@ -299,6 +299,7 @@ export enum WebhookEventTypeEnum {
   CUSTOMER_CREATED = "CUSTOMER_CREATED",
   ORDER_CANCELLED = "ORDER_CANCELLED",
   ORDER_CREATED = "ORDER_CREATED",
+  ORDER_FULFILLED = "ORDER_FULFILLED",
   ORDER_FULLY_PAID = "ORDER_FULLY_PAID",
   ORDER_UPDATED = "ORDER_UPDATED",
   PRODUCT_CREATED = "PRODUCT_CREATED",
@@ -748,6 +749,9 @@ export interface ShopSettingsInput {
   automaticFulfillmentDigitalProducts?: boolean | null;
   defaultDigitalMaxDownloads?: number | null;
   defaultDigitalUrlValidDays?: number | null;
+  defaultMailSenderName?: string | null;
+  defaultMailSenderAddress?: string | null;
+  customerSetPasswordUrl?: string | null;
 }
 
 export interface SiteDomainInput {


Test patch:
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 50452b961..d3f3bcc56 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -18587,118 +18587,54 @@ Ctrl + K"
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="ImageUpload-photosIconContainer-id"
+          tabindex="0"
         >
           <div
-            class="ImageTile-imageContainer-id"
-            data-tc="product-image"
+            class=""
           >
-            <div
-              class="ImageTile-imageOverlay-id"
-            >
-              <div
-                class="ImageTile-imageOverlayToolbar-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>
-              </div>
-            </div>
-            <img
-              alt="Alt text"
-              class="ImageTile-image-id"
-              src="placeholder255x255.png"
+            <input
+              autocomplete="off"
+              class="ImageUpload-fileField-id"
+              multiple=""
+              style="display:none"
+              tabindex="-1"
+              type="file"
             />
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-              data-shrink="true"
-            >
-              Description
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
             >
-              <fieldset
-                aria-hidden="true"
-                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                style="padding-left:8px"
-              >
-                <legend
-                  class="MuiPrivateNotchedOutline-legend-id"
-                  style="width:0"
-                >
-                  <span>
-                    ​
-                  </span>
-                </legend>
-              </fieldset>
-              <div
-                class="MuiPrivateTextarea-root-id"
-              >
-                <textarea
-                  aria-hidden="true"
-                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                  readonly=""
-                  rows="1"
-                  tabindex="-1"
-                />
-                <textarea
-                  aria-hidden="true"
-                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
-                  readonly=""
-                  rows="1"
-                  tabindex="-1"
-                >
-                  Alt text
-                </textarea>
-                <textarea
-                  aria-invalid="false"
-                  class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  name="backgroundImageAlt"
-                  rows="1"
-                  style="height:19px"
-                >
-                  Alt text
-                </textarea>
-              </div>
-            </div>
+              <path
+                d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
+                fill="url(#paint0_linear)"
+              />
+              <defs>
+                <linearGradient
+                  gradientUnits="userSpaceOnUse"
+                  id="paint0_linear"
+                  x1="3"
+                  x2="22.8"
+                  y1="3"
+                  y2="23.5714"
+                >
+                  <stop
+                    stop-color="#06847B"
+                  />
+                  <stop
+                    offset="1"
+                    stop-color="#3EE7CD"
+                  />
+                </linearGradient>
+              </defs>
+            </svg>
             <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
             >
-              (Optional)
+              Drop here to upload
             </p>
           </div>
         </div>
@@ -27859,7 +27795,7 @@ Ctrl + K"
                   </defs>
                 </svg>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
+                  class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                 >
                   Drop here to upload
                 </p>
@@ -28568,7 +28504,7 @@ Ctrl + K"
                   </defs>
                 </svg>
                 <p
-                  class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
+                  class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                 >
                   Drop here to upload
                 </p>
@@ -91946,7 +91882,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <p
-                    class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
+                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                   >
                     Drop here to upload
                   </p>
@@ -93436,7 +93372,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <p
-                    class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
+                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                   >
                     Drop here to upload
                   </p>
@@ -95193,7 +95129,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <p
-                    class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
+                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                   >
                     Drop here to upload
                   </p>
@@ -98008,7 +97944,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <p
-                    class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
+                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                   >
                     Drop here to upload
                   </p>
@@ -99672,7 +99608,7 @@ Ctrl + K"
                     </defs>
                   </svg>
                   <p
-                    class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
+                    class="MuiTypography-root-id MuiTypography-body2-id ImageUpload-uploadText-id"
                   >
                     Drop here to upload
                   </p>
@@ -116326,165 +116262,20 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
       <div
         class="Grid-root-id Grid-inverted-id"
       >
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
-        >
-          Site Settings
-        </h6>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="CardTitle-root-id"
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
-            >
-              General Informations
-            </span>
-            <div
-              class="CardTitle-toolbar-id"
-            />
-          </div>
-          <div
-            class="CardTitle-children-id"
-          />
-          <hr
-            class="CardTitle-hr-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
+            Site Settings
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
           >
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                data-shrink="true"
-              >
-                Name of your store
-              </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"
-                  >
-                    <span>
-                      ​
-                    </span>
-                  </legend>
-                </fieldset>
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="name"
-                  type="text"
-                  value="Saleor e-commerce"
-                />
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-              >
-                Name of your store is shown on tab in web browser
-              </p>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                data-shrink="true"
-              >
-                URL of your online store
-              </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"
-                  >
-                    <span>
-                      ​
-                    </span>
-                  </legend>
-                </fieldset>
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="domain"
-                  type="text"
-                  value="localhost:8000"
-                />
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                data-shrink="true"
-              >
-                Store Description
-              </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"
-                  >
-                    <span>
-                      ​
-                    </span>
-                  </legend>
-                </fieldset>
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="description"
-                  type="text"
-                  value="Lorem ipsum dolor sit amet"
-                />
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-              >
-                Store description is shown on taskbar after your store name
-              </p>
-            </div>
-          </div>
+            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
+          </p>
         </div>
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
-        >
-          Company information
-        </h6>
         <div
-          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id SiteSettingsAddress-root-id"
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
         >
           <div
             class="CardTitle-root-id"
@@ -116492,7 +116283,348 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
             <span
               class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
             >
-              Store Information
+              General Informations
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                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"
+              >
+                Name of your store
+              </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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="name"
+                  type="text"
+                  value="Saleor e-commerce"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              >
+                Name of your store is shown on tab in web browser
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                data-shrink="true"
+              >
+                URL of your online store
+              </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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="domain"
+                  type="text"
+                  value="localhost:8000"
+                />
+              </div>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                data-shrink="true"
+              >
+                Store Description
+              </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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="description"
+                  type="text"
+                  value="Lorem ipsum dolor sit amet"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              >
+                Store description is shown on taskbar after your store name
+              </p>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Mailing Configuration
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails.
+          </p>
+        </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"
+            >
+              Mailing Configuration
+            </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 SiteSettingsMailing-cardHelperText-id"
+            >
+              Mailing Configuration
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id SiteSettingsMailing-cardHelperTextCaption-id"
+            >
+              Configurate your email address from which all automatic emails will be sent to your customers.
+            </p>
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                data-shrink="true"
+              >
+                Mailing email address
+              </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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="defaultMailSenderAddress"
+                  type="text"
+                  value="noreply@example.com"
+                />
+              </div>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                data-shrink="true"
+              >
+                Mailing email sender
+              </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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="defaultMailSenderName"
+                  type="text"
+                  value="Saleor"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              >
+                This will be visible as "from" name
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                data-shrink="true"
+              >
+                Customer password reset 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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="customerSetPasswordUrl"
+                  placeholder="URL address"
+                  type="text"
+                  value="https://example.com/reset-password"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              >
+                This URL will be used as a main URL for password resets. It will be sent via email.
+              </p>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Company Information
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
+          </p>
+        </div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id SiteSettingsAddress-root-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+            >
+              Store Information
             </span>
             <div
               class="CardTitle-toolbar-id"
@@ -116834,11 +116966,21 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
             </div>
           </div>
         </div>
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
-        >
-          Authentication keys
-        </h6>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Authentication Methods
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Authentication method defines additional ways that customers can log in to your ecommerce. 
+          </p>
+        </div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -116981,11 +117123,18 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
       <div
         class="Grid-root-id Grid-inverted-id"
       >
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
-        >
-          Site Settings
-        </h6>
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Site Settings
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
+          </p>
+        </div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -117138,11 +117287,205 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
             </div>
           </div>
         </div>
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Mailing Configuration
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails.
+          </p>
+        </div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          Company information
-        </h6>
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
+            >
+              Mailing Configuration
+            </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 SiteSettingsMailing-cardHelperText-id"
+            >
+              Mailing Configuration
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id SiteSettingsMailing-cardHelperTextCaption-id"
+            >
+              Configurate your email address from which all automatic emails will be sent to your customers.
+            </p>
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                data-shrink="true"
+              >
+                Mailing email address
+              </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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="true"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="defaultMailSenderAddress"
+                  type="text"
+                  value="noreply@example.com"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+              >
+                Generic form error
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                data-shrink="true"
+              >
+                Mailing email sender
+              </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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="true"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="defaultMailSenderName"
+                  type="text"
+                  value="Saleor"
+                />
+              </div>
+              <p
+                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"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
+                data-shrink="true"
+              >
+                Customer password reset URL
+              </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"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+                <input
+                  aria-invalid="true"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="customerSetPasswordUrl"
+                  placeholder="URL address"
+                  type="text"
+                  value="https://example.com/reset-password"
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+              >
+                Generic form error
+              </p>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Company Information
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
+          </p>
+        </div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id SiteSettingsAddress-root-id"
         >
@@ -117494,11 +117837,21 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
             </div>
           </div>
         </div>
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
-        >
-          Authentication keys
-        </h6>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Authentication Methods
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Authentication method defines additional ways that customers can log in to your ecommerce. 
+          </p>
+        </div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -117641,11 +117994,18 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
       <div
         class="Grid-root-id Grid-inverted-id"
       >
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
-        >
-          Site Settings
-        </h6>
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Site Settings
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
+          </p>
+        </div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -117700,7 +118060,90 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                   aria-invalid="false"
                   class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                   disabled=""
-                  name="name"
+                  name="name"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+              >
+                Name of your store is shown on tab in web browser
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                data-shrink="false"
+              >
+                URL of your online store
+              </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="domain"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                data-shrink="false"
+              >
+                Store Description
+              </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="description"
                   type="text"
                   value=""
                 />
@@ -117708,9 +118151,96 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               <p
                 class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
               >
-                Name of your store is shown on tab in web browser
+                Store description is shown on taskbar after your store name
               </p>
             </div>
+          </div>
+        </div>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Mailing Configuration
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails.
+          </p>
+        </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"
+            >
+              Mailing Configuration
+            </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 SiteSettingsMailing-cardHelperText-id"
+            >
+              Mailing Configuration
+            </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id SiteSettingsMailing-cardHelperTextCaption-id"
+            >
+              Configurate your email address from which all automatic emails will be sent to your customers.
+            </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"
+              >
+                Mailing email address
+              </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="defaultMailSenderAddress"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
             <div
               class="FormSpacer-spacer-id"
             />
@@ -117721,7 +118251,7 @@ exports[`Storyshots Views / Site settings / Page 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"
               >
-                URL of your online store
+                Mailing email sender
               </label>
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -117744,15 +118274,26 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                   aria-invalid="false"
                   class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                   disabled=""
-                  name="domain"
+                  name="defaultMailSenderName"
                   type="text"
                   value=""
                 />
               </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+              >
+                This will be visible as "from" name
+              </p>
             </div>
             <div
               class="FormSpacer-spacer-id"
             />
+            <hr
+              class="Hr-root-id"
+            />
+            <div
+              class="FormSpacer-spacer-id"
+            />
             <div
               class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
             >
@@ -117760,7 +118301,7 @@ exports[`Storyshots Views / Site settings / Page 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"
               >
-                Store Description
+                Customer password reset URL
               </label>
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -117783,7 +118324,8 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                   aria-invalid="false"
                   class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                   disabled=""
-                  name="description"
+                  name="customerSetPasswordUrl"
+                  placeholder="URL address"
                   type="text"
                   value=""
                 />
@@ -117791,16 +118333,26 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
               <p
                 class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
               >
-                Store description is shown on taskbar after your store name
+                This URL will be used as a main URL for password resets. It will be sent via email.
               </p>
             </div>
           </div>
         </div>
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
-        >
-          Company information
-        </h6>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Company Information
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
+          </p>
+        </div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id SiteSettingsAddress-root-id"
         >
@@ -118162,11 +118714,21 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
             </div>
           </div>
         </div>
-        <h6
-          class="MuiTypography-root-id MuiTypography-h6-id"
-        >
-          Authentication keys
-        </h6>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <p
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            Authentication Methods
+          </p>
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Authentication method defines additional ways that customers can log in to your ecommerce. 
+          </p>
+        </div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -123206,6 +123768,27 @@ exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
                   </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_FULFILLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  />
+                </label>
+              </div>
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
@@ -123720,6 +124303,27 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   </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_FULFILLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  />
+                </label>
+              </div>
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
@@ -124241,6 +124845,29 @@ exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
                   </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_FULFILLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  />
+                </label>
+              </div>
               <div>
                 <label
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
@@ -124765,6 +125392,27 @@ exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
                   </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_FULFILLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  />
+                </label>
+              </div>
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
@@ -125280,6 +125928,27 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   </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_FULFILLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
+                  />
+                </label>
+              </div>
               <div>
                 <label
                   class="MuiFormControlLabel-root-id"
@@ -125802,6 +126471,29 @@ exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
                   </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_FULFILLED"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </button>
+                  <span
+                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
+                  />
+                </label>
+              </div>
               <div>
                 <label
                   class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"