@graphcommerce/magento-product 3.0.1

package/components/ProductPageMeta/ProductPageMeta.graphql

@@ -0,0 +1,7 @@
+fragment ProductPageMeta on ProductInterface {
+  ...ProductLink
+  name
+  url_key
+  meta_title
+  meta_description
+}

package/components/ProductPageMeta/index.tsx

@@ -0,0 +1,17 @@
+import { PageMeta } from '@graphcommerce/magento-store'
+import React from 'react'
+import { useProductLink } from '../../hooks/useProductLink'
+import { ProductPageMetaFragment } from './ProductPageMeta.gql'
+
+export default function ProductPageMeta(props: ProductPageMetaFragment) {
+  const { name, meta_title, meta_description, url_key, __typename } = props
+  const productLink = useProductLink({ url_key, __typename })
+
+  return (
+    <PageMeta
+      title={meta_title ?? name ?? ''}
+      metaDescription={meta_description ?? ''}
+      canonical={productLink}
+    />
+  )
+}

package/components/ProductPagePrice/ProductPagePrice.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductPagePrice_BundleProduct_Fragment = { 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> } }, price_tiers?: Types.Maybe<Array<Types.Maybe<{ quantity?: Types.Maybe<number>, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> };
+
+export type ProductPagePrice_ConfigurableProduct_Fragment = { 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> } }, price_tiers?: Types.Maybe<Array<Types.Maybe<{ quantity?: Types.Maybe<number>, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> };
+
+export type ProductPagePrice_DownloadableProduct_Fragment = { 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> } }, price_tiers?: Types.Maybe<Array<Types.Maybe<{ quantity?: Types.Maybe<number>, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> };
+
+export type ProductPagePrice_GroupedProduct_Fragment = { 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> } }, price_tiers?: Types.Maybe<Array<Types.Maybe<{ quantity?: Types.Maybe<number>, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> };
+
+export type ProductPagePrice_SimpleProduct_Fragment = { 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> } }, price_tiers?: Types.Maybe<Array<Types.Maybe<{ quantity?: Types.Maybe<number>, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> };
+
+export type ProductPagePrice_VirtualProduct_Fragment = { 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ 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> }, fixed_product_taxes?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, amount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> } }, price_tiers?: Types.Maybe<Array<Types.Maybe<{ quantity?: Types.Maybe<number>, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>>> };
+
+export type ProductPagePriceFragment = ProductPagePrice_BundleProduct_Fragment | ProductPagePrice_ConfigurableProduct_Fragment | ProductPagePrice_DownloadableProduct_Fragment | ProductPagePrice_GroupedProduct_Fragment | ProductPagePrice_SimpleProduct_Fragment | ProductPagePrice_VirtualProduct_Fragment;

package/components/ProductPagePrice/ProductPagePrice.graphql

@@ -0,0 +1,50 @@
+fragment ProductPagePrice on ProductInterface {
+  price_range {
+    maximum_price {
+      regular_price {
+        ...Money
+      }
+      discount {
+        amount_off
+        percent_off
+      }
+      final_price {
+        ...Money
+      }
+      fixed_product_taxes {
+        amount {
+          ...Money
+        }
+        label
+      }
+    }
+    minimum_price {
+      regular_price {
+        ...Money
+      }
+      discount {
+        amount_off
+        percent_off
+      }
+      final_price {
+        ...Money
+      }
+      fixed_product_taxes {
+        amount {
+          ...Money
+        }
+        label
+      }
+    }
+  }
+  price_tiers {
+    discount {
+      amount_off
+      percent_off
+    }
+    final_price {
+      ...Money
+    }
+    quantity
+  }
+}

package/components/ProductRelated/RelatedProducts.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type RelatedProducts_BundleProduct_Fragment = { related_products?: 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> } } } }>>> };
+
+export type RelatedProducts_ConfigurableProduct_Fragment = { related_products?: 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> } } } }>>> };
+
+export type RelatedProducts_DownloadableProduct_Fragment = { related_products?: 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> } } } }>>> };
+
+export type RelatedProducts_GroupedProduct_Fragment = { related_products?: 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> } } } }>>> };
+
+export type RelatedProducts_SimpleProduct_Fragment = { related_products?: 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> } } } }>>> };
+
+export type RelatedProducts_VirtualProduct_Fragment = { related_products?: 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> } } } }>>> };
+
+export type RelatedProductsFragment = RelatedProducts_BundleProduct_Fragment | RelatedProducts_ConfigurableProduct_Fragment | RelatedProducts_DownloadableProduct_Fragment | RelatedProducts_GroupedProduct_Fragment | RelatedProducts_SimpleProduct_Fragment | RelatedProducts_VirtualProduct_Fragment;

package/components/ProductRelated/RelatedProducts.graphql

@@ -0,0 +1,5 @@
+fragment RelatedProducts on ProductInterface {
+  related_products {
+    ...ProductListItem
+  }
+}

package/components/ProductSidebarDelivery/index.tsx

@@ -0,0 +1,47 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { SvgImage, responsiveVal, iconBox } from '@graphcommerce/next-ui'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      alignItems: 'center',
+      gridTemplate: `
+        "image title"
+        "image subtitle"
+      `,
+      gridTemplateColumns: `min-content auto`,
+      columnGap: theme.spacings.xs,
+      marginTop: theme.spacings.xs,
+    },
+    text: {},
+    image: {
+      gridArea: 'image',
+    },
+    title: {
+      gridArea: 'title',
+    },
+    subtitle: {
+      gridArea: 'subtitle',
+      color: theme.palette.primary.mutedText,
+    },
+  }),
+  { name: 'ProductSidebarDelivery' },
+)
+
+export default function ProductSidebarDelivery() {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <SvgImage className={classes.image} size='medium' src={iconBox} alt='box' loading='eager' />
+      <Typography className={classes.title} variant='subtitle2' component='div'>
+        Order before 22:00 and
+      </Typography>
+      <Typography className={classes.subtitle} variant='body2' component='div' color='error'>
+        Next day delivery - Shipping free
+      </Typography>
+    </div>
+  )
+}

package/components/ProductSpecs/ProductSpecs.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductSpecsFragment = { aggregations?: Types.Maybe<Array<Types.Maybe<{ attribute_code: string, count?: Types.Maybe<number>, label?: Types.Maybe<string>, options?: Types.Maybe<Array<Types.Maybe<{ count?: Types.Maybe<number>, label?: Types.Maybe<string>, value: string }>>> }>>> };

package/components/ProductSpecs/ProductSpecs.graphql

@@ -0,0 +1,12 @@
+fragment ProductSpecs on Products {
+  aggregations {
+    attribute_code
+    count
+    label
+    options {
+      count
+      label
+      value
+    }
+  }
+}

package/components/ProductSpecs/index.tsx

@@ -0,0 +1,52 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import { ProductSpecsFragment } from './ProductSpecs.gql'
+
+const useStyles = makeStyles((theme: Theme) => ({
+  specs: {
+    display: 'grid',
+    justifyContent: 'start',
+    margin: 0,
+    padding: 0,
+    gap: theme.spacings.xs,
+    '& > *': {
+      display: 'grid',
+      gridTemplateColumns: `minmax(${responsiveVal(150, 200)}, 1fr) 1fr`,
+      gap: theme.spacings.xs,
+    },
+  },
+  options: {
+    display: 'grid',
+    gridAutoFlow: 'row',
+  },
+}))
+
+export type ProductSpecsProps = ProductSpecsFragment & UseStyles<typeof useStyles>
+
+export default function ProductSpecs(props: ProductSpecsProps) {
+  const { aggregations } = props
+  const classes = useStyles(props)
+  const filter = ['price', 'category_id', 'size', 'new', 'sale', 'color']
+  const specs = aggregations?.filter(
+    (attr) => !filter.includes(attr?.attribute_code ?? '') && attr?.options?.[0]?.value !== '0',
+  )
+
+  if (specs?.length === 0) {
+    return null
+  }
+
+  return (
+    <ul className={classes.specs}>
+      {specs?.map((aggregation) => (
+        <li key={aggregation?.attribute_code}>
+          <div>{aggregation?.label}</div>
+          <div className={classes.options}>
+            {aggregation?.options?.map((option) => (
+              <span key={option?.label}>{option?.label === '1' ? 'Yes' : option?.label}</span>
+            ))}
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/components/ProductStaticPaths/ProductStaticPaths.gql.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ProductStaticPathsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProductStaticPaths"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"currentPage"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pageSize"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"ObjectValue","fields":[]}},{"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"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"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":"total_count"}},{"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"}}]}}]}}]}}]} as unknown as DocumentNode<ProductStaticPathsQuery, ProductStaticPathsQueryVariables>;
+export type ProductStaticPathsQueryVariables = Types.Exact<{
+  currentPage: Types.Scalars['Int'];
+  pageSize: Types.Scalars['Int'];
+}>;
+
+
+export type ProductStaticPathsQuery = { products?: Types.Maybe<{ total_count?: Types.Maybe<number>, page_info?: Types.Maybe<{ current_page?: Types.Maybe<number>, total_pages?: Types.Maybe<number> }>, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string> }>>> }> };

package/components/ProductStaticPaths/ProductStaticPaths.graphql

@@ -0,0 +1,12 @@
+query ProductStaticPaths($currentPage: Int!, $pageSize: Int!) {
+  products(filter: {}, pageSize: $pageSize, currentPage: $currentPage) {
+    page_info {
+      current_page
+      total_pages
+    }
+    total_count
+    items {
+      ...ProductLink
+    }
+  }
+}

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -0,0 +1,32 @@
+import { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@apollo/client'
+import { GetStaticPathsResult } from 'next'
+import { ProductStaticPathsDocument, ProductStaticPathsQuery } from './ProductStaticPaths.gql'
+
+type Return = GetStaticPathsResult<{ url: string }>
+
+export type ProductTypenames = NonNullable<
+  NonNullable<NonNullable<ProductStaticPathsQuery['products']>['items']>[0]
+>['__typename']
+
+export async function getProductStaticPaths(
+  client: ApolloClient<NormalizedCacheObject>,
+  locale: string,
+  typename: ProductTypenames,
+) {
+  const query = client.query({
+    query: ProductStaticPathsDocument,
+    variables: {
+      currentPage: 1,
+      pageSize: 100,
+    },
+  })
+  const pages: Promise<ApolloQueryResult<ProductStaticPathsQuery>>[] = [query]
+
+  const paths: Return['paths'] = (await Promise.all(pages))
+    .map((q) => q.data.products?.items)
+    .flat(1)
+    .filter((item) => item?.__typename === typename)
+    .map((p) => ({ params: { url: `${p?.url_key}` }, locale }))
+
+  return process.env.VERCEL_ENV !== 'production' ? paths.slice(0, 1) : paths
+}

package/components/ProductUpsells/UpsellProducts.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type UpsellProducts_BundleProduct_Fragment = { upsell_products?: 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> } } } }>>> };
+
+export type UpsellProducts_ConfigurableProduct_Fragment = { upsell_products?: 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> } } } }>>> };
+
+export type UpsellProducts_DownloadableProduct_Fragment = { upsell_products?: 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> } } } }>>> };
+
+export type UpsellProducts_GroupedProduct_Fragment = { upsell_products?: 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> } } } }>>> };
+
+export type UpsellProducts_SimpleProduct_Fragment = { upsell_products?: 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> } } } }>>> };
+
+export type UpsellProducts_VirtualProduct_Fragment = { upsell_products?: 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> } } } }>>> };
+
+export type UpsellProductsFragment = UpsellProducts_BundleProduct_Fragment | UpsellProducts_ConfigurableProduct_Fragment | UpsellProducts_DownloadableProduct_Fragment | UpsellProducts_GroupedProduct_Fragment | UpsellProducts_SimpleProduct_Fragment | UpsellProducts_VirtualProduct_Fragment;

package/components/ProductUpsells/UpsellProducts.graphql

@@ -0,0 +1,5 @@
+fragment UpsellProducts on ProductInterface {
+  upsell_products {
+    ...ProductListItem
+  }
+}

package/components/ProductWeight/ProductWeight.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductWeight_BundleProduct_Fragment = { weight?: Types.Maybe<number> };
+
+export type ProductWeight_ConfigurableProduct_Fragment = { weight?: Types.Maybe<number> };
+
+export type ProductWeight_GroupedProduct_Fragment = { weight?: Types.Maybe<number> };
+
+export type ProductWeight_SimpleProduct_Fragment = { weight?: Types.Maybe<number> };
+
+export type ProductWeightFragment = ProductWeight_BundleProduct_Fragment | ProductWeight_ConfigurableProduct_Fragment | ProductWeight_GroupedProduct_Fragment | ProductWeight_SimpleProduct_Fragment;

package/components/ProductWeight/ProductWeight.graphql

@@ -0,0 +1,3 @@
+fragment ProductWeight on PhysicalProductInterface {
+  weight
+}

package/components/ProductWeight/index.tsx

@@ -0,0 +1,30 @@
+import { useQuery } from '@apollo/client'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { useMemo } from 'react'
+import { ProductWeightFragment } from './ProductWeight.gql'
+
+export default function ProductWeight(props: ProductWeightFragment) {
+  const { weight } = props
+  const { data: conf } = useQuery(StoreConfigDocument)
+  const unit = conf?.storeConfig?.weight_unit ?? ''
+  const locale = conf?.storeConfig?.locale
+
+  const numberFormatter = useMemo(() => {
+    if (!locale) return undefined
+    /**
+     * Todo: upgrade to browser native unit rendering when:
+     *
+     * - Node 14 is supported upstream
+     * - Webkit/Safari supports the unit and unitDisplay option
+     *   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat#Using_style_and_unit
+     */
+    return new Intl.NumberFormat(locale.replace('_', '-'))
+  }, [locale])
+
+  if (!numberFormatter || !weight) return null
+  return (
+    <>
+      {numberFormatter.format(weight)} {unit}
+    </>
+  )
+}