Add warehouse search

src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx

@@ -105,7 +105,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
         />
       </DialogTitle>
       <Form errors={errors} initial={initialForm} onSubmit={handleSubmit}>
-        {({ change, data, errors: formErrors, submit }) => {
+        {({ change, data, errors: formErrors }) => {
           const handleCountrySelect = createSingleAutocompleteSelectHandler(
             change,
             setCountryDisplayName,

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -15,6 +15,7 @@ import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAu
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { maybe } from "../../../misc";
+import { FetchMoreProps, SearchProps } from "../../../types";
 import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
 import {
   ShippingZoneDetailsFragment,
@@ -29,7 +30,9 @@ export interface FormData {
   warehouses: string[];
 }
 
-export interface ShippingZoneDetailsPageProps {
+export interface ShippingZoneDetailsPageProps
+  extends FetchMoreProps,
+    SearchProps {
   disabled: boolean;
   errors: ShippingErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
@@ -60,13 +63,17 @@ function warehouseToChoice(
 const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
   disabled,
   errors,
+  hasMore,
+  loading,
   onBack,
   onCountryAdd,
   onCountryRemove,
   onDelete,
+  onFetchMore,
   onPriceRateAdd,
   onPriceRateEdit,
   onRateRemove,
+  onSearchChange,
   onSubmit,
   onWarehouseAdd,
   onWeightRateAdd,
@@ -140,10 +147,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                   onRateAdd={onPriceRateAdd}
                   onRateEdit={onPriceRateEdit}
                   onRateRemove={onRateRemove}
-                  rates={maybe(() =>
+                  rates={shippingZone?.shippingMethods?.filter(
-                    shippingZone.shippingMethods.filter(
+                    method => method.type === ShippingMethodTypeEnum.PRICE
-                      method => method.type === ShippingMethodTypeEnum.PRICE
-                    )
                   )}
                   variant="price"
                 />
@@ -153,10 +158,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                   onRateAdd={onWeightRateAdd}
                   onRateEdit={onWeightRateEdit}
                   onRateRemove={onRateRemove}
-                  rates={maybe(() =>
+                  rates={shippingZone?.shippingMethods?.filter(
-                    shippingZone.shippingMethods.filter(
+                    method => method.type === ShippingMethodTypeEnum.WEIGHT
-                      method => method.type === ShippingMethodTypeEnum.WEIGHT
-                    )
                   )}
                   variant="weight"
                 />
@@ -165,12 +168,13 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                 <ShippingZoneWarehouses
                   data={data}
                   displayValue={warehouseDisplayValues}
-                  hasMore={false}
+                  hasMore={hasMore}
-                  loading={false}
+                  loading={loading}
-                  warehouses={warehouseChoices}
                   onChange={handleWarehouseChange}
-                  onFetchMore={() => undefined}
+                  onFetchMore={onFetchMore}
+                  onSearchChange={onSearchChange}
                   onWarehouseAdd={onWarehouseAdd}
+                  warehouses={warehouseChoices}
                 />
               </div>
             </Grid>

src/shipping/components/ShippingZoneWarehouses/ShippingZoneWarehouses.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
-import { FetchMoreProps } from "@saleor/types";
+import { FetchMoreProps, SearchProps } from "@saleor/types";
 import { FormChange } from "@saleor/hooks/useForm";
 import MultiAutocompleteSelectField, {
   MultiAutocompleteChoiceType
@@ -13,7 +13,7 @@ import MultiAutocompleteSelectField, {
 interface ShippingZoneWarehousesFormData {
   warehouses: string[];
 }
-interface ShippingZonewWarehousesProps extends FetchMoreProps {
+interface ShippingZonewWarehousesProps extends FetchMoreProps, SearchProps {
   data: ShippingZoneWarehousesFormData;
   displayValue: MultiAutocompleteChoiceType[];
   warehouses: MultiAutocompleteChoiceType[];
@@ -30,6 +30,7 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
     warehouses,
     onChange,
     onFetchMore,
+    onSearchChange,
     onWarehouseAdd
   } = props;
   const intl = useIntl();
@@ -53,8 +54,12 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
           }}
           choices={warehouses}
           displayValues={displayValue}
-          fetchChoices={() => undefined}
+          fetchChoices={onSearchChange}
           hasMore={hasMore}
+          helperText={intl.formatMessage({
+            defaultMessage:
+              "Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes."
+          })}
           label={intl.formatMessage({
             defaultMessage: "Warehouse"
           })}

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -57,9 +57,11 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
   const intl = useIntl();
   const shop = useShop();
 
-  const { result: searchWarehousesOpts } = useWarehouseSearch({
+  const { result: searchWarehousesOpts, loadMore, search } = useWarehouseSearch(
-    variables: DEFAULT_INITIAL_SEARCH_DATA
+    {
-  });
+      variables: DEFAULT_INITIAL_SEARCH_DATA
+    }
+  );
 
   const [assignToWarehouse] = useAassignShippingZoneToWarehouse({});
 
@@ -208,6 +210,10 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
         warehouses={
           searchWarehousesOpts.data?.search.edges.map(edge => edge.node) || []
         }
+        hasMore={searchWarehousesOpts.data?.search.pageInfo.hasNextPage}
+        loading={searchWarehousesOpts.loading}
+        onFetchMore={loadMore}
+        onSearchChange={search}
       />
       <ShippingZoneRateDialog
         action="edit"

src/types.ts

@@ -88,10 +88,12 @@ export interface PageListProps<TColumns extends string = string>
   onAdd: () => void;
 }
 
-export interface SearchPageProps {
+export interface SearchProps {
-  initialSearch: string;
   onSearchChange: (value: string) => void;
 }
+export interface SearchPageProps extends SearchProps {
+  initialSearch: string;
+}
 export interface FilterPageProps<TKeys extends string, TOpts extends object>
   extends FilterProps<TKeys>,
     SearchPageProps,