Add optional channel selection in price and weight rates view + voucher view (#1531)

* Add useChannels test

* Fix unnecessary re-render that caused overwrite of form list

* Change array diff check

* Channel selection in price and weight rates is optional

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -46,6 +46,7 @@ import { commonMessages, sectionNames } from "@saleor/intl";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import { arrayDiff } from "@saleor/utils/arrays";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -53,7 +54,7 @@ import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
 } from "@saleor/utils/metadata/updateMetadata";
-import React from "react";
+import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { categoryUrl } from "../../../categories/urls";
@@ -132,9 +133,11 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     data?.voucher,
     availableChannels
   );
-  const voucherChannelsChoices: ChannelVoucherData[] = createSortedChannelsDataFromVoucher(
-    data?.voucher
+  const voucherChannelsChoices: ChannelVoucherData[] = useMemo(
+    () => createSortedChannelsDataFromVoucher(data?.voucher),
+    [data?.voucher]
   );
+
   const {
     channelListElements,
     channelsToggle,
@@ -151,12 +154,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     openModal
   });
 
-  React.useEffect(() => {
-    if (!currentChannels.length && voucherChannelsChoices.length) {
-      setCurrentChannels(voucherChannelsChoices);
-    }
-  }, [voucherChannelsChoices]);
-
   const [updateChannels, updateChannelsOpts] = useVoucherChannelListingUpdate(
     {}
   );
@@ -198,12 +195,21 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
 
   const canOpenBulkActionDialog = maybe(() => params.ids.length > 0);
 
+  const hasArrChanged = () => {
+    const { added, removed } = arrayDiff(
+      voucherChannelsChoices.map(choice => choice.id),
+      currentChannels.map(choice => choice.id)
+    );
+
+    return added.length !== 0 || removed.length !== 0;
+  };
+
   return (
     <>
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
           isSelected={isChannelSelected}
-          disabled={!channelListElements.length}
+          disabled={false}
           channels={allChannels}
           onChange={channelsToggle}
           onClose={handleChannelsModalClose}
@@ -295,10 +301,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                             voucher={data?.voucher}
                             allChannelsCount={allChannels?.length}
                             channelListings={currentChannels}
-                            hasChannelChanged={
-                              voucherChannelsChoices?.length !==
-                              currentChannels?.length
-                            }
+                            hasChannelChanged={hasArrChanged()}
                             disabled={
                               loading ||
                               voucherCataloguesRemoveOpts.loading ||

src/hooks/useChannels.test.ts

@@ -0,0 +1,89 @@
+import { ChannelData } from "@saleor/channels/utils";
+import { act, renderHook } from "@testing-library/react-hooks";
+
+import useChannels from "./useChannels";
+
+const channels: ChannelData[] = [
+  {
+    id: "channel1",
+    name: "Channel 1",
+    variantsIds: ["variant1", "variant2"]
+  },
+  {
+    id: "channel2",
+    name: "Channel 2",
+    variantsIds: []
+  }
+];
+
+describe("useChannels", () => {
+  it("properly toggles channels", () => {
+    // Given
+    const { result } = renderHook(() =>
+      useChannels(channels, "", {
+        closeModal: jest.fn,
+        openModal: jest.fn
+      })
+    );
+
+    // When
+    act(() => {
+      result.current.channelsToggle(channels[0]);
+    });
+
+    act(() => {
+      result.current.handleChannelsConfirm();
+    });
+
+    // Then
+    expect(result.current.currentChannels).toStrictEqual([channels[1]]);
+    expect(result.current.currentChannels[0].id).toBe(channels[1].id);
+  });
+  it("properly removes channels", () => {
+    // Given
+    const { result } = renderHook(() =>
+      useChannels(channels, "", {
+        closeModal: jest.fn,
+        openModal: jest.fn
+      })
+    );
+
+    // When
+    act(() => {
+      result.current.channelsToggle(channels[0]);
+    });
+
+    act(() => {
+      result.current.channelsToggle(channels[1]);
+    });
+
+    act(() => {
+      result.current.handleChannelsConfirm();
+    });
+
+    // Then
+    expect(result.current.currentChannels).toStrictEqual([]);
+  });
+
+  it("doesn't not save changes if closed without confirm", () => {
+    // Given
+    const { result } = renderHook(() =>
+      useChannels(channels, "", {
+        closeModal: jest.fn,
+        openModal: jest.fn
+      })
+    );
+
+    // When
+    act(() => {
+      result.current.channelsToggle(channels[0]);
+    });
+
+    act(() => {
+      result.current.handleChannelsModalClose();
+    });
+
+    // Then
+    expect(result.current.currentChannels).toStrictEqual(channels);
+  });
+});

src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx

@@ -131,7 +131,6 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
           isSelected={isChannelSelected}
-          disabled={!channelListElements.length}
           channels={allChannels}
           onChange={channelsToggle}
           onClose={handleChannelsModalClose}

src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx

@@ -304,7 +304,6 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
           isSelected={isChannelSelected}
-          disabled={!channelListElements.length}
           channels={allChannels}
           onChange={channelsToggle}
           onClose={handleChannelsModalClose}

src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx

@@ -137,7 +137,6 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
           isSelected={isChannelSelected}
-          disabled={!channelListElements.length}
           channels={allChannels}
           onChange={channelsToggle}
           onClose={handleChannelsModalClose}

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -303,7 +303,6 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
           isSelected={isChannelSelected}
-          disabled={!channelListElements.length}
           channels={allChannels}
           onChange={channelsToggle}
           onClose={handleChannelsModalClose}