@jetshop/template-trend 5.10.0 → 5.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/template-trend",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "license": "MIT",
   "scripts": {
     "build": "react-scripts build",
@@ -45,11 +45,11 @@
     ]
   },
   "dependencies": {
-    "@jetshop/core": "^5.10.0",
+    "@jetshop/core": "^5.11.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.11.0",
+    "@jetshop/react-scripts": "^5.11.0",
+    "@jetshop/ui": "^5.11.0",
     "@react-google-maps/api": "~1.7.0",
     "prop-types": "^15.6.2",
     "react": "^16.9.0",

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;

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

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/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

@@ -69,6 +69,7 @@ export function ProductCard({
   forwardRef,
   as = 'li',
   children,
+  loadImageEagerly = false,
   ...linkProps
 }) {
   const hasImages = product.images && product.images.length > 0;
@@ -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,6 +51,10 @@ export const Wrapper = styled('ul')`
   }
 `;
 
+export function isAboveFold(index) {
+  return index < 4;
+}
+
 export function ProductGrid({
   products,
   listName,
@@ -81,6 +85,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`
@@ -40,24 +40,31 @@ function ProductGridWindow({
   }, [listName, products, track]);
 
   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/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

@@ -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/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/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}