Shipping zone description

locale/defaultMessages.json

@@ -5452,6 +5452,13 @@
   "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_3109712047": {
     "string": "Countries"
   },
+  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_3374163063": {
+    "string": "Description"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_3877274856": {
+    "context": "character limit",
+    "string": "{numberOfCharacters} of {maxCharacters} characters"
+  },
   "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_4270729636": {
     "string": "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
   },

schema.graphql

@@ -4782,6 +4782,7 @@ type ShippingZone implements Node & ObjectWithMetadata {
   countries: [CountryDisplay]
   shippingMethods: [ShippingMethod]
   warehouses: [Warehouse]
+  description: String
 }
 
 type ShippingZoneBulkDelete {
@@ -4830,6 +4831,7 @@ input ShippingZoneUpdateInput {
   name: String
   countries: [String]
   default: Boolean
+  description: String
   addWarehouses: [ID]
   removeWarehouses: [ID]
 }

src/fragments/shipping.ts

@@ -13,6 +13,7 @@ export const shippingZoneFragment = gql`
       country
     }
     name
+    description
   }
 `;
 

src/fragments/types/ShippingZoneDetailsFragment.ts

@@ -117,6 +117,7 @@ export interface ShippingZoneDetailsFragment {
   id: string;
   countries: (ShippingZoneDetailsFragment_countries | null)[] | null;
   name: string;
+  description: string | null;
   default: boolean;
   shippingMethods: (ShippingZoneDetailsFragment_shippingMethods | null)[] | null;
   warehouses: (ShippingZoneDetailsFragment_warehouses | null)[] | null;

src/fragments/types/ShippingZoneFragment.ts

@@ -31,4 +31,5 @@ export interface ShippingZoneFragment {
   id: string;
   countries: (ShippingZoneFragment_countries | null)[] | null;
   name: string;
+  description: string | null;
 }

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -1,3 +1,5 @@
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import TextField from "@material-ui/core/TextField";
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -33,9 +35,27 @@ import ShippingZoneWarehouses from "../ShippingZoneWarehouses";
 
 export interface FormData extends MetadataFormData {
   name: string;
+  description: string;
   warehouses: string[];
 }
 
+const maxDescriptionLength = 300;
+
+const useStyles = makeStyles(
+  {
+    label: {
+      flex: 1
+    },
+    labelContainer: {
+      "& span": {
+        paddingRight: 30
+      },
+      display: "flex"
+    }
+  },
+  { name: "ShippingZoneDetailsPage" }
+);
+
 export interface ShippingZoneDetailsPageProps
   extends FetchMoreProps,
     SearchProps,
@@ -91,8 +111,10 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
   warehouses
 }) => {
   const intl = useIntl();
+  const classes = useStyles({});
 
   const initialForm: FormData = {
+    description: shippingZone?.description || "",
     metadata: shippingZone?.metadata.map(mapMetadataItemToInput),
     name: shippingZone?.name || "",
     privateMetadata: shippingZone?.privateMetadata.map(mapMetadataItemToInput),
@@ -124,6 +146,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
         );
 
         const changeMetadata = makeMetadataChangeHandler(change);
+        const description = data.description;
 
         return (
           <Container>
@@ -202,6 +225,41 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                   warehouses={warehouseChoices}
                 />
               </div>
+              <TextField
+                error={description.length > maxDescriptionLength}
+                name={"description"}
+                label={
+                  <div className={classes.labelContainer}>
+                    <div className={classes.label}>
+                      <FormattedMessage defaultMessage="Description" />
+                    </div>
+                    {description?.length > 0 && (
+                      <span>
+                        <FormattedMessage
+                          defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
+                          description="character limit"
+                          values={{
+                            maxCharacters: maxDescriptionLength,
+                            numberOfCharacters: description.length
+                          }}
+                        />
+                      </span>
+                    )}
+                  </div>
+                }
+                InputProps={{
+                  inputProps: {
+                    maxLength: maxDescriptionLength
+                  }
+                }}
+                value={description}
+                onChange={change}
+                disabled={loading || disabled}
+                fullWidth
+                multiline
+                placeholder={"placeholder"}
+                rows={10}
+              />
             </Grid>
             <SaveButtonBar
               disabled={disabled || !hasChanged}

src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx

@@ -37,15 +37,15 @@ const useStyles = makeStyles(
       paddingRight: 24,
       width: ICONBUTTON_SIZE + theme.spacing(0.5)
     },
+    buttonColumn: {
+      padding: "4px 0",
+      width: "62px"
+    },
     nameColumn: {
       width: "auto"
     },
     valueColumn: {
       width: "auto"
-    },
-    buttonColumn: {
-      width: "62px",
-      padding: "4px 0"
     }
   }),
   { name: "ShippingZoneRates" }

src/shipping/fixtures.ts

@@ -264,6 +264,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Wielka Brytania"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjE=",
     metadata: [],
     name: "Europe",
@@ -418,6 +419,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Wallis i Futuna"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjI=",
     metadata: [],
     name: "Oceania",
@@ -425,7 +427,6 @@ export const shippingZones: ShippingZoneFragment[] = [
   },
   {
     __typename: "ShippingZone",
-
     countries: [
       {
         __typename: "CountryDisplay",
@@ -683,6 +684,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Jemen"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjM=",
     metadata: [],
     name: "Asia",
@@ -690,7 +692,6 @@ export const shippingZones: ShippingZoneFragment[] = [
   },
   {
     __typename: "ShippingZone",
-
     countries: [
       {
         __typename: "CountryDisplay",
@@ -978,6 +979,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Wyspy Dziewicze Stanów Zjednoczonych"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjQ=",
     metadata: [],
     name: "Americas",
@@ -985,7 +987,6 @@ export const shippingZones: ShippingZoneFragment[] = [
   },
   {
     __typename: "ShippingZone",
-
     countries: [
       {
         __typename: "CountryDisplay",
@@ -1289,6 +1290,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Zimbabwe"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjU=",
     metadata: [],
     name: "Africa",
@@ -1556,6 +1558,7 @@ export const shippingZone: ShippingZone_shippingZone = {
     }
   ],
   default: false,
+  description: "Shipping zone description",
   id: "U2hpcHBpbmdab25lOjE=",
   metadata: [],
   name: "Europe",

src/shipping/types/CreateShippingRate.ts

@@ -123,6 +123,7 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone {
   id: string;
   countries: (CreateShippingRate_shippingPriceCreate_shippingZone_countries | null)[] | null;
   name: string;
+  description: string | null;
   default: boolean;
   shippingMethods: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods | null)[] | null;
   warehouses: (CreateShippingRate_shippingPriceCreate_shippingZone_warehouses | null)[] | null;

src/shipping/types/DeleteShippingRate.ts

@@ -123,6 +123,7 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone {
   id: string;
   countries: (DeleteShippingRate_shippingPriceDelete_shippingZone_countries | null)[] | null;
   name: string;
+  description: string | null;
   default: boolean;
   shippingMethods: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods | null)[] | null;
   warehouses: (DeleteShippingRate_shippingPriceDelete_shippingZone_warehouses | null)[] | null;

src/shipping/types/ShippingZone.ts

@@ -149,6 +149,7 @@ export interface ShippingZone_shippingZone {
   id: string;
   countries: (ShippingZone_shippingZone_countries | null)[] | null;
   name: string;
+  description: string | null;
   default: boolean;
   shippingMethods: (ShippingZone_shippingZone_shippingMethods | null)[] | null;
   warehouses: (ShippingZone_shippingZone_warehouses | null)[] | null;

src/shipping/types/ShippingZones.ts

@@ -31,6 +31,7 @@ export interface ShippingZones_shippingZones_edges_node {
   id: string;
   countries: (ShippingZones_shippingZones_edges_node_countries | null)[] | null;
   name: string;
+  description: string | null;
 }
 
 export interface ShippingZones_shippingZones_edges {

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -144,6 +144,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
         id,
         input: {
           addWarehouses: warehouseDiff.added,
+          description: submitData.description,
           name: submitData.name,
           removeWarehouses: warehouseDiff.removed
         }

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

@@ -209429,6 +209429,55 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             </div>
           </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"
+          >
+            <div
+              class="ShippingZoneDetailsPage-labelContainer-id"
+            >
+              <div
+                class="ShippingZoneDetailsPage-label-id"
+              >
+                Description
+              </div>
+              <span>
+                25 of 300 characters
+              </span>
+            </div>
+          </label>
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+          >
+            <textarea
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+              maxlength="300"
+              name="description"
+              placeholder="placeholder"
+              rows="10"
+            >
+              Shipping zone description
+            </textarea>
+            <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>
   </form>
@@ -210346,6 +210395,55 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             </div>
           </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"
+          >
+            <div
+              class="ShippingZoneDetailsPage-labelContainer-id"
+            >
+              <div
+                class="ShippingZoneDetailsPage-label-id"
+              >
+                Description
+              </div>
+              <span>
+                25 of 300 characters
+              </span>
+            </div>
+          </label>
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+          >
+            <textarea
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+              maxlength="300"
+              name="description"
+              placeholder="placeholder"
+              rows="10"
+            >
+              Shipping zone description
+            </textarea>
+            <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>
   </form>
@@ -211040,6 +211138,51 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
             </div>
           </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"
+          >
+            <div
+              class="ShippingZoneDetailsPage-labelContainer-id"
+            >
+              <div
+                class="ShippingZoneDetailsPage-label-id"
+              >
+                Description
+              </div>
+            </div>
+          </label>
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+          >
+            <textarea
+              aria-invalid="false"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+              disabled=""
+              maxlength="300"
+              name="description"
+              placeholder="placeholder"
+              rows="10"
+            />
+            <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>
   </form>

src/types/globalTypes.ts

@@ -1719,6 +1719,7 @@ export interface ShippingZoneUpdateInput {
   name?: string | null;
   countries?: (string | null)[] | null;
   default?: boolean | null;
+  description?: string | null;
   addWarehouses?: (string | null)[] | null;
   removeWarehouses?: (string | null)[] | null;
 }