@jetshop/template-trend 5.9.0 → 5.11.2

package/src/components/Layout/Header/AutocompleteQuery.gql

@@ -8,12 +8,7 @@ query AutocompleteQuery($term: String!) {
           id
           slug
           path
-          parents {
-            id
-            object {
-              breadcrumbText
-            }
-          }
+          breadcrumbs
         }
       }
     }

package/src/components/Layout/Header/ChannelSelector/ChannelSelector.js

@@ -13,6 +13,7 @@ const Flyout = styled('div')`
 
 const CountryFlag = styled('img')`
   height: 12px;
+  width: 12px;
   margin-right: 5px;
 `;
 
@@ -32,6 +33,8 @@ export default class HeaderChannelSelector extends Component {
                   <CountryFlag
                     src={`https://countryflags.jetshop.io/${selectedChannel.country.code}/flat/32.png`}
                     alt="Country Flag"
+                    width="16"
+                    height="12"
                   />
                   {selectedChannel.country.name}
                 </button>

package/src/components/Layout/Header/ChannelSelector/ChannelSelectorModal.js

@@ -26,9 +26,8 @@ const modalStyles = css`
 `;
 
 const ChannelSelectorModal = props => {
-  const { selectedChannel, channels, updateChannel } = useContext(
-    ChannelContext
-  );
+  const { selectedChannel, channels, updateChannel } =
+    useContext(ChannelContext);
 
   return (
     <ModalTrigger
@@ -49,6 +48,8 @@ const ChannelSelectorModal = props => {
             src={`https://countryflags.jetshop.io/${selectedChannel.country.code}/flat/32.png`}
             alt="Country Flag"
             style={{ height: '12px', marginRight: '6px' }}
+            width="16"
+            height="12"
           />
           <span>{selectedChannel.country.name}</span>
         </Button>

package/src/components/Layout/Header/ChannelSelector/Selector.js

@@ -139,6 +139,8 @@ const Selector = ({
                 <CountryFlag
                   src={`https://countryflags.jetshop.io/${code}/flat/32.png`}
                   alt="Country Flag"
+                  width="16"
+                  height="12"
                 />
                 {name} ({channel.name})
               </Country>

package/src/components/Layout/Header/RecommendedChannel/RecommendedChannelSelector.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { styled } from 'linaria/react';
-import { css, cx } from 'linaria';
+import { cx } from 'linaria';
 import t from '@jetshop/intl';
 import ChannelSelector, {
   LangCurrWrapper,
@@ -153,6 +153,8 @@ const Selector = ({
                   <CountryFlag
                     src={`https://countryflags.jetshop.io/${code}/flat/32.png`}
                     alt="Country Flag"
+                    width="16"
+                    height="12"
                   />
                   {name} ({channel.name})
                 </Country>

package/src/components/Layout/Header/TopNav.js

@@ -47,14 +47,16 @@ const List = styled('ul')`
   }
 `;
 
-export default ({ children, searchOpen, left, ...rest }) => (
-  <List
-    className={cx(left ? 'left' : null, searchOpen && 'searchOpen')}
-    {...rest}
-  >
-    {React.Children.map(
-      children,
-      item => item && <li className="top-nav-list-item">{item}</li>
-    )}
-  </List>
-);
+export default function TopNav({ children, searchOpen, left, ...rest }) {
+  return (
+    <List
+      className={cx(left ? 'left' : null, searchOpen && 'searchOpen')}
+      {...rest}
+    >
+      {React.Children.map(
+        children,
+        item => item && <li className="top-nav-list-item">{item}</li>
+      )}
+    </List>
+  );
+}

package/src/components/LogOut.loadable.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from './LoadingPage';
+
+export default loadable(
+  () => import('@jetshop/core/components/AuthContext/LogOut'),
+  {
+    fallback: <LoadingPage />
+  }
+);

package/src/components/MyPages/MyPagesSidebar.js

@@ -1,4 +1,3 @@
-import useAuth from '@jetshop/core/components/AuthContext/useAuth';
 import t from '@jetshop/intl';
 import React from 'react';
 import { css } from 'linaria';

package/src/components/PreviewRoute.loadable.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from './LoadingPage';
+
+export default loadable(
+  () => import('@jetshop/core/components/DynamicRoute/PreviewRoute'),
+  {
+    fallback: <LoadingPage />
+  }
+);

package/src/components/ProductList/AddToCart.js

@@ -1,13 +1,16 @@
+import React, { useContext } from 'react';
+import { css } from 'linaria';
 import { useMutation } from '@apollo/react-hooks';
+
+import t from '@jetshop/intl';
 import { CartIdContext } from '@jetshop/core/components/Cart/CartIdContext';
 import { addToCartSuccess } from '@jetshop/core/components/Mutation/AddToCart/addToCartUtils';
-import t from '@jetshop/intl';
-import React, { useContext } from 'react';
-import { css } from 'linaria';
-import { addToCart } from '../Cart/addToCart.gql';
-import ProductToastWrapper from '../ProductPage/AddToCart/ProductToast';
 import { useNotification } from '@jetshop/core/components/Notifications';
 
+import ProductToastWrapper from '../ProductPage/AddToCart/ProductToast';
+
+import { addToCart } from '../Cart/queries/addToCart.gql';
+
 const addButton = css`
   background: white;
   border: 0.75px solid #bfbdbd;

package/src/components/ProductList/Favourite.js

@@ -14,13 +14,13 @@ const favourite = css`
   }
 `;
 
-export function Favourite({ product, variant, ...rest }) {
+export function Favourite({ product, variant, listId, ...rest }) {
   const articleNumber = product.articleNumber;
 
   const selectedVariation = product.variant || variant;
   const variantArticleNumber = selectedVariation?.articleNumber;
 
-  const { toggle, inList } = useProductList();
+  const { toggle, inList } = useProductList(listId);
 
   function toggleWithoutBubble(e) {
     e.preventDefault();

package/src/components/ProductList/FavouriteCount.js

@@ -5,8 +5,8 @@ import { Link } from 'react-router-dom';
 import { ReactComponent as HeartSVG } from '../../svg/Heart.svg';
 import Badge from '../ui/Badge';
 
-export function FavouriteCount({ className }) {
-  const { count } = useProductList();
+export function FavouriteCount({ className, listId }) {
+  const { count } = useProductList(listId);
 
   return (
     <Link to="/favourites" className={className}>

package/src/components/ProductList/Favourites.js

@@ -1,22 +1,27 @@
+import React from 'react';
+import { css, cx } from 'linaria';
+
 import {
   useProductList,
   useProductListItems
 } from '@jetshop/core/hooks/ProductList';
 import { useAddMultipleToCart } from '@jetshop/core/hooks/useAddMultipleToCart';
 import t from '@jetshop/intl';
-import React from 'react';
-import { css, cx } from 'linaria';
-import { ReactComponent as Cart } from '../../svg/Cart.svg';
-import addMultipleToCartMutation from '../Cart/addMultipleToCart.gql';
-import cartQuery from '../Cart/CartQuery.gql';
+import { useNotification } from '@jetshop/core/components/Notifications';
+
+import { ReactComponent as CartIcon } from '../../svg/Cart.svg';
 import MaxWidth from '../Layout/MaxWidth';
 import { theme } from '../Theme';
 import Button from '../ui/Button';
 import { Product } from './Product';
-import { useNotification } from '@jetshop/core/components/Notifications';
+
+import addMultipleToCartMutation from '../Cart/queries/addMultipleToCart.gql';
+import cartQuery from '../Cart/queries/cartQuery.gql';
 
 export function Favourites() {
-  const { products, loading } = useProductListItems();
+  const listId = null;
+
+  const { products, loading } = useProductListItems(listId);
   const [trigger] = useNotification();
 
   const validItems = getItemsForAddToCart(products);
@@ -32,7 +37,7 @@ export function Favourites() {
       onCompleted: () => {
         trigger(
           <AddAllSuccessToast>
-            <Cart />
+            <CartIcon />
             {t(
               '{productCount, plural, =1 {# product added to the cart.} other {# products added to the cart.}}',
               { productCount: validItemCount }
@@ -73,7 +78,7 @@ export function Favourites() {
               key={product.variant?.articleNumber || product.articleNumber}
               data-valid={product.validation.status}
             >
-              <Product product={product} />
+              <Product listId={listId} product={product} />
             </li>
           );
         })}
@@ -96,7 +101,7 @@ export function Favourites() {
                 )
             : t('No valid items to add to cart')}
         </Button>
-        <ClearList>{t('Clear list')}</ClearList>
+        <ClearList listId={listId}>{t('Clear list')}</ClearList>
       </div>
     </MaxWidth>
   );
@@ -106,8 +111,8 @@ function AddAllSuccessToast({ children }) {
   return <div className={addAllToastStyles}>{children}</div>;
 }
 
-function ClearList({ children }) {
-  const { clear } = useProductList();
+function ClearList({ children, listId }) {
+  const { clear } = useProductList(listId);
   return (
     <Button secondary onClick={clear}>
       {children}

package/src/components/ProductList/Lister.js

@@ -0,0 +1,44 @@
+/*
+ * TODO This is temporary, delete before merging
+ *
+ */
+import React from 'react';
+import { useContext } from 'react';
+import { ProductListContext } from '@jetshop/core/hooks/ProductList/ProductListContext';
+import { Link } from 'react-router-dom';
+import useAuth from '@jetshop/core/components/AuthContext/useAuth';
+
+export default function Lister() {
+  const { state, createList, deleteList } = useContext(ProductListContext);
+  const { loggedIn } = useAuth();
+  return (
+    <>
+      <h2>Product lists</h2>
+      {loggedIn ? (
+        <button onClick={() => createList('BOOM')}>
+          Create a list a new list called BOOM
+        </button>
+      ) : (
+        <></>
+      )}
+
+      <br />
+
+      <ul>
+        {Array.from(state.lists.entries()).map(([listId, obj]) => (
+          <li key={listId} style={{ padding: '0.5em' }}>
+            <Link to={`/favourites/${listId || ''}`}>
+              {listId === null ? 'Default list' : obj.name}
+            </Link>
+            {listId === null ? (
+              <></>
+            ) : (
+              <button onClick={() => deleteList(listId)}>DELETE</button>
+            )}
+          </li>
+        ))}
+      </ul>
+      <hr />
+    </>
+  );
+}

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 { baseStyles } from '../../ui/Button';
 import { theme } from '../../Theme';
-import React from 'react';
-import { styled } from 'linaria/react';
-import { TrendLink, baseStyles } from '../../ui/Button';
-import cartQuery from '../../Cart/CartQuery.gql';
+
+import cartQuery from '../../Cart/queries/cartQuery.gql';
 
 const Container = styled('aside')`
   ${theme.above.sm} {

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 {