@jetshop/template-trend 5.10.0 → 5.12.0

package/src/components/ProductList/Product.js

@@ -7,7 +7,7 @@ import { SelectVariant } from './SelectVariant';
 import { ReactComponent as TrashSVG } from '../../svg/trash.svg';
 import { useProductList } from '@jetshop/core/hooks/ProductList';
 
-export function Product({ product, loading, children }) {
+export function Product({ product, loading, children, listId }) {
   // Use the variant's image for display
   const productForDisplay = { ...product };
   if (product.isVariant && product.variant.images) {
@@ -19,7 +19,7 @@ export function Product({ product, loading, children }) {
       <ProductCard product={productForDisplay} as="div">
         {product.hasVariants && (
           <div className="select-variant">
-            <SelectVariant product={product} />
+            <SelectVariant listId={listId} product={product} />
           </div>
         )}
         {product.validation.status === 'valid' ? (
@@ -28,6 +28,7 @@ export function Product({ product, loading, children }) {
           <InvalidProduct validation={product.validation} />
         )}
         <RemoveFromList
+          listId={listId}
           articleNumber={product.articleNumber}
           variant={product.variant}
         />
@@ -36,8 +37,8 @@ export function Product({ product, loading, children }) {
   );
 }
 
-function RemoveFromList({ children, articleNumber, variant }) {
-  const { remove } = useProductList();
+function RemoveFromList({ children, articleNumber, variant, listId }) {
+  const { remove } = useProductList(listId);
   const variantArticleNumber = variant?.articleNumber;
   return (
     <button

package/src/components/ProductList/ProductLists.gql

@@ -12,8 +12,8 @@ query ProductsFromProductList($articleNumbers: [String]) {
 }
 
 ## query
-query ProductList {
-  customerProductList {
+query ProductList($id: ID) {
+  customerProductList(id: $id) {
     ...ProductListFragment
   }
 }
@@ -27,7 +27,7 @@ mutation AddToProductList($id: ID, $items: [AddToCustomerProductListInput!]!) {
   }
 }
 
-## remove
+## remove article from product list
 mutation RemoveFromProductList($id: ID, $articleNumbers: [String!]) {
   removeFromCustomerProductList(id: $id, articleNumbers: $articleNumbers) {
     customerProductList {
@@ -54,9 +54,12 @@ mutation MergeProductLists($id: ID, $items: [AddToCustomerProductListInput!]!) {
   }
 }
 
-### Fragments ###
-
 fragment MinimalProductListDetail on CustomerProductList {
+  id
+  name
+  # TODO
+  # typeId {...}
+  # description
   items {
     variant {
       articleNumber

package/src/components/ProductList/SelectVariant.js

@@ -10,18 +10,14 @@ import {
 import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
 import React from 'react';
 
-export function SelectVariant({ product }) {
-  const { update } = useProductList();
+export function SelectVariant({ product, listId }) {
+  const { update } = useProductList(listId);
   const initialVariant = product.variant;
 
-  const {
-    selectedVariant,
-    selectValue,
-    getSelectedValue,
-    validateSelection
-  } = useProductVariants(product, {
-    initialVariant
-  });
+  const { selectedVariant, selectValue, getSelectedValue, validateSelection } =
+    useProductVariants(product, {
+      initialVariant
+    });
 
   React.useEffect(() => {
     // When a variant is selected, call the update function from useProductList to update the list

package/src/components/ProductList/productListQueries.js

@@ -1,6 +1,11 @@
+import queries from '@jetshop/core/data/queries/ProductLists.gql';
+import mutations from '@jetshop/core/data/mutations/productListMutations.gql';
 import * as ProductListQueries from './ProductLists.gql';
 
 export const productListQueries = {
+  createList: mutations.CreateProductList,
+  deleteList: mutations.DeleteProductList,
+  all: queries.ProductLists,
   query: ProductListQueries.ProductList,
   productsQuery: ProductListQueries.ProductsFromProductList,
   add: ProductListQueries.AddToProductList,

package/src/components/ProductPage/AddToCart/AddToCartForm.js

@@ -1,15 +1,17 @@
+import React, { useContext } from 'react';
+import { styled } from 'linaria/react';
+import { css, cx } from 'linaria';
+import { Form } from 'formik';
+
 import AddToCartFormik from '@jetshop/core/cart/AddToCartFormik';
 import ProductConfigurationContext from '@jetshop/core/components/ProductConfigurationProvider/ProductConfigurationContext';
 import { useDynamicPrice } from '@jetshop/core/hooks/useDynamicPrice';
 import t from '@jetshop/intl';
 import { Price } from '@jetshop/ui/Price';
 import { useStockStatus } from '@jetshop/ui/Stock/StockStatusContainer';
-import { Form } from 'formik';
-import React, { useContext } from 'react';
-import { styled } from 'linaria/react';
-import { css, cx } from 'linaria';
-import addToCartMutation from '../../Cart/addToCart.gql';
-import CartQuery from '../../Cart/CartQuery.gql';
+import { PreOrderDateSelector } from '@jetshop/ui/PreOrderDateSelector';
+import { useNotification } from '@jetshop/core/components/Notifications';
+
 import InputWithLabel from '../../Forms/Input';
 import Button from '../../ui/Button';
 import { IncludedInPackages } from '../PackageProduct/IncludedInPackages';
@@ -19,11 +21,12 @@ import StockStatusIndicator from '../StockStatus/StockStatusIndicator';
 import { useProductValidationMessage } from '../useProductValidationMessage';
 import { VariantSelector, dropdownStyles } from '../VariantSelector';
 import { theme } from '../../Theme';
-import { useNotification } from '@jetshop/core/components/Notifications';
 import ProductToastWrapper from './ProductToast';
 import { ConfigurationSelector } from '../ConfigurationSelector';
 import WarehouseStock from '../StockStatus/WarehouseStock';
-import { PreOrderDateSelector } from '@jetshop/ui/PreOrderDateSelector';
+
+import addToCartMutation from '../../Cart/queries/addToCart.gql';
+import CartQuery from '../../Cart/queries/cartQuery.gql';
 
 const StyledForm = styled(Form)`
   display: flex;
@@ -56,7 +59,7 @@ function AddToCartForm({
   product,
   variant,
   getMissingOptions,
-  variantHandler,
+  variantHandler
 }) {
   const configurationContext = useContext(ProductConfigurationContext);
   const price = useDynamicPrice(product, variant);
@@ -68,7 +71,7 @@ function AddToCartForm({
     missingOptions,
     variantValidation,
     hasVariants,
-    stockStatus,
+    stockStatus
   });
   const [trigger, dismiss] = useNotification();
 
@@ -82,12 +85,12 @@ function AddToCartForm({
       />,
       {
         id: mutationId,
-        type: 'add-to-cart',
+        type: 'add-to-cart'
       }
     );
   };
   const onAddToCartError = () => {
-    return ({ selectedVariation, mutationId, quantity, price, error }) => {
+    return ({ mutationId, quantity, price, error }) => {
       dismiss(mutationId);
 
       trigger(
@@ -99,7 +102,7 @@ function AddToCartForm({
           error={error}
         />,
         {
-          type: 'add-to-cart',
+          type: 'add-to-cart'
         }
       );
     };
@@ -136,9 +139,7 @@ function AddToCartForm({
               css={{
                 marginBottom: '24px',
                 opacity:
-                  configurationContext && configurationContext.loading
-                    ? 0.3
-                    : 1,
+                  configurationContext && configurationContext.loading ? 0.3 : 1
               }}
             />
 
@@ -151,7 +152,7 @@ function AddToCartForm({
 
             <StyledForm>
               {product.customerComments &&
-                product.customerComments.map((comment) => (
+                product.customerComments.map(comment => (
                   <InputWithLabel
                     wrapperClassName="customer-comment-input-wrapper"
                     className="customer-comment-input"
@@ -184,7 +185,7 @@ function AddToCartForm({
                     style={{
                       opacity: !!validationMessage ? 0.7 : 1,
                       cursor: !!validationMessage ? 'not-allowed' : 'pointer',
-                      width: '100%',
+                      width: '100%'
                     }}
                   >
                     {validationMessage ? validationMessage : t('Add to cart')}

package/src/components/ProductPage/AddToCart/ProductToast.js

@@ -1,3 +1,6 @@
+import React from 'react';
+import { styled } from 'linaria/react';
+
 import { useTracker } from '@jetshop/core/analytics/Analytics';
 import { trackCartCheckoutEvent } from '@jetshop/core/analytics/tracking';
 import ChannelContext from '@jetshop/core/components/ChannelContext';
@@ -5,11 +8,11 @@ import CartProvider from '@jetshop/core/components/Query/CartProvider';
 import t from '@jetshop/intl';
 import Image from '@jetshop/ui/Image/Image';
 import { Price } from '@jetshop/ui/Price';
-import { theme } from '../../Theme';
-import React from 'react';
-import { styled } from 'linaria/react';
+
 import { baseStyles } from '../../ui/Button';
-import cartQuery from '../../Cart/CartQuery.gql';
+import { theme } from '../../Theme';
+
+import cartQuery from '../../Cart/queries/cartQuery.gql';
 
 const Container = styled('aside')`
   ${theme.above.sm} {
@@ -140,9 +143,17 @@ const ProductToast = ({
           <ChannelContext.Consumer>
             {({ selectedChannel }) => (
               <CheckoutButton
-                href={`${cart.externalCheckoutUrl}&channelCountry=${selectedChannel.country.code}`}
-                onClick={() => {
-                  track(trackCartCheckoutEvent({ cart }));
+                href={cart.externalCheckoutUrl}
+                onClick={event => {
+                  event.preventDefault();
+                  track(
+                    trackCartCheckoutEvent({
+                      cart: cart,
+                      callback: () => {
+                        window.location = cart.externalCheckoutUrl;
+                      }
+                    })
+                  );
                 }}
               >
                 {t('To checkout')}

package/src/components/ProductPage/Images/ImageContainer.js

@@ -26,9 +26,20 @@ export default function ImageContainer({ images, badges, variant, ...rest }) {
     variant
   });
 
+  const selectedVariantImageIndex = variant
+    ? images.findIndex(image => image.url === variant.images?.[0]?.url)
+    : null;
+
   return (
     <div {...rest} className={cx(rest.className, wrapper)}>
-      <Gallery aspect={'1:1'} images={images} galleryRef={galleryRef}>
+      <Gallery
+        aspect={'1:1'}
+        images={images}
+        galleryRef={galleryRef}
+        eagerlyLoad={
+          selectedVariantImageIndex ? [0, selectedVariantImageIndex] : [0]
+        }
+      >
         <Badges badges={badges} />
       </Gallery>
     </div>

package/src/components/ProductPage/PackageProduct/PackageProduct.js

@@ -1,11 +1,11 @@
-import { usePackageProduct } from '@jetshop/core/hooks/PackageProducts';
-import { useIntl } from '@jetshop/intl';
-import { Price } from '@jetshop/ui/Price';
 import React, { useEffect, useRef } from 'react';
 import { styled } from 'linaria/react';
 import { css } from 'linaria';
-import addMultipleToCartMutation from '../../Cart/addMultipleToCart.gql';
-import cartQuery from '../../Cart/CartQuery.gql';
+
+import { usePackageProduct } from '@jetshop/core/hooks/PackageProducts';
+import { useIntl } from '@jetshop/intl';
+import { Price } from '@jetshop/ui/Price';
+import { useNotification } from '@jetshop/core/components/Notifications';
 import { ReactComponent as Cart } from '../../../svg/Cart.svg';
 import {
   default as Button,
@@ -14,7 +14,9 @@ import {
 import { PackageProductItem } from './PackageProductItem';
 import packageProductQuery from './PackageProductQuery.gql';
 import { theme } from '../../Theme';
-import { useNotification } from '@jetshop/core/components/Notifications';
+
+import addMultipleToCartMutation from '../../Cart/queries/addMultipleToCart.gql';
+import cartQuery from '../../Cart/queries/cartQuery.gql';
 
 const PackageProductWrapper = styled('div')`
   padding: 12px;

package/src/components/ProductPage/ProductInfo.js

@@ -56,7 +56,7 @@ const ProductInfo = ({ product }) => {
           />
         </ProductSection>
       )}
-      {product.customFields.length > 0 && (
+      {product.customFields?.length > 0 && (
         <ProductSection>
           <SectionHeading>{t('Specifications')}</SectionHeading>
           <ProductSpecifications fields={product.customFields} />

package/src/components/ProductPage/ProductPage.js

@@ -129,10 +129,8 @@ const Product = ({ result: { data, loading }, product }) => {
     preselectCheapest: true
   });
 
-  const {
-    selectedVariant: selectedVariation,
-    getMissingOptions
-  } = variantHandler;
+  const { selectedVariant: selectedVariation, getMissingOptions } =
+    variantHandler;
 
   // Return early if there is no product
   if (!product)
@@ -150,8 +148,8 @@ const Product = ({ result: { data, loading }, product }) => {
     <ProductContainer>
       <MaxWidth>
         <Breadcrumbs
+          breadcrumbs={data?.route?.breadcrumbs || []}
           parents={parents}
-          breadcrumbText={product.breadcrumbText}
         />
       </MaxWidth>
       <Container>

package/src/components/ProductPage/ProductPageFragment.gql

@@ -33,6 +33,7 @@ fragment ProductPage on Product {
   primaryRoute {
     path
     id
+    breadcrumbs
   }
   ...ProductPrice
   stockStatus {

package/src/components/ProductPage/StockStatus/WarehouseStock.js

@@ -207,21 +207,19 @@ const WarehouseStock = ({ product, variantHandler }) => {
 
 const WarehouseStockItem = ({ item, missingOptions, validation }) => {
   return (
-    <>
-      <WarehouseStockWrapper className="warehouse-stock-wrapper">
-        <p className="stock-status-header">
-          <span className="store-icon">
-            <StoreIcon />
-          </span>
-          <span className="header-title">{t('Find product in store')}</span>
-        </p>
-        <WarehouseValidation
-          validation={validation}
-          missingOptions={missingOptions}
-          item={item}
-        ></WarehouseValidation>
-      </WarehouseStockWrapper>
-    </>
+    <WarehouseStockWrapper className="warehouse-stock-wrapper">
+      <p className="stock-status-header">
+        <span className="store-icon">
+          <StoreIcon />
+        </span>
+        <span className="header-title">{t('Find product in store')}</span>
+      </p>
+      <WarehouseValidation
+        validation={validation}
+        missingOptions={missingOptions}
+        item={item}
+      />
+    </WarehouseStockWrapper>
   );
 };
 
@@ -257,7 +255,7 @@ function WarehouseValidation({ validation, missingOptions, item }) {
             <WarehouseStockItemContent
               warehouse={warehouse}
               productVariant={productVariant}
-              key-={warehouse.location?.id}
+              key={warehouse.location?.id}
             />
           ))}
         </ul>
@@ -295,7 +293,7 @@ const WarehouseStockItemContent = ({ warehouse, productVariant }) => {
   }
 
   return (
-    <li key={warehouse.location?.id} className="warehouse-list-item">
+    <li className="warehouse-list-item">
       <div className="warehouse-name">
         <span>{warehouse.location?.name}</span>
       </div>

package/src/components/ProductPage/VariantSelector.js

@@ -159,7 +159,7 @@ function DropdownVariantSelect({
               <DropdownMenuItem
                 data-testid={value + option.name}
                 key={value + option.name}
-                disabled={doNotDisable && validation === 'invalid'}
+                disabled={!doNotDisable && validation === 'invalid'}
                 onSelect={({ setIsOpen }) => {
                   selectValue(value, option);
                   setIsOpen(false);

package/src/components/RouteQuery.gql

@@ -1,4 +1,4 @@
-#import "@jetshop/core/data/fragments/RouteCrumbFragment.gql"
+#import "@jetshop/core/data/fragments/RouteMetaFragment.gql"
 #import "@jetshop/core/data/fragments/HeadFragment.gql"
 #import "./CategoryPage/CategoryPageFragment.gql"
 #import "./ContentPage/ContentPageFragment.gql"
@@ -12,7 +12,7 @@ query route(
   $filters: FilterInput
 ) {
   route(path: $path) {
-    ...RouteCrumb
+    ...RouteMeta
     object {
       ...Head
       ...CategoryPage

package/src/components/{StartPage → SearchPage}/CategoryList.js

@@ -3,7 +3,7 @@ import { styled } from 'linaria/react';
 import CategoryLink from '@jetshop/ui/CategoryLink';
 import Image from '@jetshop/ui/Image';
 import { theme } from '../Theme';
-import { MainSectionWrapper } from './StartPage';
+import MaxWidth from '../Layout/MaxWidth';
 
 const ScrollWrapper = styled('div')`
   margin: 0 -1.5rem;
@@ -112,7 +112,9 @@ const CategoriesHeader = styled('h3')`
   }
 `;
 
-const CategoryListWrapper = styled('div')``;
+const CategoryListWrapper = styled('div')`
+  padding: 1rem 0;
+`;
 
 const Category = ({ category }) => {
   const categoryImageUrl = category?.images?.[0]?.url;
@@ -135,7 +137,7 @@ const Category = ({ category }) => {
 };
 const CategoryList = ({ title, categories, className = '' }) => {
   return (
-    <MainSectionWrapper className={className}>
+    <MaxWidth className={className}>
       <CategoryListWrapper>
         <CategoriesHeader>{title}</CategoriesHeader>
         <ScrollWrapper>
@@ -146,7 +148,7 @@ const CategoryList = ({ title, categories, className = '' }) => {
           </CategoriesWrapper>
         </ScrollWrapper>
       </CategoryListWrapper>
-    </MainSectionWrapper>
+    </MaxWidth>
   );
 };
 

package/src/components/SearchPage/EmptySearchResults.js

@@ -1,7 +1,7 @@
 import t from '@jetshop/intl';
 import React from 'react';
 import { Query } from 'react-apollo';
-import CategoryList from '../StartPage/CategoryList';
+import CategoryList from './CategoryList';
 import { Header, Matches } from './SearchPage';
 import SearchTerm from './SearchTerm';
 import EmptySearchCategoriesQuery from './EmptySearchCategoriesQuery.gql';

package/src/components/Shop.js

@@ -1,60 +1,53 @@
-import DynamicRoute from '@jetshop/core/components/DynamicRoute';
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { Route, Switch } from 'react-router-dom';
+
 import CustomFont from '@jetshop/core/components/Fonts/CustomFont';
+import DynamicRoute from '@jetshop/core/components/DynamicRoute';
 import PaginationProvider from '@jetshop/core/components/Pagination/PaginationProvider';
 import { ProductListProvider } from '@jetshop/core/hooks/ProductList/ProductListContext';
 import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+
 import GenericError from '@jetshop/ui/ErrorBoundary/Generic';
 import LoadingBar from '@jetshop/ui/Loading/LoadingBar';
 import ModalProvider from '@jetshop/ui/Modal/ModalProvider';
 import ModalRoot from '@jetshop/ui/Modal/ModalRoot';
 import ScrollRestorationHandler from '@jetshop/ui/ScrollRestorationHandler';
-import React from 'react';
-import { Helmet } from 'react-helmet-async';
-import loadable from '@loadable/component';
-import { Route, Switch } from 'react-router-dom';
-import loadFontCss from '../fonts/loadFontCss';
-import CategoryPreviewQuery from './CategoryPreviewQuery.gql';
-import PagePreviewQuery from './PagePreviewQuery.gql';
+
 import Container from './Layout/Container';
 import Content from './Layout/Content';
 import Footer from './Layout/Footer/Footer';
 import Header from './Layout/Header/Header';
+
+import ForgotPassword from './Auth/ForgotPassword.loadable';
+import LogInPage from './Auth/LogInPage.loadable';
+import ResetPassword from './Auth/ResetPassword.loadable';
+import SignUpPage from './Auth/Signup/SignUpPage.loadable';
+import CategoryPage from './CategoryPage/CategoryPage.loadable';
+import ContentPage from './ContentPage/ContentPage.loadable';
+import CookieConsent from './CookieConsent';
 import LoadingPage from './LoadingPage';
+import LogOutPage from './LogOut.loadable';
+import MyPages from './MyPages/MyPages.loadable';
+import NavTreePage from './NavigationTree/NavTreePage.loadable';
+import NotFoundPage from './NotFoundPage.loadable';
+import PreviewRoute from './PreviewRoute.loadable';
 import { Favourites } from './ProductList/Favourites';
 import { productListQueries } from './ProductList/productListQueries';
-import ProductPreviewQuery from './ProductPreviewQuery.gql';
-import routeQuery from './RouteQuery.gql';
-import { theme } from './Theme';
-import '../globalStyles';
-import CookieConsent from './CookieConsent';
-import Store from './Store/Store.loadable';
-import StoreLocator from './StoreLocator/StoreLocator.loadable';
-import NotFoundPage from './NotFoundPage.loadable';
-import LogInPage from './Auth/LogInPage.loadable';
-import NavTreePage from './NavigationTree/NavTreePage.loadable';
-import StartPage from './StartPage/StartPage.loadable';
 import ProductPage from './ProductPage/ProductPage.loadable';
-import CategoryPage from './CategoryPage/CategoryPage.loadable';
-import ContentPage from './ContentPage/ContentPage.loadable';
 import SearchPage from './SearchPage/SearchPage.loadable';
-import SignUpPage from './Auth/Signup/SignUpPage.loadable';
-import ForgotPassword from './Auth/ForgotPassword.loadable';
-import ResetPassword from './Auth/ResetPassword.loadable';
-import MyPages from './MyPages/MyPages.loadable';
+import StartPage from './StartPage/StartPage.loadable';
+import Store from './Store/Store.loadable';
+import StoreLocator from './StoreLocator/StoreLocator.loadable';
 
-const LogOutPage = loadable(
-  () => import('@jetshop/core/components/AuthContext/LogOut'),
-  {
-    fallback: <LoadingPage />
-  }
-);
+import categoryPreviewQuery from './CategoryPreviewQuery.gql';
+import pagePreviewQuery from './PagePreviewQuery.gql';
+import productPreviewQuery from './ProductPreviewQuery.gql';
+import routeQuery from './RouteQuery.gql';
 
-const PreviewRoute = loadable(
-  () => import('@jetshop/core/components/DynamicRoute/PreviewRoute'),
-  {
-    fallback: <LoadingPage />
-  }
-);
+import { theme } from './Theme';
+import loadFontCss from '../fonts/loadFontCss';
+import '../globalStyles';
 
 function Shop() {
   const { routes } = useShopConfig();
@@ -76,49 +69,32 @@ function Shop() {
             <Content>
               <PaginationProvider defaultProductsPerPage={24}>
                 <Switch>
-                  <Route exact path="/">
-                    <StartPage />
-                  </Route>
-                  <Route path="/favourites">
-                    <Favourites />
-                  </Route>
-                  <Route path={routes.search.path}>
-                    <SearchPage />
-                  </Route>
-                  <Route path={routes.signup.path}>
-                    <SignUpPage />
-                  </Route>
-                  <Route path={routes.login.path}>
-                    <LogInPage />
-                  </Route>
-                  <Route path={routes.logout.path}>
-                    <LogOutPage />
-                  </Route>
-                  <Route path={routes.stores.path}>
-                    <StoreLocator />
-                  </Route>
-                  <Route path={`${routes.store.path}/:id`}>
-                    <Store />
-                  </Route>
-                  <Route path={routes.tree.path}>
-                    <NavTreePage />
-                  </Route>
-                  <Route path={routes.myPages.path}>
-                    <MyPages />
-                  </Route>
-                  <Route exact path={routes.forgotPassword.path}>
-                    <ForgotPassword />
-                  </Route>
-                  <Route path={`${routes.resetPassword.path}/:token`}>
-                    <ResetPassword />
-                  </Route>
+                  <Route exact path="/" component={StartPage} />
+                  <Route path="/favourites" component={Favourites} />
+                  <Route path={routes.search.path} component={SearchPage} />
+                  <Route path={routes.signup.path} component={SignUpPage} />
+                  <Route path={routes.login.path} component={LogInPage} />
+                  <Route path={routes.logout.path} component={LogOutPage} />
+                  <Route path={routes.stores.path} component={StoreLocator} />
+                  <Route path={`${routes.store.path}/:id`} component={Store} />
+                  <Route path={routes.tree.path} component={NavTreePage} />
+                  <Route path={routes.myPages.path} component={MyPages} />
+                  <Route
+                    exact
+                    path={routes.forgotPassword.path}
+                    component={ForgotPassword}
+                  />
+                  <Route
+                    path={`${routes.resetPassword.path}/:token`}
+                    component={ResetPassword}
+                  />
                   <Route
                     path="/preview"
                     render={props => (
                       <PreviewRoute
-                        productQuery={ProductPreviewQuery}
-                        categoryQuery={CategoryPreviewQuery}
-                        pageQuery={PagePreviewQuery}
+                        productQuery={productPreviewQuery}
+                        categoryQuery={categoryPreviewQuery}
+                        pageQuery={pagePreviewQuery}
                         productPage={ProductPage}
                         categoryPage={CategoryPage}
                         contentPage={ContentPage}