@jetshop/template-trend 5.10.0 → 5.12.0

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

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 />
+    </>
+  );
+}