Add stock reservation settings (#1459)

* Add stock reservation settings

* Update page section header

* Fix test snapshots

* Fix stock reservation inputs

* Update test snapshots

* Trigger CI

locale/defaultMessages.json

@@ -7063,36 +7063,63 @@
     "context": "site settings section name",
     "string": "Site Settings"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_1008586926": {
+  "src_dot_siteSettings_dot_components_dot_SiteCheckoutSettingsCard_dot_reservedStock": {
+    "context": "title",
+    "string": "Reserved stock"
+  },
+  "src_dot_siteSettings_dot_components_dot_SiteCheckoutSettingsCard_dot_reservedStockDescription": {
+    "context": "description",
+    "string": "Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers."
+  },
+  "src_dot_siteSettings_dot_components_dot_SiteCheckoutSettingsCard_dot_stockReservationForAnonymousUser": {
+    "context": "input label",
+    "string": "Stock reservation for anonymous user (in minutes)"
+  },
+  "src_dot_siteSettings_dot_components_dot_SiteCheckoutSettingsCard_dot_stockReservationForAuthenticatedUser": {
+    "context": "input label",
+    "string": "Stock reservation for authenticated user (in minutes)"
+  },
+  "src_dot_siteSettings_dot_components_dot_SiteCheckoutSettingsCard_dot_stockWillNotBeReserved": {
+    "context": "input helper text",
+    "string": "Leaving this setting empty will mean that stock won’t be reserved"
+  },
+  "src_dot_siteSettings_dot_components_dot_SiteDetailsSettingsCard_dot_1008586926": {
     "string": "Name of your store is shown on tab in web browser"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_1170194728": {
+  "src_dot_siteSettings_dot_components_dot_SiteDetailsSettingsCard_dot_1170194728": {
     "string": "Store domain"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_2286355060": {
+  "src_dot_siteSettings_dot_components_dot_SiteDetailsSettingsCard_dot_2286355060": {
     "string": "Name of your store"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_3868874271": {
+  "src_dot_siteSettings_dot_components_dot_SiteDetailsSettingsCard_dot_3868874271": {
     "string": "Store description"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_529433178": {
+  "src_dot_siteSettings_dot_components_dot_SiteDetailsSettingsCard_dot_529433178": {
     "string": "Store description is shown on taskbar after your store name"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_1004240342": {
-    "string": "This adress will be used to generate invoices and calculate shipping rates."
-  },
   "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_229184360": {
     "context": "section header",
     "string": "Store Information"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_2768400497": {
+  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_sectionCheckoutDescription": {
-    "context": "section header",
+    "context": "section description",
+    "string": "You can set basic checkout rules that will be applied globally to all your channels"
+  },
+  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_sectionCheckoutTitle": {
+    "context": "section title",
+    "string": "Checkout Configuration"
+  },
+  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_sectionCompanyDescription": {
+    "context": "section description",
+    "string": "This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers."
+  },
+  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_sectionCompanyTitle": {
+    "context": "section title",
     "string": "Company Information"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_3657173399": {
+  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_sectionDetailsDescription": {
-    "string": "Email adress you provide here will be used as a contact adress for your customers."
+    "context": "section description",
-  },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsPage_dot_3799756739": {
     "string": "These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar."
   },
   "src_dot_somethingWentWrong": {

schema.graphql

@@ -1016,6 +1016,7 @@ type Checkout implements Node & ObjectWithMetadata {
   email: String!
   isShippingRequired: Boolean!
   quantity: Int!
+  stockReservationExpires: DateTime
   lines: [CheckoutLine]
   shippingPrice: TaxedMoney
   shippingMethod: ShippingMethod @deprecated(reason: "This field will be removed in Saleor 4.0. Use `deliveryMethod` instead.")
@@ -6357,6 +6358,8 @@ type Shop {
   defaultWeightUnit: WeightUnitsEnum
   translation(languageCode: LanguageCodeEnum!): ShopTranslation
   automaticFulfillmentDigitalProducts: Boolean
+  reserveStockDurationAnonymousUser: Int
+  reserveStockDurationAuthenticatedUser: Int
   defaultDigitalMaxDownloads: Int
   defaultDigitalUrlValidDays: Int
   companyAddress: Address
@@ -6416,6 +6419,8 @@ input ShopSettingsInput {
   defaultMailSenderName: String
   defaultMailSenderAddress: String
   customerSetPasswordUrl: String
+  reserveStockDurationAnonymousUser: Int
+  reserveStockDurationAuthenticatedUser: Int
 }
 
 type ShopSettingsTranslate {
@@ -6899,6 +6904,7 @@ type Voucher implements Node & ObjectWithMetadata {
   categories(before: String, after: String, first: Int, last: Int): CategoryCountableConnection
   collections(before: String, after: String, first: Int, last: Int): CollectionCountableConnection
   products(before: String, after: String, first: Int, last: Int): ProductCountableConnection
+  variants(before: String, after: String, first: Int, last: Int): ProductVariantCountableConnection
   countries: [CountryDisplay]
   translation(languageCode: LanguageCodeEnum!): VoucherTranslation
   discountValue: Float
@@ -6990,6 +6996,7 @@ input VoucherInput {
   endDate: DateTime
   discountValueType: DiscountValueTypeEnum
   products: [ID]
+  variants: [ID]
   collections: [ID]
   categories: [ID]
   minCheckoutItemsQuantity: Int

src/components/PageSectionHeader/PageSectionHeader.tsx

@@ -0,0 +1,23 @@
+import { Typography } from "@material-ui/core";
+import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
+import React from "react";
+
+interface PageSectionHeaderProps {
+  title?: string;
+  description?: string;
+}
+
+const PageSectionHeader: React.FC<PageSectionHeaderProps> = props => {
+  const { title, description } = props;
+
+  return (
+    <div>
+      {title && <Typography variant="h5">{title}</Typography>}
+      {title && description && <VerticalSpacer />}
+      {description && <Typography variant="body2">{description}</Typography>}
+    </div>
+  );
+};
+
+PageSectionHeader.displayName = "PageSectionHeader";
+export default PageSectionHeader;

src/components/PageSectionHeader/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./PageSectionHeader";
+export * from "./PageSectionHeader";

src/fragments/shop.ts

@@ -41,5 +41,7 @@ export const shopFragment = gql`
       host
     }
     name
+    reserveStockDurationAnonymousUser
+    reserveStockDurationAuthenticatedUser
   }
 `;

src/fragments/types/ShopFragment.ts

@@ -50,4 +50,6 @@ export interface ShopFragment {
   description: string | null;
   domain: ShopFragment_domain;
   name: string;
+  reserveStockDurationAnonymousUser: number | null;
+  reserveStockDurationAuthenticatedUser: number | null;
 }

src/siteSettings/components/SiteCheckoutSettingsCard/SiteCheckoutSettingsCard.tsx

@@ -0,0 +1,91 @@
+import { Card, CardContent, TextField, Typography } from "@material-ui/core";
+import CardTitle from "@saleor/components/CardTitle";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { ShopErrorFragment } from "@saleor/fragments/types/ShopErrorFragment";
+import { getFormErrors } from "@saleor/utils/errors";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { SiteSettingsPageFormData } from "../SiteSettingsPage";
+import { messages } from "./messages";
+
+interface SiteCheckoutSettingsCardProps {
+  data: SiteSettingsPageFormData;
+  errors: ShopErrorFragment[];
+  disabled: boolean;
+  onChange: (event: React.ChangeEvent<any>) => void;
+}
+
+const SiteCheckoutSettingsCard: React.FC<SiteCheckoutSettingsCardProps> = ({
+  data,
+  disabled,
+  errors,
+  onChange
+}) => {
+  const intl = useIntl();
+
+  const formErrors = getFormErrors(
+    [
+      "reserveStockDurationAuthenticatedUser",
+      "reserveStockDurationAnonymousUser"
+    ],
+    errors
+  );
+
+  return (
+    <Card>
+      <CardTitle title={intl.formatMessage(messages.reservedStock)} />
+      <CardContent>
+        <Typography variant="body2">
+          <FormattedMessage {...messages.reservedStockDescription} />
+        </Typography>
+        <FormSpacer />
+        <TextField
+          disabled={disabled}
+          error={!!formErrors.reserveStockDurationAuthenticatedUser}
+          type="number"
+          fullWidth
+          name="reserveStockDurationAuthenticatedUser"
+          label={intl.formatMessage(
+            messages.stockReservationForAuthenticatedUser
+          )}
+          helperText={intl.formatMessage(messages.stockWillNotBeReserved)}
+          value={
+            !!data.reserveStockDurationAuthenticatedUser
+              ? String(data.reserveStockDurationAuthenticatedUser)
+              : ""
+          }
+          onChange={onChange}
+          InputProps={{
+            inputProps: {
+              autoComplete: "none"
+            }
+          }}
+        />
+        <FormSpacer />
+        <TextField
+          disabled={disabled}
+          error={!!formErrors.reserveStockDurationAnonymousUser}
+          type="number"
+          fullWidth
+          name="reserveStockDurationAnonymousUser"
+          label={intl.formatMessage(messages.stockReservationForAnonymousUser)}
+          helperText={intl.formatMessage(messages.stockWillNotBeReserved)}
+          value={
+            !!data.reserveStockDurationAnonymousUser
+              ? String(data.reserveStockDurationAnonymousUser)
+              : ""
+          }
+          onChange={onChange}
+          InputProps={{
+            inputProps: {
+              autoComplete: "none"
+            }
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+SiteCheckoutSettingsCard.displayName = "SiteCheckoutSettingsCard";
+export default SiteCheckoutSettingsCard;

src/siteSettings/components/SiteCheckoutSettingsCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./SiteCheckoutSettingsCard";
+export * from "./SiteCheckoutSettingsCard";

src/siteSettings/components/SiteCheckoutSettingsCard/messages.ts

@@ -0,0 +1,26 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  reservedStock: {
+    defaultMessage: "Reserved stock",
+    description: "title"
+  },
+  reservedStockDescription: {
+    defaultMessage:
+      "Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.",
+    description: "description"
+  },
+  stockReservationForAuthenticatedUser: {
+    defaultMessage: "Stock reservation for authenticated user (in minutes)",
+    description: "input label"
+  },
+  stockReservationForAnonymousUser: {
+    defaultMessage: "Stock reservation for anonymous user (in minutes)",
+    description: "input label"
+  },
+  stockWillNotBeReserved: {
+    defaultMessage:
+      "Leaving this setting empty will mean that stock won’t be reserved",
+    description: "input helper text"
+  }
+});

src/siteSettings/components/SiteDetailsSettingsCard/SiteDetailsSettingsCard.tsx

@@ -11,14 +11,14 @@ import { useIntl } from "react-intl";
 
 import { SiteSettingsPageFormData } from "../SiteSettingsPage";
 
-interface SiteSettingsDetailsProps {
+interface SiteDetailsSettingsCardProps {
   data: SiteSettingsPageFormData;
   errors: ShopErrorFragment[];
   disabled: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const SiteSettingsDetails: React.FC<SiteSettingsDetailsProps> = ({
+const SiteDetailsSettingsCard: React.FC<SiteDetailsSettingsCardProps> = ({
   data,
   disabled,
   errors,
@@ -104,5 +104,5 @@ const SiteSettingsDetails: React.FC<SiteSettingsDetailsProps> = ({
     </Card>
   );
 };
-SiteSettingsDetails.displayName = "SiteSettingsDetails";
+SiteDetailsSettingsCard.displayName = "SiteDetailsSettingsCard";
-export default SiteSettingsDetails;
+export default SiteDetailsSettingsCard;

src/siteSettings/components/SiteDetailsSettingsCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./SiteDetailsSettingsCard";
+export * from "./SiteDetailsSettingsCard";

src/siteSettings/components/SiteSettingsDetails/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./SiteSettingsDetails";
-export * from "./SiteSettingsDetails";

src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx

@@ -1,4 +1,3 @@
-import { Typography } from "@material-ui/core";
 import CompanyAddressInput from "@saleor/components/CompanyAddressInput";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
@@ -6,6 +5,7 @@ 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 PageSectionHeader from "@saleor/components/PageSectionHeader";
 import Savebar from "@saleor/components/Savebar";
 import { ShopErrorFragment } from "@saleor/fragments/types/ShopErrorFragment";
 import useAddressValidation from "@saleor/hooks/useAddressValidation";
@@ -17,10 +17,12 @@ import { makeStyles } from "@saleor/macaw-ui";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { mapCountriesToChoices } from "@saleor/utils/maps";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { SiteSettings_shop } from "../../types/SiteSettings";
-import SiteSettingsDetails from "../SiteSettingsDetails/SiteSettingsDetails";
+import SiteCheckoutSettingsCard from "../SiteCheckoutSettingsCard";
+import SiteSettingsDetailsCard from "../SiteDetailsSettingsCard";
+import { messages } from "./messages";
 
 export interface SiteSettingsPageAddressFormData {
   city: string;
@@ -38,6 +40,8 @@ export interface SiteSettingsPageFormData
   description: string;
   domain: string;
   name: string;
+  reserveStockDurationAnonymousUser: number;
+  reserveStockDurationAuthenticatedUser: number;
 }
 
 export interface SiteSettingsPageProps {
@@ -111,7 +115,10 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
     ...initialFormAddress,
     description: shop?.description || "",
     domain: shop?.domain.host || "",
-    name: shop?.name || ""
+    name: shop?.name || "",
+    reserveStockDurationAnonymousUser: shop?.reserveStockDurationAnonymousUser,
+    reserveStockDurationAuthenticatedUser:
+      shop?.reserveStockDurationAuthenticatedUser
   };
 
   return (
@@ -143,33 +150,38 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
               underline={true}
             />
             <Grid variant="inverted">
-              <div>
+              <PageSectionHeader
-                <Typography>
+                title={intl.formatMessage(sectionNames.siteSettings)}
-                  {intl.formatMessage(sectionNames.siteSettings)}
+                description={intl.formatMessage(
-                </Typography>
+                  messages.sectionDetailsDescription
-                <Typography variant="body2">
+                )}
-                  <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>
+              <SiteSettingsDetailsCard
-              </div>
-              <SiteSettingsDetails
                 data={data}
                 errors={errors}
                 disabled={disabled}
                 onChange={change}
               />
               <Hr className={classes.hr} />
-              <div>
+              <PageSectionHeader
-                <Typography>
+                title={intl.formatMessage(messages.sectionCheckoutTitle)}
-                  <FormattedMessage
+                description={intl.formatMessage(
-                    defaultMessage="Company Information"
+                  messages.sectionCheckoutDescription
-                    description="section header"
+                )}
-                  />
+              />
-                </Typography>
+              <SiteCheckoutSettingsCard
-                <Typography variant="body2">
+                data={data}
-                  <FormattedMessage defaultMessage="This adress will be used to generate invoices and calculate shipping rates." />
+                errors={errors}
-                  <FormattedMessage defaultMessage="Email adress you provide here will be used as a contact adress for your customers." />
+                disabled={disabled}
-                </Typography>
+                onChange={change}
-              </div>
+              />
+              <Hr className={classes.hr} />
+              <PageSectionHeader
+                title={intl.formatMessage(messages.sectionCompanyTitle)}
+                description={intl.formatMessage(
+                  messages.sectionCompanyDescription
+                )}
+              />
               <CompanyAddressInput
                 data={data}
                 displayCountry={displayCountry}

src/siteSettings/components/SiteSettingsPage/messages.ts

@@ -0,0 +1,27 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  sectionDetailsDescription: {
+    defaultMessage:
+      "These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.",
+    description: "section description"
+  },
+  sectionCheckoutTitle: {
+    defaultMessage: "Checkout Configuration",
+    description: "section title"
+  },
+  sectionCheckoutDescription: {
+    defaultMessage:
+      "You can set basic checkout rules that will be applied globally to all your channels",
+    description: "section description"
+  },
+  sectionCompanyTitle: {
+    defaultMessage: "Company Information",
+    description: "section title"
+  },
+  sectionCompanyDescription: {
+    defaultMessage:
+      "This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.",
+    description: "section description"
+  }
+});

src/siteSettings/fixtures.ts

@@ -36,5 +36,7 @@ export const shop: SiteSettings_shop = {
     __typename: "Domain",
     host: "localhost:8000"
   },
-  name: "Saleor e-commerce"
+  name: "Saleor e-commerce",
+  reserveStockDurationAnonymousUser: 10,
+  reserveStockDurationAuthenticatedUser: 10
 };

src/siteSettings/types/ShopSettingsUpdate.ts

@@ -58,6 +58,8 @@ export interface ShopSettingsUpdate_shopSettingsUpdate_shop {
   description: string | null;
   domain: ShopSettingsUpdate_shopSettingsUpdate_shop_domain;
   name: string;
+  reserveStockDurationAnonymousUser: number | null;
+  reserveStockDurationAuthenticatedUser: number | null;
 }
 
 export interface ShopSettingsUpdate_shopSettingsUpdate {

src/siteSettings/types/SiteSettings.ts

@@ -50,6 +50,8 @@ export interface SiteSettings_shop {
   description: string | null;
   domain: SiteSettings_shop_domain;
   name: string;
+  reserveStockDurationAnonymousUser: number | null;
+  reserveStockDurationAuthenticatedUser: number | null;
 }
 
 export interface SiteSettings {

src/siteSettings/views/index.tsx

@@ -80,7 +80,11 @@ export const SiteSettings: React.FC<SiteSettingsProps> = () => {
                     name: data.name
                   },
                   shopSettingsInput: {
-                    description: data.description
+                    description: data.description,
+                    reserveStockDurationAnonymousUser:
+                      data.reserveStockDurationAnonymousUser || null,
+                    reserveStockDurationAuthenticatedUser:
+                      data.reserveStockDurationAuthenticatedUser || null
                   },
                   isCloudInstance: IS_CLOUD_INSTANCE
                 }

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -249334,10 +249334,13 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
       >
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
+            class="MuiTypography-root-id MuiTypography-h5-id"
           >
             Site Settings
           </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
           <div
             class="MuiTypography-root-id MuiTypography-body2-id"
           >
@@ -249493,14 +249496,150 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
         />
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
+            class="MuiTypography-root-id MuiTypography-h5-id"
+          >
+            Checkout Configuration
+          </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
+          <div
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            You can set basic checkout rules that will be applied globally to all your channels
+          </div>
+        </div>
+        <div
+          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+            >
+              Reserved stock
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id"
+            >
+              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                data-shrink="true"
+              >
+                Stock reservation for authenticated user (in minutes)
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  autocomplete="none"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="reserveStockDurationAuthenticatedUser"
+                  type="number"
+                  value="10"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
+                  >
+                    <span>
+                      Stock reservation for authenticated user (in minutes)
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              >
+                Leaving this setting empty will mean that stock won’t be reserved
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                data-shrink="true"
+              >
+                Stock reservation for anonymous user (in minutes)
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  autocomplete="none"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="reserveStockDurationAnonymousUser"
+                  type="number"
+                  value="10"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
+                  >
+                    <span>
+                      Stock reservation for anonymous user (in minutes)
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              >
+                Leaving this setting empty will mean that stock won’t be reserved
+              </p>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <div
+            class="MuiTypography-root-id MuiTypography-h5-id"
           >
             Company Information
           </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
           <div
             class="MuiTypography-root-id MuiTypography-body2-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.
+            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
           </div>
         </div>
         <div
@@ -249896,10 +250035,13 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
       >
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
+            class="MuiTypography-root-id MuiTypography-h5-id"
           >
             Site Settings
           </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
           <div
             class="MuiTypography-root-id MuiTypography-body2-id"
           >
@@ -250060,14 +250202,150 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
         />
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
+            class="MuiTypography-root-id MuiTypography-h5-id"
+          >
+            Checkout Configuration
+          </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
+          <div
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            You can set basic checkout rules that will be applied globally to all your channels
+          </div>
+        </div>
+        <div
+          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+            >
+              Reserved stock
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id"
+            >
+              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                data-shrink="true"
+              >
+                Stock reservation for authenticated user (in minutes)
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  autocomplete="none"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="reserveStockDurationAuthenticatedUser"
+                  type="number"
+                  value="10"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
+                  >
+                    <span>
+                      Stock reservation for authenticated user (in minutes)
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              >
+                Leaving this setting empty will mean that stock won’t be reserved
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                data-shrink="true"
+              >
+                Stock reservation for anonymous user (in minutes)
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  autocomplete="none"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                  name="reserveStockDurationAnonymousUser"
+                  type="number"
+                  value="10"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
+                  >
+                    <span>
+                      Stock reservation for anonymous user (in minutes)
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
+              >
+                Leaving this setting empty will mean that stock won’t be reserved
+              </p>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <div
+            class="MuiTypography-root-id MuiTypography-h5-id"
           >
             Company Information
           </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
           <div
             class="MuiTypography-root-id MuiTypography-body2-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.
+            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
           </div>
         </div>
         <div
@@ -250463,10 +250741,13 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
       >
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
+            class="MuiTypography-root-id MuiTypography-h5-id"
           >
             Site Settings
           </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
           <div
             class="MuiTypography-root-id MuiTypography-body2-id"
           >
@@ -250625,14 +250906,152 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
         />
         <div>
           <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
+            class="MuiTypography-root-id MuiTypography-h5-id"
+          >
+            Checkout Configuration
+          </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
+          <div
+            class="MuiTypography-root-id MuiTypography-body2-id"
+          >
+            You can set basic checkout rules that will be applied globally to all your channels
+          </div>
+        </div>
+        <div
+          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+        >
+          <div
+            class="CardTitle-root-id"
+          >
+            <span
+              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+            >
+              Reserved stock
+            </span>
+            <div
+              class="CardTitle-toolbar-id"
+            />
+          </div>
+          <div
+            class="CardTitle-children-id"
+          />
+          <hr
+            class="CardTitle-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id"
+            >
+              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                data-shrink="false"
+              >
+                Stock reservation for authenticated user (in minutes)
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  autocomplete="none"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                  disabled=""
+                  name="reserveStockDurationAuthenticatedUser"
+                  type="number"
+                  value=""
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-id"
+                  >
+                    <span>
+                      Stock reservation for authenticated user (in minutes)
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+              >
+                Leaving this setting empty will mean that stock won’t be reserved
+              </p>
+            </div>
+            <div
+              class="FormSpacer-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                data-shrink="false"
+              >
+                Stock reservation for anonymous user (in minutes)
+              </label>
+              <div
+                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+              >
+                <input
+                  aria-invalid="false"
+                  autocomplete="none"
+                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                  disabled=""
+                  name="reserveStockDurationAnonymousUser"
+                  type="number"
+                  value=""
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-id"
+                  >
+                    <span>
+                      Stock reservation for anonymous user (in minutes)
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+              <p
+                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
+              >
+                Leaving this setting empty will mean that stock won’t be reserved
+              </p>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="Hr-root-id SiteSettingsPage-hr-id"
+        />
+        <div>
+          <div
+            class="MuiTypography-root-id MuiTypography-h5-id"
           >
             Company Information
           </div>
+          <div
+            class="VerticalSpacer-container-id VerticalSpacer-container-id"
+          />
           <div
             class="MuiTypography-root-id MuiTypography-body2-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.
+            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
           </div>
         </div>
         <div

src/types/globalTypes.ts

@@ -2789,6 +2789,8 @@ export interface ShopSettingsInput {
   defaultMailSenderName?: string | null;
   defaultMailSenderAddress?: string | null;
   customerSetPasswordUrl?: string | null;
+  reserveStockDurationAnonymousUser?: number | null;
+  reserveStockDurationAuthenticatedUser?: number | null;
 }
 
 export interface SiteDomainInput {
@@ -2884,6 +2886,7 @@ export interface VoucherInput {
   endDate?: any | null;
   discountValueType?: DiscountValueTypeEnum | null;
   products?: (string | null)[] | null;
+  variants?: (string | null)[] | null;
   collections?: (string | null)[] | null;
   categories?: (string | null)[] | null;
   minCheckoutItemsQuantity?: number | null;