djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use available channels from context (#1115)

Browse source 
* Use available channels from context

* Allow to specify manage channel availability permissions
This commit is contained in:
Jakub Majorek 2021-05-18 12:08:44 +02:00 committed by GitHub
parent 9f71106f32
commit 1a9b55715f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 89 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/channels/ChannelsWithVariantsAvailabilityCard/ChannelsWithVariantsAvailabilityCard.tsx
View file

@ -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}

24
src/channels/utils.ts
View file

@ -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)
);

2
src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
View file

@ -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}

2
src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
View file

@ -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",

8
src/collections/views/CollectionCreate.tsx
View file

@ -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())}

8
src/collections/views/CollectionDetails.tsx
View file

@ -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}

1
src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx
View file

@ -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

4
src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.tsx
View file

@ -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

10
src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
View file

@ -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"

6
src/discounts/components/SaleCreatePage/SaleCreatePage.tsx
View file

@ -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 => ({

6
src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
View file

@ -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 => ({

3
src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx
View file

@ -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 => ({

2
src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
View file

@ -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 => ({

6
src/discounts/views/SaleCreate/SaleCreate.tsx
View file

@ -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 {

6
src/discounts/views/SaleDetails/SaleDetails.tsx
View file

@ -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

6
src/discounts/views/VoucherCreate/VoucherCreate.tsx
View file

@ -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 {

6
src/discounts/views/VoucherDetails/VoucherDetails.tsx
View file

@ -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) {

2
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -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",

2
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -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",

6
src/products/views/ProductCreate/ProductCreate.tsx
View file

@ -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 {

7
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -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)
);

4
src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
View file

@ -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(

2
src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
View file

@ -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}

2
src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
View file

@ -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 => ({

4
src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx
View file

@ -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[];
}

4
src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.tsx
View file

@ -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;
}

7
src/shipping/views/ShippingZoneDetails/index.tsx
View file

@ -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 =>