@jetshop/template-trend 5.10.0 → 5.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/template-trend",
-  "version": "5.10.0",
+  "version": "5.12.0",
   "license": "MIT",
   "scripts": {
     "build": "react-scripts build",
@@ -45,11 +45,11 @@
     ]
   },
   "dependencies": {
-    "@jetshop/core": "^5.10.0",
+    "@jetshop/core": "^5.12.0",
     "@jetshop/flight-shortcodes": "^2.0.10",
-    "@jetshop/intl": "^5.10.0",
-    "@jetshop/react-scripts": "^5.10.0",
-    "@jetshop/ui": "^5.10.0",
+    "@jetshop/intl": "^5.12.0",
+    "@jetshop/react-scripts": "^5.12.0",
+    "@jetshop/ui": "^5.12.0",
     "@react-google-maps/api": "~1.7.0",
     "prop-types": "^15.6.2",
     "react": "^16.9.0",

package/schema.graphql

@@ -212,7 +212,10 @@ type Category implements Document {
   """
   isDynamic: Boolean!
 
-  """Get content data set via the Content Editor"""
+  """
+  Get content data set via the Content Editor.NB: Carries a performance cost, as
+  asking for this will result in a separate API call in the backend.
+  """
   data: Content
 }
 
@@ -1356,7 +1359,7 @@ type PagedResult {
   result: [Product]!
 }
 
-"""The `Paging` scalar type represents a numeric values between (0; 100>"""
+"""The `Paging` scalar type represents a numeric values between <1; 100>"""
 scalar Paging
 
 input PagingInput {

package/src/components/Auth/ForgotPassword.js

@@ -13,7 +13,7 @@ import { activeSegment, smallSection } from './UI/Form';
 import MaxWidth from '../Layout/MaxWidth';
 import { cx } from 'linaria';
 
-export default function ForgotPasswordPage(props) {
+export default function ForgotPasswordPage() {
   return (
     <MaxWidth style={{ alignItems: 'center', marginTop: '2em' }}>
       <ForgotPasswordProvider>
@@ -28,13 +28,8 @@ export default function ForgotPasswordPage(props) {
 }
 
 function ForgotPasswordForm() {
-  const {
-    submitted,
-    isSubmitting,
-    globalError,
-    isValid,
-    emailInputProps
-  } = useForgotPasswordData();
+  const { submitted, isSubmitting, globalError, isValid, emailInputProps } =
+    useForgotPasswordData();
 
   if (submitted) {
     return (

package/src/components/Auth/README.md

@@ -0,0 +1,5 @@
+# Auth
+
+These components deal with registering and signing in, using Jetshop to keep track of memberships. This is usually used for customer loyalty programs, or for e.g. b2b sales where you need an account to browse the site.
+
+If you don't use this feature, feel free to comment out the imports and routes in Shop.js to reduce the bundle size.

package/src/components/Cart/CartButton.js

@@ -1,14 +1,15 @@
+import React from 'react';
+import { css } from 'linaria';
+import { styled } from 'linaria/react';
+
 import CartProvider from '@jetshop/core/components/Query/CartProvider';
 import t from '@jetshop/intl';
 import { Above } from '@jetshop/ui/Breakpoints';
 import { DrawerTrigger } from '@jetshop/ui/Modal/Drawer/DrawerTrigger';
 import { FlyoutTrigger } from '@jetshop/ui/Modal/Flyout';
-import { styled } from 'linaria/react';
-import { css } from 'linaria';
-import React, { Fragment } from 'react';
-import { ReactComponent as Cart } from '../../svg/Cart.svg';
+import { ReactComponent as CartIcon } from '../../svg/Cart.svg';
 import Badge from '../ui/Badge';
-import cartQuery from './CartQuery.gql';
+import cartQuery from './queries/cartQuery.gql';
 
 const Button = styled('button')`
   padding: 0;
@@ -38,7 +39,7 @@ function CartButton({ target, itemsInCart, className }) {
         data-testid="cart-button"
         onClick={target.isOpen ? target.hideTarget : target.showTarget}
       >
-        <Cart className="badge-svg-wrapper" />
+        <CartIcon className="badge-svg-wrapper" />
         <span>{t('Cart')}</span>
       </Button>
       {itemsInCart > 0 && <Badge text={itemsInCart} />}
@@ -48,45 +49,40 @@ function CartButton({ target, itemsInCart, className }) {
 
 function CartButtonFlyout({ className }) {
   return (
-    <Fragment>
-      <CartProvider query={cartQuery}>
-        {result => {
-          // Set items in cart to the API result.
-          // If the result is undefined, fall back to 0
-          const itemsInCart = result?.data?.cart?.totalQuantity || 0;
+    <CartProvider query={cartQuery}>
+      {result => {
+        const itemsInCart = result?.data?.cart?.totalQuantity || 0;
 
-          return (
-            // Use a flyout for breakpoints above md
-            // Else use a Drawer
-            <Above breakpoint="md">
-              {matches =>
-                matches ? (
-                  <FlyoutTrigger id="cart-flyout">
-                    {flyout => (
-                      <CartButton
-                        className={className}
-                        target={flyout}
-                        itemsInCart={itemsInCart}
-                      />
-                    )}
-                  </FlyoutTrigger>
-                ) : (
-                  <DrawerTrigger preventOverflow={true} id="cart-drawer">
-                    {drawer => (
-                      <CartButton
-                        className={className}
-                        target={drawer}
-                        itemsInCart={itemsInCart}
-                      />
-                    )}
-                  </DrawerTrigger>
-                )
-              }
-            </Above>
-          );
-        }}
-      </CartProvider>
-    </Fragment>
+        // Drawer on mobile, flyout on desktop
+        return (
+          <Above breakpoint="md">
+            {matches =>
+              matches ? (
+                <FlyoutTrigger id="cart-flyout">
+                  {flyout => (
+                    <CartButton
+                      className={className}
+                      target={flyout}
+                      itemsInCart={itemsInCart}
+                    />
+                  )}
+                </FlyoutTrigger>
+              ) : (
+                <DrawerTrigger preventOverflow={true} id="cart-drawer">
+                  {drawer => (
+                    <CartButton
+                      className={className}
+                      target={drawer}
+                      itemsInCart={itemsInCart}
+                    />
+                  )}
+                </DrawerTrigger>
+              )
+            }
+          </Above>
+        );
+      }}
+    </CartProvider>
   );
 }
 

package/src/components/Cart/CartFlyout.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 CartProvider from '@jetshop/core/components/Query/CartProvider';
@@ -6,15 +9,15 @@ import { Above } from '@jetshop/ui/Breakpoints';
 import Drawer, { DrawerTarget } from '@jetshop/ui/Modal/Drawer';
 import { FlyoutTarget } from '@jetshop/ui/Modal/Flyout';
 import { Price } from '@jetshop/ui/Price';
+import { useChannelSettings } from '@jetshop/core/hooks/Channels/useChannelSettings';
+import { Currency } from '@jetshop/ui/Price/Currency';
+
 import { theme } from '../Theme';
-import React from 'react';
-import { styled } from 'linaria/react';
 import { baseStyles } from '../ui/Button';
 import CartItem from './CartItem';
-import cartQuery from './CartQuery.gql';
 import FreeShipping from './FreeShipping';
-import { useChannelSettings } from '@jetshop/core/hooks/Channels/useChannelSettings';
-import { Currency } from '@jetshop/ui/Price/Currency';
+
+import cartQuery from './queries/cartQuery.gql';
 
 const Flyout = styled('div')`
   background: white;
@@ -161,8 +164,16 @@ const CartFlyoutView = ({ result, modal, ...rest }) => {
           <Checkout
             data-testid="checkout-button"
             href={checkoutUrl}
-            onClick={() => {
-              track(trackCartCheckoutEvent({ cart: result.data.cart }));
+            onClick={event => {
+              event.preventDefault();
+              track(
+                trackCartCheckoutEvent({
+                  cart: result.data.cart,
+                  callback: () => {
+                    window.location = checkoutUrl;
+                  }
+                })
+              );
             }}
           >
             {t('Check out')}

package/src/components/Cart/CartItem.js

@@ -1,18 +1,19 @@
+import React from 'react';
+import { styled } from 'linaria/react';
+import { Link } from 'react-router-dom';
+
 import useDecrementQuantity from '@jetshop/core/components/Mutation/useDecrementQuantity';
 import useIncrementQuantity from '@jetshop/core/components/Mutation/useIncrementQuantity';
 import useRemoveFromCart from '@jetshop/core/components/Mutation/useRemoveFromCart';
 import getCartItemVariant from '@jetshop/core/helpers/getCartItemVariant';
 import Image from '@jetshop/ui/Image';
 import { Price } from '@jetshop/ui/Price';
-import { ReactComponent as Cross } from '@jetshop/ui/svg/Cross.svg';
-import React from 'react';
-import { styled } from 'linaria/react';
-import { Link } from 'react-router-dom';
+import { ReactComponent as CrossIcon } from '@jetshop/ui/svg/Cross.svg';
 import { FlyoutTrigger } from '@jetshop/ui/Modal/Flyout';
-import removeFromCartMutation from './removeFromCart.gql';
-import incrementQuantityMutation from './incrementQuantity.gql';
-import decrementQuantityMutation from './decrementQuantity.gql';
-import cartQuery from './CartQuery.gql';
+import removeFromCartMutation from './queries/removeFromCart.gql';
+import incrementQuantityMutation from './queries/incrementQuantity.gql';
+import decrementQuantityMutation from './queries/decrementQuantity.gql';
+import cartQuery from './queries/cartQuery.gql';
 
 const Wrapper = styled('div')`
   display: flex;
@@ -103,12 +104,8 @@ const RemoveItem = styled('div')`
 `;
 
 const CartItem = ({ item, className = '' }) => {
-  const {
-    isVariant,
-    variantImage,
-    variantValues,
-    hasVariantImage
-  } = getCartItemVariant(item);
+  const { isVariant, variantImage, variantValues, hasVariantImage } =
+    getCartItemVariant(item);
 
   const { incrementQuantity } = useIncrementQuantity({
     incrementQuantityMutation,
@@ -196,7 +193,7 @@ const CartItem = ({ item, className = '' }) => {
             }
             data-testid="remove-from-cart"
           >
-            <Cross />
+            <CrossIcon />
           </button>
         </RemoveItem>
 

package/src/components/Cart/{addMultipleToCart.gql → queries/addMultipleToCart.gql}

@@ -1,4 +1,4 @@
-#import "./CartFragment.gql"
+#import "./cartFragment.gql"
 
 mutation addMultipleToCart($cartId: String, $items: [AddMultipleToCartInput]!) {
   addMultipleToCart(cartId: $cartId, items: $items) {

package/src/components/Cart/{addToCart.gql → queries/addToCart.gql}

@@ -1,4 +1,4 @@
-#import "./CartFragment.gql"
+#import "./cartFragment.gql"
 
 mutation addToCart($input: AddToCartInput!) {
   addToCart(input: $input) {

package/src/components/Cart/{CartFragment.gql → queries/cartFragment.gql}

@@ -4,6 +4,7 @@
 #import "@jetshop/core/data/fragments/CommentsFragment.gql"
 
 fragment Cart on Cart {
+  __optimistic @client
   id
   externalCheckoutUrl
   totalQuantity
@@ -81,6 +82,7 @@ fragment Cart on Cart {
       primaryRoute {
         id
         path
+        breadcrumbs
       }
       customFields {
         key
@@ -96,11 +98,6 @@ fragment Cart on Cart {
         title
         url
       }
-      canonicalCategory {
-        primaryRoute {
-          path
-        }
-      }
     }
     variantOptionNames
   }

package/src/components/Cart/{CartQuery.gql → queries/cartQuery.gql}

@@ -1,4 +1,4 @@
-#import "./CartFragment.gql"
+#import "./cartFragment.gql"
 
 query CartQuery($cartId: String) {
   cart(id: $cartId) {

package/src/components/Cart/{decrementQuantity.gql → queries/decrementQuantity.gql}

@@ -1,4 +1,4 @@
-#import "./CartFragment.gql"
+#import "./cartFragment.gql"
 
 mutation decrementItemQuantity($input: ChangeByOneItemQuantityInput!) {
   decrementItemQuantity(input: $input) {

package/src/components/Cart/{incrementQuantity.gql → queries/incrementQuantity.gql}

@@ -1,4 +1,4 @@
-#import "./CartFragment.gql"
+#import "./cartFragment.gql"
 
 mutation incrementItemQuantity($input: ChangeByOneItemQuantityInput!) {
   incrementItemQuantity(input: $input) {

package/src/components/Cart/{removeFromCart.gql → queries/removeFromCart.gql}

@@ -1,4 +1,4 @@
-#import "./CartFragment.gql"
+#import "./cartFragment.gql"
 
 mutation removeFromCart($input: RemoveFromCartInput!) {
   removeFromCart(input: $input) {

package/src/components/CategoryPage/CategoryHeader.js

@@ -109,12 +109,11 @@ const CategoryHeader = ({
   category,
   parents,
   imageSrc,
-  breadcrumbs = { value: true },
+  breadcrumbs,
   content
 }) => {
-  const { value } = breadcrumbs;
   const breadcrumbProps = {
-    breadcrumbText: value ? category.breadcrumbText : '',
+    breadcrumbs,
     parents
   };
   const isImageBackground =
@@ -130,6 +129,7 @@ const CategoryHeader = ({
             quality={80}
             className={headerImageStyles}
             critical={true}
+            sizes={[1, 1, 1, 1, 1216]}
           >
             <Content
               category={category}

package/src/components/CategoryPage/CategoryPage.js

@@ -25,6 +25,7 @@ const CategoryPage = props => {
   const searchObject = qs.parse(search, { ignoreQueryPrefix: true });
   const standardPagination = searchObject.standardPagination === 'true';
 
+  // Comment out the one you're not using
   if (standardPagination) {
     return <LoadableStandardCategoryPage {...props} />;
   } else {

package/src/components/CategoryPage/ProductCard.js

@@ -65,15 +65,16 @@ export function ProductCard({
   product,
   className,
   imageAspect = '1:1',
-  imageSizes = [1 / 4, 1 / 3, 1 / 2, 1 / 2],
+  imageSizes = [1 / 2, 1 / 2, 1 / 3, 1 / 4],
   forwardRef,
   as = 'li',
   children,
+  loadImageEagerly = false,
   ...linkProps
 }) {
   const hasImages = product.images && product.images.length > 0;
   const Tag = as;
-  let badges = [...product.badges];
+  let badges = [...(product.badges || [])];
   product.isPackage &&
     badges.push({
       location: 'TOP_RIGHT',
@@ -103,6 +104,7 @@ export function ProductCard({
             src={product.images[0].url}
             modifiedDate={product.images[0].modifiedDate}
             badges={<Badges badges={badges} />}
+            critical={loadImageEagerly}
           ></Image>
         ) : (
           <Image src={transparentDataImg} />

package/src/components/CategoryPage/ProductGrid.js

@@ -51,9 +51,14 @@ export const Wrapper = styled('ul')`
   }
 `;
 
+export function isAboveFold(index) {
+  return index < 4;
+}
+
 export function ProductGrid({
   products,
   listName,
+  category = '',
   loading,
   className,
   ...rest
@@ -64,8 +69,8 @@ export function ProductGrid({
     if (!products || products.length === 0) return;
 
     // Otherwise track a list view event
-    track(trackListEvent({ listName, products }));
-  }, [listName, products, track]);
+    track(trackListEvent({ listName, products, category }));
+  }, [listName, products, track, category]);
 
   if (!products) return null;
 
@@ -81,6 +86,7 @@ export function ProductGrid({
             product={product}
             style={{ opacity: loading ? 0.5 : 1 }}
             list={listName}
+            loadImageEagerly={isAboveFold(index)}
             {...rest}
           >
             <Favourite

package/src/components/CategoryPage/ProductGridWindow.js

@@ -3,7 +3,7 @@ import { trackListEvent } from '@jetshop/core/analytics/tracking';
 import React, { useEffect, useMemo } from 'react';
 import { css, cx } from 'linaria';
 import { ProductCard } from './ProductCard';
-import { priceStyle } from './ProductGrid';
+import { isAboveFold, priceStyle } from './ProductGrid';
 import { WindowGrid } from '@jetshop/ui/WindowGrid';
 
 const container = css`
@@ -27,6 +27,7 @@ function ProductGridWindow({
   prevOffset,
   itemsPerRow,
   categoryPath,
+  category = '',
   ...rest
 }) {
   // Track product listing
@@ -36,28 +37,35 @@ function ProductGridWindow({
     if (!products || products.length === 0) return;
 
     // Otherwise track a list view event
-    track(trackListEvent({ listName, products }));
-  }, [listName, products, track]);
+    track(trackListEvent({ listName, products, category }));
+  }, [listName, products, track, category]);
 
   const renderProduct = useMemo(
-    () => ({ item: product, style, innerRef }) => (
-      <div className={defaultStyle} style={style} ref={innerRef}>
-        <ProductCard
-          key={product.articleNumber}
-          product={product}
-          as="div"
-          categoryPath={categoryPath}
-        />
-      </div>
-    ),
+    () =>
+      ({ item: product, style, innerRef }) =>
+        (
+          <div className={defaultStyle} style={style} ref={innerRef}>
+            <ProductCard
+              key={product.articleNumber}
+              product={product}
+              as="div"
+              categoryPath={categoryPath}
+              loadImageEagerly={isAboveFold(product.index)}
+            />
+          </div>
+        ),
     [categoryPath]
   );
 
+  const items = useMemo(() => {
+    return products.map((product, index) => ({ ...product, index }));
+  }, [products]);
+
   return (
     <WindowGrid
       id={id}
       itemsPerRow={[2, null, 3, 4]}
-      items={products}
+      items={items}
       prevOffset={prevOffset}
       className={cx(container, priceStyle)}
       component={renderProduct}

package/src/components/CategoryPage/README.md

@@ -0,0 +1,11 @@
+# Category page
+This folder contains two versions of category pages, of which you would usually select one.
+
+## Classic paginated category page
+A category page that uses classic pagination, meaning next/previous buttons to step through pages, showing only one page of products at a time.
+
+## Infinite pagination category page
+A more scroll-friendly version of a category page, where new products are appended to the list when you press the "Load more products" button. In order not to lose performance when rendering a large amount of products, it uses a technique called windowing to only render the products that are in view at the moment. This can cause issues if you have product cards of varying height, so make sure that all images and details showed on the product card result in the same overall height for the product card.
+
+## Read more
+You can find more information about pagination in the [Flight documentation](https://docs.dev.jetshop.se/pagination).

package/src/components/CategoryPage/StandardCategoryPage.js

@@ -44,6 +44,7 @@ const Category = ({ category, result }) => {
         <CategoryHeader
           category={category}
           parents={result?.data?.route?.parents}
+          breadcrumbs={result?.data?.route?.breadcrumbs}
         />
 
         <Container>
@@ -63,6 +64,7 @@ const Category = ({ category, result }) => {
               products={category.products.result}
               listName={category.name}
               categoryPath={category.isDynamic ? null : result?.data?.route}
+              category={result?.data?.route?.breadcrumbs?.join('/') || ''}
               loading={result.loading}
               imageSizes={[1 / 2, 1 / 2, 1 / 3, 1 / 4]}
             />

package/src/components/CategoryPage/WindowedCategoryPage.js

@@ -78,6 +78,11 @@ const WindowedCategory = ({ category, result }) => {
                   category={category}
                   parents={result?.data?.route?.parents}
                   {...props}
+                  breadcrumbs={
+                    props.breadcrumbs?.value
+                      ? result?.data?.route?.breadcrumbs
+                      : []
+                  }
                 />
               </div>
             )
@@ -89,6 +94,7 @@ const WindowedCategory = ({ category, result }) => {
           <CategoryHeader
             category={category}
             parents={result?.data?.route?.parents}
+            breadcrumbs={result?.data?.route?.breadcrumbs}
           />
         )}
         <Container>
@@ -130,6 +136,7 @@ const WindowedCategory = ({ category, result }) => {
             products={products}
             listName={category.name}
             categoryPath={categoryPath}
+            category={result?.data?.route?.breadcrumbs?.join('/') || ''}
             loading={result.loading}
             imageSizes={[1 / 2, 1 / 2, 1 / 3, 1 / 4]}
           />