@jetshop/template-trend 5.14.0-alpha.49df897e → 5.14.1

package/package.json

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

package/src/components/CategoryPage/ProductCard.js

@@ -116,6 +116,7 @@ export function ProductCard({
           </header>
           <div className="price-package-wrapper">
             <Price
+              hidePrice={product.hidePrice}
               price={product.price}
               previousPrice={product.previousPrice}
             />

package/src/components/CategoryPage/ProductGridFragment.gql

@@ -12,6 +12,7 @@ fragment ProductGrid on Product {
     slug
   }
   isPackage
+  hidePrice
   ...ProductPrice
   images(limit: 1) {
     alt

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

@@ -1,6 +1,6 @@
 import ChannelContext from '@jetshop/core/components/ChannelContext';
 import { FlyoutTarget, FlyoutTrigger } from '@jetshop/ui/Modal/Flyout';
-import React, { Component, Fragment } from 'react';
+import React, { useContext } from 'react';
 import Selector from './Selector';
 import { styled } from 'linaria/react';
 
@@ -17,49 +17,40 @@ const CountryFlag = styled('img')`
   margin-right: 5px;
 `;
 
-export default class HeaderChannelSelector extends Component {
-  render() {
-    return (
-      <ChannelContext.Consumer>
-        {({
-          channels,
-          selectedChannel,
-          updateChannel,
-          selectedChannelGroup
-        }) => (
-          <Fragment>
-            <FlyoutTrigger id="channel-selector">
-              {({ showTarget, hideTarget, isOpen }) => (
-                <button
-                  data-testid="channel-selector-button"
-                  onClick={isOpen ? hideTarget : showTarget}
-                  style={{ background: 'transparent' }}
-                >
-                  <CountryFlag
-                    src={`https://countryflags.jetshop.io/${selectedChannel.country.code}/flat/32.png`}
-                    alt="Country Flag"
-                    width="16"
-                    height="12"
-                  />
-                  {selectedChannel.country.name}
-                </button>
-              )}
-            </FlyoutTrigger>
-            <FlyoutTarget id="channel-selector">
-              {({ isOpen, hideTarget }) => (
-                <Flyout>
-                  <Selector
-                    channels={selectedChannelGroup || channels}
-                    hideTarget={hideTarget}
-                    selectedChannel={selectedChannel}
-                    updateChannel={updateChannel}
-                  />
-                </Flyout>
-              )}
-            </FlyoutTarget>
-          </Fragment>
+export default function HeaderChannelSelector() {
+  const { selectedChannel, channels, updateChannel, selectedChannelGroup } =
+    useContext(ChannelContext);
+  return (
+    <>
+      <FlyoutTrigger id="channel-selector">
+        {({ showTarget, hideTarget, isOpen }) => (
+          <button
+            data-testid="channel-selector-button"
+            onClick={isOpen ? hideTarget : showTarget}
+            style={{ background: 'transparent' }}
+          >
+            <CountryFlag
+              src={`https://countryflags.jetshop.io/${selectedChannel.country.code}/flat/32.png`}
+              alt="Country Flag"
+              width="16"
+              height="12"
+            />
+            {selectedChannel.country.name}
+          </button>
         )}
-      </ChannelContext.Consumer>
-    );
-  }
+      </FlyoutTrigger>
+      <FlyoutTarget id="channel-selector">
+        {({ isOpen, hideTarget }) => (
+          <Flyout>
+            <Selector
+              channels={selectedChannelGroup || channels}
+              hideTarget={hideTarget}
+              selectedChannel={selectedChannel}
+              updateChannel={updateChannel}
+            />
+          </Flyout>
+        )}
+      </FlyoutTarget>
+    </>
+  );
 }

package/src/components/Layout/Header/ChannelSelector/ChannelSelectorModal.js

@@ -20,6 +20,7 @@ const modalStyles = css`
   right: 0;
   top: 0;
   bottom: 0;
+  position: fixed;
   background: white;
   padding: 1rem;
   outline: none;
@@ -42,7 +43,13 @@ const ChannelSelectorModal = props => {
       )}
     >
       {({ showTarget }) => (
-        <Button onClick={showTarget} {...props}>
+        <Button
+          onClick={() => {
+            props.hideMobileMenu();
+            showTarget();
+          }}
+          {...props}
+        >
           <img
             src={`https://countryflags.jetshop.io/${selectedChannel.country.code}/flat/32.png`}
             alt="Country Flag"

package/src/components/Layout/Header/ChannelSelector/Selector.js

@@ -83,6 +83,11 @@ const StyledTitle = styled(Title)`
   padding: 2px 0 16px;
   margin-bottom: 4px;
   font-size: 14px;
+  ${theme.below.lg} {
+    && {
+      padding-bottom: 0.5rem;
+    }
+  }
 `;
 
 const actions = css`
@@ -113,7 +118,6 @@ const Selector = ({
       channels={channels}
       initialChannel={selectedChannel}
       render={({
-        channels,
         currencyItems,
         languageItems,
         selectedChannel,

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

@@ -90,7 +90,7 @@ export default function MobileMenu({ data }) {
                 </Link>
               </SecondaryMenuItem>
               <SecondaryMenuItem>
-                <ChannelSelectorModal />
+                <ChannelSelectorModal hideMobileMenu={drawer.hideTarget} />
               </SecondaryMenuItem>
             </SecondaryMenu>
           </Scroll>

package/src/components/Layout/Header/RecommendedChannel/ChannelBanner.js

@@ -193,8 +193,13 @@ const Flyout = ({ children }) => (
 );
 
 const ChannelBanner = () => {
-  const { channels, recommendedChannel, selectedChannel, updateChannel } =
-    useContext(ChannelContext);
+  const {
+    channels,
+    recommendedChannel,
+    selectedChannel,
+    updateChannel,
+    selectedChannelGroup
+  } = useContext(ChannelContext);
 
   const { bannerIsOpen, hideTheBanner } = useChannelBanner();
 
@@ -247,7 +252,7 @@ const ChannelBanner = () => {
                     {({ isOpen, hideTarget }) => (
                       <Flyout>
                         <Selector
-                          channels={channels}
+                          channels={selectedChannelGroup || channels}
                           selectedChannel={selectedChannel}
                           updateChannel={updateChannel}
                           hideTarget={hideTarget}

package/src/components/Layout/Header/RecommendedChannel/RecommendedChannelSelector.js

@@ -114,13 +114,7 @@ const StyledCancelButton = styled(CancelButton)`
   border: 1px solid #e1e1e1;
 `;
 
-const Selector = ({
-  channels,
-  selectedChannel,
-  updateChannel,
-  setOpenBanner,
-  hideTarget
-}) => {
+const Selector = ({ channels, selectedChannel, updateChannel, hideTarget }) => {
   const [countries] = useState(flattenCountries(channels));
 
   return (
@@ -128,7 +122,6 @@ const Selector = ({
       channels={channels}
       initialChannel={selectedChannel}
       render={({
-        channels,
         currencyItems,
         languageItems,
         selectedChannel,

package/src/components/ProductList/AddToCart.js

@@ -58,7 +58,11 @@ export function AddToCart({ product }) {
   });
 
   return (
-    <button className={addButton} onClick={() => add()}>
+    <button
+      className={addButton}
+      onClick={() => add()}
+      disabled={product.hidePrice}
+    >
       {t('Add to cart')}
     </button>
   );

package/src/components/ProductList/Favourites.js

@@ -125,7 +125,7 @@ function getItemsForAddToCart(products) {
   // to be the variant rather than the base product
   return products
     .filter(product => {
-      return product.validation.status === 'valid';
+      return product.validation.status === 'valid' && !product.hidePrice;
     })
     .map(product => ({
       ...product,

package/src/components/ProductList/ProductLists.gql

@@ -105,6 +105,7 @@ fragment ProductDetail on Product {
   hasVariants
   isPreOrder
   isPackage
+  hidePrice
   stockStatus {
     buyable
     text

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

@@ -65,9 +65,10 @@ function AddToCartForm({
   const configurationContext = useContext(ProductConfigurationContext);
   const price = useDynamicPrice(product, variant);
   const stockStatus = useStockStatus(variant || product);
+
   const outOfStockNotify = stockStatus.status === 'notifyWhenBack';
   const { validation: variantValidation, missingOptions } = variantHandler;
-  const { hasVariants } = product;
+  const { hasVariants, hidePrice } = product;
   const { validationMessage, enableValidation } = useProductValidationMessage({
     missingOptions,
     variantValidation,
@@ -134,6 +135,7 @@ function AddToCartForm({
               product={product}
             />
             <Price
+              hidePrice={product.hidePrice}
               {...price}
               css={{
                 marginBottom: '24px',
@@ -141,10 +143,12 @@ function AddToCartForm({
                   configurationContext && configurationContext.loading ? 0.3 : 1
               }}
             />
-            <PriceHistoryWrapper
-              articleNumber={product.articleNumber}
-              variant={variant}
-            />
+            {!hidePrice && (
+              <PriceHistoryWrapper
+                articleNumber={product.articleNumber}
+                variant={variant}
+              />
+            )}
 
             <Campaigns
               campaigns={product.campaigns}
@@ -170,7 +174,7 @@ function AddToCartForm({
                 status={stockStatus.status}
                 text={stockStatus.text}
               />
-              {!outOfStockNotify && (
+              {!outOfStockNotify && !hidePrice && (
                 <QuantityAddToCartWrapper>
                   <InputWithLabel
                     disableValidation

package/src/components/ProductPage/PriceHistory.js

@@ -120,10 +120,12 @@ function PriceHistory({ articleNumber, variant }) {
 const Table = ({ history, days }) => {
   const { selectedChannel } = useContext(ChannelContext);
 
-  if (history?.length === 0) {
+  if (history?.previousPrice?.length === 0) {
     return (
       <div className="price-table">
-        <span>{t('No recent price changes the last { days }', { days })}</span>
+        <span className="label">
+          {t('The price has not changed in the last { days } days', { days })}
+        </span>
       </div>
     );
   }

package/src/components/ProductPage/ProductPageFragment.gql

@@ -20,6 +20,7 @@ fragment ProductPage on Product {
   description
   hasVariants
   isPackage
+  hidePrice
   canonicalCategory {
     primaryRoute {
       path

package/translations/default.json

@@ -341,9 +341,6 @@
   "no_orders_found_ed613bce": {
     "message": "No orders found"
   },
-  "no_recent_price_changes_the_last_days_61d42dda": {
-    "message": "No recent price changes the last { days }"
-  },
   "no_results_for_term_7528ef47": {
     "message": "No results for <Term />"
   },
@@ -614,6 +611,9 @@
   "the_form_could_not_be_submitted_please_try_again_l_9a8b7579": {
     "message": "The form could not be submitted. Please try again later."
   },
+  "the_price_has_not_changed_in_the_last_days_days_7f5c65f8": {
+    "message": "The price has not changed in the last { days } days"
+  },
   "there_are_no_products_in_your_saved_items_list_2870abb5": {
     "message": "There are no products in your saved items list."
   },

package/translations/en.json

@@ -787,5 +787,8 @@
   },
   "email_address_is_required_24d62494": {
     "message": "Email address is required."
+  },
+  "the_price_has_not_changed_in_the_last_days_days_7f5c65f8": {
+    "message": "The price has not changed in the last { days } days"
   }
 }

package/translations/sv.json

@@ -776,8 +776,8 @@
   "getting_the_last_days_days_price_changes_bedecd5": {
     "message": "Hämtar de senaste { days } dagarnas prisändringar..."
   },
-  "no_recent_price_changes_the_last_days_61d42dda": {
-    "message": "Hittade inte några prisförändringar senaste { days } dagarna"
+  "the_price_has_not_changed_in_the_last_days_days_7f5c65f8": {
+    "message": "Hittade inte några prisförändringar de senaste { days } dagarna"
   },
   "view_price_history_8078c9af": {
     "message": "Visa prishistorik"