@jetshop/template-trend 5.11.0 → 5.12.1

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

package/src/components/ContentPage/ContentPage.js

@@ -3,12 +3,13 @@ import { styled } from 'linaria/react';
 import React from 'react';
 import UIMaxWidth from '../Layout/MaxWidth';
 import { ContentRenderer } from '@jetshop/ui/ContentRenderer';
-
-const Header = styled('h1')`
-  font-size: 1.6875rem;
-  font-weight: 600;
-  margin: 1rem 0 3rem;
-`;
+import {
+  MobileNavigation,
+  DesktopNavigation,
+  shouldDisplayNavigation
+} from './SubPageNavigation';
+import { css } from 'linaria';
+import Breadcrumbs from '@jetshop/ui/Breadcrumbs';
 
 const Content = styled('div')`
   padding-bottom: 1rem;
@@ -18,8 +19,35 @@ const Content = styled('div')`
   }
 `;
 
-const MaxWidth = styled(UIMaxWidth)`
+const container = css`
+  display: flex;
+  flex-direction: row;
+`;
+
+const sidebar = css`
+  max-width: 288px;
+  flex: 1 1 auto;
+  border-right: 1px solid #dedede;
+  margin-right: 2rem;
+  padding: 2rem 0;
+
+  @media (max-width: 799px) {
+    display: none;
+  }
+`;
+
+const content = css`
   max-width: 60rem;
+  flex: 1 1 auto;
+  padding: 2rem 0;
+
+  h1 {
+    margin-bottom: 1rem;
+  }
+`;
+
+const body = css`
+  margin-top: 1rem;
 `;
 
 const components = {
@@ -34,44 +62,47 @@ const components = {
   }
 };
 
-function ContentPage(props) {
-  const { page } = props;
+function ContentPage({ page, result }) {
   return (
-    <>
-      <Header>
-        <MaxWidth>
+    <UIMaxWidth className={container}>
+      {page && shouldDisplayNavigation(page) && (
+        <aside className={sidebar}>
+          <DesktopNavigation page={page} />
+        </aside>
+      )}
+      <article className={content}>
+        <Breadcrumbs
+          parents={result.data?.route?.parents || []}
+          breadcrumbs={result.data?.route?.breadcrumbs || []}
+        />
+        <h1>
           {page ? page.name : <LoadingLine heightPx={27} widthRem={15} />}
-        </MaxWidth>
-      </Header>
-      <MaxWidth>
-        {page ? (
-          <>
-            {page.data ? (
+        </h1>
+        <MobileNavigation page={page} />
+        <div className={body}>
+          {page ? (
+            page.data ? (
               <ContentRenderer
                 items={page.data.items}
                 components={components}
               />
             ) : (
-              <Content
-                dangerouslySetInnerHTML={{
-                  __html: page.content
-                }}
-              />
-            )}
-          </>
-        ) : (
-          <LoadingLine
-            heightPx={14}
-            widthRem={30}
-            randomizeWidthBy={10}
-            count={10}
-            style={{
-              marginBottom: '12px'
-            }}
-          />
-        )}
-      </MaxWidth>
-    </>
+              <Content dangerouslySetInnerHTML={{ __html: page.content }} />
+            )
+          ) : (
+            <LoadingLine
+              heightPx={14}
+              widthRem={30}
+              randomizeWidthBy={10}
+              count={10}
+              style={{
+                marginBottom: '12px'
+              }}
+            />
+          )}
+        </div>
+      </article>
+    </UIMaxWidth>
   );
 }
 

package/src/components/ContentPage/ContentPageFragment.gql

@@ -1,4 +1,8 @@
 fragment ContentPage on Page {
+  primaryRoute {
+    id
+    path
+  }
   name
   id
   content
@@ -20,4 +24,29 @@ fragment ContentPage on Page {
       }
     }
   }
+
+  parent {
+    id
+    name
+    primaryRoute {
+      id
+      path
+    }
+    subPages(includeHidden: false) {
+      ...SubPage
+    }
+  }
+
+  subPages(includeHidden: false) {
+    ...SubPage
+  }
+}
+
+fragment SubPage on Page {
+  id
+  name
+  primaryRoute {
+    id
+    path
+  }
 }

package/src/components/ContentPage/SubPageNavigation.js

@@ -0,0 +1,206 @@
+import {
+  DropdownMenu,
+  DropdownMenuButton,
+  DropdownMenuItem,
+  DropdownMenuItems
+} from '@jetshop/ui/DropdownMenu';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ReactComponent as Carot } from '@jetshop/ui/svg/Carrot.svg';
+import { css, cx } from 'linaria';
+import { theme } from '../Theme';
+import { useHistory, useLocation } from 'react-router';
+
+const menu = css`
+  width: 100%;
+
+  @media (min-width: 50em) {
+    display: none;
+  }
+
+  [data-flight-dropdown-button] {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.75em;
+    border: 1px solid #dedede;
+    width: 100%;
+    text-align: left;
+    background: ${theme.colors.white};
+    border-radius: 3px;
+    outline: none;
+
+    :focus {
+      color: ${theme.colors.blue};
+    }
+
+    &[aria-expanded='true'] {
+      border-radius: 3px 3px 0 0;
+      border-bottom: 0;
+      color: ${theme.colors.blue};
+
+      .carot {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  [data-flight-dropdown-items] {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    display: block;
+    z-index: 2;
+    outline: none;
+    width: 100%;
+    border: 1px solid #dedede;
+    border-top: 0;
+  }
+
+  [data-flight-dropdown-item] {
+    line-height: 1.5;
+    border: none;
+    cursor: pointer;
+    white-space: normal;
+    padding: 0.5em 1em;
+    :hover {
+      color: blue;
+    }
+  }
+
+  [data-flight-dropdown-item] a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  [data-flight-dropdown-item]:focus {
+    font-weight: bold;
+    background: #f2f2f2;
+    outline: none;
+    position: relative;
+  }
+
+  [data-flight-dropdown-item]:focus:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    background-color: #2f80ed;
+  }
+`;
+
+const links = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+const link = css`
+  color: #000;
+  text-decoration: none;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+`;
+
+const activeLink = css`
+  font-weight: bold;
+  color: #2f80ed;
+`;
+
+function getNavigationItemFromPage(page, level) {
+  return {
+    id: page.id,
+    name: page.name,
+    url: page.primaryRoute?.path,
+    level
+  };
+}
+
+function Item({ name, url, level }) {
+  return (
+    <div style={{ marginLeft: `${(level - 1) * 12}px` }}>
+      <Link to={url}>{name}</Link>
+    </div>
+  );
+}
+
+function getNavigationItems(page) {
+  const parent = page.parent ? getNavigationItemFromPage(page.parent, 1) : null;
+  const siblings = page.parent
+    ? page.parent.subPages.map(subPage => getNavigationItemFromPage(subPage, 2))
+    : [];
+  const subPages = page.subPages
+    ? page.subPages.map(subPage =>
+        getNavigationItemFromPage(subPage, parent ? 3 : 2)
+      )
+    : [];
+  const currentPage = getNavigationItemFromPage(page, parent ? 2 : 1);
+
+  if (!parent && !subPages?.length) return [];
+
+  const items = [];
+
+  if (parent) items.push(parent);
+  if (siblings.length) {
+    siblings.forEach(page => {
+      items.push(page);
+      if (page.id === currentPage.id) {
+        items.push(...subPages);
+      }
+    });
+  } else {
+    items.push(currentPage, ...subPages);
+  }
+
+  return items;
+}
+
+export function shouldDisplayNavigation(page) {
+  return Boolean(page.parent || page.subPages?.length);
+}
+
+export function DesktopNavigation({ page }) {
+  const location = useLocation();
+  const items = getNavigationItems(page);
+
+  return (
+    <div className={links}>
+      {items.map(item => (
+        <Link
+          key={item.id}
+          to={item.url}
+          className={cx(link, location.pathname === item.url && activeLink)}
+          style={{ marginLeft: `${(item.level - 1) * 12}px` }}
+        >
+          {item.name}
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export function MobileNavigation({ page }) {
+  const { push } = useHistory();
+  const items = page ? getNavigationItems(page) : [];
+
+  return (
+    <DropdownMenu className={menu}>
+      <DropdownMenuButton>
+        <span>{page?.name}</span>
+        <Carot className="carot" />
+      </DropdownMenuButton>
+      <DropdownMenuItems>
+        {items.map(item => (
+          <DropdownMenuItem key={item.id} onSelect={() => push(item.url)}>
+            <Item {...item} />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuItems>
+    </DropdownMenu>
+  );
+}

package/src/components/Layout/Footer/FooterLinks.js

@@ -7,9 +7,8 @@ import { useQuery } from '@apollo/react-hooks';
 
 function FooterLinks() {
   const { data } = useQuery(pagesQuery);
-  const { data: storeTitleData, loading: storeTitleLoading } = useQuery(
-    StoreTitleQuery
-  );
+  const { data: storeTitleData, loading: storeTitleLoading } =
+    useQuery(StoreTitleQuery);
 
   const pages = data?.pages;
   const storeTitle = storeTitleData?.startPage?.head.title;
@@ -20,7 +19,10 @@ function FooterLinks() {
       <ul>
         {pages.map(page => (
           <li key={page.id}>
-            <ContentPageLink page={page}>{page.name}</ContentPageLink>
+            <ContentPageLink page={page}>
+              {page.subPages?.length ? '+ ' : null}
+              {page.name}
+            </ContentPageLink>
           </li>
         ))}
       </ul>

package/src/components/Layout/Footer/PagesQuery.gql

@@ -6,5 +6,14 @@ query PagesQuery {
       id
       path
     }
+
+    subPages {
+      id
+      name
+      primaryRoute {
+        id
+        path
+      }
+    }
   }
 }

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/ProductList/ProductLists.gql

@@ -18,24 +18,6 @@ query ProductList($id: ID) {
   }
 }
 
-## query all lists
-query ProductLists {
-  customerProductLists {
-    ...ProductListFragment
-  }
-}
-
-
-## Create a product list
-mutation CreateProductList($input: CreateCustomerProductListInput!) {
-  createCustomerProductList(input: $input) {
-    success
-    customerProductList {
-      ...MinimalProductListDetail
-    }
-  }
-}
-
 ## add
 mutation AddToProductList($id: ID, $items: [AddToCustomerProductListInput!]!) {
   addToCustomerProductList(id: $id, items: $items) {
@@ -54,13 +36,6 @@ mutation RemoveFromProductList($id: ID, $articleNumbers: [String!]) {
   }
 }
 
-## delete product list
-mutation DeleteProductList($id: ID) {
-  deleteCustomerProductList(id: $id) {
-    success
-  }
-}
-
 ## update
 mutation UpdateProductListItem($input: UpdateCustomerProductListItemInput!) {
   updateCustomerProductListItem(input: $input) {

package/src/components/ProductList/productListQueries.js

@@ -1,9 +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: ProductListQueries.CreateProductList,
-  deleteList: ProductListQueries.DeleteProductList,
-  all: ProductListQueries.ProductLists,
+  createList: mutations.CreateProductList,
+  deleteList: mutations.DeleteProductList,
+  all: queries.ProductLists,
   query: ProductListQueries.ProductList,
   productsQuery: ProductListQueries.ProductsFromProductList,
   add: ProductListQueries.AddToProductList,

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

@@ -143,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/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/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