Use apollo hooks

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -13,7 +13,7 @@ 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 { maybe, getStringOrPlaceholder } from "../../../misc";
+import { maybe } from "../../../misc";
 import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
 import {
   ShippingZoneDetailsFragment,

src/shipping/mutations.ts

@@ -1,6 +1,6 @@
 import gql from "graphql-tag";
 
-import { TypedMutation } from "../mutations";
+import makeMutation from "@saleor/hooks/makeMutation";
 import { countryFragment } from "../taxes/queries";
 import { shippingMethodFragment, shippingZoneDetailsFragment } from "./queries";
 import {
@@ -39,6 +39,14 @@ import {
   UpdateShippingZone,
   UpdateShippingZoneVariables
 } from "./types/UpdateShippingZone";
+import {
+  AssignShippingZoneToWarehouse,
+  AssignShippingZoneToWarehouseVariables
+} from "./types/AssignShippingZoneToWarehouse";
+import {
+  UnassignShippingZoneToWarehouse,
+  UnassignShippingZoneToWarehouseVariables
+} from "./types/UnassignShippingZoneToWarehouse";
 
 export const shippingErrorFragment = gql`
   fragment ShippingErrorFragment on ShippingError {
@@ -57,7 +65,7 @@ const deleteShippingZone = gql`
     }
   }
 `;
-export const TypedDeleteShippingZone = TypedMutation<
+export const useShippingZoneDelete = makeMutation<
   DeleteShippingZone,
   DeleteShippingZoneVariables
 >(deleteShippingZone);
@@ -72,7 +80,7 @@ const bulkDeleteShippingZone = gql`
     }
   }
 `;
-export const TypedBulkDeleteShippingZone = TypedMutation<
+export const useShippingZoneBulkDelete = makeMutation<
   BulkDeleteShippingZone,
   BulkDeleteShippingZoneVariables
 >(bulkDeleteShippingZone);
@@ -90,7 +98,7 @@ const updateDefaultWeightUnit = gql`
     }
   }
 `;
-export const TypedUpdateDefaultWeightUnit = TypedMutation<
+export const useDefaultWeightUnitUpdate = makeMutation<
   UpdateDefaultWeightUnit,
   UpdateDefaultWeightUnitVariables
 >(updateDefaultWeightUnit);
@@ -114,7 +122,7 @@ const createShippingZone = gql`
     }
   }
 `;
-export const TypedCreateShippingZone = TypedMutation<
+export const useShippingZoneCreate = makeMutation<
   CreateShippingZone,
   CreateShippingZoneVariables
 >(createShippingZone);
@@ -138,7 +146,7 @@ const updateShippingZone = gql`
     }
   }
 `;
-export const TypedUpdateShippingZone = TypedMutation<
+export const useShippingZoneUpdate = makeMutation<
   UpdateShippingZone,
   UpdateShippingZoneVariables
 >(updateShippingZone);
@@ -157,7 +165,7 @@ const updateShippingRate = gql`
     }
   }
 `;
-export const TypedUpdateShippingRate = TypedMutation<
+export const useShippingRateUpdate = makeMutation<
   UpdateShippingRate,
   UpdateShippingRateVariables
 >(updateShippingRate);
@@ -176,7 +184,7 @@ const createShippingRate = gql`
     }
   }
 `;
-export const TypedCreateShippingRate = TypedMutation<
+export const useShippingRateCreate = makeMutation<
   CreateShippingRate,
   CreateShippingRateVariables
 >(createShippingRate);
@@ -195,7 +203,7 @@ const deleteShippingRate = gql`
     }
   }
 `;
-export const TypedDeleteShippingRate = TypedMutation<
+export const useShippingRateDelete = makeMutation<
   DeleteShippingRate,
   DeleteShippingRateVariables
 >(deleteShippingRate);
@@ -210,7 +218,49 @@ const bulkDeleteShippingRate = gql`
     }
   }
 `;
-export const TypedBulkDeleteShippingRate = TypedMutation<
+export const useShippingRateBulkDelete = makeMutation<
   BulkDeleteShippingRate,
   BulkDeleteShippingRateVariables
 >(bulkDeleteShippingRate);
+
+const assignShippingZoneToWarehouse = gql`
+  mutation AssignShippingZoneToWarehouse(
+    $warehouseId: ID!
+    $shippingZoneId: ID!
+  ) {
+    assignWarehouseShippingZone(
+      id: $warehouseId
+      shippingZoneIds: [$shippingZoneId]
+    ) {
+      warehouseErrors {
+        code
+        field
+      }
+    }
+  }
+`;
+export const useAassignShippingZoneToWarehouse = 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);

src/shipping/queries.ts

@@ -1,5 +1,6 @@
 import gql from "graphql-tag";
 
+import makeQuery from "@saleor/hooks/makeQuery";
 import { pageInfoFragment, TypedQuery } from "../queries";
 import { ShippingZone, ShippingZoneVariables } from "./types/ShippingZone";
 import { ShippingZones, ShippingZonesVariables } from "./types/ShippingZones";
@@ -91,7 +92,6 @@ const shippingZone = gql`
     }
   }
 `;
-export const TypedShippingZone = TypedQuery<
-  ShippingZone,
-  ShippingZoneVariables
->(shippingZone);
+export const useShippingZone = makeQuery<ShippingZone, ShippingZoneVariables>(
+  shippingZone
+);

src/shipping/types/AssignShippingZoneToWarehouse.ts

@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { WarehouseErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: AssignShippingZoneToWarehouse
+// ====================================================
+
+export interface AssignShippingZoneToWarehouse_assignWarehouseShippingZone_warehouseErrors {
+  __typename: "WarehouseError";
+  code: WarehouseErrorCode | null;
+  field: string | null;
+}
+
+export interface AssignShippingZoneToWarehouse_assignWarehouseShippingZone {
+  __typename: "WarehouseShippingZoneAssign";
+  warehouseErrors: AssignShippingZoneToWarehouse_assignWarehouseShippingZone_warehouseErrors[] | null;
+}
+
+export interface AssignShippingZoneToWarehouse {
+  assignWarehouseShippingZone: AssignShippingZoneToWarehouse_assignWarehouseShippingZone | null;
+}
+
+export interface AssignShippingZoneToWarehouseVariables {
+  warehouseId: string;
+  shippingZoneId: string;
+}

src/shipping/types/UnassignShippingZoneToWarehouse.ts

@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { WarehouseErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: UnassignShippingZoneToWarehouse
+// ====================================================
+
+export interface UnassignShippingZoneToWarehouse_unassignWarehouseShippingZone_warehouseErrors {
+  __typename: "WarehouseError";
+  code: WarehouseErrorCode | null;
+  field: string | null;
+}
+
+export interface UnassignShippingZoneToWarehouse_unassignWarehouseShippingZone {
+  __typename: "WarehouseShippingZoneUnassign";
+  warehouseErrors: UnassignShippingZoneToWarehouse_unassignWarehouseShippingZone_warehouseErrors[] | null;
+}
+
+export interface UnassignShippingZoneToWarehouse {
+  unassignWarehouseShippingZone: UnassignShippingZoneToWarehouse_unassignWarehouseShippingZone | null;
+}
+
+export interface UnassignShippingZoneToWarehouseVariables {
+  warehouseId: string;
+  shippingZoneId: string;
+}

src/shipping/views/ShippingZoneDetails/ShippingZoneDetailsDialogs.tsx

@@ -1,244 +0,0 @@
-import DialogContentText from "@material-ui/core/DialogContentText";
-import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-
-import ActionDialog from "@saleor/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
-import useNavigator from "@saleor/hooks/useNavigator";
-import useShop from "@saleor/hooks/useShop";
-import { getStringOrPlaceholder } from "../../../misc";
-import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
-import ShippingZoneCountriesAssignDialog from "../../components/ShippingZoneCountriesAssignDialog";
-import ShippingZoneRateDialog from "../../components/ShippingZoneRateDialog";
-import { ShippingZoneDetailsFragment } from "../../types/ShippingZoneDetailsFragment";
-import { shippingZoneUrl, ShippingZoneUrlQueryParams } from "../../urls";
-import { ShippingZoneOperationsOutput } from "./ShippingZoneOperations";
-
-export interface ShippingZoneDetailsDialogsProps {
-  assignCountryTransitionState: ConfirmButtonTransitionState;
-  createRateTransitionState: ConfirmButtonTransitionState;
-  deleteRateTransitionState: ConfirmButtonTransitionState;
-  deleteZoneTransitionState: ConfirmButtonTransitionState;
-  id: string;
-  ops: ShippingZoneOperationsOutput;
-  params: ShippingZoneUrlQueryParams;
-  shippingZone: ShippingZoneDetailsFragment;
-  unassignCountryTransitionState: ConfirmButtonTransitionState;
-  updateRateTransitionState: ConfirmButtonTransitionState;
-}
-
-const ShippingZoneDetailsDialogs: React.FC<ShippingZoneDetailsDialogsProps> = ({
-  assignCountryTransitionState,
-  createRateTransitionState,
-  deleteRateTransitionState,
-  deleteZoneTransitionState,
-  id,
-  ops,
-  params,
-  shippingZone,
-  unassignCountryTransitionState,
-  updateRateTransitionState
-}) => {
-  const navigate = useNavigator();
-  const shop = useShop();
-  const intl = useIntl();
-
-  const closeModal = () => navigate(shippingZoneUrl(id), true);
-
-  const rate = shippingZone?.shippingMethods?.find(
-    rate => rate.id === params.id
-  );
-
-  return (
-    <>
-      <ShippingZoneRateDialog
-        action="edit"
-        confirmButtonState={updateRateTransitionState}
-        defaultCurrency={shop?.defaultCurrency}
-        disabled={ops.shippingRateUpdate.opts.loading}
-        errors={
-          ops.shippingRateUpdate.opts.data?.shippingPriceUpdate.errors || []
-        }
-        onClose={closeModal}
-        onSubmit={formData =>
-          ops.shippingRateUpdate.mutate({
-            id: params.id,
-            input: {
-              maximumOrderPrice: formData.noLimits
-                ? null
-                : parseFloat(formData.maxValue),
-              minimumOrderPrice: formData.noLimits
-                ? null
-                : parseFloat(formData.minValue),
-              name: formData.name,
-              price: formData.isFree ? 0 : parseFloat(formData.price),
-              shippingZone: id,
-              type: rate?.type
-            }
-          })
-        }
-        open={params.action === "edit-rate"}
-        rate={rate}
-        variant={rate?.type}
-      />
-      <ActionDialog
-        confirmButtonState={deleteRateTransitionState}
-        onClose={closeModal}
-        onConfirm={() =>
-          ops.shippingRateDelete.mutate({
-            id: params.id
-          })
-        }
-        open={params.action === "remove-rate"}
-        title={intl.formatMessage({
-          defaultMessage: "Delete Shipping Method",
-          description: "dialog header"
-        })}
-        variant="delete"
-      >
-        <DialogContentText>
-          <FormattedMessage
-            defaultMessage="Are you sure you want to delete {name}?"
-            description="delete shipping method"
-            id="shippingZoneDetailsDialogsDeleteShippingMethod"
-            values={{
-              name: getStringOrPlaceholder(rate?.name)
-            }}
-          />
-        </DialogContentText>
-      </ActionDialog>
-      <ShippingZoneRateDialog
-        action="create"
-        confirmButtonState={createRateTransitionState}
-        defaultCurrency={shop?.defaultCurrency}
-        disabled={ops.shippingRateCreate.opts.loading}
-        errors={
-          ops.shippingRateCreate.opts.data?.shippingPriceCreate.errors || []
-        }
-        onClose={closeModal}
-        onSubmit={formData =>
-          ops.shippingRateCreate.mutate({
-            input: {
-              maximumOrderPrice:
-                params.type === ShippingMethodTypeEnum.PRICE
-                  ? formData.noLimits
-                    ? null
-                    : parseFloat(formData.maxValue)
-                  : null,
-              maximumOrderWeight:
-                params.type === ShippingMethodTypeEnum.WEIGHT
-                  ? formData.noLimits
-                    ? null
-                    : parseFloat(formData.maxValue)
-                  : null,
-
-              minimumOrderPrice:
-                params.type === ShippingMethodTypeEnum.PRICE
-                  ? formData.noLimits
-                    ? null
-                    : parseFloat(formData.minValue)
-                  : null,
-              minimumOrderWeight:
-                params.type === ShippingMethodTypeEnum.WEIGHT
-                  ? formData.noLimits
-                    ? null
-                    : parseFloat(formData.minValue)
-                  : null,
-              name: formData.name,
-              price: formData.isFree ? 0 : parseFloat(formData.price),
-              shippingZone: id,
-              type: params.type
-            }
-          })
-        }
-        open={params.action === "add-rate"}
-        rate={undefined}
-        variant={params.type}
-      />
-      <ActionDialog
-        confirmButtonState={deleteZoneTransitionState}
-        onClose={closeModal}
-        onConfirm={() =>
-          ops.shippingZoneDelete.mutate({
-            id
-          })
-        }
-        open={params.action === "remove"}
-        title={intl.formatMessage({
-          defaultMessage: "Delete Shipping Zone",
-          description: "dialog header"
-        })}
-        variant="delete"
-      >
-        <DialogContentText>
-          <FormattedMessage
-            defaultMessage="Are you sure you want to delete {name}?"
-            description="delete shipping zone"
-            id="shippingZoneDetailsDialogsDeleteShippingZone"
-            values={{
-              name: (
-                <strong>{getStringOrPlaceholder(shippingZone?.name)}</strong>
-              )
-            }}
-          />
-        </DialogContentText>
-      </ActionDialog>
-      <ShippingZoneCountriesAssignDialog
-        confirmButtonState={assignCountryTransitionState}
-        countries={shop?.countries}
-        initial={shippingZone?.countries.map(country => country.code) || []}
-        isDefault={!!shippingZone?.default}
-        onClose={closeModal}
-        onConfirm={formData =>
-          ops.shippingZoneUpdate.mutate({
-            id,
-            input: {
-              countries: formData.countries,
-              default: formData.restOfTheWorld
-            }
-          })
-        }
-        open={params.action === "assign-country"}
-      />
-      <ActionDialog
-        confirmButtonState={unassignCountryTransitionState}
-        onClose={closeModal}
-        onConfirm={() =>
-          ops.shippingZoneUpdate.mutate({
-            id,
-            input: {
-              countries: shippingZone.countries
-                .filter(country => country.code !== params.id)
-                .map(country => country.code)
-            }
-          })
-        }
-        open={params.action === "unassign-country"}
-        title={intl.formatMessage({
-          defaultMessage: "Delete from Shipping Zone",
-          description: "unassign country, dialog header"
-        })}
-        variant="delete"
-      >
-        <DialogContentText>
-          <FormattedMessage
-            defaultMessage="Are you sure you want to delete {countryName} from this shipping zone?"
-            description="unassign country"
-            values={{
-              countryName: (
-                <strong>
-                  {getStringOrPlaceholder(
-                    shippingZone?.countries.find(
-                      country => country.code === params.id
-                    )?.country
-                  )}
-                </strong>
-              )
-            }}
-          />
-        </DialogContentText>
-      </ActionDialog>
-    </>
-  );
-};
-export default ShippingZoneDetailsDialogs;

src/shipping/views/ShippingZoneDetails/data.ts

@@ -0,0 +1,62 @@
+import { ShippingZoneUrlQueryParams } from "@saleor/shipping/urls";
+import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import { UpdateShippingRateVariables } from "@saleor/shipping/types/UpdateShippingRate";
+import { CreateShippingRateVariables } from "@saleor/shipping/types/CreateShippingRate";
+import { FormData as ShippingZoneRateDialogFormData } from "../../components/ShippingZoneRateDialog";
+
+export function getCreateShippingRateVariables(
+  data: ShippingZoneRateDialogFormData,
+  params: ShippingZoneUrlQueryParams,
+  id: string
+): CreateShippingRateVariables {
+  return {
+    input: {
+      maximumOrderPrice:
+        params.type === ShippingMethodTypeEnum.PRICE
+          ? data.noLimits
+            ? null
+            : parseFloat(data.maxValue)
+          : null,
+      maximumOrderWeight:
+        params.type === ShippingMethodTypeEnum.WEIGHT
+          ? data.noLimits
+            ? null
+            : parseFloat(data.maxValue)
+          : null,
+
+      minimumOrderPrice:
+        params.type === ShippingMethodTypeEnum.PRICE
+          ? data.noLimits
+            ? null
+            : parseFloat(data.minValue)
+          : null,
+      minimumOrderWeight:
+        params.type === ShippingMethodTypeEnum.WEIGHT
+          ? data.noLimits
+            ? null
+            : parseFloat(data.minValue)
+          : null,
+      name: data.name,
+      price: data.isFree ? 0 : parseFloat(data.price),
+      shippingZone: id,
+      type: params.type
+    }
+  };
+}
+
+export function getUpdateShippingRateVariables(
+  data: ShippingZoneRateDialogFormData,
+  params: ShippingZoneUrlQueryParams,
+  id: string
+): UpdateShippingRateVariables {
+  return {
+    id: params.id,
+    input: {
+      maximumOrderPrice: data.noLimits ? null : parseFloat(data.maxValue),
+      minimumOrderPrice: data.noLimits ? null : parseFloat(data.minValue),
+      name: data.name,
+      price: data.isFree ? 0 : parseFloat(data.price),
+      shippingZone: id
+    }
+  };
+}

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -1,28 +1,41 @@
+import DialogContentText from "@material-ui/core/DialogContentText";
 import React from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
+import ActionDialog from "@saleor/components/ActionDialog";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
 import useWarehouseSearch from "@saleor/searches/useWarehouseSearch";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
-import { useWarehouseUpdate } from "@saleor/warehouses/mutations";
-import { maybe } from "../../../misc";
+import {
+  useShippingRateCreate,
+  useShippingRateUpdate,
+  useShippingRateDelete,
+  useShippingZoneDelete,
+  useShippingZoneUpdate
+} from "@saleor/shipping/mutations";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import ShippingZoneRateDialog from "@saleor/shipping/components/ShippingZoneRateDialog";
+import useShop from "@saleor/hooks/useShop";
+import ShippingZoneCountriesAssignDialog from "@saleor/shipping/components/ShippingZoneCountriesAssignDialog";
+import NotFoundPage from "@saleor/components/NotFoundPage";
+import { getStringOrPlaceholder } from "../../../misc";
 import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
-import ShippingZoneDetailsPage from "../../components/ShippingZoneDetailsPage";
-import { TypedShippingZone } from "../../queries";
-import { CreateShippingRate } from "../../types/CreateShippingRate";
-import { DeleteShippingRate } from "../../types/DeleteShippingRate";
-import { DeleteShippingZone } from "../../types/DeleteShippingZone";
-import { UpdateShippingRate } from "../../types/UpdateShippingRate";
-import { UpdateShippingZone } from "../../types/UpdateShippingZone";
+import ShippingZoneDetailsPage, {
+  FormData
+} from "../../components/ShippingZoneDetailsPage";
+import { useShippingZone } from "../../queries";
 import {
   shippingZonesListUrl,
   shippingZoneUrl,
-  ShippingZoneUrlQueryParams
+  ShippingZoneUrlQueryParams,
+  ShippingZoneUrlDialog
 } from "../../urls";
-import ShippingZoneDetailsDialogs from "./ShippingZoneDetailsDialogs";
-import ShippingZoneOperations from "./ShippingZoneOperations";
+import {
+  getCreateShippingRateVariables,
+  getUpdateShippingRateVariables
+} from "./data";
 
 export interface ShippingZoneDetailsProps {
   id: string;
@@ -36,187 +49,294 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
-  const [updateWarehouse, updateWarehouseOpts] = useWarehouseUpdate({});
+  const shop = useShop();
 
-  const {
-    search: searchWarehouses,
-    result: searchWarehousesOpts
-  } = useWarehouseSearch({
+  const { result: searchWarehousesOpts } = useWarehouseSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
 
-  const closeModal = () => navigate(shippingZoneUrl(id), true);
+  const { data, loading } = useShippingZone({
+    displayLoader: true,
+    variables: { id }
+  });
 
-  const onShippingRateCreate = (data: CreateShippingRate) => {
-    if (data.shippingPriceCreate.errors.length === 0) {
-      notify({
-        text: intl.formatMessage(commonMessages.savedChanges)
-      });
-      closeModal();
+  const [openModal, closeModal] = createDialogActionHandlers<
+    ShippingZoneUrlDialog,
+    ShippingZoneUrlQueryParams
+  >(navigate, params => shippingZoneUrl(id, params), params);
+  const rate = data?.shippingZone?.shippingMethods.find(
+    rate => rate.id === params.id
+  );
+
+  const [createShippingRate, createShippingRateOpts] = useShippingRateCreate({
+    onCompleted: data => {
+      if (data.shippingPriceCreate.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        closeModal();
+      }
     }
+  });
+
+  const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate({
+    onCompleted: data => {
+      if (data.shippingPriceUpdate.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        closeModal();
+      }
+    }
+  });
+
+  const [deleteShippingRate, deleteShippingRateOpts] = useShippingRateDelete({
+    onCompleted: data => {
+      if (data.shippingPriceDelete.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        closeModal();
+      }
+    }
+  });
+
+  const [deleteShippingZone, deleteShippingZoneOpts] = useShippingZoneDelete({
+    onCompleted: data => {
+      if (data.shippingZoneDelete.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        navigate(shippingZonesListUrl(), true);
+      }
+    }
+  });
+
+  const [updateShippingZone, updateShippingZoneOpts] = useShippingZoneUpdate({
+    onCompleted: data => {
+      if (data.shippingZoneUpdate.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        closeModal();
+      }
+    }
+  });
+
+  const handleSubmit = (data: FormData) => {
+    updateShippingZone({
+      variables: {
+        id,
+        input: {
+          name: data.name
+        }
+      }
+    });
   };
 
-  const onShippingRateUpdate = (data: UpdateShippingRate) => {
-    if (data.shippingPriceUpdate.errors.length === 0) {
-      notify({
-        text: intl.formatMessage(commonMessages.savedChanges)
-      });
-      closeModal();
-    }
-  };
-
-  const onShippingRateDelete = (data: DeleteShippingRate) => {
-    if (data.shippingPriceDelete.errors.length === 0) {
-      notify({
-        text: intl.formatMessage(commonMessages.savedChanges)
-      });
-      closeModal();
-    }
-  };
-
-  const onShippingZoneDelete = (data: DeleteShippingZone) => {
-    if (data.shippingZoneDelete.errors.length === 0) {
-      notify({
-        text: intl.formatMessage(commonMessages.savedChanges)
-      });
-      navigate(shippingZonesListUrl(), true);
-    }
-  };
-
-  const onShippingZoneUpdate = (data: UpdateShippingZone) => {
-    if (data.shippingZoneUpdate.errors.length === 0) {
-      notify({
-        text: intl.formatMessage(commonMessages.savedChanges)
-      });
-      closeModal();
-    }
-  };
+  if (data?.shippingZone === null) {
+    return <NotFoundPage onBack={() => navigate(shippingZonesListUrl())} />;
+  }
 
   return (
-    <ShippingZoneOperations
-      onShippingRateCreate={onShippingRateCreate}
-      onShippingRateDelete={onShippingRateDelete}
-      onShippingRateUpdate={onShippingRateUpdate}
-      onShippingZoneDelete={onShippingZoneDelete}
-      onShippingZoneUpdate={onShippingZoneUpdate}
-    >
-      {ops => (
-        <TypedShippingZone variables={{ id }}>
-          {({ data, loading }) => (
-            <>
-              <ShippingZoneDetailsPage
-                disabled={loading}
-                errors={
-                  ops.shippingZoneUpdate.opts.data?.shippingZoneUpdate.errors ||
-                  []
-                }
-                onBack={() => navigate(shippingZonesListUrl())}
-                onCountryAdd={() =>
-                  navigate(
-                    shippingZoneUrl(id, {
-                      action: "assign-country"
-                    })
-                  )
-                }
-                onCountryRemove={code =>
-                  navigate(
-                    shippingZoneUrl(id, {
-                      action: "unassign-country",
-                      id: code
-                    })
-                  )
-                }
-                onDelete={() =>
-                  navigate(
-                    shippingZoneUrl(id, {
-                      action: "remove"
-                    })
-                  )
-                }
-                onPriceRateAdd={() =>
-                  navigate(
-                    shippingZoneUrl(id, {
-                      action: "add-rate",
-                      type: ShippingMethodTypeEnum.PRICE
-                    })
-                  )
-                }
-                onPriceRateEdit={rateId =>
-                  navigate(
-                    shippingZoneUrl(id, {
-                      action: "edit-rate",
-                      id: rateId
-                    })
-                  )
-                }
-                onRateRemove={rateId =>
-                  navigate(
-                    shippingZoneUrl(id, {
-                      action: "remove-rate",
-                      id: rateId
-                    })
-                  )
-                }
-                onSubmit={formData => {
-                  ops.shippingZoneUpdate.mutate({
-                    id,
-                    input: {
-                      name: formData.name
-                    }
-                  });
-                  updateWarehouse({
-                    variables: {
-                      id: formData.warehouse
-                    }
-                  });
-                }}
-                onWeightRateAdd={() =>
-                  navigate(
-                    shippingZoneUrl(id, {
-                      action: "add-rate",
-                      type: ShippingMethodTypeEnum.WEIGHT
-                    })
-                  )
-                }
-                onWeightRateEdit={rateId =>
-                  navigate(
-                    shippingZoneUrl(id, {
-                      action: "edit-rate",
-                      id: rateId
-                    })
-                  )
-                }
-                saveButtonBarState={ops.shippingZoneUpdate.opts.status}
-                shippingZone={maybe(() => data.shippingZone)}
-                warehouses={maybe(
-                  () =>
-                    searchWarehousesOpts.data.search.edges.map(
-                      edge => edge.node
-                    ),
-                  []
-                )}
-              />
-              <ShippingZoneDetailsDialogs
-                assignCountryTransitionState={
-                  ops.shippingZoneUpdate.opts.status
-                }
-                createRateTransitionState={ops.shippingRateCreate.opts.status}
-                deleteRateTransitionState={ops.shippingRateDelete.opts.status}
-                deleteZoneTransitionState={ops.shippingZoneDelete.opts.status}
-                id={id}
-                ops={ops}
-                params={params}
-                shippingZone={data?.shippingZone}
-                unassignCountryTransitionState={
-                  ops.shippingZoneUpdate.opts.status
-                }
-                updateRateTransitionState={ops.shippingRateUpdate.opts.status}
-              />
-            </>
-          )}
-        </TypedShippingZone>
-      )}
-    </ShippingZoneOperations>
+    <>
+      <ShippingZoneDetailsPage
+        disabled={loading}
+        errors={updateShippingZoneOpts.data?.shippingZoneUpdate.errors || []}
+        onBack={() => navigate(shippingZonesListUrl())}
+        onCountryAdd={() => openModal("assign-country")}
+        onCountryRemove={code =>
+          openModal("unassign-country", {
+            id: code
+          })
+        }
+        onDelete={() => openModal("remove")}
+        onPriceRateAdd={() =>
+          openModal("add-rate", {
+            type: ShippingMethodTypeEnum.PRICE
+          })
+        }
+        onPriceRateEdit={rateId =>
+          openModal("edit-rate", {
+            id: rateId
+          })
+        }
+        onRateRemove={rateId =>
+          openModal("remove-rate", {
+            id: rateId
+          })
+        }
+        onSubmit={handleSubmit}
+        onWeightRateAdd={() =>
+          openModal("add-rate", {
+            type: ShippingMethodTypeEnum.WEIGHT
+          })
+        }
+        onWeightRateEdit={rateId =>
+          openModal("edit-rate", {
+            id: rateId
+          })
+        }
+        saveButtonBarState={updateShippingZoneOpts.status}
+        shippingZone={data?.shippingZone}
+        warehouses={
+          searchWarehousesOpts.data?.search.edges.map(edge => edge.node) || []
+        }
+      />
+      <ShippingZoneRateDialog
+        action="edit"
+        confirmButtonState={updateShippingRateOpts.status}
+        defaultCurrency={shop?.defaultCurrency}
+        disabled={updateShippingRateOpts.loading}
+        errors={updateShippingRateOpts.data?.shippingPriceUpdate.errors || []}
+        onClose={closeModal}
+        onSubmit={data =>
+          updateShippingRate({
+            variables: getUpdateShippingRateVariables(data, params, id)
+          })
+        }
+        open={params.action === "edit-rate"}
+        rate={rate}
+        variant={rate?.type}
+      />
+      <ActionDialog
+        confirmButtonState={deleteShippingRateOpts.status}
+        onClose={closeModal}
+        onConfirm={() =>
+          deleteShippingRate({
+            variables: {
+              id: params.id
+            }
+          })
+        }
+        open={params.action === "remove-rate"}
+        title={intl.formatMessage({
+          defaultMessage: "Delete Shipping Method",
+          description: "dialog header"
+        })}
+        variant="delete"
+      >
+        <DialogContentText>
+          <FormattedMessage
+            defaultMessage="Are you sure you want to delete {name}?"
+            description="delete shipping method"
+            id="shippingZoneDetailsDialogsDeleteShippingMethod"
+            values={{
+              name: getStringOrPlaceholder(rate?.name)
+            }}
+          />
+        </DialogContentText>
+      </ActionDialog>
+      <ShippingZoneRateDialog
+        action="create"
+        confirmButtonState={createShippingRateOpts.status}
+        defaultCurrency={shop?.defaultCurrency}
+        disabled={createShippingRateOpts.loading}
+        errors={createShippingRateOpts.data?.shippingPriceCreate.errors || []}
+        onClose={closeModal}
+        onSubmit={data =>
+          createShippingRate({
+            variables: getCreateShippingRateVariables(data, params, id)
+          })
+        }
+        open={params.action === "add-rate"}
+        rate={undefined}
+        variant={params.type}
+      />
+      <ActionDialog
+        confirmButtonState={deleteShippingZoneOpts.status}
+        onClose={closeModal}
+        onConfirm={() =>
+          deleteShippingZone({
+            variables: {
+              id
+            }
+          })
+        }
+        open={params.action === "remove"}
+        title={intl.formatMessage({
+          defaultMessage: "Delete Shipping Zone",
+          description: "dialog header"
+        })}
+        variant="delete"
+      >
+        <DialogContentText>
+          <FormattedMessage
+            defaultMessage="Are you sure you want to delete {name}?"
+            description="delete shipping zone"
+            id="shippingZoneDetailsDialogsDeleteShippingZone"
+            values={{
+              name: (
+                <strong>
+                  {getStringOrPlaceholder(data?.shippingZone.name)}
+                </strong>
+              )
+            }}
+          />
+        </DialogContentText>
+      </ActionDialog>
+      <ShippingZoneCountriesAssignDialog
+        confirmButtonState={updateShippingZoneOpts.status}
+        countries={shop?.countries || []}
+        initial={
+          data?.shippingZone?.countries.map(country => country.code) || []
+        }
+        isDefault={data?.shippingZone?.default}
+        onClose={closeModal}
+        onConfirm={formData =>
+          updateShippingZone({
+            variables: {
+              id,
+              input: {
+                countries: formData.countries,
+                default: formData.restOfTheWorld
+              }
+            }
+          })
+        }
+        open={params.action === "assign-country"}
+      />
+      <ActionDialog
+        confirmButtonState={updateShippingZoneOpts.status}
+        onClose={closeModal}
+        onConfirm={() =>
+          updateShippingZone({
+            variables: {
+              id,
+              input: {
+                countries: data.shippingZone.countries
+                  .filter(country => country.code !== params.id)
+                  .map(country => country.code)
+              }
+            }
+          })
+        }
+        open={params.action === "unassign-country"}
+        title={intl.formatMessage({
+          defaultMessage: "Delete from Shipping Zone",
+          description: "unassign country, dialog header"
+        })}
+        variant="delete"
+      >
+        <DialogContentText>
+          <FormattedMessage
+            defaultMessage="Are you sure you want to delete {countryName} from this shipping zone?"
+            description="unassign country"
+            values={{
+              countryName: (
+                <strong>
+                  {getStringOrPlaceholder(
+                    data?.shippingZone?.countries.find(
+                      country => country.code === params.id
+                    )?.country
+                  )}
+                </strong>
+              )
+            }}
+          />
+        </DialogContentText>
+      </ActionDialog>
+    </>
   );
 };
 export default ShippingZoneDetails;

src/types/globalTypes.ts

@@ -746,6 +746,15 @@ export enum VoucherTypeEnum {
   SPECIFIC_PRODUCT = "SPECIFIC_PRODUCT",
 }
 
+export enum WarehouseErrorCode {
+  ALREADY_EXISTS = "ALREADY_EXISTS",
+  GRAPHQL_ERROR = "GRAPHQL_ERROR",
+  INVALID = "INVALID",
+  NOT_FOUND = "NOT_FOUND",
+  REQUIRED = "REQUIRED",
+  UNIQUE = "UNIQUE",
+}
+
 export enum WarehouseSortField {
   NAME = "NAME",
 }
@@ -1431,11 +1440,12 @@ export interface WarehouseAddressInput {
 }
 
 export interface WarehouseCreateInput {
-  name: string;
+  slug?: string | null;
   companyName?: string | null;
-  shippingZones?: (string | null)[] | null;
   email?: string | null;
+  name: string;
   address: WarehouseAddressInput;
+  shippingZones?: (string | null)[] | null;
 }
 
 export interface WarehouseFilterInput {
@@ -1448,10 +1458,10 @@ export interface WarehouseSortingInput {
 }
 
 export interface WarehouseUpdateInput {
-  name: string;
+  slug?: string | null;
   companyName?: string | null;
-  shippingZones?: (string | null)[] | null;
   email?: string | null;
+  name?: string | null;
   address?: WarehouseAddressInput | null;
 }