@jetshop/template-trend 5.12.3 → 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/ui/Pagination/usePagination.linaria.css

@@ -0,0 +1 @@
+.PaginationWrapper_p1arddu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}

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.12.3",
+  "version": "5.13.1",
   "license": "MIT",
   "scripts": {
     "build": "react-scripts build",
@@ -45,11 +45,11 @@
     ]
   },
   "dependencies": {
-    "@jetshop/core": "^5.12.3",
+    "@jetshop/core": "^5.13.1",
     "@jetshop/flight-shortcodes": "^2.0.10",
-    "@jetshop/intl": "^5.12.3",
-    "@jetshop/react-scripts": "^5.12.3",
-    "@jetshop/ui": "^5.12.3",
+    "@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
@@ -624,6 +637,11 @@ input CustomerUpdateDeliveryAddressInput {
   addressName: String
 }
 
+input CustomerUpdateExternalAttribute {
+  name: String!
+  value: String!
+}
+
 input CustomerUpdateInput {
   pid: String
   organizationNumber: String
@@ -631,6 +649,7 @@ input CustomerUpdateInput {
   deliveryAddresses: [CustomerUpdateDeliveryAddressInput]
   preferences: CustomerUpdatePreferenceInput
   consents: [CustomerUpdateConsentInput]
+  externalAttributes: [CustomerUpdateExternalAttribute]
   dynamicContent: String
 }
 
@@ -853,6 +872,10 @@ type ListFilterItem {
   resultCount: Int
 }
 
+type ListStringValue {
+  value: [String]
+}
+
 input LoginExternalCustomerInput {
   externalCustomerToken: String!
 }
@@ -1051,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.
@@ -1400,6 +1441,11 @@ type Price {
   vat: Decimal!
 }
 
+type PriceHistory {
+  timestamp: DateTime
+  price: Price
+}
+
 type PrivateCustomer implements Customer {
   pid: String
   id: ID!
@@ -1610,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 {
@@ -1698,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.
@@ -1798,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 {
@@ -2061,6 +2127,11 @@ input SignUpDeliveryAddressInput {
   addressName: String
 }
 
+input SignUpExternalAttribute {
+  name: String!
+  value: String!
+}
+
 input SignUpInput {
   type: CustomerType!
   pid: String
@@ -2074,6 +2145,7 @@ input SignUpInput {
   deliveryAddresses: [SignUpDeliveryAddressInput]
   preferences: SignUpPreferencesInput
   consents: [SignUpConsentInput]
+  externalAttributes: [SignUpExternalAttribute]
   dynamicContent: String
   priceListAccessCode: String
 }
@@ -2208,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/CategoryPage/ProductGrid.js

@@ -61,6 +61,7 @@ export function ProductGrid({
   category = '',
   loading,
   className,
+  categoryPath,
   ...rest
 }) {
   const track = useTracker();
@@ -86,6 +87,7 @@ export function ProductGrid({
             product={product}
             style={{ opacity: loading ? 0.5 : 1 }}
             list={listName}
+            categoryPath={categoryPath}
             loadImageEagerly={isAboveFold(index)}
             {...rest}
           >

package/src/components/Forms/Success.js

@@ -4,7 +4,7 @@ import React from 'react';
 export function Success({ children, className }) {
   return (
     <div className={cx(success, className)}>
-      <div>{children}</div>
+      <div data-testid="success-message">{children}</div>
     </div>
   );
 }

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/MyPages/ChangePasswordPage.js

@@ -54,6 +54,7 @@ function ChangePassword() {
                 <PrimaryButton
                   type="submit"
                   disabled={isSubmitting || !isValid}
+                  data-testid="save-password-button"
                 >
                   {t('Save')}
                 </PrimaryButton>

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;

package/src/components/ProductPage/ProductPage.js

@@ -120,7 +120,7 @@ const ProductContainer = styled('div')`
   }
 `;
 
-const Product = ({ result: { data, loading }, product }) => {
+const Product = ({ result: { data, loading }, product, partialProduct }) => {
   const initialVariant = useVariantFromUrl();
   const t = useIntl();
 
@@ -132,13 +132,17 @@ const Product = ({ result: { data, loading }, product }) => {
   const { selectedVariant: selectedVariation, getMissingOptions } =
     variantHandler;
 
+  if (!product) {
+    product = partialProduct;
+  }
   // Return early if there is no product
-  if (!product)
+  if (!product) {
     return (
       <ProductContainer>
         <ProductPageLoadingState />
       </ProductContainer>
     );
+  }
 
   const images = product.images ?? [];
   const parents = getParentOrCanonicalRoute(data?.route?.parents, product);

package/src/shop.config.js

@@ -75,6 +75,7 @@ const config = {
       Category: [LoadableStandardCategoryPage, LoadableWindowedCategoryPage],
       Page: [ContentPage]
     }
-  }
+  },
+  usePrimaryRouteForProducts: false
 };
 export default config;