Fix assigning shipping zone to warehouse

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx

@@ -110,13 +110,14 @@ const useStyles = makeStyles(
 function getChoiceIndex(
   index: number,
   emptyValue: boolean,
-  customValue: boolean
+  customValue: boolean,
+  add: boolean
 ) {
   let choiceIndex = index;
   if (emptyValue) {
     choiceIndex += 1;
   }
-  if (customValue) {
+  if (customValue || add) {
     choiceIndex += 2;
   }
 
@@ -222,7 +223,8 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
               const choiceIndex = getChoiceIndex(
                 index,
                 emptyOption,
-                !!add || displayCustomValue
+                displayCustomValue,
+                !!add
               );
 
               return (

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -11,10 +11,10 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ShippingErrorFragment } from "@saleor/shipping/types/ShippingErrorFragment";
-import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
+import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import { maybe } from "../../../misc";
+import { getStringOrPlaceholder } from "../../../misc";
 import { FetchMoreProps, SearchProps } from "../../../types";
 import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
 import {
@@ -27,7 +27,7 @@ import ShippingZoneWarehouses from "../ShippingZoneWarehouses";
 
 export interface FormData {
   name: string;
-  warehouses: string[];
+  warehouse: string;
 }
 
 export interface ShippingZoneDetailsPageProps
@@ -53,7 +53,7 @@ export interface ShippingZoneDetailsPageProps
 
 function warehouseToChoice(
   warehouse: Record<"id" | "name", string>
-): MultiAutocompleteChoiceType {
+): SingleAutocompleteChoiceType {
   return {
     label: warehouse.name,
     value: warehouse.id
@@ -86,10 +86,10 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
 
   const initialForm: FormData = {
     name: shippingZone?.name || "",
-    warehouses: shippingZone?.warehouses.map(warehouse => warehouse.id) || []
+    warehouse: shippingZone?.warehouses[0]?.id || null
   };
-  const [warehouseDisplayValues, setWarehouseDisplayValues] = useStateFromProps(
+  const [warehouseDisplayValue, setWarehouseDisplayValue] = useStateFromProps(
-    shippingZone?.warehouses.map(warehouseToChoice) || []
+    shippingZone?.warehouses[0]?.name || ""
   );
 
   const warehouseChoices = warehouses.map(warehouseToChoice);
@@ -97,10 +97,9 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, hasChanged, submit }) => {
-        const handleWarehouseChange = createMultiAutocompleteSelectHandler(
+        const handleWarehouseChange = createSingleAutocompleteSelectHandler(
           change,
-          setWarehouseDisplayValues,
+          setWarehouseDisplayValue,
-          warehouseDisplayValues,
           warehouseChoices
         );
 
@@ -122,18 +121,18 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                 <CountryList
                   countries={shippingZone?.countries}
                   disabled={disabled}
-                  emptyText={maybe(
+                  emptyText={getStringOrPlaceholder(
-                    () =>
+                    shippingZone?.default === undefined
-                      shippingZone.default
+                      ? undefined
-                        ? intl.formatMessage({
+                      : shippingZone.default
-                            defaultMessage:
+                      ? intl.formatMessage({
-                              "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
+                          defaultMessage:
-                          })
+                            "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
-                        : intl.formatMessage({
+                        })
-                            defaultMessage:
+                      : intl.formatMessage({
-                              "Currently, there are no countries assigned to this shipping zone"
+                          defaultMessage:
-                          }),
+                            "Currently, there are no countries assigned to this shipping zone"
-                    "..."
+                        })
                   )}
                   onCountryAssign={onCountryAdd}
                   onCountryUnassign={onCountryRemove}
@@ -167,7 +166,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
               <div>
                 <ShippingZoneWarehouses
                   data={data}
-                  displayValue={warehouseDisplayValues}
+                  displayValue={warehouseDisplayValue}
                   hasMore={hasMore}
                   loading={loading}
                   onChange={handleWarehouseChange}

src/shipping/components/ShippingZoneWarehouses/ShippingZoneWarehouses.tsx

@@ -6,17 +6,17 @@ import { useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import { FetchMoreProps, SearchProps } from "@saleor/types";
 import { FormChange } from "@saleor/hooks/useForm";
-import MultiAutocompleteSelectField, {
+import SingleAutocompleteSelectField, {
-  MultiAutocompleteChoiceType
+  SingleAutocompleteChoiceType
-} from "@saleor/components/MultiAutocompleteSelectField";
+} from "@saleor/components/SingleAutocompleteSelectField";
 
 interface ShippingZoneWarehousesFormData {
-  warehouses: string[];
+  warehouse: string;
 }
 interface ShippingZonewWarehousesProps extends FetchMoreProps, SearchProps {
   data: ShippingZoneWarehousesFormData;
-  displayValue: MultiAutocompleteChoiceType[];
+  displayValue: string;
-  warehouses: MultiAutocompleteChoiceType[];
+  warehouses: SingleAutocompleteChoiceType[];
   onChange: FormChange;
   onWarehouseAdd: () => void;
 }
@@ -44,7 +44,7 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
         })}
       />
       <CardContent>
-        <MultiAutocompleteSelectField
+        <SingleAutocompleteSelectField
           add={{
             label: intl.formatMessage({
               defaultMessage: "Add New Warehouse",
@@ -53,7 +53,7 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
             onClick: onWarehouseAdd
           }}
           choices={warehouses}
-          displayValues={displayValue}
+          displayValue={displayValue}
           fetchChoices={onSearchChange}
           hasMore={hasMore}
           helperText={intl.formatMessage({
@@ -66,14 +66,14 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
             id: "shippingZoneWarehouses.autocomplete.label"
           })}
           loading={loading}
-          name="warehouses"
+          name="warehouse"
           onChange={onChange}
           onFetchMore={onFetchMore}
           placeholder={intl.formatMessage({
             defaultMessage: "Select Warehouse",
             description: "input placeholder"
           })}
-          value={data.warehouses}
+          value={data.warehouse}
         />
       </CardContent>
     </Card>

src/shipping/mutations.ts

@@ -1,6 +1,7 @@
 import gql from "graphql-tag";
 
 import makeMutation from "@saleor/hooks/makeMutation";
+import { warehouseErrorFragment } from "@saleor/warehouses/mutations";
 import { countryFragment } from "../taxes/queries";
 import { shippingMethodFragment, shippingZoneDetailsFragment } from "./queries";
 import {
@@ -43,10 +44,6 @@ import {
   AssignShippingZoneToWarehouse,
   AssignShippingZoneToWarehouseVariables
 } from "./types/AssignShippingZoneToWarehouse";
-import {
-  UnassignShippingZoneToWarehouse,
-  UnassignShippingZoneToWarehouseVariables
-} from "./types/UnassignShippingZoneToWarehouse";
 
 export const shippingErrorFragment = gql`
   fragment ShippingErrorFragment on ShippingError {
@@ -224,6 +221,7 @@ export const useShippingRateBulkDelete = makeMutation<
 >(bulkDeleteShippingRate);
 
 const assignShippingZoneToWarehouse = gql`
+  ${warehouseErrorFragment}
   mutation AssignShippingZoneToWarehouse(
     $warehouseId: ID!
     $shippingZoneId: ID!
@@ -232,9 +230,8 @@ const assignShippingZoneToWarehouse = gql`
       id: $warehouseId
       shippingZoneIds: [$shippingZoneId]
     ) {
-      warehouseErrors {
+      errors: warehouseErrors {
-        code
+        ...WarehouseErrorFragment
-        field
       }
     }
   }
@@ -243,24 +240,3 @@ export const useAssignShippingZoneToWarehouse = makeMutation<
   AssignShippingZoneToWarehouse,
   AssignShippingZoneToWarehouseVariables
 >(assignShippingZoneToWarehouse);
-
-const unassignShippingZoneToWarehouse = gql`
-  mutation UnassignShippingZoneToWarehouse(
-    $warehouseId: ID!
-    $shippingZoneId: ID!
-  ) {
-    unassignWarehouseShippingZone(
-      id: $warehouseId
-      shippingZoneIds: [$shippingZoneId]
-    ) {
-      warehouseErrors {
-        code
-        field
-      }
-    }
-  }
-`;
-export const useUnassignShippingZoneToWarehouse = makeMutation<
-  UnassignShippingZoneToWarehouse,
-  UnassignShippingZoneToWarehouseVariables
->(unassignShippingZoneToWarehouse);

src/shipping/types/AssignShippingZoneToWarehouse.ts

@@ -8,7 +8,7 @@ import { WarehouseErrorCode } from "./../../types/globalTypes";
 // GraphQL mutation operation: AssignShippingZoneToWarehouse
 // ====================================================
 
-export interface AssignShippingZoneToWarehouse_assignWarehouseShippingZone_warehouseErrors {
+export interface AssignShippingZoneToWarehouse_assignWarehouseShippingZone_errors {
   __typename: "WarehouseError";
   code: WarehouseErrorCode;
   field: string | null;
@@ -16,7 +16,7 @@ export interface AssignShippingZoneToWarehouse_assignWarehouseShippingZone_wareh
 
 export interface AssignShippingZoneToWarehouse_assignWarehouseShippingZone {
   __typename: "WarehouseShippingZoneAssign";
-  warehouseErrors: AssignShippingZoneToWarehouse_assignWarehouseShippingZone_warehouseErrors[];
+  errors: AssignShippingZoneToWarehouse_assignWarehouseShippingZone_errors[];
 }
 
 export interface AssignShippingZoneToWarehouse {

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -144,21 +144,45 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
     }
   });
 
-  const handleSubmit = (data: FormData) => {
+  const handleSubmit = async (data: FormData) => {
-    updateShippingZone({
+    try {
-      variables: {
+      const updateResult = await updateShippingZone({
-        id,
+        variables: {
-        input: {
+          id,
-          name: data.name
+          input: {
+            name: data.name
+          }
         }
+      });
+      const updateErrors = updateResult.data.shippingZoneUpdate.errors;
+
+      if (updateErrors.length === 0) {
+        const assignResult = await assignToWarehouse({
+          variables: {
+            shippingZoneId: id,
+            warehouseId: data.warehouse
+          }
+        });
+        const assignErrors =
+          assignResult.data.assignWarehouseShippingZone.errors;
+
+        if (assignErrors.length === 0) {
+          notify({
+            text: intl.formatMessage(commonMessages.savedChanges)
+          });
+        } else {
+          throw new Error(
+            `Assigning to warehouse failed: ${assignErrors[0].code}`
+          );
+        }
+      } else {
+        throw new Error(`Updating failed: ${updateErrors[0].message}`);
       }
-    });
+    } catch (err) {
-    assignToWarehouse({
+      notify({
-      variables: {
+        text: intl.formatMessage(commonMessages.somethingWentWrong)
-        shippingZoneId: id,
+      });
-        warehouseId: data.warehouses[0]
+    }
-      }
-    });
   };
 
   if (data?.shippingZone === null) {

src/warehouses/mutations.ts

@@ -15,6 +15,13 @@ import {
 } from "./types/WarehouseDelete";
 import { warehouseDetailsFragment } from "./queries";
 
+export const warehouseErrorFragment = gql`
+  fragment WarehouseErrorFragment on WarehouseError {
+    code
+    field
+  }
+`;
+
 const deleteWarehouse = gql`
   mutation WarehouseDelete($id: ID!) {
     deleteWarehouse(id: $id) {

src/warehouses/types/WarehouseErrorFragment.ts

@@ -0,0 +1,15 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { WarehouseErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: WarehouseErrorFragment
+// ====================================================
+
+export interface WarehouseErrorFragment {
+  __typename: "WarehouseError";
+  code: WarehouseErrorCode;
+  field: string | null;
+}