@graphcommerce/magento-product 3.0.1

package/components/ProductListSort/ProductListSort.gql.ts

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

package/components/ProductListSort/ProductListSort.graphql

@@ -0,0 +1,10 @@
+fragment ProductListSort on Products {
+  total_count
+  sort_fields {
+    default
+    options {
+      label
+      value
+    }
+  }
+}

package/components/ProductListSort/index.tsx

@@ -0,0 +1,72 @@
+import { useQuery } from '@apollo/client'
+import { cloneDeep } from '@apollo/client/utilities'
+import { ListItem, ListItemText } from '@material-ui/core'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
+import React from 'react'
+import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
+import ProductListLink from '../ProductListLink/ProductListLink'
+import { ProductListSortFragment } from './ProductListSort.gql'
+
+export type ProductListSortProps = ProductListSortFragment &
+  Omit<ChipMenuProps, 'selected' | 'selectedLabel' | 'children' | 'label' | 'onDelete'>
+
+export default function ProductListSort(props: ProductListSortProps) {
+  const { sort_fields, total_count, ...filterMenuProps } = props
+  const { params } = useProductListParamsContext()
+  const pushRoute = useProductListLinkPush()
+  const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
+  const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
+
+  const [currentSort = defaultSort] = Object.keys(params.sort)
+  const currentOption = sort_fields?.options?.find((option) => option?.value === currentSort)
+  const selected = currentSort !== defaultSort
+  const label = 'Sort By'
+
+  const removeFilter = () => {
+    const linkParams = cloneDeep(params)
+    linkParams.sort = {}
+    pushRoute(linkParams)
+  }
+
+  if (!total_count) return null
+
+  return (
+    <ChipMenu
+      variant='outlined'
+      selected={selected}
+      label={label}
+      {...filterMenuProps}
+      selectedLabel={selected ? currentOption?.label ?? '' : label}
+      onDelete={selected ? removeFilter : undefined}
+    >
+      {sort_fields?.options?.map((option) => {
+        const linkParams = cloneDeep(params)
+        linkParams.sort = {}
+        if (option?.value !== defaultSort) linkParams.sort[option?.value ?? ''] = 'ASC'
+        delete linkParams.currentPage
+
+        return (
+          <ListItem
+            button
+            key={option?.value ?? ''}
+            dense
+            selected={option?.value === currentSort}
+            component={(chipProps) => (
+              <ProductListLink
+                {...chipProps}
+                {...linkParams}
+                color='inherit'
+                underline='none'
+                link={{ scroll: false }}
+              />
+            )}
+          >
+            <ListItemText secondary>{option?.label}</ListItemText>
+          </ListItem>
+        )
+      })}
+    </ChipMenu>
+  )
+}

package/components/ProductPage/ProductPageQueryFragment.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductPageQueryFragment = { products?: Types.Maybe<{ items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, review_count: number, rating_summary: number, sku?: Types.Maybe<string>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: 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> }, 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> }> }>>>, 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> } } } }>>>, 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> } } } }>>>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, review_count: number, rating_summary: number, sku?: Types.Maybe<string>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: 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> }, 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> }> }>>>, 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> } } } }>>>, 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> } } } }>>>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, review_count: number, rating_summary: number, sku?: Types.Maybe<string>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: 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> }, 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> }> }>>>, 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> } } } }>>>, 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> } } } }>>>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, review_count: number, rating_summary: number, sku?: Types.Maybe<string>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: 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> }, 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> }> }>>>, 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> } } } }>>>, 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> } } } }>>>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, review_count: number, rating_summary: number, sku?: Types.Maybe<string>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: 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> }, 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> }> }>>>, 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> } } } }>>>, 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> } } } }>>>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, review_count: number, rating_summary: number, sku?: Types.Maybe<string>, categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }>, media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: 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> }, 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> }> }>>>, 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> } } } }>>>, 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> } } } }>>>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } }>>>, 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/ProductPage/ProductPageQueryFragment.graphql

@@ -0,0 +1,10 @@
+fragment ProductPageQueryFragment on Query {
+  products(filter: { url_key: { eq: $urlKey } }) {
+    ...ProductSpecs
+    items {
+      __typename
+      uid
+      ...ProductPageItem
+    }
+  }
+}

package/components/ProductPageCategory/ProductPageCategory.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductPageCategory_BundleProduct_Fragment = { categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>> };
+
+export type ProductPageCategory_ConfigurableProduct_Fragment = { categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>> };
+
+export type ProductPageCategory_DownloadableProduct_Fragment = { categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>> };
+
+export type ProductPageCategory_GroupedProduct_Fragment = { categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>> };
+
+export type ProductPageCategory_SimpleProduct_Fragment = { categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>> };
+
+export type ProductPageCategory_VirtualProduct_Fragment = { categories?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>> };
+
+export type ProductPageCategoryFragment = ProductPageCategory_BundleProduct_Fragment | ProductPageCategory_ConfigurableProduct_Fragment | ProductPageCategory_DownloadableProduct_Fragment | ProductPageCategory_GroupedProduct_Fragment | ProductPageCategory_SimpleProduct_Fragment | ProductPageCategory_VirtualProduct_Fragment;

package/components/ProductPageCategory/ProductPageCategory.graphql

@@ -0,0 +1,8 @@
+fragment ProductPageCategory on ProductInterface {
+  categories {
+    uid
+    name
+    url_path
+    include_in_menu
+  }
+}

package/components/ProductPageCategory/index.ts

@@ -0,0 +1,17 @@
+import { ProductPageCategoryFragment } from './ProductPageCategory.gql'
+
+/**
+ * Get the most siginifcant category a product is in.
+ *
+ * - Prefers categories that are included in the menu
+ * - Prefers categories that have a longer path than shorter ones.
+ */
+export default function productPageCategory(product?: ProductPageCategoryFragment | null) {
+  if (!product?.categories?.length) return undefined
+  return product?.categories?.reduce((carry, value) => {
+    if (!carry?.include_in_menu && value?.include_in_menu) return value
+    const carryL = carry?.url_path?.split('/')?.length ?? 0
+    const valueL = value?.url_path?.split('/')?.length ?? 0
+    return carryL >= valueL ? carry : value
+  })
+}

package/components/ProductPageDescription/ProductPageDescription.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductPageDescription_BundleProduct_Fragment = { name?: Types.Maybe<string>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }> };
+
+export type ProductPageDescription_ConfigurableProduct_Fragment = { name?: Types.Maybe<string>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }> };
+
+export type ProductPageDescription_DownloadableProduct_Fragment = { name?: Types.Maybe<string>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }> };
+
+export type ProductPageDescription_GroupedProduct_Fragment = { name?: Types.Maybe<string>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }> };
+
+export type ProductPageDescription_SimpleProduct_Fragment = { name?: Types.Maybe<string>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }> };
+
+export type ProductPageDescription_VirtualProduct_Fragment = { name?: Types.Maybe<string>, short_description?: Types.Maybe<{ html: string }>, description?: Types.Maybe<{ html: string }> };
+
+export type ProductPageDescriptionFragment = ProductPageDescription_BundleProduct_Fragment | ProductPageDescription_ConfigurableProduct_Fragment | ProductPageDescription_DownloadableProduct_Fragment | ProductPageDescription_GroupedProduct_Fragment | ProductPageDescription_SimpleProduct_Fragment | ProductPageDescription_VirtualProduct_Fragment;

package/components/ProductPageDescription/ProductPageDescription.graphql

@@ -0,0 +1,9 @@
+fragment ProductPageDescription on ProductInterface {
+  name
+  short_description {
+    html
+  }
+  description {
+    html
+  }
+}

package/components/ProductPageDescription/index.tsx

@@ -0,0 +1,54 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
+
+const useStyles = makeStyles((theme: Theme) => ({
+  /* nested styles because we don't know beforehand which elements the description contains */
+  description: {
+    ...theme.typography.h4,
+    fontWeight: 400,
+    [theme.breakpoints.up('md')]: {
+      ...theme.typography.h3,
+      fontWeight: 400,
+    },
+    '& p:first-of-type': {
+      marginTop: 0,
+    },
+    '& p, & li': {
+      ...theme.typography.h4,
+      fontWeight: 400,
+      [theme.breakpoints.up('md')]: {
+        ...theme.typography.h3,
+        fontWeight: 400,
+      },
+    },
+    '& ul': {
+      padding: 0,
+      margin: 0,
+      display: 'inline',
+      listStyleType: 'none',
+    },
+    '& li': {
+      display: 'inline',
+    },
+  },
+}))
+
+export type ProductPageDescriptionProps = ProductPageDescriptionFragment
+
+export default function ProductPageDescription(props: ProductPageDescriptionProps) {
+  const classes = useStyles()
+  const { description } = props
+
+  return (
+    <>
+      {/* eslint-disable-next-line react/no-danger */}
+      {description && (
+        <div
+          className={classes.description}
+          dangerouslySetInnerHTML={{ __html: description.html }}
+        />
+      )}
+    </>
+  )
+}

package/components/ProductPageGallery/ProductImage.gql.ts

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

package/components/ProductPageGallery/ProductImage.graphql

@@ -0,0 +1,4 @@
+fragment ProductImage on ProductImage {
+  url
+  label
+}

package/components/ProductPageGallery/ProductImage.tsx

@@ -0,0 +1,10 @@
+import { Image } from '@graphcommerce/image'
+import { ProductImageFragment } from './ProductImage.gql'
+
+export default function ProductImage(props: ProductImageFragment) {
+  const { url, label } = props
+
+  if (!url) return null
+
+  return <Image src={url} width={328} height={328} alt={label ?? ''} dontReportWronglySizedImages />
+}

package/components/ProductPageGallery/ProductPageGallery.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductPageGallery_BundleProduct_Fragment = { media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: Types.Maybe<string> }> }>>> };
+
+export type ProductPageGallery_ConfigurableProduct_Fragment = { media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: Types.Maybe<string> }> }>>> };
+
+export type ProductPageGallery_DownloadableProduct_Fragment = { media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: Types.Maybe<string> }> }>>> };
+
+export type ProductPageGallery_GroupedProduct_Fragment = { media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: Types.Maybe<string> }> }>>> };
+
+export type ProductPageGallery_SimpleProduct_Fragment = { media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: Types.Maybe<string> }> }>>> };
+
+export type ProductPageGallery_VirtualProduct_Fragment = { media_gallery?: Types.Maybe<Array<Types.Maybe<{ __typename: 'ProductImage', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, url?: Types.Maybe<string> } | { __typename: 'ProductVideo', label?: Types.Maybe<string>, position?: Types.Maybe<number>, disabled?: Types.Maybe<boolean>, video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: Types.Maybe<string> }> }>>> };
+
+export type ProductPageGalleryFragment = ProductPageGallery_BundleProduct_Fragment | ProductPageGallery_ConfigurableProduct_Fragment | ProductPageGallery_DownloadableProduct_Fragment | ProductPageGallery_GroupedProduct_Fragment | ProductPageGallery_SimpleProduct_Fragment | ProductPageGallery_VirtualProduct_Fragment;

package/components/ProductPageGallery/ProductPageGallery.graphql

@@ -0,0 +1,10 @@
+fragment ProductPageGallery on ProductInterface {
+  media_gallery {
+    __typename
+    label
+    position
+    disabled
+    ...ProductImage
+    ...ProductVideo
+  }
+}

package/components/ProductPageGallery/ProductVideo.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductVideoFragment = { video_content?: Types.Maybe<{ media_type?: Types.Maybe<string>, video_description?: Types.Maybe<string>, video_metadata?: Types.Maybe<string>, video_provider?: Types.Maybe<string>, video_title?: Types.Maybe<string>, video_url?: Types.Maybe<string> }> };

package/components/ProductPageGallery/ProductVideo.graphql

@@ -0,0 +1,10 @@
+fragment ProductVideo on ProductVideo {
+  video_content {
+    media_type
+    video_description
+    video_metadata
+    video_provider
+    video_title
+    video_url
+  }
+}

package/components/ProductPageGallery/ProductVideo.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ProductVideoFragment } from './ProductVideo.gql'
+
+export default function ProductVideo(props: ProductVideoFragment) {
+  const { video_content } = props
+
+  if (!video_content?.video_url) return null
+
+  // eslint-disable-next-line jsx-a11y/media-has-caption
+  return <video src={video_content.video_url} />
+}

package/components/ProductPageGallery/index.tsx

@@ -0,0 +1,37 @@
+import { SidebarGallery, SidebarGalleryProps, TypeRenderer } from '@graphcommerce/next-ui'
+import React, { PropsWithChildren } from 'react'
+import { ProductPageGalleryFragment } from './ProductPageGallery.gql'
+
+export type ProductPageGalleryRenderers = TypeRenderer<
+  NonNullable<NonNullable<ProductPageGalleryFragment['media_gallery']>[0]>
+>
+
+type ProductPageGalleryProps = PropsWithChildren<ProductPageGalleryFragment> &
+  Omit<SidebarGalleryProps, 'sidebar' | 'images'>
+
+export default function ProductPageGallery(props: ProductPageGalleryProps) {
+  const {
+    media_gallery,
+    children,
+    aspectRatio: [width, height] = [1532, 1678],
+    ...sidebarProps
+  } = props
+
+  return (
+    <SidebarGallery
+      {...sidebarProps}
+      sidebar={children}
+      aspectRatio={[width, height]}
+      images={
+        media_gallery?.map((item) => {
+          if (item?.__typename === 'ProductImage')
+            return { src: item.url ?? '', alt: item.label || undefined, width, height }
+          return {
+            src: '',
+            alt: `{${item?.__typename} not yet supported}`,
+          }
+        }) ?? []
+      }
+    />
+  )
+}

package/components/ProductPageMeta/ProductPageMeta.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductPageMeta_BundleProduct_Fragment = { __typename: 'BundleProduct', name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, uid: string };
+
+export type ProductPageMeta_ConfigurableProduct_Fragment = { __typename: 'ConfigurableProduct', name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, uid: string };
+
+export type ProductPageMeta_DownloadableProduct_Fragment = { __typename: 'DownloadableProduct', name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, uid: string };
+
+export type ProductPageMeta_GroupedProduct_Fragment = { __typename: 'GroupedProduct', name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, uid: string };
+
+export type ProductPageMeta_SimpleProduct_Fragment = { __typename: 'SimpleProduct', name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, uid: string };
+
+export type ProductPageMeta_VirtualProduct_Fragment = { __typename: 'VirtualProduct', name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, uid: string };
+
+export type ProductPageMetaFragment = ProductPageMeta_BundleProduct_Fragment | ProductPageMeta_ConfigurableProduct_Fragment | ProductPageMeta_DownloadableProduct_Fragment | ProductPageMeta_GroupedProduct_Fragment | ProductPageMeta_SimpleProduct_Fragment | ProductPageMeta_VirtualProduct_Fragment;