Add shipping delivery days (#914)

* Add shipping delivery days

* Update changelog with shipping delivery days

* Update data-test and messages

* Add shipping delivery days to shipping rate create page

* Update shipping test snapshots

* Make max delivery time of shipping optional

CHANGELOG.md

@@ -11,6 +11,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add zip code exclusion - #877 by @dominik-zeglen
 - Update quantity column in Inventory part of Product Variant view - #904 by @dominik-zeglen
 - Add file attributes - #884 by @orzechdev
+- Add shipping delivery days - #914 by @orzechdev
 
 # 2.11.1
 

locale/defaultMessages.json

@@ -5388,7 +5388,16 @@
   "src_dot_shipping_dot_components_dot_ShippingMethodProducts_dot_4190792473": {
     "string": "Actions"
   },
-  "src_dot_shipping_dot_components_dot_ShippingRateInfo_dot_579967655": {
+  "src_dot_shipping_dot_components_dot_ShippingRateInfo_dot_maxDays": {
+    "context": "label",
+    "string": "Max Delivery Time"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingRateInfo_dot_minDays": {
+    "context": "label",
+    "string": "Min Delivery Time"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingRateInfo_dot_name": {
+    "context": "label",
     "string": "Shipping rate name"
   },
   "src_dot_shipping_dot_components_dot_ShippingRateZipCodeRangeRemoveDialog_dot_3640694505": {
@@ -5469,20 +5478,18 @@
     "context": "shipping section header",
     "string": "Shipping"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_1470703814": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_descriptionCharacterLimit": {
+    "context": "character limit",
+    "string": "{numberOfCharacters} of {maxCharacters} characters"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_descriptionPlaceholder": {
     "context": "field placeholder",
     "string": "Description of a shipping zone."
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_1560416099": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_name": {
+    "context": "label",
     "string": "Shipping zone name"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_3374163063": {
-    "string": "Description"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_3877274856": {
-    "context": "character limit",
-    "string": "{numberOfCharacters} of {maxCharacters} characters"
-  },
   "src_dot_shipping_dot_components_dot_ShippingZoneRatesCreatePage_dot_1161979494": {
     "context": "page title",
     "string": "Price Rate Create"

src/fragments/shipping.ts

@@ -42,6 +42,8 @@ export const shippingMethodFragment = gql`
       unit
       value
     }
+    minimumDeliveryDays
+    maximumDeliveryDays
     name
     type
     channelListings {

src/fragments/types/ShippingMethodFragment.ts

@@ -81,6 +81,8 @@ export interface ShippingMethodFragment {
   privateMetadata: (ShippingMethodFragment_privateMetadata | null)[];
   minimumOrderWeight: ShippingMethodFragment_minimumOrderWeight | null;
   maximumOrderWeight: ShippingMethodFragment_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: ShippingMethodFragment_channelListings[] | null;

src/fragments/types/ShippingMethodWithExcludedProductsFragment.ts

@@ -112,6 +112,8 @@ export interface ShippingMethodWithExcludedProductsFragment {
   privateMetadata: (ShippingMethodWithExcludedProductsFragment_privateMetadata | null)[];
   minimumOrderWeight: ShippingMethodWithExcludedProductsFragment_minimumOrderWeight | null;
   maximumOrderWeight: ShippingMethodWithExcludedProductsFragment_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: ShippingMethodWithExcludedProductsFragment_channelListings[] | null;

src/fragments/types/ShippingZoneDetailsFragment.ts

@@ -99,6 +99,8 @@ export interface ShippingZoneDetailsFragment_shippingMethods {
   privateMetadata: (ShippingZoneDetailsFragment_shippingMethods_privateMetadata | null)[];
   minimumOrderWeight: ShippingZoneDetailsFragment_shippingMethods_minimumOrderWeight | null;
   maximumOrderWeight: ShippingZoneDetailsFragment_shippingMethods_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: ShippingZoneDetailsFragment_shippingMethods_channelListings[] | null;

src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx

@@ -1,30 +1,63 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
+import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
 import { commonMessages } from "@saleor/intl";
 import { getFormErrors } from "@saleor/utils/errors";
 import getShippingErrorMessage from "@saleor/utils/errors/shipping";
 import React from "react";
-import { useIntl } from "react-intl";
+import { defineMessages, useIntl } from "react-intl";
+
+const messages = defineMessages({
+  maxDays: {
+    defaultMessage: "Max Delivery Time",
+    description: "label"
+  },
+  minDays: {
+    defaultMessage: "Min Delivery Time",
+    description: "label"
+  },
+  name: {
+    defaultMessage: "Shipping rate name",
+    description: "label"
+  }
+});
+
+const useStyles = makeStyles(
+  theme => ({
+    deliveryTimeFields: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridRowGap: theme.spacing(1),
+      gridTemplateColumns: "1fr 1fr 1fr",
+      [theme.breakpoints.down("md")]: {
+        gridTemplateColumns: "1fr 1fr"
+      },
+      [theme.breakpoints.down("xs")]: {
+        gridTemplateColumns: "1fr"
+      }
+    }
+  }),
+  { name: "ShippingRateInfo" }
+);
 
 export interface ShippingRateInfoProps {
-  data: Record<"name", string>;
+  data: Record<"name" | "maxDays" | "minDays", string>;
   disabled: boolean;
   errors: ShippingErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const ShippingRateInfo: React.FC<ShippingRateInfoProps> = ({
+const ShippingRateInfo: React.FC<ShippingRateInfoProps> = props => {
-  data,
+  const { data, disabled, errors, onChange } = props;
-  disabled,
-  errors,
-  onChange
-}) => {
-  const intl = useIntl();
 
-  const formErrors = getFormErrors(["name"], errors);
+  const intl = useIntl();
+  const classes = useStyles(props);
+
+  const formErrors = getFormErrors(["name", "minDays", "maxDays"], errors);
 
   return (
     <Card>
@@ -37,13 +70,46 @@ const ShippingRateInfo: React.FC<ShippingRateInfoProps> = ({
           error={!!formErrors.name}
           fullWidth
           helperText={getShippingErrorMessage(formErrors.name, intl)}
-          label={intl.formatMessage({
+          label={intl.formatMessage(messages.name)}
-            defaultMessage: "Shipping rate name"
-          })}
           name="name"
           value={data.name}
           onChange={onChange}
         />
+        <CardSpacer />
+        <div className={classes.deliveryTimeFields}>
+          <TextField
+            disabled={disabled}
+            error={!!formErrors.minDays}
+            fullWidth
+            helperText={getShippingErrorMessage(formErrors.minDays, intl)}
+            label={intl.formatMessage(messages.minDays)}
+            type="number"
+            inputProps={{
+              min: 0,
+              type: "number"
+            }}
+            InputProps={{ inputProps: { min: 0 } }}
+            name="minDays"
+            value={data.minDays}
+            onChange={onChange}
+          />
+          <TextField
+            disabled={disabled}
+            error={!!formErrors.maxDays}
+            fullWidth
+            helperText={getShippingErrorMessage(formErrors.maxDays, intl)}
+            label={intl.formatMessage(messages.maxDays)}
+            type="number"
+            inputProps={{
+              min: 0,
+              type: "number"
+            }}
+            InputProps={{ inputProps: { min: 0 } }}
+            name="maxDays"
+            value={data.maxDays}
+            onChange={onChange}
+          />
+        </div>
       </CardContent>
     </Card>
   );

src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx

@@ -9,7 +9,22 @@ import { commonMessages } from "@saleor/intl";
 import { getFormErrors } from "@saleor/utils/errors";
 import getShippingErrorMessage from "@saleor/utils/errors/shipping";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
+
+const messages = defineMessages({
+  descriptionCharacterLimit: {
+    defaultMessage: "{numberOfCharacters} of {maxCharacters} characters",
+    description: "character limit"
+  },
+  descriptionPlaceholder: {
+    defaultMessage: "Description of a shipping zone.",
+    description: "field placeholder"
+  },
+  name: {
+    defaultMessage: "Shipping zone name",
+    description: "label"
+  }
+});
 
 export interface ShippingZoneInfoProps {
   data: Record<"name" | "description", string>;
@@ -57,9 +72,10 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
           error={!!formErrors.name}
           fullWidth
           helperText={getShippingErrorMessage(formErrors.name, intl)}
-          label={intl.formatMessage({
+          label={intl.formatMessage(messages.name)}
-            defaultMessage: "Shipping zone name"
+          inputProps={{
-          })}
+            "data-test": "name"
+          }}
           name="name"
           value={data.name}
           onChange={onChange}
@@ -71,13 +87,12 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
           label={
             <div className={classes.labelContainer}>
               <div className={classes.label}>
-                <FormattedMessage defaultMessage="Description" />
+                <FormattedMessage {...commonMessages.description} />
               </div>
               {data.description?.length > 0 && (
                 <span>
                   <FormattedMessage
-                    defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
+                    {...messages.descriptionCharacterLimit}
-                    description="character limit"
                     values={{
                       maxCharacters: MAX_DESCRIPTION_LENGTH,
                       numberOfCharacters: data.description.length
@@ -97,10 +112,7 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
           disabled={disabled}
           fullWidth
           multiline
-          placeholder={intl.formatMessage({
+          placeholder={intl.formatMessage(messages.descriptionPlaceholder)}
-            defaultMessage: "Description of a shipping zone.",
-            description: "field placeholder"
-          })}
           rows={10}
         />
       </CardContent>

src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx

@@ -32,6 +32,8 @@ export interface FormData {
   noLimits: boolean;
   minValue: string;
   maxValue: string;
+  minDays: string;
+  maxDays: string;
   type: ShippingMethodTypeEnum;
 }
 
@@ -77,7 +79,9 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
   const initialForm: FormData = {
     channelListings: shippingChannels,
     includeZipCodes: ZipCodeInclusion.Include,
+    maxDays: "",
     maxValue: "",
+    minDays: "",
     minValue: "",
     name: "",
     noLimits: false,

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx

@@ -38,6 +38,8 @@ export interface FormData extends MetadataFormData {
   noLimits: boolean;
   minValue: string;
   maxValue: string;
+  minDays: string;
+  maxDays: string;
   type: ShippingMethodTypeEnum;
 }
 
@@ -89,8 +91,10 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
   const initialForm: FormData = {
     channelListings: shippingChannels,
     includeZipCodes: ZipCodeInclusion.Exclude,
+    maxDays: rate?.maximumDeliveryDays?.toString() || "",
     maxValue: rate?.maximumOrderWeight?.value.toString() || "",
     metadata: rate?.metadata.map(mapMetadataItemToInput),
+    minDays: rate?.minimumDeliveryDays?.toString() || "",
     minValue: rate?.minimumOrderWeight?.value.toString() || "",
     name: rate?.name || "",
     noLimits: false,

src/shipping/fixtures.ts

@@ -1618,12 +1618,14 @@ export const shippingZone: ShippingZone_shippingZone = {
         }
       },
       id: "U2hpcHBpbmdNZXRob2Q6NA==",
+      maximumDeliveryDays: 10,
       maximumOrderWeight: {
         __typename: "Weight",
         unit: WeightUnitsEnum.KG,
         value: 80
       },
       metadata: [],
+      minimumDeliveryDays: 0,
       minimumOrderWeight: {
         __typename: "Weight",
         unit: WeightUnitsEnum.KG,
@@ -1681,8 +1683,10 @@ export const shippingZone: ShippingZone_shippingZone = {
         }
       },
       id: "U2hpcHBpbmdNZXRob2Q6Mw==",
+      maximumDeliveryDays: 10,
       maximumOrderWeight: null,
       metadata: [],
+      minimumDeliveryDays: 0,
       minimumOrderWeight: {
         __typename: "Weight",
         unit: WeightUnitsEnum.KG,
@@ -1740,8 +1744,10 @@ export const shippingZone: ShippingZone_shippingZone = {
         }
       },
       id: "U2hpcHBpbmdNZXRob2Q6Mg==",
+      maximumDeliveryDays: 10,
       maximumOrderWeight: null,
       metadata: [],
+      minimumDeliveryDays: 0,
       minimumOrderWeight: {
         __typename: "Weight",
         unit: WeightUnitsEnum.KG,
@@ -1786,8 +1792,10 @@ export const shippingZone: ShippingZone_shippingZone = {
         }
       },
       id: "U2hpcHBpbmdNZXRob2Q6MQ==",
+      maximumDeliveryDays: 10,
       maximumOrderWeight: null,
       metadata: [],
+      minimumDeliveryDays: 0,
       minimumOrderWeight: {
         __typename: "Weight",
         unit: WeightUnitsEnum.KG,

src/shipping/handlers.ts

@@ -47,8 +47,12 @@ export function getCreateShippingPriceRateVariables(
   data: ShippingZoneRatesPageFormData,
   id: string
 ): CreateShippingRateVariables {
+  const parsedMinDays = parseInt(data.minDays, 10);
+  const parsedMaxDays = parseInt(data.maxDays, 10);
   return {
     input: {
+      maximumDeliveryDays: parsedMaxDays,
+      minimumDeliveryDays: parsedMinDays,
       name: data.name,
       shippingZone: id,
       type: ShippingMethodTypeEnum.PRICE
@@ -62,10 +66,14 @@ export function getCreateShippingWeightRateVariables(
 ): CreateShippingRateVariables {
   const parsedMinValue = parseFloat(data.minValue);
   const parsedMaxValue = parseFloat(data.maxValue);
+  const parsedMinDays = parseInt(data.minDays, 10);
+  const parsedMaxDays = parseInt(data.maxDays, 10);
   const isWeightSet = !data.noLimits;
   return {
     input: {
+      maximumDeliveryDays: parsedMaxDays,
       maximumOrderWeight: isWeightSet ? parsedMaxValue : null,
+      minimumDeliveryDays: parsedMinDays,
       minimumOrderWeight: isWeightSet ? parsedMinValue : null,
       name: data.name,
       shippingZone: id,
@@ -79,9 +87,13 @@ export function getUpdateShippingPriceRateVariables(
   id: string,
   rateId: string
 ): UpdateShippingRateVariables {
+  const parsedMinDays = parseInt(data.minDays, 10);
+  const parsedMaxDays = parseInt(data.maxDays, 10);
   return {
     id: rateId,
     input: {
+      maximumDeliveryDays: parsedMaxDays,
+      minimumDeliveryDays: parsedMinDays,
       name: data.name,
       shippingZone: id,
       type: ShippingMethodTypeEnum.PRICE
@@ -96,11 +108,15 @@ export function getUpdateShippingWeightRateVariables(
 ): UpdateShippingRateVariables {
   const parsedMinValue = parseFloat(data.minValue);
   const parsedMaxValue = parseFloat(data.maxValue);
+  const parsedMinDays = parseInt(data.minDays, 10);
+  const parsedMaxDays = parseInt(data.maxDays, 10);
   const isWeightSet = !data.noLimits;
   return {
     id: rateId,
     input: {
+      maximumDeliveryDays: parsedMaxDays,
       maximumOrderWeight: isWeightSet ? parsedMaxValue : null,
+      minimumDeliveryDays: parsedMinDays,
       minimumOrderWeight: isWeightSet ? parsedMinValue : null,
       name: data.name,
       shippingZone: id,

src/shipping/types/CreateShippingRate.ts

@@ -105,6 +105,8 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMet
   privateMetadata: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_privateMetadata | null)[];
   minimumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_minimumOrderWeight | null;
   maximumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_channelListings[] | null;
@@ -202,6 +204,8 @@ export interface CreateShippingRate_shippingPriceCreate_shippingMethod {
   privateMetadata: (CreateShippingRate_shippingPriceCreate_shippingMethod_privateMetadata | null)[];
   minimumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingMethod_minimumOrderWeight | null;
   maximumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingMethod_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: CreateShippingRate_shippingPriceCreate_shippingMethod_channelListings[] | null;

src/shipping/types/DeleteShippingRate.ts

@@ -105,6 +105,8 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMet
   privateMetadata: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_privateMetadata | null)[];
   minimumOrderWeight: DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_minimumOrderWeight | null;
   maximumOrderWeight: DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_channelListings[] | null;

src/shipping/types/ShippingMethodChannelListingUpdate.ts

@@ -81,6 +81,8 @@ export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListing
   privateMetadata: (ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_privateMetadata | null)[];
   minimumOrderWeight: ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_minimumOrderWeight | null;
   maximumOrderWeight: ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_channelListings[] | null;

src/shipping/types/ShippingZone.ts

@@ -130,6 +130,8 @@ export interface ShippingZone_shippingZone_shippingMethods {
   privateMetadata: (ShippingZone_shippingZone_shippingMethods_privateMetadata | null)[];
   minimumOrderWeight: ShippingZone_shippingZone_shippingMethods_minimumOrderWeight | null;
   maximumOrderWeight: ShippingZone_shippingZone_shippingMethods_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: ShippingZone_shippingZone_shippingMethods_channelListings[] | null;

src/shipping/types/UpdateShippingRate.ts

@@ -87,6 +87,8 @@ export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod {
   privateMetadata: (UpdateShippingRate_shippingPriceUpdate_shippingMethod_privateMetadata | null)[];
   minimumOrderWeight: UpdateShippingRate_shippingPriceUpdate_shippingMethod_minimumOrderWeight | null;
   maximumOrderWeight: UpdateShippingRate_shippingPriceUpdate_shippingMethod_maximumOrderWeight | null;
+  minimumDeliveryDays: number | null;
+  maximumDeliveryDays: number | null;
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: UpdateShippingRate_shippingPriceUpdate_shippingMethod_channelListings[] | null;

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

@@ -15427,6 +15427,85 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="ShippingRateInfo-deliveryTimeFields-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"
+                    data-shrink="false"
+                  >
+                    Min Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="minDays"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <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"
+                    data-shrink="false"
+                  >
+                    Max Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="maxDays"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -16270,6 +16349,85 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="ShippingRateInfo-deliveryTimeFields-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"
+                    data-shrink="false"
+                  >
+                    Min Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="minDays"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <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"
+                    data-shrink="false"
+                  >
+                    Max Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="maxDays"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -17110,6 +17268,87 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="ShippingRateInfo-deliveryTimeFields-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"
+                  >
+                    Min Delivery Time
+                  </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"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                      disabled=""
+                      min="0"
+                      name="minDays"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <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"
+                  >
+                    Max Delivery Time
+                  </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"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                      disabled=""
+                      min="0"
+                      name="maxDays"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -202866,6 +203105,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    data-test="name"
                     name="name"
                     type="text"
                     value=""
@@ -203096,6 +203336,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
                   <input
                     aria-invalid="true"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    data-test="name"
                     name="name"
                     type="text"
                     value=""
@@ -203331,6 +203572,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    data-test="name"
                     disabled=""
                     name="name"
                     type="text"
@@ -203584,6 +203826,85 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="ShippingRateInfo-deliveryTimeFields-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"
+                  >
+                    Min Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="minDays"
+                      type="number"
+                      value="0"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <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"
+                  >
+                    Max Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="maxDays"
+                      type="number"
+                      value="10"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -204850,6 +205171,85 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="ShippingRateInfo-deliveryTimeFields-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"
+                  >
+                    Min Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="minDays"
+                      type="number"
+                      value="0"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <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"
+                  >
+                    Max Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="maxDays"
+                      type="number"
+                      value="10"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -206034,6 +206434,87 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="ShippingRateInfo-deliveryTimeFields-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"
+                  >
+                    Min Delivery Time
+                  </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"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                      disabled=""
+                      min="0"
+                      name="minDays"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <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"
+                  >
+                    Max Delivery Time
+                  </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"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                      disabled=""
+                      min="0"
+                      name="maxDays"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -207022,6 +207503,85 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="ShippingRateInfo-deliveryTimeFields-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"
+                  >
+                    Min Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="minDays"
+                      type="number"
+                      value="0"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <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"
+                  >
+                    Max Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="maxDays"
+                      type="number"
+                      value="10"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -208483,6 +209043,85 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="ShippingRateInfo-deliveryTimeFields-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"
+                  >
+                    Min Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="minDays"
+                      type="number"
+                      value="0"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <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"
+                  >
+                    Max Delivery Time
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="maxDays"
+                      type="number"
+                      value="10"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -209725,6 +210364,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    data-test="name"
                     name="name"
                     type="text"
                     value="Europe"
@@ -210689,6 +211329,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                   <input
                     aria-invalid="true"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    data-test="name"
                     name="name"
                     type="text"
                     value="Europe"
@@ -211663,6 +212304,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    data-test="name"
                     disabled=""
                     name="name"
                     type="text"