Fix assigning shipping zone to warehouse
This commit is contained in:
parent
220f77c20a
commit
0805ff052d
8 changed files with 103 additions and 80 deletions
|
@ -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 (
|
||||
|
|
|
@ -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 { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
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(
|
||||
shippingZone?.warehouses.map(warehouseToChoice) || []
|
||||
const [warehouseDisplayValue, setWarehouseDisplayValue] = useStateFromProps(
|
||||
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,
|
||||
warehouseDisplayValues,
|
||||
setWarehouseDisplayValue,
|
||||
warehouseChoices
|
||||
);
|
||||
|
||||
|
@ -122,9 +121,10 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
|
|||
<CountryList
|
||||
countries={shippingZone?.countries}
|
||||
disabled={disabled}
|
||||
emptyText={maybe(
|
||||
() =>
|
||||
shippingZone.default
|
||||
emptyText={getStringOrPlaceholder(
|
||||
shippingZone?.default === undefined
|
||||
? undefined
|
||||
: shippingZone.default
|
||||
? intl.formatMessage({
|
||||
defaultMessage:
|
||||
"This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
|
||||
|
@ -132,8 +132,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
|
|||
: intl.formatMessage({
|
||||
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}
|
||||
|
|
|
@ -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, {
|
||||
MultiAutocompleteChoiceType
|
||||
} from "@saleor/components/MultiAutocompleteSelectField";
|
||||
import SingleAutocompleteSelectField, {
|
||||
SingleAutocompleteChoiceType
|
||||
} from "@saleor/components/SingleAutocompleteSelectField";
|
||||
|
||||
interface ShippingZoneWarehousesFormData {
|
||||
warehouses: string[];
|
||||
warehouse: string;
|
||||
}
|
||||
interface ShippingZonewWarehousesProps extends FetchMoreProps, SearchProps {
|
||||
data: ShippingZoneWarehousesFormData;
|
||||
displayValue: MultiAutocompleteChoiceType[];
|
||||
warehouses: MultiAutocompleteChoiceType[];
|
||||
displayValue: string;
|
||||
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>
|
||||
|
|
|
@ -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 {
|
||||
code
|
||||
field
|
||||
errors: warehouseErrors {
|
||||
...WarehouseErrorFragment
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -144,8 +144,9 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
|
|||
}
|
||||
});
|
||||
|
||||
const handleSubmit = (data: FormData) => {
|
||||
updateShippingZone({
|
||||
const handleSubmit = async (data: FormData) => {
|
||||
try {
|
||||
const updateResult = await updateShippingZone({
|
||||
variables: {
|
||||
id,
|
||||
input: {
|
||||
|
@ -153,12 +154,35 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
|
|||
}
|
||||
}
|
||||
});
|
||||
assignToWarehouse({
|
||||
const updateErrors = updateResult.data.shippingZoneUpdate.errors;
|
||||
|
||||
if (updateErrors.length === 0) {
|
||||
const assignResult = await assignToWarehouse({
|
||||
variables: {
|
||||
shippingZoneId: id,
|
||||
warehouseId: data.warehouses[0]
|
||||
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) {
|
||||
notify({
|
||||
text: intl.formatMessage(commonMessages.somethingWentWrong)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (data?.shippingZone === null) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
15
src/warehouses/types/WarehouseErrorFragment.ts
Normal file
15
src/warehouses/types/WarehouseErrorFragment.ts
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue