diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx index 4e2f3e806..632fe73fc 100644 --- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx +++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx @@ -105,7 +105,7 @@ const ShippingZoneAddWarehouseDialog: React.FC
- {({ change, data, errors: formErrors, submit }) => { + {({ change, data, errors: formErrors }) => { const handleCountrySelect = createSingleAutocompleteSelectHandler( change, setCountryDisplayName, diff --git a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx index 19805372b..1dc6ed09e 100644 --- a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx +++ b/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 = ({ disabled, errors, + hasMore, + loading, onBack, onCountryAdd, onCountryRemove, onDelete, + onFetchMore, onPriceRateAdd, onPriceRateEdit, onRateRemove, + onSearchChange, onSubmit, onWarehouseAdd, onWeightRateAdd, @@ -140,10 +147,8 @@ const ShippingZoneDetailsPage: React.FC = ({ onRateAdd={onPriceRateAdd} onRateEdit={onPriceRateEdit} onRateRemove={onRateRemove} - rates={maybe(() => - shippingZone.shippingMethods.filter( - method => method.type === ShippingMethodTypeEnum.PRICE - ) + rates={shippingZone?.shippingMethods?.filter( + method => method.type === ShippingMethodTypeEnum.PRICE )} variant="price" /> @@ -153,10 +158,8 @@ const ShippingZoneDetailsPage: React.FC = ({ onRateAdd={onWeightRateAdd} onRateEdit={onWeightRateEdit} onRateRemove={onRateRemove} - rates={maybe(() => - shippingZone.shippingMethods.filter( - method => method.type === ShippingMethodTypeEnum.WEIGHT - ) + rates={shippingZone?.shippingMethods?.filter( + method => method.type === ShippingMethodTypeEnum.WEIGHT )} variant="weight" /> @@ -165,12 +168,13 @@ const ShippingZoneDetailsPage: React.FC = ({ undefined} + onFetchMore={onFetchMore} + onSearchChange={onSearchChange} onWarehouseAdd={onWarehouseAdd} + warehouses={warehouseChoices} /> diff --git a/src/shipping/components/ShippingZoneWarehouses/ShippingZoneWarehouses.tsx b/src/shipping/components/ShippingZoneWarehouses/ShippingZoneWarehouses.tsx index f0580afde..79f57a64f 100644 --- a/src/shipping/components/ShippingZoneWarehouses/ShippingZoneWarehouses.tsx +++ b/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 = pr warehouses, onChange, onFetchMore, + onSearchChange, onWarehouseAdd } = props; const intl = useIntl(); @@ -53,8 +54,12 @@ export const ShippingZoneWarehouses: React.FC = 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" })} diff --git a/src/shipping/views/ShippingZoneDetails/index.tsx b/src/shipping/views/ShippingZoneDetails/index.tsx index ea22654e4..90fc9378e 100644 --- a/src/shipping/views/ShippingZoneDetails/index.tsx +++ b/src/shipping/views/ShippingZoneDetails/index.tsx @@ -57,9 +57,11 @@ const ShippingZoneDetails: React.FC = ({ const intl = useIntl(); const shop = useShop(); - const { result: searchWarehousesOpts } = useWarehouseSearch({ - variables: DEFAULT_INITIAL_SEARCH_DATA - }); + const { result: searchWarehousesOpts, loadMore, search } = useWarehouseSearch( + { + variables: DEFAULT_INITIAL_SEARCH_DATA + } + ); const [assignToWarehouse] = useAassignShippingZoneToWarehouse({}); @@ -208,6 +210,10 @@ const ShippingZoneDetails: React.FC = ({ warehouses={ searchWarehousesOpts.data?.search.edges.map(edge => edge.node) || [] } + hasMore={searchWarehousesOpts.data?.search.pageInfo.hasNextPage} + loading={searchWarehousesOpts.loading} + onFetchMore={loadMore} + onSearchChange={search} /> onAdd: () => void; } -export interface SearchPageProps { - initialSearch: string; +export interface SearchProps { onSearchChange: (value: string) => void; } +export interface SearchPageProps extends SearchProps { + initialSearch: string; +} export interface FilterPageProps extends FilterProps, SearchPageProps,