Make warehouse and shipping work

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -72,7 +72,7 @@ const useStyles = makeStyles(
 
 export interface MultiAutocompleteSelectFieldProps
   extends Partial<FetchMoreProps> {
-  add: MultiAutocompleteActionType;
+  add?: MultiAutocompleteActionType;
   allowCustomValues?: boolean;
   displayValues: MultiAutocompleteChoiceType[];
   error?: boolean;
@@ -93,6 +93,7 @@ const DebounceAutocomplete: React.ComponentType<DebounceProps<
 
 const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFieldProps> = props => {
   const {
+    add,
     allowCustomValues,
     choices,
     displayValues,
@@ -131,6 +132,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
         itemToString={() => ""}
       >
         {({
+          closeMenu,
           getInputProps,
           getItemProps,
           isOpen,

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx

@@ -34,7 +34,7 @@ export interface MultiAutocompleteChoiceType {
 }
 export interface MultiAutocompleteSelectFieldContentProps
   extends Partial<FetchMoreProps> {
-  add: MultiAutocompleteActionType;
+  add?: MultiAutocompleteActionType;
   choices: MultiAutocompleteChoiceType[];
   displayCustomValue: boolean;
   displayValues: MultiAutocompleteChoiceType[];
@@ -45,6 +45,14 @@ export interface MultiAutocompleteSelectFieldContentProps
 
 const useStyles = makeStyles(
   theme => ({
+    add: {
+      background: theme.palette.background.default,
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: "100%",
+      height: 24,
+      marginRight: theme.spacing(),
+      width: 24
+    },
     addIcon: {
       height: 24,
       margin: 9,
@@ -106,6 +114,7 @@ const useStyles = makeStyles(
       gridColumnGap: theme.spacing(1),
       gridTemplateColumns: "30px 1fr",
       height: "auto",
+      marginBottom: theme.spacing(0.5),
       padding: 0,
       whiteSpace: "normal"
     },
@@ -136,10 +145,11 @@ const useStyles = makeStyles(
 function getChoiceIndex(
   index: number,
   displayValues: MultiAutocompleteChoiceType[],
-  displayCustomValue: boolean
+  displayCustomValue: boolean,
+  add: boolean
 ) {
   let choiceIndex = index;
-  if (displayCustomValue) {
+  if (add || displayCustomValue) {
     choiceIndex += 2;
   }
   if (displayValues.length > 0) {
@@ -258,7 +268,8 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
               const choiceIndex = getChoiceIndex(
                 index,
                 displayValues,
-                displayCustomValue
+                displayCustomValue,
+                !!add
               );
 
               return (

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx

@@ -31,7 +31,7 @@ export interface SingleAutocompleteActionType {
 }
 export interface SingleAutocompleteSelectFieldContentProps
   extends Partial<FetchMoreProps> {
-  add: SingleAutocompleteActionType;
+  add?: SingleAutocompleteActionType;
   choices: SingleAutocompleteChoiceType[];
   displayCustomValue: boolean;
   emptyOption: boolean;

src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx

@@ -104,8 +104,8 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
           description="header, dialog"
         />
       </DialogTitle>
-      <Form errors={errors} initial={initialForm} onSubmit={handleSubmit}>
+      <Form initial={initialForm} onSubmit={handleSubmit}>
-        {({ change, data, errors: formErrors }) => {
+        {({ change, data }) => {
           const handleCountrySelect = createSingleAutocompleteSelectHandler(
             change,
             setCountryDisplayName,
@@ -132,7 +132,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
                   data={data}
                   disabled={disabled}
                   displayCountry={countryDisplayName}
-                  errors={formErrors}
+                  errors={errors}
                   onChange={change}
                   onCountryChange={handleCountrySelect}
                 />

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -89,7 +89,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
     warehouses: shippingZone?.warehouses.map(warehouse => warehouse.id) || []
   };
   const [warehouseDisplayValues, setWarehouseDisplayValues] = useStateFromProps(
-    shippingZone?.warehouses.map(warehouseToChoice)
+    shippingZone?.warehouses.map(warehouseToChoice) || []
   );
 
   const warehouseChoices = warehouses.map(warehouseToChoice);

src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.tsx

@@ -47,7 +47,7 @@ const initialForm: WarehouseCreatePageFormData = {
 const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
   countries,
   disabled,
-  errors: apiErrors,
+  errors,
   saveButtonBarState,
   onBack,
   onSubmit
@@ -61,12 +61,8 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
   } = useAddressValidation<WarehouseCreatePageFormData>(onSubmit);
 
   return (
-    <Form
+    <Form initial={initialForm} onSubmit={handleSubmit}>
-      initial={initialForm}
+      {({ change, data, submit }) => {
-      errors={[...apiErrors, ...validationErrors]}
-      onSubmit={handleSubmit}
-    >
-      {({ change, data, errors, submit }) => {
         const countryChoices = mapCountriesToChoices(countries);
         const handleCountryChange = createSingleAutocompleteSelectHandler(
           change,
@@ -99,7 +95,7 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
                   data={data}
                   disabled={disabled}
                   displayCountry={displayCountry}
-                  errors={errors}
+                  errors={[...errors, ...validationErrors]}
                   header={intl.formatMessage({
                     defaultMessage: "Address Information",
                     description: "warehouse"

src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx

@@ -42,7 +42,7 @@ export interface WarehouseDetailsPageProps {
 const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
   countries,
   disabled,
-  errors: apiErrors,
+  errors,
   saveButtonBarState,
   warehouse,
   onBack,
@@ -73,12 +73,8 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
   };
 
   return (
-    <Form
+    <Form initial={initialForm} onSubmit={handleSubmit}>
-      initial={initialForm}
+      {({ change, data, submit }) => {
-      errors={[...apiErrors, ...validationErrors]}
-      onSubmit={handleSubmit}
-    >
-      {({ change, data, errors, submit }) => {
         const countryChoices = mapCountriesToChoices(countries);
         const handleCountryChange = createSingleAutocompleteSelectHandler(
           change,
@@ -106,7 +102,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
                   data={data}
                   disabled={disabled}
                   displayCountry={displayCountry}
-                  errors={errors}
+                  errors={[...errors, ...validationErrors]}
                   header={intl.formatMessage({
                     defaultMessage: "Address Information",
                     description: "warehouse"
@@ -117,9 +113,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
               </div>
               <div>
                 <WarehouseZones
-                  zones={maybe(() =>
+                  zones={warehouse?.shippingZones?.edges.map(edge => edge.node)}
-                    warehouse.shippingZones.edges.map(edge => edge.node)
-                  )}
                   onShippingZoneClick={onShippingZoneClick}
                 />
               </div>

src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx

@@ -7,12 +7,13 @@ import { useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import { commonMessages } from "@saleor/intl";
 import { FormChange } from "@saleor/hooks/useForm";
-import { FormErrors } from "@saleor/types";
+import { UserError } from "@saleor/types";
+import { getFieldError } from "@saleor/utils/errors";
 
 export interface WarehouseInfoProps {
   data: Record<"name", string>;
   disabled: boolean;
-  errors: FormErrors<"name">;
+  errors: UserError[];
   onChange: FormChange;
 }
 
@@ -32,9 +33,9 @@ const WarehouseInfo: React.FC<WarehouseInfoProps> = ({
       <CardContent>
         <TextField
           disabled={disabled}
-          error={!!errors.name}
+          error={!!getFieldError(errors, "name")}
           fullWidth
-          helperText={errors.name}
+          helperText={getFieldError(errors, "name")?.message}
           label={intl.formatMessage({
             defaultMessage: "Warehouse Name"
           })}

src/warehouses/views/WarehouseDetails/WarehouseDetails.tsx

@@ -11,7 +11,11 @@ import {
 import { useWarehouseDetails } from "@saleor/warehouses/queries";
 import { commonMessages } from "@saleor/intl";
 import useNotifier from "@saleor/hooks/useNotifier";
-import { maybe, findValueInEnum, getMutationStatus } from "@saleor/misc";
+import {
+  findValueInEnum,
+  getMutationStatus,
+  getStringOrPlaceholder
+} from "@saleor/misc";
 import { CountryCode } from "@saleor/types/globalTypes";
 import useShop from "@saleor/hooks/useShop";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -22,6 +26,7 @@ import {
 import { shippingZoneUrl } from "@saleor/shipping/urls";
 import WarehouseDeleteDialog from "@saleor/warehouses/components/WarehouseDeleteDialog";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import NotFoundPage from "@saleor/components/NotFoundPage";
 
 export interface WarehouseDetailsProps {
   id: string;
@@ -35,7 +40,6 @@ const WarehouseDetails: React.FC<WarehouseDetailsProps> = ({ id, params }) => {
   const shop = useShop();
   const { data, loading } = useWarehouseDetails({
     displayLoader: true,
-    require: ["warehouse"],
     variables: { id }
   });
   const [updateWarehouse, updateWarehouseOpts] = useWarehouseUpdate({
@@ -65,18 +69,19 @@ const WarehouseDetails: React.FC<WarehouseDetailsProps> = ({ id, params }) => {
     params
   );
 
+  if (data?.warehouse === null) {
+    return <NotFoundPage onBack={() => navigate(warehouseListUrl())} />;
+  }
+
   return (
     <>
-      <WindowTitle title={maybe(() => data.warehouse.name)} />
+      <WindowTitle title={data?.warehouse?.name} />
       <WarehouseDetailsPage
-        countries={maybe(() => shop.countries, [])}
+        countries={shop?.countries || []}
         disabled={loading || updateWarehouseOpts.loading}
-        errors={maybe(
+        errors={updateWarehouseOpts.data?.updateWarehouse.errors || []}
-          () => updateWarehouseOpts.data.updateWarehouse.errors,
-          []
-        )}
         saveButtonBarState={updateWarehouseTransitionState}
-        warehouse={maybe(() => data.warehouse)}
+        warehouse={data?.warehouse}
         onBack={() => navigate(warehouseListUrl())}
         onDelete={() => openModal("delete")}
         onShippingZoneClick={id => navigate(shippingZoneUrl(id))}
@@ -103,7 +108,7 @@ const WarehouseDetails: React.FC<WarehouseDetailsProps> = ({ id, params }) => {
       />
       <WarehouseDeleteDialog
         confirmButtonState={deleteWarehouseTransitionState}
-        name={maybe(() => data.warehouse.name)}
+        name={getStringOrPlaceholder(data?.warehouse?.name)}
         onClose={closeModal}
         onConfirm={() =>
           deleteWarehouse({