Fix pagination errors on voucher and sale pages (#2317)

* Fix pagination errors on voucher and sale pages

* Update messages on voucher and sale pages

* Update changelog with pagination fix

* Update test snapshots of voucher and sale pages

* Update types of voucher and sale pages

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix no product error on unconfirmed order lines - #2324 by @orzechdev
 - Enable save button on discount pages - #2319 by @orzechdev
 - Enable save button on page pages - #2325 by @orzechdev
+- Fix pagination errors on voucher and sale pages - #2317 by @orzechdev
 
 ## 3.4
 

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -13,6 +13,7 @@ import {
   createSaleChannelsChangeHandler,
   createSaleUpdateHandler,
 } from "@saleor/discounts/handlers";
+import { itemsQuantityMessages } from "@saleor/discounts/translations";
 import { saleListUrl } from "@saleor/discounts/urls";
 import { SALE_UPDATE_FORM_ID } from "@saleor/discounts/views/SaleDetails/types";
 import {
@@ -30,7 +31,7 @@ import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTr
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { maybe, splitDateTime } from "../../../misc";
+import { splitDateTime } from "../../../misc";
 import { ChannelProps, ListProps, TabListActions } from "../../../types";
 import DiscountCategories from "../DiscountCategories";
 import DiscountCollections from "../DiscountCollections";
@@ -64,6 +65,8 @@ export enum SaleDetailsPageTab {
   variants = "variants",
 }
 
+export type SaleTabItemsCount = Partial<Record<SaleDetailsPageTab, number>>;
+
 export interface SaleDetailsPageProps
   extends Pick<ListProps, Exclude<keyof ListProps, "getRowHref">>,
     TabListActions<
@@ -74,6 +77,7 @@ export interface SaleDetailsPageProps
     >,
     ChannelProps {
   activeTab: SaleDetailsPageTab;
+  tabItemsCount: SaleTabItemsCount;
   errors: DiscountErrorFragment[];
   sale: SaleDetailsFragment;
   allChannelsCount: number;
@@ -101,6 +105,7 @@ const VariantsTab = Tab(SaleDetailsPageTab.variants);
 
 const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
   activeTab,
+  tabItemsCount = {},
   allChannelsCount,
   channelListings = [],
   disabled,
@@ -205,78 +210,40 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                 <CardSpacer />
                 <TabContainer>
                   <CategoriesTab
+                    testId="categories-tab"
                     isActive={activeTab === SaleDetailsPageTab.categories}
                     changeTab={onTabClick}
                   >
-                    {intl.formatMessage(
+                    {intl.formatMessage(itemsQuantityMessages.categories, {
-                      {
+                      quantity: tabItemsCount.categories?.toString() || "…",
-                        id: "ppLwx3",
+                    })}
-                        defaultMessage: "Categories ({quantity})",
-                        description: "number of categories",
-                      },
-                      {
-                        quantity: maybe(
-                          () => sale.categories.totalCount.toString(),
-                          "…",
-                        ),
-                      },
-                    )}
                   </CategoriesTab>
                   <CollectionsTab
+                    testId="collections-tab"
                     isActive={activeTab === SaleDetailsPageTab.collections}
                     changeTab={onTabClick}
                   >
-                    {intl.formatMessage(
+                    {intl.formatMessage(itemsQuantityMessages.collections, {
-                      {
+                      quantity: tabItemsCount.collections?.toString() || "…",
-                        id: "QdGzUf",
+                    })}
-                        defaultMessage: "Collections ({quantity})",
-                        description: "number of collections",
-                      },
-                      {
-                        quantity: maybe(
-                          () => sale.collections.totalCount.toString(),
-                          "…",
-                        ),
-                      },
-                    )}
                   </CollectionsTab>
                   <ProductsTab
                     testId="products-tab"
                     isActive={activeTab === SaleDetailsPageTab.products}
                     changeTab={onTabClick}
                   >
-                    {intl.formatMessage(
+                    {intl.formatMessage(itemsQuantityMessages.products, {
-                      {
+                      quantity: tabItemsCount.products?.toString() || "…",
-                        id: "bNw8PM",
+                    })}
-                        defaultMessage: "Products ({quantity})",
-                        description: "number of products",
-                      },
-                      {
-                        quantity: maybe(
-                          () => sale.products.totalCount.toString(),
-                          "…",
-                        ),
-                      },
-                    )}
                   </ProductsTab>
                   <VariantsTab
                     testId="variants-tab"
                     isActive={activeTab === SaleDetailsPageTab.variants}
                     changeTab={onTabClick}
                   >
-                    {intl.formatMessage(
+                    {intl.formatMessage(itemsQuantityMessages.variants, {
-                      {
+                      quantity: tabItemsCount.variants?.toString() || "…",
-                        id: "HVlMK2",
+                    })}
-                        defaultMessage: "Variants ({quantity})",
-                        description: "number of variants",
-                      },
-                      {
-                        quantity: maybe(
-                          () => sale.variants.totalCount.toString(),
-                          "…",
-                        ),
-                      },
-                    )}
                   </VariantsTab>
                 </TabContainer>
                 <CardSpacer />

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -16,6 +16,7 @@ import {
   createDiscountTypeChangeHandler,
   createVoucherUpdateHandler,
 } from "@saleor/discounts/handlers";
+import { itemsQuantityMessages } from "@saleor/discounts/translations";
 import { DiscountTypeEnum, RequirementsPicker } from "@saleor/discounts/types";
 import { voucherListUrl } from "@saleor/discounts/urls";
 import {
@@ -33,7 +34,7 @@ import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTr
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { maybe, splitDateTime } from "../../../misc";
+import { splitDateTime } from "../../../misc";
 import { ChannelProps, ListProps, TabListActions } from "../../../types";
 import DiscountCategories from "../DiscountCategories";
 import DiscountCollections from "../DiscountCollections";
@@ -52,6 +53,10 @@ export enum VoucherDetailsPageTab {
   products = "products",
 }
 
+export type VoucherTabItemsCount = Partial<
+  Record<VoucherDetailsPageTab, number>
+>;
+
 export interface VoucherDetailsPageFormData extends MetadataFormData {
   applyOncePerCustomer: boolean;
   applyOncePerOrder: boolean;
@@ -79,6 +84,7 @@ export interface VoucherDetailsPageProps
     >,
     ChannelProps {
   activeTab: VoucherDetailsPageTab;
+  tabItemsCount: VoucherTabItemsCount;
   errors: DiscountErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   voucher: VoucherDetailsFragment;
@@ -105,6 +111,7 @@ const ProductsTab = Tab(VoucherDetailsPageTab.products);
 
 const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   activeTab,
+  tabItemsCount = {},
   allChannelsCount,
   channelListings = [],
   disabled,
@@ -246,19 +253,9 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                         }
                         changeTab={onTabClick}
                       >
-                        {intl.formatMessage(
+                        {intl.formatMessage(itemsQuantityMessages.categories, {
-                          {
+                          quantity: tabItemsCount.categories?.toString() || "…",
-                            id: "ppLwx3",
+                        })}
-                            defaultMessage: "Categories ({quantity})",
-                            description: "number of categories",
-                          },
-                          {
-                            quantity: maybe(
-                              () => voucher.categories.totalCount.toString(),
-                              "…",
-                            ),
-                          },
-                        )}
                       </CategoriesTab>
                       <CollectionsTab
                         isActive={
@@ -266,37 +263,18 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                         }
                         changeTab={onTabClick}
                       >
-                        {intl.formatMessage(
+                        {intl.formatMessage(itemsQuantityMessages.collections, {
-                          {
+                          quantity:
-                            id: "QdGzUf",
+                            tabItemsCount.collections?.toString() || "…",
-                            defaultMessage: "Collections ({quantity})",
+                        })}
-                            description: "number of collections",
-                          },
-                          {
-                            quantity: maybe(
-                              () => voucher.collections.totalCount.toString(),
-                              "…",
-                            ),
-                          },
-                        )}
                       </CollectionsTab>
                       <ProductsTab
                         isActive={activeTab === VoucherDetailsPageTab.products}
                         changeTab={onTabClick}
                       >
-                        {intl.formatMessage(
+                        {intl.formatMessage(itemsQuantityMessages.products, {
-                          {
+                          quantity: tabItemsCount.products?.toString() || "…",
-                            id: "bNw8PM",
+                        })}
-                            defaultMessage: "Products ({quantity})",
-                            description: "number of products",
-                          },
-                          {
-                            quantity: maybe(
-                              () => voucher.products.totalCount.toString(),
-                              "…",
-                            ),
-                          },
-                        )}
                       </ProductsTab>
                     </TabContainer>
                     <CardSpacer />
@@ -342,7 +320,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                 <CardSpacer />
                 {data.discountType.toString() === "SHIPPING" ? (
                   <CountryList
-                    countries={maybe(() => voucher.countries)}
+                    countries={voucher?.countries}
                     disabled={disabled}
                     emptyText={intl.formatMessage({
                       id: "jd/LWa",

src/discounts/fixtures.ts

@@ -211,6 +211,22 @@ export const sale: SaleDetailsFragment = {
   __typename: "Sale",
   metadata: [],
   privateMetadata: [],
+  categoriesCount: {
+    __typename: "CategoryCountableConnection",
+    totalCount: 2,
+  },
+  collectionsCount: {
+    __typename: "CollectionCountableConnection",
+    totalCount: 4,
+  },
+  productsCount: {
+    __typename: "ProductCountableConnection",
+    totalCount: 4,
+  },
+  variantsCount: {
+    __typename: "ProductVariantCountableConnection",
+    totalCount: 3,
+  },
   categories: {
     __typename: "CategoryCountableConnection",
     edges: [
@@ -234,7 +250,6 @@ export const sale: SaleDetailsFragment = {
       hasPreviousPage: false,
       startCursor: null,
     },
-    totalCount: 2,
   },
   channelListings: [
     {
@@ -273,7 +288,6 @@ export const sale: SaleDetailsFragment = {
       hasPreviousPage: false,
       startCursor: null,
     },
-    totalCount: 4,
   },
   endDate: null,
   id: "U2FsZTo1",
@@ -421,7 +435,6 @@ export const sale: SaleDetailsFragment = {
       hasPreviousPage: false,
       startCursor: "YXJyYXljb25uZWN0aW9uOjA=",
     },
-    totalCount: 4,
   },
   variants: {
     edges: [
@@ -561,7 +574,6 @@ export const sale: SaleDetailsFragment = {
       startCursor: "W251bGwsICIxMDQwNDk0NiJd",
       __typename: "PageInfo",
     },
-    totalCount: 3,
     __typename: "ProductVariantCountableConnection",
   },
   startDate: "2019-01-03",
@@ -575,6 +587,18 @@ export const voucherDetails: VoucherDetailsFragment = {
   applyOncePerCustomer: false,
   applyOncePerOrder: false,
   onlyForStaff: false,
+  categoriesCount: {
+    __typename: "CategoryCountableConnection",
+    totalCount: 0,
+  },
+  collectionsCount: {
+    __typename: "CollectionCountableConnection",
+    totalCount: 0,
+  },
+  productsCount: {
+    __typename: "ProductCountableConnection",
+    totalCount: 0,
+  },
   categories: {
     __typename: "CategoryCountableConnection",
     edges: [],
@@ -585,7 +609,6 @@ export const voucherDetails: VoucherDetailsFragment = {
       hasPreviousPage: false,
       startCursor: "YXJyYXljb25uZWN0aW9uOjA=",
     },
-    totalCount: 0,
   },
   channelListings: [
     {
@@ -617,7 +640,6 @@ export const voucherDetails: VoucherDetailsFragment = {
       hasPreviousPage: false,
       startCursor: "YXJyYXljb25uZWN0aW9uOjA=",
     },
-    totalCount: 0,
   },
   countries: [
     {
@@ -640,7 +662,6 @@ export const voucherDetails: VoucherDetailsFragment = {
       hasPreviousPage: false,
       startCursor: "YXJyYXljb25uZWN0aW9uOjA=",
     },
-    totalCount: 0,
   },
   startDate: "2018-11-27",
   type: VoucherTypeEnum.ENTIRE_ORDER,

src/discounts/mutations.ts

@@ -30,6 +30,10 @@ export const saleCataloguesAdd = gql`
     $before: String
     $first: Int
     $last: Int
+    $includeVariants: Boolean!
+    $includeProducts: Boolean!
+    $includeCollections: Boolean!
+    $includeCategories: Boolean!
   ) {
     saleCataloguesAdd(id: $id, input: $input) {
       errors {
@@ -50,6 +54,10 @@ export const saleCataloguesRemove = gql`
     $before: String
     $first: Int
     $last: Int
+    $includeVariants: Boolean!
+    $includeProducts: Boolean!
+    $includeCollections: Boolean!
+    $includeCategories: Boolean!
   ) {
     saleCataloguesRemove(id: $id, input: $input) {
       errors {
@@ -148,6 +156,9 @@ export const voucherCataloguesAdd = gql`
     $before: String
     $first: Int
     $last: Int
+    $includeProducts: Boolean!
+    $includeCollections: Boolean!
+    $includeCategories: Boolean!
   ) {
     voucherCataloguesAdd(id: $id, input: $input) {
       errors {
@@ -168,6 +179,9 @@ export const voucherCataloguesRemove = gql`
     $before: String
     $first: Int
     $last: Int
+    $includeProducts: Boolean!
+    $includeCollections: Boolean!
+    $includeCategories: Boolean!
   ) {
     voucherCataloguesRemove(id: $id, input: $input) {
       errors {

src/discounts/queries.ts

@@ -69,6 +69,10 @@ export const saleDetails = gql`
     $before: String
     $first: Int
     $last: Int
+    $includeVariants: Boolean!
+    $includeProducts: Boolean!
+    $includeCollections: Boolean!
+    $includeCategories: Boolean!
   ) {
     sale(id: $id) {
       ...SaleDetails
@@ -83,6 +87,9 @@ export const voucherDetails = gql`
     $before: String
     $first: Int
     $last: Int
+    $includeProducts: Boolean!
+    $includeCollections: Boolean!
+    $includeCategories: Boolean!
   ) {
     voucher(id: $id) {
       ...VoucherDetails

src/discounts/translations.ts

@@ -19,6 +19,29 @@ const messages = defineMessages({
   },
 });
 
+export const itemsQuantityMessages = defineMessages({
+  categories: {
+    id: "ppLwx3",
+    defaultMessage: "Categories ({quantity})",
+    description: "number of categories",
+  },
+  collections: {
+    id: "QdGzUf",
+    defaultMessage: "Collections ({quantity})",
+    description: "number of collections",
+  },
+  products: {
+    id: "bNw8PM",
+    defaultMessage: "Products ({quantity})",
+    description: "number of products",
+  },
+  variants: {
+    id: "HVlMK2",
+    defaultMessage: "Variants ({quantity})",
+    description: "number of variants",
+  },
+});
+
 export const translateVoucherTypes = (intl: IntlShape) => ({
   [VoucherTypeEnum.SHIPPING]: intl.formatMessage(messages.shipment),
   [VoucherTypeEnum.ENTIRE_ORDER]: intl.formatMessage(messages.order),

src/discounts/views/SaleDetails/SaleDetails.tsx

@@ -16,6 +16,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "@saleor/config";
 import SaleDetailsPage, {
   SaleDetailsPageTab,
+  SaleTabItemsCount,
 } from "@saleor/discounts/components/SaleDetailsPage";
 import {
   saleListUrl,
@@ -24,6 +25,7 @@ import {
   SaleUrlQueryParams,
 } from "@saleor/discounts/urls";
 import {
+  SaleDetailsQueryVariables,
   useSaleCataloguesAddMutation,
   useSaleCataloguesRemoveMutation,
   useSaleDeleteMutation,
@@ -107,11 +109,25 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     setActiveTab(tab);
   };
 
+  const detailsQueryInclude: Pick<
+    SaleDetailsQueryVariables,
+    | "includeCategories"
+    | "includeCollections"
+    | "includeProducts"
+    | "includeVariants"
+  > = {
+    includeCategories: activeTab === SaleDetailsPageTab.categories,
+    includeCollections: activeTab === SaleDetailsPageTab.collections,
+    includeProducts: activeTab === SaleDetailsPageTab.products,
+    includeVariants: activeTab === SaleDetailsPageTab.variants,
+  };
+
   const { data, loading } = useSaleDetailsQuery({
     displayLoader: true,
     variables: {
       id,
       ...paginationState,
+      ...detailsQueryInclude,
     },
   });
 
@@ -212,6 +228,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     saleCataloguesRemove({
       variables: {
         ...paginationState,
+        ...detailsQueryInclude,
         id,
         input: {
           categories: ids,
@@ -223,6 +240,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     saleCataloguesRemove({
       variables: {
         ...paginationState,
+        ...detailsQueryInclude,
         id,
         input: {
           collections: ids,
@@ -234,6 +252,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     saleCataloguesRemove({
       variables: {
         ...paginationState,
+        ...detailsQueryInclude,
         id,
         input: {
           products: ids,
@@ -245,6 +264,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     saleCataloguesRemove({
       variables: {
         ...paginationState,
+        ...detailsQueryInclude,
         id,
         input: {
           variants: ids,
@@ -257,6 +277,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     paginationState,
   );
 
+  const tabItemsCount: SaleTabItemsCount = {
+    categories: data?.sale?.categoriesCount?.totalCount,
+    collections: data?.sale?.collectionsCount?.totalCount,
+    products: data?.sale?.productsCount?.totalCount,
+    variants: data?.sale?.variantsCount?.totalCount,
+  };
+
   const handleUpdate = createUpdateHandler(
     data?.sale,
     saleChannelsChoices,
@@ -323,6 +350,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
           })
         }
         activeTab={activeTab}
+        tabItemsCount={tabItemsCount}
         onTabClick={changeTab}
         onSubmit={handleSubmit}
         onRemove={() => openModal("remove")}
@@ -388,6 +416,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
           saleCataloguesAdd({
             variables: {
               ...paginationState,
+              ...detailsQueryInclude,
               id,
               input: {
                 variants,
@@ -411,6 +440,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
           saleCataloguesAdd({
             variables: {
               ...paginationState,
+              ...detailsQueryInclude,
               id,
               input: {
                 products,
@@ -437,6 +467,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
           saleCataloguesAdd({
             variables: {
               ...paginationState,
+              ...detailsQueryInclude,
               id,
               input: {
                 categories,
@@ -460,6 +491,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
           saleCataloguesAdd({
             variables: {
               ...paginationState,
+              ...detailsQueryInclude,
               id,
               input: {
                 collections,

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -16,6 +16,7 @@ import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "@saleor/config";
 import DiscountCountrySelectDialog from "@saleor/discounts/components/DiscountCountrySelectDialog";
 import VoucherDetailsPage, {
   VoucherDetailsPageTab,
+  VoucherTabItemsCount,
 } from "@saleor/discounts/components/VoucherDetailsPage";
 import {
   voucherListUrl,
@@ -32,6 +33,7 @@ import {
   useVoucherDeleteMutation,
   useVoucherDetailsQuery,
   useVoucherUpdateMutation,
+  VoucherDetailsQueryVariables,
 } from "@saleor/graphql";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useChannels from "@saleor/hooks/useChannels";
@@ -109,11 +111,21 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     setActiveTab(tab);
   };
 
+  const detailsQueryInclude: Pick<
+    VoucherDetailsQueryVariables,
+    "includeCategories" | "includeCollections" | "includeProducts"
+  > = {
+    includeCategories: activeTab === VoucherDetailsPageTab.categories,
+    includeCollections: activeTab === VoucherDetailsPageTab.collections,
+    includeProducts: activeTab === VoucherDetailsPageTab.products,
+  };
+
   const { data, loading } = useVoucherDetailsQuery({
     displayLoader: true,
     variables: {
       id,
       ...paginationState,
+      ...detailsQueryInclude,
     },
   });
 
@@ -235,6 +247,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     voucherCataloguesRemove({
       variables: {
         ...paginationState,
+        ...detailsQueryInclude,
         id,
         input: {
           categories: ids,
@@ -246,6 +259,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     voucherCataloguesRemove({
       variables: {
         ...paginationState,
+        ...detailsQueryInclude,
         id,
         input: {
           collections: ids,
@@ -257,6 +271,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     voucherCataloguesRemove({
       variables: {
         ...paginationState,
+        ...detailsQueryInclude,
         id,
         input: {
           products: ids,
@@ -269,6 +284,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     paginationState,
   );
 
+  const tabItemsCount: VoucherTabItemsCount = {
+    categories: data?.voucher?.categoriesCount?.totalCount,
+    collections: data?.voucher?.collectionsCount?.totalCount,
+    products: data?.voucher?.productsCount?.totalCount,
+  };
+
   return (
     <PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
       <WindowTitle title={intl.formatMessage(sectionNames.vouchers)} />
@@ -338,6 +359,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           })
         }
         activeTab={activeTab}
+        tabItemsCount={tabItemsCount}
         onTabClick={changeTab}
         onSubmit={handleSubmit}
         onRemove={() => openModal("remove")}
@@ -409,6 +431,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           voucherCataloguesAdd({
             variables: {
               ...paginationState,
+              ...detailsQueryInclude,
               id,
               input: {
                 categories,
@@ -432,6 +455,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           voucherCataloguesAdd({
             variables: {
               ...paginationState,
+              ...detailsQueryInclude,
               id,
               input: {
                 collections,
@@ -472,6 +496,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           voucherCataloguesAdd({
             variables: {
               ...paginationState,
+              ...detailsQueryInclude,
               id,
               input: {
                 products,

src/fragments/discounts.ts

@@ -24,7 +24,20 @@ export const saleFragment = gql`
 export const saleDetailsFragment = gql`
   fragment SaleDetails on Sale {
     ...Sale
-    variants(after: $after, before: $before, first: $first, last: $last) {
+    variantsCount: variants {
+      totalCount
+    }
+    productsCount: products {
+      totalCount
+    }
+    collectionsCount: collections {
+      totalCount
+    }
+    categoriesCount: categories {
+      totalCount
+    }
+    variants(after: $after, before: $before, first: $first, last: $last)
+      @include(if: $includeVariants) {
       edges {
         node {
           id
@@ -48,9 +61,9 @@ export const saleDetailsFragment = gql`
       pageInfo {
         ...PageInfo
       }
-      totalCount
     }
-    products(after: $after, before: $before, first: $first, last: $last) {
+    products(after: $after, before: $before, first: $first, last: $last)
+      @include(if: $includeProducts) {
       edges {
         node {
           id
@@ -70,9 +83,9 @@ export const saleDetailsFragment = gql`
       pageInfo {
         ...PageInfo
       }
-      totalCount
     }
-    categories(after: $after, before: $before, first: $first, last: $last) {
+    categories(after: $after, before: $before, first: $first, last: $last)
+      @include(if: $includeCategories) {
       edges {
         node {
           id
@@ -85,9 +98,9 @@ export const saleDetailsFragment = gql`
       pageInfo {
         ...PageInfo
       }
-      totalCount
     }
-    collections(after: $after, before: $before, first: $first, last: $last) {
+    collections(after: $after, before: $before, first: $first, last: $last)
+      @include(if: $includeCollections) {
       edges {
         node {
           id
@@ -100,7 +113,6 @@ export const saleDetailsFragment = gql`
       pageInfo {
         ...PageInfo
       }
-      totalCount
     }
   }
 `;
@@ -146,7 +158,17 @@ export const voucherDetailsFragment = gql`
     applyOncePerOrder
     applyOncePerCustomer
     onlyForStaff
-    products(after: $after, before: $before, first: $first, last: $last) {
+    productsCount: products {
+      totalCount
+    }
+    collectionsCount: collections {
+      totalCount
+    }
+    categoriesCount: categories {
+      totalCount
+    }
+    products(after: $after, before: $before, first: $first, last: $last)
+      @include(if: $includeProducts) {
       edges {
         node {
           id
@@ -163,12 +185,12 @@ export const voucherDetailsFragment = gql`
           }
         }
       }
-      totalCount
       pageInfo {
         ...PageInfo
       }
     }
-    collections(after: $after, before: $before, first: $first, last: $last) {
+    collections(after: $after, before: $before, first: $first, last: $last)
+      @include(if: $includeCollections) {
       edges {
         node {
           id
@@ -178,12 +200,12 @@ export const voucherDetailsFragment = gql`
           }
         }
       }
-      totalCount
       pageInfo {
         ...PageInfo
       }
     }
-    categories(after: $after, before: $before, first: $first, last: $last) {
+    categories(after: $after, before: $before, first: $first, last: $last)
+      @include(if: $includeCategories) {
       edges {
         node {
           id
@@ -193,7 +215,6 @@ export const voucherDetailsFragment = gql`
           }
         }
       }
-      totalCount
       pageInfo {
         ...PageInfo
       }

src/graphql/hooks.generated.ts

@@ -357,7 +357,19 @@ export const PageInfoFragmentDoc = gql`
 export const SaleDetailsFragmentDoc = gql`
     fragment SaleDetails on Sale {
   ...Sale
-  variants(after: $after, before: $before, first: $first, last: $last) {
+  variantsCount: variants {
+    totalCount
+  }
+  productsCount: products {
+    totalCount
+  }
+  collectionsCount: collections {
+    totalCount
+  }
+  categoriesCount: categories {
+    totalCount
+  }
+  variants(after: $after, before: $before, first: $first, last: $last) @include(if: $includeVariants) {
     edges {
       node {
         id
@@ -381,9 +393,8 @@ export const SaleDetailsFragmentDoc = gql`
     pageInfo {
       ...PageInfo
     }
-    totalCount
   }
-  products(after: $after, before: $before, first: $first, last: $last) {
+  products(after: $after, before: $before, first: $first, last: $last) @include(if: $includeProducts) {
     edges {
       node {
         id
@@ -403,9 +414,8 @@ export const SaleDetailsFragmentDoc = gql`
     pageInfo {
       ...PageInfo
     }
-    totalCount
   }
-  categories(after: $after, before: $before, first: $first, last: $last) {
+  categories(after: $after, before: $before, first: $first, last: $last) @include(if: $includeCategories) {
     edges {
       node {
         id
@@ -418,9 +428,8 @@ export const SaleDetailsFragmentDoc = gql`
     pageInfo {
       ...PageInfo
     }
-    totalCount
   }
-  collections(after: $after, before: $before, first: $first, last: $last) {
+  collections(after: $after, before: $before, first: $first, last: $last) @include(if: $includeCollections) {
     edges {
       node {
         id
@@ -433,7 +442,6 @@ export const SaleDetailsFragmentDoc = gql`
     pageInfo {
       ...PageInfo
     }
-    totalCount
   }
 }
     ${SaleFragmentDoc}
@@ -479,7 +487,16 @@ export const VoucherDetailsFragmentDoc = gql`
   applyOncePerOrder
   applyOncePerCustomer
   onlyForStaff
-  products(after: $after, before: $before, first: $first, last: $last) {
+  productsCount: products {
+    totalCount
+  }
+  collectionsCount: collections {
+    totalCount
+  }
+  categoriesCount: categories {
+    totalCount
+  }
+  products(after: $after, before: $before, first: $first, last: $last) @include(if: $includeProducts) {
     edges {
       node {
         id
@@ -496,12 +513,11 @@ export const VoucherDetailsFragmentDoc = gql`
         }
       }
     }
-    totalCount
     pageInfo {
       ...PageInfo
     }
   }
-  collections(after: $after, before: $before, first: $first, last: $last) {
+  collections(after: $after, before: $before, first: $first, last: $last) @include(if: $includeCollections) {
     edges {
       node {
         id
@@ -511,12 +527,11 @@ export const VoucherDetailsFragmentDoc = gql`
         }
       }
     }
-    totalCount
     pageInfo {
       ...PageInfo
     }
   }
-  categories(after: $after, before: $before, first: $first, last: $last) {
+  categories(after: $after, before: $before, first: $first, last: $last) @include(if: $includeCategories) {
     edges {
       node {
         id
@@ -526,7 +541,6 @@ export const VoucherDetailsFragmentDoc = gql`
         }
       }
     }
-    totalCount
     pageInfo {
       ...PageInfo
     }
@@ -5817,7 +5831,7 @@ export type SaleUpdateMutationHookResult = ReturnType<typeof useSaleUpdateMutati
 export type SaleUpdateMutationResult = Apollo.MutationResult<Types.SaleUpdateMutation>;
 export type SaleUpdateMutationOptions = Apollo.BaseMutationOptions<Types.SaleUpdateMutation, Types.SaleUpdateMutationVariables>;
 export const SaleCataloguesAddDocument = gql`
-    mutation SaleCataloguesAdd($input: CatalogueInput!, $id: ID!, $after: String, $before: String, $first: Int, $last: Int) {
+    mutation SaleCataloguesAdd($input: CatalogueInput!, $id: ID!, $after: String, $before: String, $first: Int, $last: Int, $includeVariants: Boolean!, $includeProducts: Boolean!, $includeCollections: Boolean!, $includeCategories: Boolean!) {
   saleCataloguesAdd(id: $id, input: $input) {
     errors {
       ...DiscountError
@@ -5850,6 +5864,10 @@ export type SaleCataloguesAddMutationFn = Apollo.MutationFunction<Types.SaleCata
  *      before: // value for 'before'
  *      first: // value for 'first'
  *      last: // value for 'last'
+ *      includeVariants: // value for 'includeVariants'
+ *      includeProducts: // value for 'includeProducts'
+ *      includeCollections: // value for 'includeCollections'
+ *      includeCategories: // value for 'includeCategories'
  *   },
  * });
  */
@@ -5861,7 +5879,7 @@ export type SaleCataloguesAddMutationHookResult = ReturnType<typeof useSaleCatal
 export type SaleCataloguesAddMutationResult = Apollo.MutationResult<Types.SaleCataloguesAddMutation>;
 export type SaleCataloguesAddMutationOptions = Apollo.BaseMutationOptions<Types.SaleCataloguesAddMutation, Types.SaleCataloguesAddMutationVariables>;
 export const SaleCataloguesRemoveDocument = gql`
-    mutation SaleCataloguesRemove($input: CatalogueInput!, $id: ID!, $after: String, $before: String, $first: Int, $last: Int) {
+    mutation SaleCataloguesRemove($input: CatalogueInput!, $id: ID!, $after: String, $before: String, $first: Int, $last: Int, $includeVariants: Boolean!, $includeProducts: Boolean!, $includeCollections: Boolean!, $includeCategories: Boolean!) {
   saleCataloguesRemove(id: $id, input: $input) {
     errors {
       ...DiscountError
@@ -5894,6 +5912,10 @@ export type SaleCataloguesRemoveMutationFn = Apollo.MutationFunction<Types.SaleC
  *      before: // value for 'before'
  *      first: // value for 'first'
  *      last: // value for 'last'
+ *      includeVariants: // value for 'includeVariants'
+ *      includeProducts: // value for 'includeProducts'
+ *      includeCollections: // value for 'includeCollections'
+ *      includeCategories: // value for 'includeCategories'
  *   },
  * });
  */
@@ -6134,7 +6156,7 @@ export type VoucherUpdateMutationHookResult = ReturnType<typeof useVoucherUpdate
 export type VoucherUpdateMutationResult = Apollo.MutationResult<Types.VoucherUpdateMutation>;
 export type VoucherUpdateMutationOptions = Apollo.BaseMutationOptions<Types.VoucherUpdateMutation, Types.VoucherUpdateMutationVariables>;
 export const VoucherCataloguesAddDocument = gql`
-    mutation VoucherCataloguesAdd($input: CatalogueInput!, $id: ID!, $after: String, $before: String, $first: Int, $last: Int) {
+    mutation VoucherCataloguesAdd($input: CatalogueInput!, $id: ID!, $after: String, $before: String, $first: Int, $last: Int, $includeProducts: Boolean!, $includeCollections: Boolean!, $includeCategories: Boolean!) {
   voucherCataloguesAdd(id: $id, input: $input) {
     errors {
       ...DiscountError
@@ -6167,6 +6189,9 @@ export type VoucherCataloguesAddMutationFn = Apollo.MutationFunction<Types.Vouch
  *      before: // value for 'before'
  *      first: // value for 'first'
  *      last: // value for 'last'
+ *      includeProducts: // value for 'includeProducts'
+ *      includeCollections: // value for 'includeCollections'
+ *      includeCategories: // value for 'includeCategories'
  *   },
  * });
  */
@@ -6178,7 +6203,7 @@ export type VoucherCataloguesAddMutationHookResult = ReturnType<typeof useVouche
 export type VoucherCataloguesAddMutationResult = Apollo.MutationResult<Types.VoucherCataloguesAddMutation>;
 export type VoucherCataloguesAddMutationOptions = Apollo.BaseMutationOptions<Types.VoucherCataloguesAddMutation, Types.VoucherCataloguesAddMutationVariables>;
 export const VoucherCataloguesRemoveDocument = gql`
-    mutation VoucherCataloguesRemove($input: CatalogueInput!, $id: ID!, $after: String, $before: String, $first: Int, $last: Int) {
+    mutation VoucherCataloguesRemove($input: CatalogueInput!, $id: ID!, $after: String, $before: String, $first: Int, $last: Int, $includeProducts: Boolean!, $includeCollections: Boolean!, $includeCategories: Boolean!) {
   voucherCataloguesRemove(id: $id, input: $input) {
     errors {
       ...DiscountError
@@ -6211,6 +6236,9 @@ export type VoucherCataloguesRemoveMutationFn = Apollo.MutationFunction<Types.Vo
  *      before: // value for 'before'
  *      first: // value for 'first'
  *      last: // value for 'last'
+ *      includeProducts: // value for 'includeProducts'
+ *      includeCollections: // value for 'includeCollections'
+ *      includeCategories: // value for 'includeCategories'
  *   },
  * });
  */
@@ -6445,7 +6473,7 @@ export type VoucherListQueryHookResult = ReturnType<typeof useVoucherListQuery>;
 export type VoucherListLazyQueryHookResult = ReturnType<typeof useVoucherListLazyQuery>;
 export type VoucherListQueryResult = Apollo.QueryResult<Types.VoucherListQuery, Types.VoucherListQueryVariables>;
 export const SaleDetailsDocument = gql`
-    query SaleDetails($id: ID!, $after: String, $before: String, $first: Int, $last: Int) {
+    query SaleDetails($id: ID!, $after: String, $before: String, $first: Int, $last: Int, $includeVariants: Boolean!, $includeProducts: Boolean!, $includeCollections: Boolean!, $includeCategories: Boolean!) {
   sale(id: $id) {
     ...SaleDetails
   }
@@ -6469,6 +6497,10 @@ export const SaleDetailsDocument = gql`
  *      before: // value for 'before'
  *      first: // value for 'first'
  *      last: // value for 'last'
+ *      includeVariants: // value for 'includeVariants'
+ *      includeProducts: // value for 'includeProducts'
+ *      includeCollections: // value for 'includeCollections'
+ *      includeCategories: // value for 'includeCategories'
  *   },
  * });
  */
@@ -6484,7 +6516,7 @@ export type SaleDetailsQueryHookResult = ReturnType<typeof useSaleDetailsQuery>;
 export type SaleDetailsLazyQueryHookResult = ReturnType<typeof useSaleDetailsLazyQuery>;
 export type SaleDetailsQueryResult = Apollo.QueryResult<Types.SaleDetailsQuery, Types.SaleDetailsQueryVariables>;
 export const VoucherDetailsDocument = gql`
-    query VoucherDetails($id: ID!, $after: String, $before: String, $first: Int, $last: Int) {
+    query VoucherDetails($id: ID!, $after: String, $before: String, $first: Int, $last: Int, $includeProducts: Boolean!, $includeCollections: Boolean!, $includeCategories: Boolean!) {
   voucher(id: $id) {
     ...VoucherDetails
   }
@@ -6508,6 +6540,9 @@ export const VoucherDetailsDocument = gql`
  *      before: // value for 'before'
  *      first: // value for 'first'
  *      last: // value for 'last'
+ *      includeProducts: // value for 'includeProducts'
+ *      includeCollections: // value for 'includeCollections'
+ *      includeCategories: // value for 'includeCategories'
  *   },
  * });
  */

src/graphql/types.generated.ts

@@ -6236,10 +6236,14 @@ export type SaleCataloguesAddMutationVariables = Exact<{
   before?: InputMaybe<Scalars['String']>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  includeVariants: Scalars['Boolean'];
+  includeProducts: Scalars['Boolean'];
+  includeCollections: Scalars['Boolean'];
+  includeCategories: Scalars['Boolean'];
 }>;
 
 
-export type SaleCataloguesAddMutation = { __typename: 'Mutation', saleCataloguesAdd: { __typename: 'SaleAddCatalogues', errors: Array<{ __typename: 'DiscountError', code: DiscountErrorCode, field: string | null, channels: Array<string> | null, message: string | null }>, sale: { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, variants: { __typename: 'ProductVariantCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductVariantCountableEdge', node: { __typename: 'ProductVariant', id: string, name: string, product: { __typename: 'Product', id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories: { __typename: 'CategoryCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections: { __typename: 'CollectionCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null } | null };
+export type SaleCataloguesAddMutation = { __typename: 'Mutation', saleCataloguesAdd: { __typename: 'SaleAddCatalogues', errors: Array<{ __typename: 'DiscountError', code: DiscountErrorCode, field: string | null, channels: Array<string> | null, message: string | null }>, sale: { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, variantsCount: { __typename: 'ProductVariantCountableConnection', totalCount: number | null } | null, productsCount: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, collectionsCount: { __typename: 'CollectionCountableConnection', totalCount: number | null } | null, categoriesCount: { __typename: 'CategoryCountableConnection', totalCount: number | null } | null, variants?: { __typename: 'ProductVariantCountableConnection', edges: Array<{ __typename: 'ProductVariantCountableEdge', node: { __typename: 'ProductVariant', id: string, name: string, product: { __typename: 'Product', id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, products?: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories?: { __typename: 'CategoryCountableConnection', edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections?: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null } | null };
 
 export type SaleCataloguesRemoveMutationVariables = Exact<{
   input: CatalogueInput;
@@ -6248,10 +6252,14 @@ export type SaleCataloguesRemoveMutationVariables = Exact<{
   before?: InputMaybe<Scalars['String']>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  includeVariants: Scalars['Boolean'];
+  includeProducts: Scalars['Boolean'];
+  includeCollections: Scalars['Boolean'];
+  includeCategories: Scalars['Boolean'];
 }>;
 
 
-export type SaleCataloguesRemoveMutation = { __typename: 'Mutation', saleCataloguesRemove: { __typename: 'SaleRemoveCatalogues', errors: Array<{ __typename: 'DiscountError', code: DiscountErrorCode, field: string | null, channels: Array<string> | null, message: string | null }>, sale: { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, variants: { __typename: 'ProductVariantCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductVariantCountableEdge', node: { __typename: 'ProductVariant', id: string, name: string, product: { __typename: 'Product', id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories: { __typename: 'CategoryCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections: { __typename: 'CollectionCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null } | null };
+export type SaleCataloguesRemoveMutation = { __typename: 'Mutation', saleCataloguesRemove: { __typename: 'SaleRemoveCatalogues', errors: Array<{ __typename: 'DiscountError', code: DiscountErrorCode, field: string | null, channels: Array<string> | null, message: string | null }>, sale: { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, variantsCount: { __typename: 'ProductVariantCountableConnection', totalCount: number | null } | null, productsCount: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, collectionsCount: { __typename: 'CollectionCountableConnection', totalCount: number | null } | null, categoriesCount: { __typename: 'CategoryCountableConnection', totalCount: number | null } | null, variants?: { __typename: 'ProductVariantCountableConnection', edges: Array<{ __typename: 'ProductVariantCountableEdge', node: { __typename: 'ProductVariant', id: string, name: string, product: { __typename: 'Product', id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, products?: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories?: { __typename: 'CategoryCountableConnection', edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections?: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null } | null };
 
 export type SaleCreateMutationVariables = Exact<{
   input: SaleInput;
@@ -6305,10 +6313,13 @@ export type VoucherCataloguesAddMutationVariables = Exact<{
   before?: InputMaybe<Scalars['String']>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  includeProducts: Scalars['Boolean'];
+  includeCollections: Scalars['Boolean'];
+  includeCategories: Scalars['Boolean'];
 }>;
 
 
-export type VoucherCataloguesAddMutation = { __typename: 'Mutation', voucherCataloguesAdd: { __typename: 'VoucherAddCatalogues', errors: Array<{ __typename: 'DiscountError', code: DiscountErrorCode, field: string | null, channels: Array<string> | null, message: string | null }>, voucher: { __typename: 'Voucher', code: string, usageLimit: number | null, used: number, applyOncePerOrder: boolean, applyOncePerCustomer: boolean, onlyForStaff: boolean, id: string, startDate: any, endDate: any | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections: { __typename: 'CollectionCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories: { __typename: 'CategoryCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null } | null };
+export type VoucherCataloguesAddMutation = { __typename: 'Mutation', voucherCataloguesAdd: { __typename: 'VoucherAddCatalogues', errors: Array<{ __typename: 'DiscountError', code: DiscountErrorCode, field: string | null, channels: Array<string> | null, message: string | null }>, voucher: { __typename: 'Voucher', code: string, usageLimit: number | null, used: number, applyOncePerOrder: boolean, applyOncePerCustomer: boolean, onlyForStaff: boolean, id: string, startDate: any, endDate: any | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, productsCount: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, collectionsCount: { __typename: 'CollectionCountableConnection', totalCount: number | null } | null, categoriesCount: { __typename: 'CategoryCountableConnection', totalCount: number | null } | null, products?: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections?: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories?: { __typename: 'CategoryCountableConnection', edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null } | null };
 
 export type VoucherCataloguesRemoveMutationVariables = Exact<{
   input: CatalogueInput;
@@ -6317,10 +6328,13 @@ export type VoucherCataloguesRemoveMutationVariables = Exact<{
   before?: InputMaybe<Scalars['String']>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  includeProducts: Scalars['Boolean'];
+  includeCollections: Scalars['Boolean'];
+  includeCategories: Scalars['Boolean'];
 }>;
 
 
-export type VoucherCataloguesRemoveMutation = { __typename: 'Mutation', voucherCataloguesRemove: { __typename: 'VoucherRemoveCatalogues', errors: Array<{ __typename: 'DiscountError', code: DiscountErrorCode, field: string | null, channels: Array<string> | null, message: string | null }>, voucher: { __typename: 'Voucher', code: string, usageLimit: number | null, used: number, applyOncePerOrder: boolean, applyOncePerCustomer: boolean, onlyForStaff: boolean, id: string, startDate: any, endDate: any | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections: { __typename: 'CollectionCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories: { __typename: 'CategoryCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null } | null };
+export type VoucherCataloguesRemoveMutation = { __typename: 'Mutation', voucherCataloguesRemove: { __typename: 'VoucherRemoveCatalogues', errors: Array<{ __typename: 'DiscountError', code: DiscountErrorCode, field: string | null, channels: Array<string> | null, message: string | null }>, voucher: { __typename: 'Voucher', code: string, usageLimit: number | null, used: number, applyOncePerOrder: boolean, applyOncePerCustomer: boolean, onlyForStaff: boolean, id: string, startDate: any, endDate: any | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, productsCount: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, collectionsCount: { __typename: 'CollectionCountableConnection', totalCount: number | null } | null, categoriesCount: { __typename: 'CategoryCountableConnection', totalCount: number | null } | null, products?: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections?: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories?: { __typename: 'CategoryCountableConnection', edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null } | null };
 
 export type VoucherCreateMutationVariables = Exact<{
   input: VoucherInput;
@@ -6375,10 +6389,14 @@ export type SaleDetailsQueryVariables = Exact<{
   before?: InputMaybe<Scalars['String']>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  includeVariants: Scalars['Boolean'];
+  includeProducts: Scalars['Boolean'];
+  includeCollections: Scalars['Boolean'];
+  includeCategories: Scalars['Boolean'];
 }>;
 
 
-export type SaleDetailsQuery = { __typename: 'Query', sale: { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, variants: { __typename: 'ProductVariantCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductVariantCountableEdge', node: { __typename: 'ProductVariant', id: string, name: string, product: { __typename: 'Product', id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories: { __typename: 'CategoryCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections: { __typename: 'CollectionCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null };
+export type SaleDetailsQuery = { __typename: 'Query', sale: { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, variantsCount: { __typename: 'ProductVariantCountableConnection', totalCount: number | null } | null, productsCount: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, collectionsCount: { __typename: 'CollectionCountableConnection', totalCount: number | null } | null, categoriesCount: { __typename: 'CategoryCountableConnection', totalCount: number | null } | null, variants?: { __typename: 'ProductVariantCountableConnection', edges: Array<{ __typename: 'ProductVariantCountableEdge', node: { __typename: 'ProductVariant', id: string, name: string, product: { __typename: 'Product', id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, products?: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories?: { __typename: 'CategoryCountableConnection', edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections?: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null };
 
 export type VoucherDetailsQueryVariables = Exact<{
   id: Scalars['ID'];
@@ -6386,10 +6404,13 @@ export type VoucherDetailsQueryVariables = Exact<{
   before?: InputMaybe<Scalars['String']>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  includeProducts: Scalars['Boolean'];
+  includeCollections: Scalars['Boolean'];
+  includeCategories: Scalars['Boolean'];
 }>;
 
 
-export type VoucherDetailsQuery = { __typename: 'Query', voucher: { __typename: 'Voucher', code: string, usageLimit: number | null, used: number, applyOncePerOrder: boolean, applyOncePerCustomer: boolean, onlyForStaff: boolean, id: string, startDate: any, endDate: any | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections: { __typename: 'CollectionCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories: { __typename: 'CategoryCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null };
+export type VoucherDetailsQuery = { __typename: 'Query', voucher: { __typename: 'Voucher', code: string, usageLimit: number | null, used: number, applyOncePerOrder: boolean, applyOncePerCustomer: boolean, onlyForStaff: boolean, id: string, startDate: any, endDate: any | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, productsCount: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, collectionsCount: { __typename: 'CollectionCountableConnection', totalCount: number | null } | null, categoriesCount: { __typename: 'CategoryCountableConnection', totalCount: number | null } | null, products?: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections?: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories?: { __typename: 'CategoryCountableConnection', edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null };
 
 export type FileUploadMutationVariables = Exact<{
   file: Scalars['Upload'];
@@ -6448,11 +6469,11 @@ export type CustomerAddressesFragment = { __typename: 'User', id: string, email:
 
 export type SaleFragment = { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> };
 
-export type SaleDetailsFragment = { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, variants: { __typename: 'ProductVariantCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductVariantCountableEdge', node: { __typename: 'ProductVariant', id: string, name: string, product: { __typename: 'Product', id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories: { __typename: 'CategoryCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections: { __typename: 'CollectionCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> };
+export type SaleDetailsFragment = { __typename: 'Sale', id: string, name: string, type: SaleType, startDate: any, endDate: any | null, variantsCount: { __typename: 'ProductVariantCountableConnection', totalCount: number | null } | null, productsCount: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, collectionsCount: { __typename: 'CollectionCountableConnection', totalCount: number | null } | null, categoriesCount: { __typename: 'CategoryCountableConnection', totalCount: number | null } | null, variants?: { __typename: 'ProductVariantCountableConnection', edges: Array<{ __typename: 'ProductVariantCountableEdge', node: { __typename: 'ProductVariant', id: string, name: string, product: { __typename: 'Product', id: string, name: string, thumbnail: { __typename: 'Image', url: string } | null, productType: { __typename: 'ProductType', id: string, name: string }, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, products?: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories?: { __typename: 'CategoryCountableConnection', edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections?: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, channelListings: Array<{ __typename: 'SaleChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> };
 
 export type VoucherFragment = { __typename: 'Voucher', id: string, code: string, startDate: any, endDate: any | null, usageLimit: number | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> };
 
-export type VoucherDetailsFragment = { __typename: 'Voucher', code: string, usageLimit: number | null, used: number, applyOncePerOrder: boolean, applyOncePerCustomer: boolean, onlyForStaff: boolean, id: string, startDate: any, endDate: any | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, products: { __typename: 'ProductCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections: { __typename: 'CollectionCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories: { __typename: 'CategoryCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> };
+export type VoucherDetailsFragment = { __typename: 'Voucher', code: string, usageLimit: number | null, used: number, applyOncePerOrder: boolean, applyOncePerCustomer: boolean, onlyForStaff: boolean, id: string, startDate: any, endDate: any | null, type: VoucherTypeEnum, discountValueType: DiscountValueTypeEnum, minCheckoutItemsQuantity: number | null, productsCount: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, collectionsCount: { __typename: 'CollectionCountableConnection', totalCount: number | null } | null, categoriesCount: { __typename: 'CategoryCountableConnection', totalCount: number | null } | null, products?: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', isPublished: boolean, publicationDate: any | null, isAvailableForPurchase: boolean | null, availableForPurchase: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, collections?: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, categories?: { __typename: 'CategoryCountableConnection', edges: Array<{ __typename: 'CategoryCountableEdge', node: { __typename: 'Category', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, countries: Array<{ __typename: 'CountryDisplay', code: string, country: string }> | null, channelListings: Array<{ __typename: 'VoucherChannelListing', id: string, discountValue: number, currency: string, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string }, minSpent: { __typename: 'Money', amount: number, currency: string } | null }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> };
 
 export type AttributeErrorFragment = { __typename: 'AttributeError', code: AttributeErrorCode, field: string | null, message: string | null };
 

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -81060,11 +81060,13 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
           >
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="categories-tab"
             >
               Categories (2)
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
+              data-test-id="collections-tab"
             >
               Collections (4)
             </span>
@@ -82524,11 +82526,13 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
           >
             <span
               class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
+              data-test-id="categories-tab"
             >
               Categories (2)
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="collections-tab"
             >
               Collections (4)
             </span>
@@ -83993,11 +83997,13 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
           >
             <span
               class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
+              data-test-id="categories-tab"
             >
               Categories (2)
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="collections-tab"
             >
               Collections (4)
             </span>
@@ -85485,25 +85491,27 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
           >
             <span
               class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
+              data-test-id="categories-tab"
             >
-              Categories (…)
+              Categories (2)
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="collections-tab"
             >
-              Collections (…)
+              Collections (4)
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
               data-test-id="products-tab"
             >
-              Products (…)
+              Products (4)
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
               data-test-id="variants-tab"
             >
-              Variants (…)
+              Variants (3)
             </span>
           </div>
           <div
@@ -86946,11 +86954,13 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
           >
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="categories-tab"
             >
               Categories (2)
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="collections-tab"
             >
               Collections (4)
             </span>

src/storybook/stories/discounts/SaleDetailsPage.tsx

@@ -17,6 +17,12 @@ const channels = createSaleChannels(channelsList);
 
 const props: SaleDetailsPageProps = {
   activeTab: SaleDetailsPageTab.categories,
+  tabItemsCount: {
+    [SaleDetailsPageTab.categories]: sale.categoriesCount.totalCount,
+    [SaleDetailsPageTab.collections]: sale.collectionsCount.totalCount,
+    [SaleDetailsPageTab.products]: sale.productsCount.totalCount,
+    [SaleDetailsPageTab.variants]: sale.variantsCount.totalCount,
+  },
   allChannelsCount: channels.length,
   categoryListToolbar: null,
   channelListings: channels,

src/storybook/stories/discounts/VoucherDetailsPage.tsx

@@ -23,6 +23,13 @@ const props: VoucherDetailsPageProps = {
   ...listActionsProps,
   ...pageListProps.default,
   activeTab: VoucherDetailsPageTab.products,
+  tabItemsCount: {
+    [VoucherDetailsPageTab.categories]:
+      voucherDetails.categoriesCount.totalCount,
+    [VoucherDetailsPageTab.collections]:
+      voucherDetails.collectionsCount.totalCount,
+    [VoucherDetailsPageTab.products]: voucherDetails.productsCount.totalCount,
+  },
   allChannelsCount: channels.length,
   categoryListToolbar: null,
   channelListings: channels,