Use available channels from context

src/channels/ChannelsWithVariantsAvailabilityCard/ChannelsWithVariantsAvailabilityCard.tsx

@@ -18,14 +18,18 @@ import {
   areAnyChannelVariantsSelected,
   getTotalSelectedChannelsCount
 } from "@saleor/products/views/ProductUpdate/utils";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import ChannelWithVariantsAvailabilityItemWrapper from "./ChannelWithVariantAvailabilityItemWrapper";
 
 type CommonChannelsAvailabilityProps = Omit<
   ChannelsAvailabilityWrapperProps,
-  "children" | "selectedChannelsCount" | "allChannelsCount"
+  | "children"
+  | "selectedChannelsCount"
+  | "allChannelsCount"
+  | "managePermissions"
 >;
 
 export interface ChannelsWithVariantsAvailabilityCardProps
@@ -69,6 +73,7 @@ const ChannelsWithVariantsAvailabilityCard: React.FC<ChannelsWithVariantsAvailab
 
   return (
     <ChannelsAvailabilityCardWrapper
+      managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
       selectedChannelsCount={selectedChannelsCount}
       allChannelsCount={allChannelsCount}
       openModal={openModal}

src/channels/utils.ts

@@ -15,6 +15,8 @@ import {
 import { mapNodeToChoice } from "@saleor/utils/maps";
 import uniqBy from "lodash/uniqBy";
 
+import { BaseChannels_channels } from "./types/BaseChannels";
+
 export interface Channel {
   id: string;
   name: string;
@@ -73,15 +75,15 @@ export interface ChannelCollectionData {
   publicationDate: string | null;
 }
 
-export const createCollectionChannels = (data?: Channels_channels[]) =>
+export const createCollectionChannels = (data?: BaseChannels_channels[]) =>
   data?.map(channel => ({
     id: channel.id,
     isPublished: false,
     name: channel.name,
     publicationDate: null
   }));
 
-export const createVoucherChannels = (data?: Channels_channels[]) =>
+export const createVoucherChannels = (data?: BaseChannels_channels[]) =>
   data?.map(channel => ({
     currency: channel.currencyCode,
     discountValue: "",
@@ -90,7 +92,7 @@ export const createVoucherChannels = (data?: Channels_channels[]) =>
     name: channel.name
   }));
 
-export const createSaleChannels = (data?: Channels_channels[]) =>
+export const createSaleChannels = (data?: BaseChannels_channels[]) =>
   data?.map(channel => ({
     currency: channel.currencyCode,
     discountValue: "",
@@ -115,7 +117,7 @@ export const createVariantChannels = (
 
 export const createChannelsDataWithSaleDiscountPrice = (
   saleData?: SaleDetails_sale,
-  data?: Channels_channels[]
+  data?: BaseChannels_channels[]
 ): ChannelSaleData[] => {
   if (data && saleData?.channelListings) {
     const dataArr = createSaleChannels(data);
@@ -128,7 +130,7 @@ export const createChannelsDataWithSaleDiscountPrice = (
 
 export const createChannelsDataWithDiscountPrice = (
   voucherData?: VoucherDetails_voucher,
-  data?: Channels_channels[]
+  data?: BaseChannels_channels[]
 ): ChannelVoucherData[] => {
   if (data && voucherData?.channelListings) {
     const dataArr = createVoucherChannels(data);
@@ -139,7 +141,9 @@ export const createChannelsDataWithDiscountPrice = (
   return [];
 };
 
-export const createChannelsData = (data?: Channels_channels[]): ChannelData[] =>
+export const createChannelsData = (
+  data?: BaseChannels_channels[]
+): ChannelData[] =>
   data?.map(channel => ({
     availableForPurchase: null,
     costPrice: "",
@@ -156,7 +160,7 @@ export const createChannelsData = (data?: Channels_channels[]): ChannelData[] =>
 
 export const createChannelsDataWithPrice = (
   productData?: ProductDetails_product,
-  data?: Channels_channels[]
+  data?: BaseChannels_channels[]
 ): ChannelData[] => {
   if (data && productData?.channelListings) {
     const dataArr = createChannelsData(data);
@@ -292,7 +296,7 @@ export const createSortedChannelsDataFromProduct = (
     channel.name.localeCompare(nextChannel.name)
   );
 
-export const createSortedChannelsData = (data?: Channels_channels[]) =>
+export const createSortedChannelsData = (data?: BaseChannels_channels[]) =>
   createChannelsData(data)?.sort((channel, nextChannel) =>
     channel.name.localeCompare(nextChannel.name)
   );
@@ -311,12 +315,12 @@ export const createSortedShippingChannelsFromRate = (
     channel.name.localeCompare(nextChannel.name)
   );
 
-export const createSortedVoucherData = (data?: Channels_channels[]) =>
+export const createSortedVoucherData = (data?: BaseChannels_channels[]) =>
   createVoucherChannels(data)?.sort((channel, nextChannel) =>
     channel.name.localeCompare(nextChannel.name)
   );
 
-export const createSortedSaleData = (data?: Channels_channels[]) =>
+export const createSortedSaleData = (data?: BaseChannels_channels[]) =>
   createSaleChannels(data)?.sort((channel, nextChannel) =>
     channel.name.localeCompare(nextChannel.name)
   );

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -13,6 +13,7 @@ import { CollectionChannelListingErrorFragment } from "@saleor/fragments/types/C
 import { CollectionErrorFragment } from "@saleor/fragments/types/CollectionErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -141,6 +142,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
                     description: "collection label"
                   })
                 }}
+                managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
                 errors={channelsErrors}
                 selectedChannelsCount={data.channelListings.length}
                 allChannelsCount={channelsCount}

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -13,6 +13,7 @@ import { CollectionChannelListingErrorFragment } from "@saleor/fragments/types/C
 import { CollectionErrorFragment } from "@saleor/fragments/types/CollectionErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -125,6 +126,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
             <div>
               <div>
                 <ChannelsAvailabilityCard
+                  managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
                   messages={{
                     hiddenLabel: intl.formatMessage({
                       defaultMessage: "Hidden",

src/collections/views/CollectionCreate.tsx

@@ -1,6 +1,6 @@
-import { useChannelsList } from "@saleor/channels/queries";
 import { ChannelsAction } from "@saleor/channels/urls";
 import { createCollectionChannels } from "@saleor/channels/utils";
+import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useChannels from "@saleor/hooks/useChannels";
@@ -53,10 +53,10 @@ export const CollectionCreate: React.FC<CollectionCreateProps> = ({
     updateChannels,
     updateChannelsOpts
   ] = useCollectionChannelListingUpdate({});
-  const { data: channelsData } = useChannelsList({});
+  const { availableChannels } = useAppChannel(false);
 
   const allChannels = createCollectionChannels(
-    channelsData?.channels
+    availableChannels
   )?.sort((channel, nextChannel) =>
     channel.name.localeCompare(nextChannel.name)
   );
@@ -170,7 +170,7 @@ export const CollectionCreate: React.FC<CollectionCreateProps> = ({
           updateChannelsOpts?.data?.collectionChannelListingUpdate.errors || []
         }
         currentChannels={currentChannels}
-        channelsCount={channelsData?.channels?.length}
+        channelsCount={availableChannels.length}
         openChannelsModal={handleChannelsModalOpen}
         onChannelsChange={setCurrentChannels}
         onBack={() => navigate(collectionListUrl())}

src/collections/views/CollectionDetails.tsx

@@ -1,10 +1,10 @@
 import { Button, DialogContentText } from "@material-ui/core";
-import { useChannelsList } from "@saleor/channels/queries";
 import {
   createCollectionChannels,
   createCollectionChannelsData
 } from "@saleor/channels/utils";
 import ActionDialog from "@saleor/components/ActionDialog";
+import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import AssignProductDialog from "@saleor/components/AssignProductDialog";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import NotFoundPage from "@saleor/components/NotFoundPage";
@@ -84,7 +84,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
     updateChannels,
     updateChannelsOpts
   ] = useCollectionChannelListingUpdate({});
-  const { data: channelsData } = useChannelsList({});
+  const { availableChannels } = useAppChannel(false);
 
   const handleCollectionUpdate = (data: CollectionUpdate) => {
     if (data.collectionUpdate.errors.length === 0) {
@@ -173,7 +173,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           return <NotFoundPage onBack={handleBack} />;
         }
         const allChannels = createCollectionChannels(
-          channelsData?.channels
+          availableChannels
         )?.sort((channel, nextChannel) =>
           channel.name.localeCompare(nextChannel.name)
         );
@@ -339,7 +339,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
               hasChannelChanged={
                 collectionChannelsChoices?.length !== currentChannels?.length
               }
-              channelsCount={channelsData?.channels?.length}
+              channelsCount={availableChannels.length}
               selectedChannelId={selectedChannel}
               openChannelsModal={handleChannelsModalOpen}
               onChannelsChange={setCurrentChannels}

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx

@@ -33,6 +33,7 @@ const productChannels = createChannelsDataFromProduct(product(""));
 
 const props: ChannelsAvailabilityCardProps = {
   allChannelsCount: 4,
+  managePermissions: [PermissionEnum.MANAGE_CHANNELS],
   channelsList: productChannels.map(channel => ({
     id: channel.id,
     name: channel.name

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.tsx

@@ -3,6 +3,7 @@ import { Channel as ChannelList, ChannelData } from "@saleor/channels/utils";
 import Hr from "@saleor/components/Hr";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import { RequireOnlyOne } from "@saleor/misc";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -22,6 +23,7 @@ export interface ChannelsAvailability
   errors?: ChannelsAvailabilityError[];
   disabled?: boolean;
   messages?: Messages;
+  managePermissions: PermissionEnum[];
   onChange?: (id: string, data: ChannelOpts) => void;
 }
 
@@ -38,6 +40,7 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityCardProps> = pro
     allChannelsCount = 0,
     channels,
     messages,
+    managePermissions,
     onChange,
     openModal
   } = props;
@@ -56,6 +59,7 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityCardProps> = pro
     <ChannelsAvailabilityCardWrapper
       selectedChannelsCount={selectedChannelsCount}
       allChannelsCount={allChannelsCount}
+      managePermissions={managePermissions}
       openModal={openModal}
     >
       {channels

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx

@@ -12,16 +12,18 @@ import { useStyles } from "./styles";
 export interface ChannelsAvailabilityWrapperProps {
   selectedChannelsCount: number;
   allChannelsCount: number;
-  openModal: () => void;
   children: React.ReactNode;
+  managePermissions: PermissionEnum[];
+  openModal: () => void;
 }
 
 export const ChannelsAvailabilityWrapper: React.FC<ChannelsAvailabilityWrapperProps> = props => {
   const {
     selectedChannelsCount,
     allChannelsCount,
-    openModal,
-    children
+    children,
+    managePermissions,
+    openModal
   } = props;
   const intl = useIntl();
   const classes = useStyles({});
@@ -50,7 +52,7 @@ export const ChannelsAvailabilityWrapper: React.FC<ChannelsAvailabilityWrapperPr
           toolbar={
             <RequirePermissions
               userPermissions={user?.userPermissions || []}
-              requiredPermissions={[PermissionEnum.MANAGE_PRODUCTS]}
+              requiredPermissions={managePermissions}
             >
               <Button
                 color="primary"

src/discounts/components/SaleCreatePage/SaleCreatePage.tsx

@@ -15,7 +15,10 @@ import { validatePrice } from "@saleor/products/utils/validation";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { SaleType as SaleTypeEnum } from "../../../types/globalTypes";
+import {
+  PermissionEnum,
+  SaleType as SaleTypeEnum
+} from "../../../types/globalTypes";
 import DiscountDates from "../DiscountDates";
 import SaleInfo from "../SaleInfo";
 import SaleType from "../SaleType";
@@ -118,6 +121,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
               </div>
               <div>
                 <ChannelsAvailabilityCard
+                  managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
                   selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={allChannelsCount}
                   channelsList={data.channelListings.map(channel => ({

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -18,7 +18,10 @@ import { useIntl } from "react-intl";
 
 import { maybe, splitDateTime } from "../../../misc";
 import { ChannelProps, ListProps, TabListActions } from "../../../types";
-import { SaleType as SaleTypeEnum } from "../../../types/globalTypes";
+import {
+  PermissionEnum,
+  SaleType as SaleTypeEnum
+} from "../../../types/globalTypes";
 import { SaleDetails_sale } from "../../types/SaleDetails";
 import DiscountCategories from "../DiscountCategories";
 import DiscountCollections from "../DiscountCollections";
@@ -294,6 +297,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                 />
                 <CardSpacer />
                 <ChannelsAvailabilityCard
+                  managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
                   selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={allChannelsCount}
                   channelsList={data.channelListings.map(channel => ({

src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx

@@ -18,7 +18,7 @@ import { validatePrice } from "@saleor/products/utils/validation";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { VoucherTypeEnum } from "../../../types/globalTypes";
+import { PermissionEnum, VoucherTypeEnum } from "../../../types/globalTypes";
 import { DiscountTypeEnum, RequirementsPicker } from "../../types";
 import VoucherDates from "../VoucherDates";
 import VoucherInfo from "../VoucherInfo";
@@ -176,6 +176,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
               </div>
               <div>
                 <ChannelsAvailabilityCard
+                  managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
                   selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={allChannelsCount}
                   channelsList={data.channelListings.map(channel => ({

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -26,6 +26,7 @@ import { maybe, splitDateTime } from "../../../misc";
 import { ChannelProps, ListProps, TabListActions } from "../../../types";
 import {
   DiscountValueTypeEnum,
+  PermissionEnum,
   VoucherTypeEnum
 } from "../../../types/globalTypes";
 import { VoucherDetails_voucher } from "../../types/VoucherDetails";
@@ -407,6 +408,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                 />
                 <CardSpacer />
                 <ChannelsAvailabilityCard
+                  managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
                   selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={allChannelsCount}
                   channelsList={data.channelListings.map(channel => ({

src/discounts/views/SaleCreate/SaleCreate.tsx

@@ -1,6 +1,6 @@
-import { useChannelsList } from "@saleor/channels/queries";
 import { ChannelsAction } from "@saleor/channels/urls";
 import { ChannelSaleData, createSortedSaleData } from "@saleor/channels/utils";
+import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import SaleCreatePage from "@saleor/discounts/components/SaleCreatePage";
@@ -39,9 +39,9 @@ export const SaleCreateView: React.FC<SaleCreateProps> = ({ params }) => {
     SaleCreateUrlQueryParams
   >(navigate, params => saleAddUrl(params), params);
 
-  const { data: channelsData } = useChannelsList({});
+  const { availableChannels } = useAppChannel(false);
   const allChannels: ChannelSaleData[] = createSortedSaleData(
-    channelsData?.channels
+    availableChannels
   );
 
   const {