Fix assigning shipping zone to warehouse

This commit is contained in:
dominik-zeglen 2020-03-19 13:44:54 +01:00
parent 220f77c20a
commit 0805ff052d
8 changed files with 103 additions and 80 deletions

View file

@ -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 (

View file

@ -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}

View file

@ -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>

View file

@ -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);

View file

@ -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 {

View file

@ -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) {

View file

@ -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) {

View 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;
}