@jetshop/template-trend 5.13.0 → 5.13.1

package/.linaria-cache/packages/template-trend/src/components/Layout/Header/Logo.linaria.css

@@ -1 +1 @@
-.StoreName_sgyktyw{font-size:30px;font-weight:bold;line-height:normal;text-align:center;-webkit-text-decoration:none;text-decoration:none;color:inherit;}.StoreName_sgyktyw a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;color:inherit;}
+.StoreName_sgyktyw{font-size:30px;font-weight:bold;line-height:normal;text-align:center;-webkit-text-decoration:none;text-decoration:none;color:inherit;}.StoreName_sgyktyw a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-text-decoration:none;text-decoration:none;color:inherit;}.StoreName_sgyktyw a svg{width:100px;}@media (max-width:49.99rem){.StoreName_sgyktyw a svg{width:85px;}}.StoreName_sgyktyw a span{font-size:12px;text-transform:uppercase;}

package/.linaria-cache/packages/template-trend/src/components/StartPage/CategoryList.linaria.css

@@ -0,0 +1,7 @@
+.ScrollWrapper_s140peh{margin:0 -1.5rem;padding:0 1.5rem 3rem;}@media (max-width:49.99rem){.ScrollWrapper_s140peh{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}}@media (max-width:39.99rem){.ScrollWrapper_s140peh{margin:0 0;padding:0 1rem 3rem;}}
+.CategoriesWrapper_c1o22ktz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-right:-0.5rem;margin-left:-0.5rem;}.CategoriesWrapper_c1o22ktz:hover > a > div{opacity:0.8;}@media (max-width:49.99rem){.CategoriesWrapper_c1o22ktz > a{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:160px;}}
+.CategoryCard_c11pqhux{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:#ffffff;box-shadow:4px 8px 32px rgba(0,0,0,0.1);-webkit-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out;width:100%;height:100%;position:relative;}
+.CardPaddingWrapper_c1l548id{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;width:50%;padding-left:0.5rem;padding-right:0.5rem;max-width:16rem;-webkit-text-decoration:none;text-decoration:none;}@media (min-width:50rem){.CardPaddingWrapper_c1l548id{width:33.33333333333333%;}}@media (min-width:64rem){.CardPaddingWrapper_c1l548id{width:20%;}}.CardPaddingWrapper_c1l548id:hover > div,.CardPaddingWrapper_c1l548id:focus > div,.CardPaddingWrapper_c1l548id:active > div{opacity:1 !important;box-shadow:4px 8px 32px rgba(0,0,0,0.1), 4px 8px 40px rgba(0,0,0,0.1);-webkit-transform:translate(0,-2px);-ms-transform:translate(0,-2px);transform:translate(0,-2px);-webkit-transition-duration:100ms;transition-duration:100ms;z-index:2;}
+.CategoryName_cmpnef6{text-align:center;font-weight:bold;font-size:16px;text-transform:uppercase;color:#000;-webkit-text-decoration:none;text-decoration:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:3rem;}@media (min-width:50rem){.CategoryName_cmpnef6{height:5rem;}}
+.CategoriesHeader_cmtbqnf{margin-bottom:1rem;font-size:24px;}@media (max-width:39.99rem){.CategoriesHeader_cmtbqnf{font-size:18px;margin-left:1rem;}}
+

package/.linaria-cache/packages/ui/Modal/TargetWrapper.linaria.css

@@ -0,0 +1 @@
+.preventBodyScrollStyle_p1lthaoa{overflow:hidden;}

package/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "configurations": [
+    {
+      "type": "node-terminal",
+      "name": "Run Script: start",
+      "request": "launch",
+      "command": "yarn run start",
+      "cwd": "${workspaceFolder}"
+    }
+  ]
+}

package/package.json

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

package/schema.graphql

@@ -213,6 +213,12 @@ type Category implements Document {
   """
   isDynamic: Boolean!
 
+  """
+  The category's dynamic filtersNB: Carries a performance cost, as asking for
+  this will result in a separate API call in the backend.
+  """
+  dynamicFiltering: [CategoryDynamicFilter]
+
   """
   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.
@@ -229,6 +235,13 @@ type CategoryAutoCompleteResult {
   result: [Category]
 }
 
+type CategoryDynamicFilter {
+  type: String
+  value: CategoryDynamicFilterValue
+}
+
+union CategoryDynamicFilterValue = StringValue | ListStringValue | BoolValue
+
 type CategoryImage {
   width: Int
   height: Int
@@ -625,8 +638,8 @@ input CustomerUpdateDeliveryAddressInput {
 }
 
 input CustomerUpdateExternalAttribute {
-  name: String
-  value: String
+  name: String!
+  value: String!
 }
 
 input CustomerUpdateInput {
@@ -859,6 +872,10 @@ type ListFilterItem {
   resultCount: Int
 }
 
+type ListStringValue {
+  value: [String]
+}
+
 input LoginExternalCustomerInput {
   externalCustomerToken: String!
 }
@@ -1057,6 +1074,24 @@ type Mutation {
   """
   signUp(input: SignUpInput!): SignUpResponse
 
+  """
+  ## Description
+  This mutation's purpose is to update a existing customer's group using an
+  access code. An authorization token is needed in the request, in order to be
+  able to update the customer.
+  ## Error Codes
+  ### Unauthorized
+  Unauthorized
+  ### UnableToUpdateCustomer
+  Error in underlying API call, more info may be contained in the error message.
+  ### CustomerAlreadyUpdated
+  Customer already in the customer group
+  ### CustomerNotFound
+  No match on customer with access code
+  
+  """
+  updateCustomerGroup(customerGroupAccessCode: String!): UpdateCustomerGroupResult
+
   """
   This mutation's purpose is to update a existing customer's information. An
   authorization token is needed in the request, in order to be able to update the customer.
@@ -1406,6 +1441,11 @@ type Price {
   vat: Decimal!
 }
 
+type PriceHistory {
+  timestamp: DateTime
+  price: Price
+}
+
 type PrivateCustomer implements Customer {
   pid: String
   id: ID!
@@ -1616,6 +1656,12 @@ type Product implements Document {
   performance cost, as asking for this will result in a separate API call in the backend.
   """
   familyMembers: [Product!]
+
+  """Get Product History within the set number of days"""
+  history(
+    """number of days, default is 30"""
+    days: Int = 30
+  ): ProductHistory
 }
 
 type ProductAutoCompleteResult {
@@ -1704,6 +1750,10 @@ enum ProductCustomFieldType {
   MULTI_LEVEL_LIST
 }
 
+type ProductHistory {
+  previousPrice: [PriceHistory]
+}
+
 type ProductImage {
   """
   Alternate text for the image, commonly used for the alt attribute of img-tags.
@@ -1804,6 +1854,16 @@ type ProductVariant {
   warehouseStock(includeInactive: Boolean = false): [Warehouse]
   images: [ProductImage]
   barcode: String
+
+  """Get Product History within the set number of days"""
+  history(
+    """number of days, default is 30"""
+    days: Int = 30
+  ): ProductVariantHistory
+}
+
+type ProductVariantHistory {
+  previousPrice: [PriceHistory]
 }
 
 type ProductVariantOption {
@@ -2068,8 +2128,8 @@ input SignUpDeliveryAddressInput {
 }
 
 input SignUpExternalAttribute {
-  name: String
-  value: String
+  name: String!
+  value: String!
 }
 
 input SignUpInput {
@@ -2220,6 +2280,10 @@ type UpdateCartMutation {
   cart: Cart
 }
 
+type UpdateCustomerGroupResult {
+  success: Boolean!
+}
+
 type UpdateCustomerPriceListResult {
   success: Boolean!
 }

package/src/components/Cart/CartFlyout.js

@@ -198,7 +198,11 @@ const CartFlyoutView = ({ result, modal, ...rest }) => {
               return (
                 <Flex key={discount.name} style={{ marginTop: '1em' }}>
                   <label>{discount.name}</label>
-                  <Price price={discount.value} style={{ display: 'inline' }} />
+                  <Price
+                    price={discount.value}
+                    style={{ display: 'inline' }}
+                    negative
+                  />
                 </Flex>
               );
             })}

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

@@ -2,7 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Below } from '@jetshop/ui/Breakpoints';
 import { styled } from 'linaria/react';
-import TrendLogo from './trend-logo.svg';
+import { ReactComponent as NorceLogo } from './NorceLogo.svg';
+import { theme } from '../../Theme';
 
 const StoreName = styled('h2')`
   font-size: 30px;
@@ -14,8 +15,19 @@ const StoreName = styled('h2')`
   a {
     display: flex;
     align-items: center;
+    flex-direction: column;
     text-decoration: none;
     color: inherit;
+    svg {
+      width: 100px;
+      ${theme.below.md} {
+        width: 85px;
+      }
+    }
+    span {
+      font-size: 12px;
+      text-transform: uppercase;
+    }
   }
 `;
 
@@ -27,7 +39,8 @@ const Logo = ({ searchOpen }) => (
           {!searchOpen && (
             <StoreName>
               <Link to="/">
-                <img alt="Trend" src={TrendLogo} />
+                <NorceLogo />
+                <span>Storefront</span>
               </Link>
             </StoreName>
           )}
@@ -35,7 +48,8 @@ const Logo = ({ searchOpen }) => (
       ) : (
         <StoreName>
           <Link to="/">
-            <img alt="Trend" src={TrendLogo} />
+            <NorceLogo />
+            <span>Storefront</span>
           </Link>
         </StoreName>
       )

package/src/components/Layout/Header/NorceLogo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515.3 102.8"><defs><style>.a{fill:#10141d;}</style></defs><path class="a" d="M466.13,100.83a28.63,28.63,0,0,0,28.3,22.9c10.2,0,18.4-3.2,22.7-9.6h26.3c-6.8,18.2-26.3,30.5-48.9,30.5A50.94,50.94,0,0,1,443,93.33c0-28.4,22.3-51.4,50.8-51.4s50.9,22.9,50.9,51.3a46.8,46.8,0,0,1-.6,7.6Zm1-19.6h53.3c-3.2-10.4-14-18.8-26.7-18.8S470.33,70.73,467.13,81.23Z" transform="translate(-29.43 -41.83)"/><path class="a" d="M126.43,140.63h-22V90.33a26.5,26.5,0,1,0-53,0v50.3h-22V90.33a48.5,48.5,0,1,1,97,0Z" transform="translate(-29.43 -41.83)"/><path class="a" d="M286.63,140.53h-22V91.63a48.61,48.61,0,0,1,48.5-48.5v22a26.55,26.55,0,0,0-26.5,26.5Z" transform="translate(-29.43 -41.83)"/><path class="a" d="M409,100.83c-2.9,13.8-13.8,22.8-28.3,22.8-17.2,0-28.8-12.4-28.8-30.5s11.6-30.5,28.8-30.5a26.77,26.77,0,0,1,20.4,9L417.33,57c-9.2-9.4-21-15.2-36.7-15.2-29.5,0-51.3,21.8-51.3,51.3s21.8,51.3,51.3,51.3c26.5,0,47.1-18.3,50.6-43.6Z" transform="translate(-29.43 -41.83)"/><path class="a" d="M242.43,140.63h-94.2v-95h94.2Zm-73.2-21h52.2v-53h-52.2v53Z" transform="translate(-29.43 -41.83)"/></svg>

package/src/components/ProductList/Product.js

@@ -10,7 +10,11 @@ import { useProductList } from '@jetshop/core/hooks/ProductList';
 export function Product({ product, loading, children, listId }) {
   // Use the variant's image for display
   const productForDisplay = { ...product };
-  if (product.isVariant && product.variant.images) {
+  if (
+    product.isVariant &&
+    product.variant.images &&
+    product.variant.images.length > 0
+  ) {
     productForDisplay.images = product.variant.images;
   }
 

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

@@ -75,13 +75,12 @@ function AddToCartForm({
   });
   const [trigger, dismiss] = useNotification();
 
-  const onAddToCartInit = ({ mutationId, quantity, price }) => {
+  const onAddToCartInit = ({ mutationId, quantity }) => {
     trigger(
       <ProductToastWrapper
         selectedVariation={variant}
         product={product}
         quantity={quantity}
-        price={price}
       />,
       {
         id: mutationId,
@@ -90,7 +89,7 @@ function AddToCartForm({
     );
   };
   const onAddToCartError = () => {
-    return ({ mutationId, quantity, price, error }) => {
+    return ({ mutationId, quantity, error }) => {
       dismiss(mutationId);
 
       trigger(
@@ -98,7 +97,6 @@ function AddToCartForm({
           selectedVariation={variant}
           product={product}
           quantity={quantity}
-          price={price}
           error={error}
         />,
         {

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

@@ -8,6 +8,7 @@ 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 useProductToast from './useProductToast';
 
 import { baseStyles } from '../../ui/Button';
 import { theme } from '../../Theme';
@@ -86,14 +87,16 @@ const Error = styled('p')`
 const ProductToast = ({
   product,
   cart,
-  closeToast,
   selectedVariation,
   quantity,
-  price,
   error
 }) => {
+  const { price, previousPrice, image } = useProductToast({
+    product,
+    selectedVariation,
+    quantity
+  });
   const track = useTracker();
-  const image = selectedVariation?.images[0] || product.images[0];
   return (
     <Container data-testid="product-toast">
       <ProductCheckoutContainer>
@@ -120,9 +123,7 @@ const ProductToast = ({
               </Header>
             )}
             <ProductName>{product.name}</ProductName>
-            {!error && (
-              <Price price={price.price} previousPrice={price.previousPrice} />
-            )}
+            {!error && <Price price={price} previousPrice={previousPrice} />}
             {error && (
               <Error>
                 {t('An error occurred. Details:')}

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

@@ -0,0 +1,26 @@
+function useProductToast({ product, selectedVariation, quantity }) {
+  let image, price, previousPrice;
+
+  const toastProduct = selectedVariation || product;
+
+  // Calculating the price by mutliplying with quantity
+  price = calculatePrice(toastProduct.price, quantity);
+  previousPrice = calculatePrice(toastProduct.previousPrice, quantity);
+
+  image = selectedVariation?.images[0] || product.images[0];
+
+  return {
+    price,
+    previousPrice,
+    image
+  };
+}
+
+function calculatePrice(price, quantity) {
+  const incVat = price.incVat * quantity;
+  const exVat = price.exVat * quantity;
+  const vat = price.vat * quantity;
+  return { incVat, exVat, vat };
+}
+
+export default useProductToast;