Merge shipping rates views (#1851)

* Merge price and weight based rate pages

* Increate text field width

* Update messages

locale/defaultMessages.json

@@ -7433,17 +7433,14 @@
     "context": "dialog header",
     "string": "Delete Shipping Zones"
   },
+  "src_dot_shipping_dot_views_dot_3823295269": {
+    "string": "Manage Channel Availability"
+  },
   "src_dot_shipping_dot_views_dot_725201918": {
     "context": "dialog content",
     "string": "{counter,plural,one{Are you sure you want to delete this shipping zone?} other{Are you sure you want to delete {displayQuantity} shipping zones?}}"
   },
-  "src_dot_shipping_dot_views_dot_PriceRatesCreate_dot_3823295269": {
+  "src_dot_shipping_dot_views_dot_870815507": {
-    "string": "Manage Channel Availability"
-  },
-  "src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_3823295269": {
-    "string": "Manage Channel Availability"
-  },
-  "src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_870815507": {
     "context": "unassign products from shipping method, button",
     "string": "Unassign"
   },
@@ -7459,16 +7456,6 @@
     "context": "unassign country, dialog header",
     "string": "Delete from Shipping Zone"
   },
-  "src_dot_shipping_dot_views_dot_WeightRatesCreate_dot_3014453080": {
-    "string": "Manage Channels Availability"
-  },
-  "src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_3014453080": {
-    "string": "Manage Channels Availability"
-  },
-  "src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_870815507": {
-    "context": "unassign products from shipping method, button",
-    "string": "Unassign"
-  },
   "src_dot_shipping_dot_weight": {
     "context": "error message",
     "string": "Maximum weight cannot be lower than minimum"

src/shipping/components/OrderValue/styles.ts

@@ -10,7 +10,7 @@ export const useStyles = makeStyles(
     colType: {
       fontSize: 14,
       textAlign: "right",
-      width: 200
+      width: 250
     },
     content: {
       padding: theme.spacing(3, 0, 3, 0)

src/shipping/components/PricingCard/styles.ts

@@ -14,7 +14,7 @@ export const useStyles = makeStyles(
     colType: {
       fontSize: 14,
       textAlign: "right",
-      width: 200
+      width: 250
     },
     pricingContent: {
       "&:last-child": {

src/shipping/handlers.ts

@@ -23,7 +23,7 @@ import {
   useShippingRateCreate,
   useShippingRateDelete
 } from "./mutations";
-import { shippingPriceRatesEditUrl, shippingWeightRatesEditUrl } from "./urls";
+import { shippingRateEditUrl } from "./urls";
 
 export const createChannelsChangeHandler = (
   selectedChannels: ChannelShippingData[],
@@ -222,10 +222,6 @@ export function useShippingRateCreator(
     type === ShippingMethodTypeEnum.PRICE
       ? getCreateShippingPriceRateVariables
       : getCreateShippingWeightRateVariables;
-  const getUrl =
-    type === ShippingMethodTypeEnum.PRICE
-      ? shippingPriceRatesEditUrl
-      : shippingWeightRatesEditUrl;
 
   const createShippingRate = async (data: ShippingZoneRateCommonFormData) => {
     const response = await createBaseShippingRate({
@@ -268,7 +264,7 @@ export function useShippingRateCreator(
         status: "success",
         text: intl.formatMessage(commonMessages.savedChanges)
       });
-      navigate(getUrl(shippingZoneId, rateId));
+      navigate(shippingRateEditUrl(shippingZoneId, rateId));
       return [];
     }
   };

src/shipping/index.tsx

@@ -6,25 +6,21 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
 import {
-  shippingPriceRatesEditPath,
+  shippingRateCreatePath,
-  shippingPriceRatesPath,
   ShippingRateCreateUrlQueryParams,
+  shippingRateEditPath,
   ShippingRateUrlQueryParams,
-  shippingWeightRatesEditPath,
-  shippingWeightRatesPath,
   shippingZoneAddPath,
   shippingZonePath,
   shippingZonesListPath,
   ShippingZonesListUrlQueryParams,
   ShippingZoneUrlQueryParams
 } from "./urls";
-import PriceRatesCreateComponent from "./views/PriceRatesCreate";
+import RateCreateComponent from "./views/RateCreate";
-import PriceRatesUpdateComponent from "./views/PriceRatesUpdate";
+import RateUpdateComponent from "./views/RateUpdate";
 import ShippingZoneCreate from "./views/ShippingZoneCreate";
 import ShippingZoneDetailsComponent from "./views/ShippingZoneDetails";
 import ShippingZonesListComponent from "./views/ShippingZonesList";
-import WeightRatesCreateComponent from "./views/WeightRatesCreate";
-import WeightRatesUpdateComponent from "./views/WeightRatesUpdate";
 
 const ShippingZonesList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
   const qs = parseQs(location.search.substr(1));
@@ -48,35 +44,21 @@ const ShippingZoneDetails: React.FC<RouteComponentProps<
   );
 };
 
-const PriceRatesCreate: React.FC<RouteComponentProps<{ id: string }>> = ({
+const RateCreate: React.FC<RouteComponentProps<{ id: string }>> = ({
   match
 }) => {
   const qs = parseQs(location.search.substr(1));
   const params: ShippingRateCreateUrlQueryParams = qs;
 
   return (
-    <PriceRatesCreateComponent
+    <RateCreateComponent
       id={decodeURIComponent(match.params.id)}
       params={params}
     />
   );
 };
 
-const WeightRatesCreate: React.FC<RouteComponentProps<{ id: string }>> = ({
+const RateUpdate: React.FC<RouteComponentProps<{
-  match
-}) => {
-  const qs = parseQs(location.search.substr(1));
-  const params: ShippingRateCreateUrlQueryParams = qs;
-
-  return (
-    <WeightRatesCreateComponent
-      id={decodeURIComponent(match.params.id)}
-      params={params}
-    />
-  );
-};
-
-const WeightRatesUpdate: React.FC<RouteComponentProps<{
   id: string;
   rateId: string;
 }>> = ({ match }) => {
@@ -84,23 +66,7 @@ const WeightRatesUpdate: React.FC<RouteComponentProps<{
   const params: ShippingRateUrlQueryParams = qs;
 
   return (
-    <WeightRatesUpdateComponent
+    <RateUpdateComponent
-      id={decodeURIComponent(match.params.id)}
-      rateId={decodeURIComponent(match.params.rateId)}
-      params={params}
-    />
-  );
-};
-
-const PriceRatesUpdate: React.FC<RouteComponentProps<{
-  id: string;
-  rateId: string;
-}>> = ({ match }) => {
-  const qs = parseQs(location.search.substr(1));
-  const params: ShippingRateUrlQueryParams = qs;
-
-  return (
-    <PriceRatesUpdateComponent
       id={decodeURIComponent(match.params.id)}
       rateId={decodeURIComponent(match.params.rateId)}
       params={params}
@@ -130,21 +96,10 @@ export const ShippingRouter: React.FC = () => {
           path={shippingZonePath(":id")}
           component={ShippingZoneDetails}
         />
+        <Route path={shippingRateCreatePath(":id")} component={RateCreate} />
         <Route
-          path={shippingPriceRatesPath(":id")}
+          path={shippingRateEditPath(":id", ":rateId")}
-          component={PriceRatesCreate}
+          component={RateUpdate}
-        />
-        <Route
-          path={shippingWeightRatesPath(":id")}
-          component={WeightRatesCreate}
-        />
-        <Route
-          path={shippingWeightRatesEditPath(":id", ":rateId")}
-          component={WeightRatesUpdate}
-        />
-        <Route
-          path={shippingPriceRatesEditPath(":id", ":rateId")}
-          component={PriceRatesUpdate}
         />
       </Switch>
     </>

src/shipping/urls.ts

@@ -54,48 +54,26 @@ export type ShippingRateCreateUrlDialog = ZipCodeRangeActions | ChannelsAction;
 export type ShippingRateCreateUrlQueryParams = Dialog<
   ShippingRateCreateUrlDialog
 > &
-  SingleAction;
+  SingleAction &
+  Partial<{
+    type: ShippingMethodTypeEnum;
+  }>;
 
-export const shippingPriceRatesPath = (id: string) =>
+export const shippingRateCreatePath = (id: string) =>
-  urlJoin(shippingZonePath(id), "price", "add");
+  urlJoin(shippingZonePath(id), "add");
-export const shippingPriceRatesUrl = (
+export const shippingRateCreateUrl = (
   id: string,
   params?: ShippingRateCreateUrlQueryParams
-) => shippingPriceRatesPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
+) => shippingRateCreatePath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 
-export const shippingWeightRatesPath = (id: string) =>
+export const shippingRateEditPath = (id: string, rateId: string) =>
-  urlJoin(shippingZonePath(id), "weight", "add");
+  urlJoin(shippingZonePath(id), rateId);
-export const shippingWeightRatesUrl = (
+export const shippingRateEditUrl = (
-  id: string,
-  params?: ShippingRateCreateUrlQueryParams
-) =>
-  shippingWeightRatesPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
-
-export const shippingPriceRatesEditPath = (id: string, rateId: string) =>
-  urlJoin(shippingZonePath(id), "price", rateId);
-export const shippingPriceRatesEditUrl = (
   id: string,
   rateId: string,
   params?: ShippingRateUrlQueryParams
 ) =>
-  shippingPriceRatesEditPath(
+  shippingRateEditPath(encodeURIComponent(id), encodeURIComponent(rateId)) +
-    encodeURIComponent(id),
-    encodeURIComponent(rateId)
-  ) +
-  "?" +
-  stringifyQs(params);
-
-export const shippingWeightRatesEditPath = (id: string, rateId: string) =>
-  urlJoin(shippingZonePath(id), "weight", rateId);
-export const shippingWeightRatesEditUrl = (
-  id: string,
-  rateId: string,
-  params?: ShippingRateUrlQueryParams
-) =>
-  shippingWeightRatesEditPath(
-    encodeURIComponent(id),
-    encodeURIComponent(rateId)
-  ) +
   "?" +
   stringifyQs(params);
 

src/shipping/views/PriceRatesCreate/consts.ts

@@ -1 +0,0 @@
-export const PRICE_RATES_CREATE_FORM_ID = Symbol();

src/shipping/views/PriceRatesCreate/index.ts

@@ -1,2 +0,0 @@
-export * from "./PriceRatesCreate";
-export { default } from "./PriceRatesCreate";

src/shipping/views/PriceRatesUpdate/consts.ts

@@ -1 +0,0 @@
-export const PRICE_RATES_UPDATE_FORM_ID = Symbol();

src/shipping/views/PriceRatesUpdate/index.ts

@@ -1,2 +0,0 @@
-export * from "./PriceRatesUpdate";
-export { default } from "./PriceRatesUpdate";

src/shipping/views/RateCreate.tsx

@@ -9,7 +9,7 @@ import ShippingZoneRatesCreatePage from "@saleor/shipping/components/ShippingZon
 import { useShippingRateCreator } from "@saleor/shipping/handlers";
 import { useShippingZoneChannels } from "@saleor/shipping/queries";
 import {
-  shippingPriceRatesUrl,
+  shippingRateCreateUrl,
   ShippingRateCreateUrlDialog,
   ShippingRateCreateUrlQueryParams,
   shippingZoneUrl
@@ -21,32 +21,26 @@ import {
   getRuleObject
 } from "@saleor/shipping/views/utils";
 import { MinMax } from "@saleor/types";
-import {
+import { PostalCodeRuleInclusionTypeEnum } from "@saleor/types/globalTypes";
-  PostalCodeRuleInclusionTypeEnum,
-  ShippingMethodTypeEnum
-} from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { PRICE_RATES_CREATE_FORM_ID } from "./consts";
+const FORM_ID = Symbol();
 
-export interface PriceRatesCreateProps {
+export interface RateCreateProps {
   id: string;
   params: ShippingRateCreateUrlQueryParams;
 }
 
-export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
+export const RateCreate: React.FC<RateCreateProps> = ({ id, params }) => {
-  id,
-  params
-}) => {
   const navigate = useNavigator();
   const intl = useIntl();
 
   const [openModal, closeModal] = createDialogActionHandlers<
     ShippingRateCreateUrlDialog,
     ShippingRateCreateUrlQueryParams
-  >(navigate, params => shippingPriceRatesUrl(id, params), params);
+  >(navigate, params => shippingRateCreateUrl(id, params), params);
 
   const {
     data: shippingZoneData,
@@ -75,7 +69,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
     allChannels,
     params?.action,
     { closeModal, openModal },
-    { formId: PRICE_RATES_CREATE_FORM_ID }
+    { formId: FORM_ID }
   );
 
   const [state, dispatch] = React.useReducer(postalCodesReducer, {
@@ -93,7 +87,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
     status
   } = useShippingRateCreator(
     id,
-    ShippingMethodTypeEnum.PRICE,
+    params.type,
     state.postalCodeRules,
     state.inclusionType
   );
@@ -153,7 +147,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
       )}
 
       <ShippingZoneRatesCreatePage
-        formId={PRICE_RATES_CREATE_FORM_ID}
+        formId={FORM_ID}
         allChannelsCount={allChannels?.length}
         shippingChannels={currentChannels}
         disabled={channelsLoading || status === "loading"}
@@ -168,7 +162,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
         onPostalCodeAssign={() => openModal("add-range")}
         onPostalCodeUnassign={onPostalCodeUnassign}
         onPostalCodeInclusionChange={onPostalCodeInclusionChange}
-        variant={ShippingMethodTypeEnum.PRICE}
+        variant={params.type}
       />
       <ShippingZonePostalCodeRangeDialog
         confirmButtonState="default"
@@ -180,4 +174,4 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
   );
 };
 
-export default PriceRatesCreate;
+export default RateCreate;

src/shipping/views/RateUpdate.tsx

@@ -29,7 +29,8 @@ import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/Ship
 import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
 import {
   getShippingMethodChannelVariables,
-  getUpdateShippingPriceRateVariables
+  getUpdateShippingPriceRateVariables,
+  getUpdateShippingWeightRateVariables
 } from "@saleor/shipping/handlers";
 import {
   useShippingMethodChannelListingUpdate,
@@ -40,7 +41,7 @@ import {
 } from "@saleor/shipping/mutations";
 import { useShippingZone } from "@saleor/shipping/queries";
 import {
-  shippingPriceRatesEditUrl,
+  shippingRateEditUrl,
   ShippingRateUrlDialog,
   ShippingRateUrlQueryParams,
   shippingZoneUrl
@@ -66,15 +67,15 @@ import {
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { PRICE_RATES_UPDATE_FORM_ID } from "./consts";
+const FORM_ID = Symbol();
 
-export interface PriceRatesUpdateProps {
+export interface RateUpdateProps {
   id: string;
   rateId: string;
   params: ShippingRateUrlQueryParams;
 }
 
-export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
+export const RateUpdate: React.FC<RateUpdateProps> = ({
   id,
   rateId,
   params
@@ -106,7 +107,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
   const [openModal, closeModal] = createDialogActionHandlers<
     ShippingRateUrlDialog,
     ShippingRateUrlQueryParams
-  >(navigate, params => shippingPriceRatesEditUrl(id, rateId, params), params);
+  >(navigate, params => shippingRateEditUrl(id, rateId, params), params);
 
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     []
@@ -164,7 +165,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
     shippingChannels,
     params?.action,
     { closeModal, openModal },
-    { formId: PRICE_RATES_UPDATE_FORM_ID }
+    { formId: FORM_ID }
   );
 
   const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate(
@@ -221,8 +222,12 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
   const updateData = async (
     formData: ShippingZoneRateUpdateFormData
   ): Promise<unknown[]> => {
+    const getUpdateVariables =
+      rate!.type === ShippingMethodTypeEnum.PRICE
+        ? getUpdateShippingPriceRateVariables
+        : getUpdateShippingWeightRateVariables;
     const response = await updateShippingRate({
-      variables: getUpdateShippingPriceRateVariables(
+      variables: getUpdateVariables(
         formData,
         id,
         rateId,
@@ -362,7 +367,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
         onSubmit={handleProductAssign}
       />
       <ShippingZoneRatesPage
-        formId={PRICE_RATES_UPDATE_FORM_ID}
+        formId={FORM_ID}
         allChannelsCount={allChannels?.length}
         shippingChannels={currentChannels}
         disabled={
@@ -388,7 +393,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
         onChannelsChange={setCurrentChannels}
         onProductUnassign={handleProductUnassign}
         onProductAssign={() => openModal("assign-product")}
-        variant={ShippingMethodTypeEnum.PRICE}
+        variant={rate?.type}
         isChecked={isSelected}
         selected={listElements.length}
         toggle={toggle}
@@ -419,4 +424,4 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
   );
 };
 
-export default PriceRatesUpdate;
+export default RateUpdate;

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -43,16 +43,15 @@ import {
 } from "../../../misc";
 import {
   CountryCode,
+  ShippingMethodTypeEnum,
   ShippingZoneUpdateInput
 } from "../../../types/globalTypes";
 import ShippingZoneDetailsPage from "../../components/ShippingZoneDetailsPage";
 import { ShippingZoneUpdateFormData } from "../../components/ShippingZoneDetailsPage/types";
 import { useShippingZone } from "../../queries";
 import {
-  shippingPriceRatesEditUrl,
+  shippingRateCreateUrl,
-  shippingPriceRatesUrl,
+  shippingRateEditUrl,
-  shippingWeightRatesEditUrl,
-  shippingWeightRatesUrl,
   shippingZonesListUrl,
   shippingZoneUrl,
   ShippingZoneUrlDialog,
@@ -213,10 +212,12 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
           })
         }
         onDelete={() => openModal("remove")}
-        onPriceRateAdd={() => navigate(shippingPriceRatesUrl(id))}
+        onPriceRateAdd={() =>
-        onPriceRateEdit={rateId =>
+          navigate(
-          navigate(shippingPriceRatesEditUrl(id, rateId))
+            shippingRateCreateUrl(id, { type: ShippingMethodTypeEnum.PRICE })
+          )
         }
+        onPriceRateEdit={rateId => navigate(shippingRateEditUrl(id, rateId))}
         onRateRemove={rateId =>
           openModal("remove-rate", {
             id: rateId
@@ -225,10 +226,12 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
         onSubmit={handleSubmit}
         allChannels={availableChannels}
         onWarehouseAdd={() => openModal("add-warehouse")}
-        onWeightRateAdd={() => navigate(shippingWeightRatesUrl(id))}
+        onWeightRateAdd={() =>
-        onWeightRateEdit={rateId =>
+          navigate(
-          navigate(shippingWeightRatesEditUrl(id, rateId))
+            shippingRateCreateUrl(id, { type: ShippingMethodTypeEnum.WEIGHT })
+          )
         }
+        onWeightRateEdit={rateId => navigate(shippingRateEditUrl(id, rateId))}
         saveButtonBarState={updateShippingZoneOpts.status}
         shippingZone={data?.shippingZone}
         warehouses={mapEdgesToItems(searchWarehousesOpts?.data?.search) || []}

src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx

@@ -1,188 +0,0 @@
-import {
-  createShippingChannels,
-  createSortedShippingChannels
-} from "@saleor/channels/utils";
-import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
-import { WindowTitle } from "@saleor/components/WindowTitle";
-import useChannels from "@saleor/hooks/useChannels";
-import useNavigator from "@saleor/hooks/useNavigator";
-import { sectionNames } from "@saleor/intl";
-import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
-import ShippingZoneRatesCreatePage from "@saleor/shipping/components/ShippingZoneRatesCreatePage";
-import { useShippingRateCreator } from "@saleor/shipping/handlers";
-import { useShippingZoneChannels } from "@saleor/shipping/queries";
-import {
-  ShippingRateCreateUrlDialog,
-  ShippingRateCreateUrlQueryParams,
-  shippingWeightRatesUrl,
-  shippingZoneUrl
-} from "@saleor/shipping/urls";
-import postalCodesReducer from "@saleor/shipping/views/reducer";
-import {
-  filterPostalCodes,
-  getPostalCodeRuleByMinMax,
-  getRuleObject
-} from "@saleor/shipping/views/utils";
-import { MinMax } from "@saleor/types";
-import {
-  PostalCodeRuleInclusionTypeEnum,
-  ShippingMethodTypeEnum
-} from "@saleor/types/globalTypes";
-import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
-import React from "react";
-import { useIntl } from "react-intl";
-
-import { WEIGHT_RATES_CREATE_FORM_ID } from "./consts";
-
-export interface WeightRatesCreateProps {
-  id: string;
-  params: ShippingRateCreateUrlQueryParams;
-}
-
-export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
-  id,
-  params
-}) => {
-  const navigate = useNavigator();
-  const intl = useIntl();
-
-  const {
-    data: shippingZoneData,
-    loading: channelsLoading
-  } = useShippingZoneChannels({
-    displayLoader: true,
-    variables: { id }
-  });
-
-  const [openModal, closeModal] = createDialogActionHandlers<
-    ShippingRateCreateUrlDialog,
-    ShippingRateCreateUrlQueryParams
-  >(navigate, params => shippingWeightRatesUrl(id, params), params);
-
-  const shippingChannels = createShippingChannels(
-    shippingZoneData?.shippingZone?.channels
-  );
-  const allChannels = createSortedShippingChannels(
-    shippingZoneData?.shippingZone?.channels
-  );
-
-  const {
-    channelListElements,
-    channelsToggle,
-    currentChannels,
-    handleChannelsConfirm,
-    handleChannelsModalClose,
-    handleChannelsModalOpen,
-    isChannelSelected,
-    isChannelsModalOpen,
-    setCurrentChannels,
-    toggleAllChannels
-  } = useChannels(
-    shippingChannels,
-    params?.action,
-    { closeModal, openModal },
-    { formId: WEIGHT_RATES_CREATE_FORM_ID }
-  );
-
-  const [state, dispatch] = React.useReducer(postalCodesReducer, {
-    codesToDelete: [],
-    havePostalCodesChanged: false,
-    inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
-    originalCodes: [],
-    postalCodeRules: []
-  });
-
-  const {
-    channelErrors,
-    createShippingRate,
-    errors,
-    status
-  } = useShippingRateCreator(
-    id,
-    ShippingMethodTypeEnum.WEIGHT,
-    state.postalCodeRules,
-    state.inclusionType
-  );
-
-  const handleBack = () => navigate(shippingZoneUrl(id));
-
-  const onPostalCodeAssign = (rule: MinMax) => {
-    if (
-      state.postalCodeRules.filter(getPostalCodeRuleByMinMax(rule)).length > 0
-    ) {
-      closeModal();
-      return;
-    }
-
-    const newCode = getRuleObject(rule, state.inclusionType);
-    dispatch({
-      havePostalCodesChanged: true,
-      postalCodeRules: [...state.postalCodeRules, newCode]
-    });
-    closeModal();
-  };
-
-  const onPostalCodeInclusionChange = (
-    inclusion: PostalCodeRuleInclusionTypeEnum
-  ) => {
-    dispatch({
-      inclusionType: inclusion,
-      postalCodeRules: []
-    });
-  };
-
-  const onPostalCodeUnassign = code => {
-    dispatch({
-      havePostalCodesChanged: true,
-      postalCodeRules: filterPostalCodes(state.postalCodeRules, code)
-    });
-  };
-
-  return (
-    <>
-      <WindowTitle title={intl.formatMessage(sectionNames.shipping)} />
-      {!!allChannels?.length && (
-        <ChannelsAvailabilityDialog
-          isSelected={isChannelSelected}
-          channels={allChannels}
-          onChange={channelsToggle}
-          onClose={handleChannelsModalClose}
-          open={isChannelsModalOpen}
-          title={intl.formatMessage({
-            defaultMessage: "Manage Channels Availability"
-          })}
-          confirmButtonState="default"
-          selected={channelListElements.length}
-          onConfirm={handleChannelsConfirm}
-          toggleAll={toggleAllChannels}
-        />
-      )}
-      <ShippingZoneRatesCreatePage
-        formId={WEIGHT_RATES_CREATE_FORM_ID}
-        allChannelsCount={allChannels?.length}
-        shippingChannels={currentChannels}
-        disabled={channelsLoading || status === "loading"}
-        saveButtonBarState={status}
-        onSubmit={createShippingRate}
-        onBack={handleBack}
-        errors={errors}
-        channelErrors={channelErrors}
-        postalCodes={state.postalCodeRules}
-        openChannelsModal={handleChannelsModalOpen}
-        onChannelsChange={setCurrentChannels}
-        onPostalCodeAssign={() => openModal("add-range")}
-        onPostalCodeUnassign={onPostalCodeUnassign}
-        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
-        variant={ShippingMethodTypeEnum.WEIGHT}
-      />
-      <ShippingZonePostalCodeRangeDialog
-        confirmButtonState="default"
-        onClose={closeModal}
-        onSubmit={onPostalCodeAssign}
-        open={params.action === "add-range"}
-      />
-    </>
-  );
-};
-
-export default WeightRatesCreate;

src/shipping/views/WeightRatesCreate/consts.ts

@@ -1 +0,0 @@
-export const WEIGHT_RATES_CREATE_FORM_ID = Symbol();

src/shipping/views/WeightRatesCreate/index.ts

@@ -1,2 +0,0 @@
-export * from "./WeightRatesCreate";
-export { default } from "./WeightRatesCreate";

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -1,418 +0,0 @@
-import {
-  createShippingChannelsFromRate,
-  createSortedShippingChannels
-} from "@saleor/channels/utils";
-import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
-import { WindowTitle } from "@saleor/components/WindowTitle";
-import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
-import { PAGINATE_BY } from "@saleor/config";
-import useBulkActions from "@saleor/hooks/useBulkActions";
-import useChannels from "@saleor/hooks/useChannels";
-import useLocalPaginator, {
-  useLocalPaginationState
-} from "@saleor/hooks/useLocalPaginator";
-import useNavigator from "@saleor/hooks/useNavigator";
-import useNotifier from "@saleor/hooks/useNotifier";
-import { sectionNames } from "@saleor/intl";
-import { commonMessages } from "@saleor/intl";
-import { Button } from "@saleor/macaw-ui";
-import {
-  getById,
-  getByUnmatchingId
-} from "@saleor/orders/components/OrderReturnPage/utils";
-import useProductSearch from "@saleor/searches/useProductSearch";
-import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog";
-import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog";
-import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
-import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
-import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/ShippingZoneRatesPage/types";
-import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
-import {
-  getShippingMethodChannelVariables,
-  getUpdateShippingWeightRateVariables
-} from "@saleor/shipping/handlers";
-import {
-  useShippingMethodChannelListingUpdate,
-  useShippingPriceExcludeProduct,
-  useShippingPriceRemoveProductsFromExclude,
-  useShippingRateDelete,
-  useShippingRateUpdate
-} from "@saleor/shipping/mutations";
-import { useShippingZone } from "@saleor/shipping/queries";
-import {
-  ShippingRateUrlDialog,
-  ShippingRateUrlQueryParams,
-  shippingWeightRatesEditUrl,
-  shippingZoneUrl
-} from "@saleor/shipping/urls";
-import postalCodesReducer from "@saleor/shipping/views/reducer";
-import {
-  filterPostalCodes,
-  getPostalCodeRuleByMinMax,
-  getRuleObject
-} from "@saleor/shipping/views/utils";
-import { MinMax } from "@saleor/types";
-import {
-  PostalCodeRuleInclusionTypeEnum,
-  ShippingMethodTypeEnum
-} from "@saleor/types/globalTypes";
-import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
-import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
-import { mapEdgesToItems } from "@saleor/utils/maps";
-import {
-  useMetadataUpdate,
-  usePrivateMetadataUpdate
-} from "@saleor/utils/metadata/updateMetadata";
-import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-
-import { WEIGHT_RATES_UPDATE_FORM_ID } from "./consts";
-
-export interface WeightRatesUpdateProps {
-  id: string;
-  rateId: string;
-  params: ShippingRateUrlQueryParams;
-}
-
-export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
-  id,
-  rateId,
-  params
-}) => {
-  const navigate = useNavigator();
-  const notify = useNotifier();
-  const intl = useIntl();
-
-  const [paginationState, setPaginationState] = useLocalPaginationState(
-    PAGINATE_BY
-  );
-  const paginate = useLocalPaginator(setPaginationState);
-
-  const { data, loading, refetch } = useShippingZone({
-    displayLoader: true,
-    variables: { id, ...paginationState }
-  });
-
-  const channelsData = data?.shippingZone?.channels;
-
-  const rate = data?.shippingZone?.shippingMethods?.find(getById(rateId));
-
-  const [openModal, closeModal] = createDialogActionHandlers<
-    ShippingRateUrlDialog,
-    ShippingRateUrlQueryParams
-  >(navigate, params => shippingWeightRatesEditUrl(id, rateId, params), params);
-
-  const [state, dispatch] = React.useReducer(postalCodesReducer, {
-    codesToDelete: [],
-    havePostalCodesChanged: false,
-    inclusionType: rate?.postalCodeRules[0]?.inclusionType,
-    originalCodes: [],
-    postalCodeRules: rate?.postalCodeRules || []
-  });
-
-  const postalCodeRulesLoaded =
-    !loading &&
-    !state.postalCodeRules?.length &&
-    !state.codesToDelete?.length &&
-    rate?.postalCodeRules?.length;
-
-  if (postalCodeRulesLoaded) {
-    dispatch({ postalCodeRules: rate.postalCodeRules });
-  }
-
-  const onPostalCodeInclusionChange = (
-    inclusion: PostalCodeRuleInclusionTypeEnum
-  ) => {
-    dispatch({
-      codesToDelete: rate.postalCodeRules.map(code => code.id),
-      havePostalCodesChanged: true,
-      inclusionType: inclusion,
-      postalCodeRules: []
-    });
-  };
-
-  const onPostalCodeAssign = (rule: MinMax) => {
-    if (!state.originalCodes.length) {
-      dispatch({ originalCodes: rate.postalCodeRules });
-    }
-
-    if (
-      state.postalCodeRules.filter(getPostalCodeRuleByMinMax(rule)).length > 0
-    ) {
-      closeModal();
-      return;
-    }
-
-    const newCode = getRuleObject(rule, state.inclusionType);
-    dispatch({
-      havePostalCodesChanged: true,
-      postalCodeRules: [...state.postalCodeRules, newCode]
-    });
-    closeModal();
-  };
-
-  const {
-    loadMore,
-    search: productsSearch,
-    result: productsSearchOpts
-  } = useProductSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA });
-
-  const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
-    []
-  );
-
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
-    rate?.excludedProducts.pageInfo,
-    paginationState
-  );
-
-  const [
-    updateShippingMethodChannelListing,
-    updateShippingMethodChannelListingOpts
-  ] = useShippingMethodChannelListingUpdate({});
-
-  const [
-    unassignProduct,
-    unassignProductOpts
-  ] = useShippingPriceRemoveProductsFromExclude({
-    onCompleted: data => {
-      if (data.shippingPriceRemoveProductFromExclude.errors.length === 0) {
-        handleSuccess();
-        refetch();
-        closeModal();
-      }
-    }
-  });
-
-  const [assignProduct, assignProductOpts] = useShippingPriceExcludeProduct({
-    onCompleted: data => {
-      if (data.shippingPriceExcludeProducts.errors.length === 0) {
-        handleSuccess();
-        refetch();
-        closeModal();
-      }
-    }
-  });
-
-  const shippingChannels = createShippingChannelsFromRate(
-    rate?.channelListings
-  );
-  const allChannels = createSortedShippingChannels(channelsData);
-
-  const {
-    channelListElements,
-    channelsToggle,
-    currentChannels,
-    handleChannelsConfirm,
-    handleChannelsModalClose,
-    handleChannelsModalOpen,
-    isChannelSelected,
-    isChannelsModalOpen,
-    setCurrentChannels,
-    toggleAllChannels
-  } = useChannels(
-    shippingChannels,
-    params?.action,
-    { closeModal, openModal },
-    { formId: WEIGHT_RATES_UPDATE_FORM_ID }
-  );
-
-  const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate(
-    {}
-  );
-
-  const handleSuccess = () => {
-    notify({
-      status: "success",
-      text: intl.formatMessage(commonMessages.savedChanges)
-    });
-  };
-
-  const [deleteShippingRate, deleteShippingRateOpts] = useShippingRateDelete({
-    onCompleted: data => {
-      if (data.shippingPriceDelete.errors.length === 0) {
-        handleSuccess();
-        navigate(shippingZoneUrl(id));
-      }
-    }
-  });
-
-  const [updateMetadata] = useMetadataUpdate({});
-  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
-
-  const updateData = async (data: ShippingZoneRateUpdateFormData) => {
-    const response = await updateShippingRate({
-      variables: getUpdateShippingWeightRateVariables(
-        data,
-        id,
-        rateId,
-        state.postalCodeRules,
-        state.codesToDelete
-      )
-    });
-    const errors = response.data.shippingPriceUpdate.errors;
-    if (errors.length === 0) {
-      handleSuccess();
-      dispatch({ havePostalCodesChanged: false });
-      updateShippingMethodChannelListing({
-        variables: getShippingMethodChannelVariables(
-          rateId,
-          data.orderValueRestricted,
-          data.channelListings,
-          shippingChannels
-        )
-      });
-    }
-
-    return errors;
-  };
-
-  const onPostalCodeUnassign = code => {
-    if (code.id !== undefined) {
-      dispatch({
-        codesToDelete: [...state.codesToDelete, code.id],
-        havePostalCodesChanged: true,
-        postalCodeRules: state.postalCodeRules.filter(
-          getByUnmatchingId(code.id)
-        )
-      });
-    } else {
-      dispatch({
-        havePostalCodesChanged: true,
-        postalCodeRules: filterPostalCodes(state.postalCodeRules, code)
-      });
-    }
-  };
-
-  const handleSubmit = createMetadataUpdateHandler(
-    rate,
-    updateData,
-    variables => updateMetadata({ variables }),
-    variables => updatePrivateMetadata({ variables })
-  );
-
-  const handleProductAssign = (ids: string[]) =>
-    assignProduct({
-      variables: { id: rateId, input: { products: ids } }
-    });
-
-  const handleProductUnassign = (ids: string[]) => {
-    unassignProduct({
-      variables: { id: rateId, products: ids }
-    });
-    reset();
-  };
-
-  const handleBack = () => navigate(shippingZoneUrl(id));
-
-  return (
-    <>
-      <WindowTitle title={intl.formatMessage(sectionNames.shipping)} />
-      {!!allChannels?.length && (
-        <ChannelsAvailabilityDialog
-          isSelected={isChannelSelected}
-          channels={allChannels}
-          onChange={channelsToggle}
-          onClose={handleChannelsModalClose}
-          open={isChannelsModalOpen}
-          title={intl.formatMessage({
-            defaultMessage: "Manage Channels Availability"
-          })}
-          confirmButtonState="default"
-          selected={channelListElements.length}
-          onConfirm={handleChannelsConfirm}
-          toggleAll={toggleAllChannels}
-        />
-      )}
-      <DeleteShippingRateDialog
-        confirmButtonState={deleteShippingRateOpts.status}
-        onClose={closeModal}
-        handleConfirm={() =>
-          deleteShippingRate({
-            variables: {
-              id: rateId
-            }
-          })
-        }
-        open={params.action === "remove"}
-        name={rate?.name}
-      />
-      <UnassignDialog
-        open={params.action === "unassign-product" && !!listElements.length}
-        idsLength={listElements.length}
-        confirmButtonState={unassignProductOpts.status}
-        closeModal={closeModal}
-        onConfirm={() => handleProductUnassign(listElements)}
-      />
-      <ShippingMethodProductsAddDialog
-        confirmButtonState={assignProductOpts.status}
-        loading={productsSearchOpts.loading}
-        open={params.action === "assign-product"}
-        hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
-        products={mapEdgesToItems(productsSearchOpts?.data?.search)?.filter(
-          suggestedProduct => suggestedProduct.id
-        )}
-        onClose={closeModal}
-        onFetch={productsSearch}
-        onFetchMore={loadMore}
-        onSubmit={handleProductAssign}
-      />
-      <ShippingZoneRatesPage
-        formId={WEIGHT_RATES_UPDATE_FORM_ID}
-        allChannelsCount={allChannels?.length}
-        shippingChannels={currentChannels}
-        disabled={
-          loading ||
-          updateShippingRateOpts?.status === "loading" ||
-          updateShippingMethodChannelListingOpts?.status === "loading" ||
-          unassignProductOpts?.status === "loading" ||
-          assignProductOpts?.status === "loading"
-        }
-        hasChannelChanged={shippingChannels?.length !== currentChannels?.length}
-        havePostalCodesChanged={state.havePostalCodesChanged}
-        saveButtonBarState={updateShippingRateOpts.status}
-        onDelete={() => openModal("remove")}
-        onSubmit={handleSubmit}
-        onBack={handleBack}
-        rate={rate}
-        errors={updateShippingRateOpts.data?.shippingPriceUpdate.errors || []}
-        channelErrors={
-          updateShippingMethodChannelListingOpts?.data
-            ?.shippingMethodChannelListingUpdate?.errors || []
-        }
-        openChannelsModal={handleChannelsModalOpen}
-        onChannelsChange={setCurrentChannels}
-        onProductUnassign={handleProductUnassign}
-        onProductAssign={() => openModal("assign-product")}
-        variant={ShippingMethodTypeEnum.WEIGHT}
-        isChecked={isSelected}
-        selected={listElements.length}
-        toggle={toggle}
-        toggleAll={toggleAll}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
-        postalCodeRules={state.postalCodeRules}
-        pageInfo={pageInfo}
-        toolbar={
-          <Button onClick={() => openModal("unassign-product")}>
-            <FormattedMessage
-              defaultMessage="Unassign"
-              description="unassign products from shipping method, button"
-            />
-          </Button>
-        }
-        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
-        onPostalCodeAssign={() => openModal("add-range")}
-        onPostalCodeUnassign={onPostalCodeUnassign}
-      />
-      <ShippingZonePostalCodeRangeDialog
-        confirmButtonState={"default"}
-        onClose={closeModal}
-        onSubmit={code => onPostalCodeAssign(code)}
-        open={params.action === "add-range"}
-      />
-    </>
-  );
-};
-
-export default WeightRatesUpdate;

src/shipping/views/WeightRatesUpdate/consts.ts

@@ -1 +0,0 @@
-export const WEIGHT_RATES_UPDATE_FORM_ID = Symbol();

src/shipping/views/WeightRatesUpdate/index.ts

@@ -1,2 +0,0 @@
-export * from "./WeightRatesUpdate";
-export { default } from "./WeightRatesUpdate";