@graphcommerce/magento-product 3.0.1

package/_playwright/productURL.fixture.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { test as base } from '@graphcommerce/graphql/_playwright/apolloClient.fixture'
+import { ProductStaticPathsDocument } from '../components/ProductStaticPaths/ProductStaticPaths.gql'
+import { ProductTypenames } from '../components/ProductStaticPaths/getProductStaticPaths'
+import { productLink } from '../hooks/useProductLink'
+
+type ProductUrls = {
+  all: string[]
+} & Record<`${ProductTypenames}`, string>
+
+const test = base.extend<{ productURL: ProductUrls }>({
+  productURL: async ({ apolloClient, baseURL }, use) => {
+    const query = await apolloClient.query({
+      query: ProductStaticPathsDocument,
+      variables: { currentPage: 1, pageSize: 1000 },
+    })
+
+    const productUrls: Partial<Omit<ProductUrls, 'all'>> = {}
+    const urls = (query.data.products?.items ?? []).map((p) => {
+      productUrls[`${p?.__typename}`] = `${baseURL}${productLink(p!)}`
+      return `${baseURL}${productLink(p!)}`
+    })
+
+    await use({ all: urls, ...productUrls } as ProductUrls)
+  },
+})
+
+export { test }

package/components/JsonLdProduct/JsonLdProduct.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type JsonLdProduct_BundleProduct_Fragment = { uid: string, name?: Types.Maybe<string>, sku?: Types.Maybe<string>, url_key?: Types.Maybe<string>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', url?: Types.Maybe<string>, label?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string> }>>>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string> }>>>, price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProduct_ConfigurableProduct_Fragment = { uid: string, name?: Types.Maybe<string>, sku?: Types.Maybe<string>, url_key?: Types.Maybe<string>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', url?: Types.Maybe<string>, label?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string> }>>>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string> }>>>, price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProduct_DownloadableProduct_Fragment = { uid: string, name?: Types.Maybe<string>, sku?: Types.Maybe<string>, url_key?: Types.Maybe<string>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', url?: Types.Maybe<string>, label?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string> }>>>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string> }>>>, price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProduct_GroupedProduct_Fragment = { uid: string, name?: Types.Maybe<string>, sku?: Types.Maybe<string>, url_key?: Types.Maybe<string>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', url?: Types.Maybe<string>, label?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string> }>>>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string> }>>>, price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProduct_SimpleProduct_Fragment = { uid: string, name?: Types.Maybe<string>, sku?: Types.Maybe<string>, url_key?: Types.Maybe<string>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', url?: Types.Maybe<string>, label?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string> }>>>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string> }>>>, price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProduct_VirtualProduct_Fragment = { uid: string, name?: Types.Maybe<string>, sku?: Types.Maybe<string>, url_key?: Types.Maybe<string>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', url?: Types.Maybe<string>, label?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string> }>>>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string> }>>>, price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProductFragment = JsonLdProduct_BundleProduct_Fragment | JsonLdProduct_ConfigurableProduct_Fragment | JsonLdProduct_DownloadableProduct_Fragment | JsonLdProduct_GroupedProduct_Fragment | JsonLdProduct_SimpleProduct_Fragment | JsonLdProduct_VirtualProduct_Fragment;

package/components/JsonLdProduct/JsonLdProduct.graphql

@@ -0,0 +1,22 @@
+fragment JsonLdProduct on ProductInterface {
+  uid
+  name
+  sku
+  description {
+    html
+  }
+  media_gallery {
+    label
+    __typename
+    ... on ProductImage {
+      url
+    }
+  }
+  url_key
+  categories {
+    uid
+    url_key
+    name
+  }
+  ...JsonLdProductOffer
+}

package/components/JsonLdProduct/JsonLdProductOffer.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type JsonLdProductOffer_BundleProduct_Fragment = { price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProductOffer_ConfigurableProduct_Fragment = { price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProductOffer_DownloadableProduct_Fragment = { price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProductOffer_GroupedProduct_Fragment = { price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProductOffer_SimpleProduct_Fragment = { price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProductOffer_VirtualProduct_Fragment = { price_range: { minimum_price: { regular_price: { value?: Types.Maybe<number>, currency?: Types.Maybe<Types.CurrencyEnum> }, final_price: { value?: Types.Maybe<number> } } } };
+
+export type JsonLdProductOfferFragment = JsonLdProductOffer_BundleProduct_Fragment | JsonLdProductOffer_ConfigurableProduct_Fragment | JsonLdProductOffer_DownloadableProduct_Fragment | JsonLdProductOffer_GroupedProduct_Fragment | JsonLdProductOffer_SimpleProduct_Fragment | JsonLdProductOffer_VirtualProduct_Fragment;

package/components/JsonLdProduct/JsonLdProductOffer.graphql

@@ -0,0 +1,13 @@
+fragment JsonLdProductOffer on ProductInterface {
+  price_range {
+    minimum_price {
+      regular_price {
+        value
+        currency
+      }
+      final_price {
+        value
+      }
+    }
+  }
+}

package/components/JsonLdProduct/index.tsx

@@ -0,0 +1,37 @@
+import { ProductImage } from '@graphcommerce/graphql'
+import { Product } from 'schema-dts'
+import { JsonLdProductFragment } from './JsonLdProduct.gql'
+import { JsonLdProductOfferFragment } from './JsonLdProductOffer.gql'
+
+export function jsonLdProduct(props: JsonLdProductFragment): Product {
+  const { name, sku, media_gallery, categories, description, url_key } = props
+
+  return {
+    '@type': 'Product',
+    name: name ?? undefined,
+    sku: sku ?? undefined,
+    image: media_gallery
+      ? media_gallery?.map((img) => (img as ProductImage)?.url ?? '')
+      : undefined,
+    category: categories?.[0]?.name ?? undefined,
+    identifier: url_key ?? undefined,
+    description: description?.html
+      ? (description.html ?? '').replace(/(<([^>]+)>)/gi, '')
+      : undefined,
+  }
+}
+
+export function jsonLdProductOffer(props: JsonLdProductOfferFragment): Partial<Product> {
+  const { price_range } = props
+
+  return {
+    offers: {
+      '@type': 'AggregateOffer',
+      itemCondition: 'https://schema.org/NewCondition',
+      offerCount: 1,
+      priceCurrency: price_range.minimum_price.regular_price.currency ?? undefined,
+      highPrice: price_range?.minimum_price?.regular_price.value ?? undefined,
+      lowPrice: price_range.minimum_price.final_price.value ?? undefined,
+    },
+  }
+}

package/components/ProductAddToCart/ProductAddToCart.gql.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ProductAddToCartDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ProductAddToCart"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sku"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"quantity"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Float"}},"defaultValue":{"kind":"IntValue","value":"1"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"enteredOptions"}},"type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"EnteredOptionInput"}}},"defaultValue":{"kind":"ListValue","values":[]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addProductsToCart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cartId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"Argument","name":{"kind":"Name","value":"cartItems"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"sku"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sku"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"quantity"},"value":{"kind":"Variable","name":{"kind":"Name","value":"quantity"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"entered_options"},"value":{"kind":"Variable","name":{"kind":"Name","value":"enteredOptions"}}}]}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}}]}},{"kind":"Field","name":{"kind":"Name","value":"total_quantity"}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"grand_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"applied_taxes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_including_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_with_discount_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"selected_shipping_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"price_incl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price_excl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"user_errors"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]} as unknown as DocumentNode<ProductAddToCartMutation, ProductAddToCartMutationVariables>;
+export type ProductAddToCartMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+  sku: Types.Scalars['String'];
+  quantity?: Types.Maybe<Types.Scalars['Float']>;
+  enteredOptions?: Types.Maybe<Array<Types.Maybe<Types.EnteredOptionInput>> | Types.Maybe<Types.EnteredOptionInput>>;
+}>;
+
+
+export type ProductAddToCartMutation = { addProductsToCart?: Types.Maybe<{ cart: { __typename: 'Cart', id: string, total_quantity: number, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleCartItem', uid: string, quantity: number } | { __typename: 'ConfigurableCartItem', uid: string, quantity: number } | { __typename: 'DownloadableCartItem', uid: string, quantity: number } | { __typename: 'SimpleCartItem', uid: string, quantity: number } | { __typename: 'VirtualCartItem', uid: string, quantity: number }>>>, prices?: Types.Maybe<{ __typename: 'CartPrices', grand_total?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, applied_taxes?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, subtotal_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_including_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_with_discount_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, shipping_addresses: Array<Types.Maybe<{ selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string, method_title: string, carrier_title: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ carrier_code: string, method_code?: Types.Maybe<string>, price_incl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, price_excl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>> }>> }, user_errors: Array<Types.Maybe<{ code: Types.CartUserInputErrorType, message: string }>> }> };

package/components/ProductAddToCart/ProductAddToCart.graphql

@@ -0,0 +1,21 @@
+mutation ProductAddToCart(
+  $cartId: String!
+  $sku: String!
+  $quantity: Float = 1
+  $enteredOptions: [EnteredOptionInput] = []
+) {
+  addProductsToCart(
+    cartId: $cartId
+    cartItems: [{ sku: $sku, quantity: $quantity, entered_options: $enteredOptions }]
+  ) {
+    cart {
+      id
+      __typename
+      ...CartItemCountChanged
+    }
+    user_errors {
+      code
+      message
+    }
+  }
+}

package/components/ProductCustomizable/CustomizableAreaOption.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableAreaOptionFragment = { product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, areaValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> };

package/components/ProductCustomizable/CustomizableAreaOption.graphql

@@ -0,0 +1,11 @@
+fragment CustomizableAreaOption on CustomizableAreaOption {
+  ...CustomizableOption
+  product_sku
+  areaValue: value {
+    max_characters
+    price
+    price_type
+    sku
+    uid
+  }
+}

package/components/ProductCustomizable/CustomizableCheckboxOption.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableCheckboxOptionFragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, checkboxValue?: Types.Maybe<Array<Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string, option_type_id?: Types.Maybe<number>, title?: Types.Maybe<string> }>>> };

package/components/ProductCustomizable/CustomizableCheckboxOption.graphql

@@ -0,0 +1,11 @@
+fragment CustomizableCheckboxOption on CustomizableCheckboxOption {
+  ...CustomizableOption
+  checkboxValue: value {
+    price
+    price_type
+    sku
+    uid
+    option_type_id
+    title
+  }
+}

package/components/ProductCustomizable/CustomizableDateOption.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableDateOptionFragment = { product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dateValue?: Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> };

package/components/ProductCustomizable/CustomizableDateOption.graphql

@@ -0,0 +1,10 @@
+fragment CustomizableDateOption on CustomizableDateOption {
+  ...CustomizableOption
+  product_sku
+  dateValue: value {
+    price
+    price_type
+    sku
+    uid
+  }
+}

package/components/ProductCustomizable/CustomizableDropDownOption.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableDropDownOptionFragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dropdownValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> };

package/components/ProductCustomizable/CustomizableDropDownOption.graphql

@@ -0,0 +1,12 @@
+fragment CustomizableDropDownOption on CustomizableDropDownOption {
+  ...CustomizableOption
+  dropdownValue: value {
+    option_type_id
+    price
+    price_type
+    sku
+    sort_order
+    title
+    uid
+  }
+}

package/components/ProductCustomizable/CustomizableFieldOption.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableFieldOptionFragment = { product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fieldValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> };

package/components/ProductCustomizable/CustomizableFieldOption.graphql

@@ -0,0 +1,11 @@
+fragment CustomizableFieldOption on CustomizableFieldOption {
+  ...CustomizableOption
+  product_sku
+  fieldValue: value {
+    max_characters
+    price
+    price_type
+    sku
+    uid
+  }
+}

package/components/ProductCustomizable/CustomizableFileOption.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableFileOptionFragment = { product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fileValue?: Types.Maybe<{ file_extension?: Types.Maybe<string>, image_size_x?: Types.Maybe<number>, image_size_y?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> };

package/components/ProductCustomizable/CustomizableFileOption.graphql

@@ -0,0 +1,13 @@
+fragment CustomizableFileOption on CustomizableFileOption {
+  ...CustomizableOption
+  product_sku
+  fileValue: value {
+    file_extension
+    image_size_x
+    image_size_y
+    price
+    price_type
+    sku
+    uid
+  }
+}

package/components/ProductCustomizable/CustomizableMultipleOption.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableMultipleOptionFragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, multipleValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> };

package/components/ProductCustomizable/CustomizableMultipleOption.graphql

@@ -0,0 +1,12 @@
+fragment CustomizableMultipleOption on CustomizableMultipleOption {
+  ...CustomizableOption
+  multipleValue: value {
+    option_type_id
+    price
+    price_type
+    sku
+    sort_order
+    title
+    uid
+  }
+}

package/components/ProductCustomizable/CustomizableOption.gql.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableOption_CustomizableAreaOption_Fragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> };
+
+export type CustomizableOption_CustomizableCheckboxOption_Fragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> };
+
+export type CustomizableOption_CustomizableDateOption_Fragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> };
+
+export type CustomizableOption_CustomizableDropDownOption_Fragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> };
+
+export type CustomizableOption_CustomizableFieldOption_Fragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> };
+
+export type CustomizableOption_CustomizableFileOption_Fragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> };
+
+export type CustomizableOption_CustomizableMultipleOption_Fragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> };
+
+export type CustomizableOption_CustomizableRadioOption_Fragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> };
+
+export type CustomizableOptionFragment = CustomizableOption_CustomizableAreaOption_Fragment | CustomizableOption_CustomizableCheckboxOption_Fragment | CustomizableOption_CustomizableDateOption_Fragment | CustomizableOption_CustomizableDropDownOption_Fragment | CustomizableOption_CustomizableFieldOption_Fragment | CustomizableOption_CustomizableFileOption_Fragment | CustomizableOption_CustomizableMultipleOption_Fragment | CustomizableOption_CustomizableRadioOption_Fragment;

package/components/ProductCustomizable/CustomizableOption.graphql

@@ -0,0 +1,6 @@
+fragment CustomizableOption on CustomizableOptionInterface {
+  uid
+  required
+  sort_order
+  title
+}

package/components/ProductCustomizable/CustomizableRadioOption.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomizableRadioOptionFragment = { uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, value?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> };

package/components/ProductCustomizable/CustomizableRadioOption.graphql

@@ -0,0 +1,12 @@
+fragment CustomizableRadioOption on CustomizableRadioOption {
+  ...CustomizableOption
+  value {
+    option_type_id
+    price
+    price_type
+    sku
+    sort_order
+    title
+    uid
+  }
+}

package/components/ProductCustomizable/ProductCustomizable.gql.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductCustomizable_BundleProduct_Fragment = { options?: Types.Maybe<Array<Types.Maybe<{ __typename: 'CustomizableAreaOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, areaValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableCheckboxOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, checkboxValue?: Types.Maybe<Array<Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string, option_type_id?: Types.Maybe<number>, title?: Types.Maybe<string> }>>> } | { __typename: 'CustomizableDateOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dateValue?: Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableDropDownOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dropdownValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableFieldOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fieldValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableFileOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fileValue?: Types.Maybe<{ file_extension?: Types.Maybe<string>, image_size_x?: Types.Maybe<number>, image_size_y?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableMultipleOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, multipleValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableRadioOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, value?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> }>>> };
+
+export type ProductCustomizable_ConfigurableProduct_Fragment = { options?: Types.Maybe<Array<Types.Maybe<{ __typename: 'CustomizableAreaOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, areaValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableCheckboxOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, checkboxValue?: Types.Maybe<Array<Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string, option_type_id?: Types.Maybe<number>, title?: Types.Maybe<string> }>>> } | { __typename: 'CustomizableDateOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dateValue?: Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableDropDownOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dropdownValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableFieldOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fieldValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableFileOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fileValue?: Types.Maybe<{ file_extension?: Types.Maybe<string>, image_size_x?: Types.Maybe<number>, image_size_y?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableMultipleOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, multipleValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableRadioOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, value?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> }>>> };
+
+export type ProductCustomizable_DownloadableProduct_Fragment = { options?: Types.Maybe<Array<Types.Maybe<{ __typename: 'CustomizableAreaOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, areaValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableCheckboxOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, checkboxValue?: Types.Maybe<Array<Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string, option_type_id?: Types.Maybe<number>, title?: Types.Maybe<string> }>>> } | { __typename: 'CustomizableDateOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dateValue?: Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableDropDownOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dropdownValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableFieldOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fieldValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableFileOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fileValue?: Types.Maybe<{ file_extension?: Types.Maybe<string>, image_size_x?: Types.Maybe<number>, image_size_y?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableMultipleOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, multipleValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableRadioOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, value?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> }>>> };
+
+export type ProductCustomizable_SimpleProduct_Fragment = { options?: Types.Maybe<Array<Types.Maybe<{ __typename: 'CustomizableAreaOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, areaValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableCheckboxOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, checkboxValue?: Types.Maybe<Array<Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string, option_type_id?: Types.Maybe<number>, title?: Types.Maybe<string> }>>> } | { __typename: 'CustomizableDateOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dateValue?: Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableDropDownOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dropdownValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableFieldOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fieldValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableFileOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fileValue?: Types.Maybe<{ file_extension?: Types.Maybe<string>, image_size_x?: Types.Maybe<number>, image_size_y?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableMultipleOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, multipleValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableRadioOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, value?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> }>>> };
+
+export type ProductCustomizable_VirtualProduct_Fragment = { options?: Types.Maybe<Array<Types.Maybe<{ __typename: 'CustomizableAreaOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, areaValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableCheckboxOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, checkboxValue?: Types.Maybe<Array<Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string, option_type_id?: Types.Maybe<number>, title?: Types.Maybe<string> }>>> } | { __typename: 'CustomizableDateOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dateValue?: Types.Maybe<{ price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableDropDownOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, dropdownValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableFieldOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fieldValue?: Types.Maybe<{ max_characters?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableFileOption', product_sku?: Types.Maybe<string>, uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, fileValue?: Types.Maybe<{ file_extension?: Types.Maybe<string>, image_size_x?: Types.Maybe<number>, image_size_y?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, uid: string }> } | { __typename: 'CustomizableMultipleOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, multipleValue?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> } | { __typename: 'CustomizableRadioOption', uid: string, required?: Types.Maybe<boolean>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, value?: Types.Maybe<Array<Types.Maybe<{ option_type_id?: Types.Maybe<number>, price?: Types.Maybe<number>, price_type?: Types.Maybe<Types.PriceTypeEnum>, sku?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string>, uid: string }>>> }>>> };
+
+export type ProductCustomizableFragment = ProductCustomizable_BundleProduct_Fragment | ProductCustomizable_ConfigurableProduct_Fragment | ProductCustomizable_DownloadableProduct_Fragment | ProductCustomizable_SimpleProduct_Fragment | ProductCustomizable_VirtualProduct_Fragment;

package/components/ProductCustomizable/ProductCustomizable.graphql

@@ -0,0 +1,13 @@
+fragment ProductCustomizable on CustomizableProductInterface {
+  options {
+    __typename
+    ...CustomizableAreaOption
+    ...CustomizableCheckboxOption
+    ...CustomizableDateOption
+    ...CustomizableDropDownOption
+    ...CustomizableMultipleOption
+    ...CustomizableFieldOption
+    ...CustomizableFileOption
+    ...CustomizableRadioOption
+  }
+}

package/components/ProductList/ProductList.gql.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ProductListDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProductList"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pageSize"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"23"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"currentPage"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"1"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProductAttributeFilterInput"}},"defaultValue":{"kind":"ObjectValue","fields":[]}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sort"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProductAttributeSortInput"}},"defaultValue":{"kind":"ObjectValue","fields":[]}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"search"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"categoryUid"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pageSize"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pageSize"}}},{"kind":"Argument","name":{"kind":"Name","value":"currentPage"},"value":{"kind":"Variable","name":{"kind":"Name","value":"currentPage"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sort"}}},{"kind":"Argument","name":{"kind":"Name","value":"search"},"value":{"kind":"Variable","name":{"kind":"Name","value":"search"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total_count"}},{"kind":"Field","name":{"kind":"Name","value":"page_info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"current_page"}},{"kind":"Field","name":{"kind":"Name","value":"total_pages"}}]}},{"kind":"Field","name":{"kind":"Name","value":"sort_fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"default"}},{"kind":"Field","name":{"kind":"Name","value":"options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"sku"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"small_image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price_range"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"maximum_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regular_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount_off"}},{"kind":"Field","name":{"kind":"Name","value":"percent_off"}}]}},{"kind":"Field","name":{"kind":"Name","value":"final_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"minimum_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regular_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount_off"}},{"kind":"Field","name":{"kind":"Name","value":"percent_off"}}]}},{"kind":"Field","name":{"kind":"Name","value":"final_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"rating_summary"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ConfigurableProduct"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attribute_code"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"values"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"store_label"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"swatch_data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TextSwatchData"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ColorSwatchData"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ImageSwatchData"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"variants"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"code"}}]}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"sku"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"small_image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"filters"},"name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"category_uid"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"categoryUid"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"aggregations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"count"}},{"kind":"Field","name":{"kind":"Name","value":"attribute_code"}},{"kind":"Field","name":{"kind":"Name","value":"options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]}}]}}]} as unknown as DocumentNode<ProductListQuery, ProductListQueryVariables>;
+export type ProductListQueryVariables = Types.Exact<{
+  pageSize?: Types.Maybe<Types.Scalars['Int']>;
+  currentPage?: Types.Maybe<Types.Scalars['Int']>;
+  filters?: Types.Maybe<Types.ProductAttributeFilterInput>;
+  sort?: Types.Maybe<Types.ProductAttributeSortInput>;
+  search?: Types.Maybe<Types.Scalars['String']>;
+  categoryUid: Types.Scalars['String'];
+}>;
+
+
+export type ProductListQuery = { products?: Types.Maybe<{ total_count?: Types.Maybe<number>, page_info?: Types.Maybe<{ current_page?: Types.Maybe<number>, total_pages?: Types.Maybe<number> }>, sort_fields?: Types.Maybe<{ default?: Types.Maybe<string>, options?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, value?: Types.Maybe<string> }>>> }>, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, configurable_options?: Types.Maybe<Array<Types.Maybe<{ attribute_code?: Types.Maybe<string>, uid: string, label?: Types.Maybe<string>, values?: Types.Maybe<Array<Types.Maybe<{ store_label?: Types.Maybe<string>, uid?: Types.Maybe<string>, swatch_data?: Types.Maybe<{ __typename: 'ColorSwatchData', value?: Types.Maybe<string> } | { __typename: 'ImageSwatchData', value?: Types.Maybe<string>, thumbnail?: Types.Maybe<string> } | { __typename: 'TextSwatchData', value?: Types.Maybe<string> }> }>>> }>>>, variants?: Types.Maybe<Array<Types.Maybe<{ attributes?: Types.Maybe<Array<Types.Maybe<{ uid: string, code?: Types.Maybe<string> }>>>, product?: Types.Maybe<{ uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, small_image?: Types.Maybe<{ label?: Types.Maybe<string>, url?: Types.Maybe<string> }> }> }>>>, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } }>>> }>, filters?: Types.Maybe<{ aggregations?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, count?: Types.Maybe<number>, attribute_code: string, options?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, value: string, count?: Types.Maybe<number> }>>> }>>> }> };

package/components/ProductList/ProductList.graphql

@@ -0,0 +1,11 @@
+query ProductList(
+  $pageSize: Int = 23
+  $currentPage: Int = 1
+  $filters: ProductAttributeFilterInput = {}
+  $sort: ProductAttributeSortInput = {}
+  $search: String = ""
+  $categoryUid: String!
+) {
+  ...ProductListQueryFragment
+  ...ProductFiltersQueryFragment
+}

package/components/ProductList/ProductListQueryFragment.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductListQueryFragment = { products?: Types.Maybe<{ total_count?: Types.Maybe<number>, page_info?: Types.Maybe<{ current_page?: Types.Maybe<number>, total_pages?: Types.Maybe<number> }>, sort_fields?: Types.Maybe<{ default?: Types.Maybe<string>, options?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, value?: Types.Maybe<string> }>>> }>, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'ConfigurableProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } }, configurable_options?: Types.Maybe<Array<Types.Maybe<{ attribute_code?: Types.Maybe<string>, uid: string, label?: Types.Maybe<string>, values?: Types.Maybe<Array<Types.Maybe<{ store_label?: Types.Maybe<string>, uid?: Types.Maybe<string>, swatch_data?: Types.Maybe<{ __typename: 'ColorSwatchData', value?: Types.Maybe<string> } | { __typename: 'ImageSwatchData', value?: Types.Maybe<string>, thumbnail?: Types.Maybe<string> } | { __typename: 'TextSwatchData', value?: Types.Maybe<string> }> }>>> }>>>, variants?: Types.Maybe<Array<Types.Maybe<{ attributes?: Types.Maybe<Array<Types.Maybe<{ uid: string, code?: Types.Maybe<string> }>>>, product?: Types.Maybe<{ uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, small_image?: Types.Maybe<{ label?: Types.Maybe<string>, url?: Types.Maybe<string> }> }> }>>> } | { __typename: 'DownloadableProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'GroupedProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'SimpleProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'VirtualProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } }>>> }> };

package/components/ProductList/ProductListQueryFragment.graphql

@@ -0,0 +1,14 @@
+fragment ProductListQueryFragment on Query {
+  products(
+    pageSize: $pageSize
+    currentPage: $currentPage
+    filter: $filters
+    sort: $sort
+    search: $search
+  ) {
+    ...ProductListCount
+    ...ProductListPagination
+    ...ProductListSort
+    ...ProductListItems
+  }
+}

package/components/ProductListCount/ProductListCount.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductListCountFragment = { total_count?: Types.Maybe<number> };

package/components/ProductListCount/ProductListCount.graphql

@@ -0,0 +1,3 @@
+fragment ProductListCount on Products {
+  total_count
+}