Use available channels from context (#1115)

* Use available channels from context

* Allow to specify manage channel availability permissions

src/channels/ChannelsWithVariantsAvailabilityCard/ChannelsWithVariantsAvailabilityCard.tsx

@@ -18,6 +18,7 @@ import {
   areAnyChannelVariantsSelected,
   getTotalSelectedChannelsCount
 } from "@saleor/products/views/ProductUpdate/utils";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -25,7 +26,10 @@ import ChannelWithVariantsAvailabilityItemWrapper from "./ChannelWithVariantAvai
 
 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,7 +75,7 @@ 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,
@@ -81,7 +83,7 @@ export const createCollectionChannels = (data?: Channels_channels[]) =>
     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 {

src/discounts/views/SaleDetails/SaleDetails.tsx

@@ -1,6 +1,5 @@
 import { Button, DialogContentText } from "@material-ui/core";
 import { categoryUrl } from "@saleor/categories/urls";
-import { useChannelsList } from "@saleor/channels/queries";
 import {
   ChannelSaleData,
   createChannelsDataWithSaleDiscountPrice,
@@ -8,6 +7,7 @@ import {
 } from "@saleor/channels/utils";
 import { collectionUrl } from "@saleor/collections/urls";
 import ActionDialog from "@saleor/components/ActionDialog";
+import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import AssignCategoriesDialog from "@saleor/components/AssignCategoryDialog";
 import AssignCollectionDialog from "@saleor/components/AssignCollectionDialog";
 import AssignProductDialog from "@saleor/components/AssignProductDialog";
@@ -91,7 +91,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
 
-  const { data: channelsData } = useChannelsList({});
+  const { availableChannels } = useAppChannel(false);
 
   const paginationState = createPaginationState(PAGINATE_BY, params);
   const changeTab = (tab: SaleDetailsPageTab) => {
@@ -118,7 +118,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
 
   const allChannels: ChannelSaleData[] = createChannelsDataWithSaleDiscountPrice(
     data?.sale,
-    channelsData?.channels
+    availableChannels
   );
   const saleChannelsChoices: ChannelSaleData[] = createSortedChannelsDataFromSale(
     data?.sale

src/discounts/views/VoucherCreate/VoucherCreate.tsx

@@ -1,9 +1,9 @@
-import { useChannelsList } from "@saleor/channels/queries";
 import { ChannelsAction } from "@saleor/channels/urls";
 import {
   ChannelVoucherData,
   createSortedVoucherData
 } 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";
@@ -42,9 +42,9 @@ export const VoucherCreateView: React.FC<VoucherCreateProps> = ({ params }) => {
     VoucherCreateUrlQueryParams
   >(navigate, params => voucherAddUrl(params), params);
 
-  const { data: channelsData } = useChannelsList({});
+  const { availableChannels } = useAppChannel(false);
   const allChannels: ChannelVoucherData[] = createSortedVoucherData(
-    channelsData?.channels
+    availableChannels
   );
 
   const {

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -1,5 +1,4 @@
 import { Button, DialogContentText } from "@material-ui/core";
-import { useChannelsList } from "@saleor/channels/queries";
 import {
   ChannelVoucherData,
   createChannelsDataWithDiscountPrice,
@@ -120,11 +119,11 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     VoucherUrlQueryParams
   >(navigate, params => voucherUrl(id, params), params);
 
-  const { data: channelsData } = useChannelsList({});
+  const { channel, availableChannels } = useAppChannel();
 
   const allChannels: ChannelVoucherData[] = createChannelsDataWithDiscountPrice(
     data?.voucher,
-    channelsData?.channels
+    availableChannels
   );
   const voucherChannelsChoices: ChannelVoucherData[] = createSortedChannelsDataFromVoucher(
     data?.voucher
@@ -154,7 +153,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   const [updateChannels, updateChannelsOpts] = useVoucherChannelListingUpdate(
     {}
   );
-  const { channel } = useAppChannel();
 
   const handleVoucherDelete = (data: VoucherDelete) => {
     if (data.voucherDelete.errors.length === 0) {

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -31,6 +31,7 @@ import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPage
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import { SearchProductTypes_search_edges_node } from "@saleor/searches/types/SearchProductTypes";
 import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -310,6 +311,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                 <CardSpacer />
                 {isSimpleProduct ? (
                   <ChannelsAvailabilityCard
+                    managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
                     messages={{
                       hiddenLabel: intl.formatMessage({
                         defaultMessage: "Not published",

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -39,6 +39,7 @@ import {
   ListActions,
   ReorderAction
 } from "@saleor/types";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -404,6 +405,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                 <CardSpacer />
                 {isSimpleProduct ? (
                   <ChannelsAvailabilityCard
+                    managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
                     messages={{
                       hiddenLabel: intl.formatMessage({
                         defaultMessage: "Not published",

src/products/views/ProductCreate/ProductCreate.tsx

@@ -1,5 +1,5 @@
-import { useChannelsList } from "@saleor/channels/queries";
 import { ChannelData, createSortedChannelsData } from "@saleor/channels/utils";
+import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import { AttributeInput } from "@saleor/components/Attributes";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -120,9 +120,9 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
 
   const productTypes = mapEdgesToItems(searchProductTypesOpts?.data?.search);
 
-  const { data: channelsData } = useChannelsList({});
+  const { availableChannels } = useAppChannel(false);
   const allChannels: ChannelData[] = createSortedChannelsData(
-    channelsData?.channels
+    availableChannels
   );
 
   const {

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -3,7 +3,6 @@ import { DialogContentText, IconButton } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import { useAttributeValueDeleteMutation } from "@saleor/attributes/mutations";
 import ChannelsWithVariantsAvailabilityDialog from "@saleor/channels/components/ChannelsWithVariantsAvailabilityDialog";
-import { useChannelsList } from "@saleor/channels/queries";
 import {
   ChannelData,
   createChannelsDataWithPrice,
@@ -155,13 +154,11 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     productVariantCreateOpts
   ] = useVariantCreateMutation({});
 
-  const { data: channelsListData } = useChannelsList({});
+  const { availableChannels, channel } = useAppChannel();
-
   const { data, loading, refetch } = useProductDetails({
     displayLoader: true,
     variables: { id }
   });
-  const { channel } = useAppChannel();
   const limitOpts = useShopLimitsQuery({
     variables: {
       productVariants: true
@@ -253,7 +250,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
 
   const allChannels: ChannelData[] = createChannelsDataWithPrice(
     product,
-    channelsListData?.channels
+    availableChannels
   ).sort((channel, nextChannel) =>
     channel.name.localeCompare(nextChannel.name)
   );

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -1,4 +1,4 @@
-import { Channels_channels } from "@saleor/channels/types/Channels";
+import { BaseChannels_channels } from "@saleor/channels/types/BaseChannels";
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -70,7 +70,7 @@ export interface ShippingZoneDetailsPageProps
   onWarehouseAdd: () => void;
   onWeightRateAdd: () => void;
   onWeightRateEdit: (id: string) => void;
-  allChannels?: Channels_channels[];
+  allChannels?: BaseChannels_channels[];
 }
 
 function warehouseToChoice(

src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx

@@ -19,6 +19,7 @@ import PricingCard from "@saleor/shipping/components/PricingCard";
 import ShippingRateInfo from "@saleor/shipping/components/ShippingRateInfo";
 import { createChannelsChangeHandler } from "@saleor/shipping/handlers";
 import {
+  PermissionEnum,
   PostalCodeRuleInclusionTypeEnum,
   ShippingMethodTypeEnum
 } from "@saleor/types/globalTypes";
@@ -175,6 +176,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
               </div>
               <div>
                 <ChannelsAvailabilityCard
+                  managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
                   allChannelsCount={allChannelsCount}
                   selectedChannelsCount={shippingChannels?.length}
                   channelsList={data.channelListings}

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx

@@ -27,6 +27,7 @@ import {
 } from "@saleor/shipping/types/ShippingZone";
 import { ListActions, ListProps } from "@saleor/types";
 import {
+  PermissionEnum,
   PostalCodeRuleInclusionTypeEnum,
   ShippingMethodTypeEnum
 } from "@saleor/types/globalTypes";
@@ -203,6 +204,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
               </div>
               <div>
                 <ChannelsAvailabilityCard
+                  managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
                   allChannelsCount={allChannelsCount}
                   selectedChannelsCount={shippingChannels?.length}
                   channelsList={data.channelListings.map(channel => ({

src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx

@@ -1,4 +1,4 @@
-import { Channels_channels } from "@saleor/channels/types/Channels";
+import { BaseChannels_channels } from "@saleor/channels/types/BaseChannels";
 import CardSpacer from "@saleor/components/CardSpacer";
 import MultiAutocompleteSelectField, {
   MultiAutocompleteChoiceType
@@ -30,7 +30,7 @@ const messages = defineMessages({
 interface ChannelsSectionProps {
   onChange: FormChange;
   selectedChannels: string[];
-  allChannels?: Channels_channels[];
+  allChannels?: BaseChannels_channels[];
   channelsDisplayValues: MultiAutocompleteChoiceType[];
 }
 

src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent, Divider } from "@material-ui/core";
-import { Channels_channels } from "@saleor/channels/types/Channels";
+import { BaseChannels_channels } from "@saleor/channels/types/BaseChannels";
 import CardTitle from "@saleor/components/CardTitle";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import Skeleton from "@saleor/components/Skeleton";
@@ -29,7 +29,7 @@ export interface ShippingZoneSettingsCardProps {
   onWarehousesSearchChange: (query: string) => void;
   channelsDisplayValues: MultiAutocompleteChoiceType[];
   onChannelChange: FormChange;
-  allChannels?: Channels_channels[];
+  allChannels?: BaseChannels_channels[];
   loading: boolean;
 }
 

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -1,5 +1,4 @@
 import { DialogContentText } from "@material-ui/core";
-import { useChannelsList } from "@saleor/channels/queries";
 import ActionDialog from "@saleor/components/ActionDialog";
 import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import NotFoundPage from "@saleor/components/NotFoundPage";
@@ -70,13 +69,11 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
     }
   );
 
-  const { data: channelsList } = useChannelsList({});
-
   const { data, loading } = useShippingZone({
     displayLoader: true,
     variables: { id, ...paginationState }
   });
-  const { channel } = useAppChannel();
+  const { availableChannels, channel } = useAppChannel();
 
   const [openModal, closeModal] = createDialogActionHandlers<
     ShippingZoneUrlDialog,
@@ -197,7 +194,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
           })
         }
         onSubmit={handleSubmit}
-        allChannels={channelsList?.channels}
+        allChannels={availableChannels}
         onWarehouseAdd={() => openModal("add-warehouse")}
         onWeightRateAdd={() => navigate(shippingWeightRatesUrl(id))}
         onWeightRateEdit={rateId =>