@jetshop/template-trend 5.13.2 → 5.13.3-beta.0

package/.linaria-cache/packages/template-trend/src/components/ProductPage/AddToCart/ProductToast.linaria.css

@@ -3,7 +3,7 @@
 .ProductImageWrapper_p1i58doo{width:5rem;margin-right:1rem;}
 .ProductCheckoutContainer_pjx0jqi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%;}.ProductCheckoutContainer_pjx0jqi a{-webkit-text-decoration:none;text-decoration:none;}.ProductCheckoutContainer_pjx0jqi a:hover{opacity:0.8;-webkit-text-decoration:none;text-decoration:none;color:white;}
 .Product_p3e3eyv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;margin:16px;}
-.ProductDetails_p41hym0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;color:black;}
+.ProductDetails_p41hym0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;color:black;}.ProductDetails_p41hym0 .price,.ProductDetails_p41hym0 .new-price{margin-top:0.75rem;}.ProductDetails_p41hym0 .old-price{margin-top:0.25rem;}.ProductDetails_p41hym0 .new-price{color:#EB0000;}
 .Header_hrfqnnj{font-size:16px;margin-bottom:8px;}
 .ProductName_p1jc6jl9{font-size:12px;}
 .Error_ednkb9d{color:red;margin-top:8px;font-size:12px;}

package/.linaria-cache/packages/template-trend/src/components/ProductPage/PriceHistory.linaria.css

@@ -0,0 +1 @@
+.Wrapper_wr5mleq{--innerFontSize:0.85rem;position:relative;}.Wrapper_wr5mleq .label{font-size:0.75rem;cursor:pointer;background:transparent;}.Wrapper_wr5mleq .price-table{position:absolute;padding:0.35rem 0.9rem;background:white;border:1px solid #e5e5e5;max-height:30rem;overflow:scroll;z-index:2;min-width:14rem;max-width:18rem;}.Wrapper_wr5mleq .price-table .label{font-size:var(--innerFontSize);}.Wrapper_wr5mleq .price-table li{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.Wrapper_wr5mleq .price-table li .timestamp{font-size:var(--innerFontSize);}.Wrapper_wr5mleq .price-table li [data-flight-price=''] > .price{font-size:var(--innerFontSize);font-weight:normal;}

package/package.json

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

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

@@ -21,7 +21,12 @@ export default class HeaderChannelSelector extends Component {
   render() {
     return (
       <ChannelContext.Consumer>
-        {({ channels, selectedChannel, updateChannel }) => (
+        {({
+          channels,
+          selectedChannel,
+          updateChannel,
+          selectedChannelGroup
+        }) => (
           <Fragment>
             <FlyoutTrigger id="channel-selector">
               {({ showTarget, hideTarget, isOpen }) => (
@@ -44,7 +49,7 @@ export default class HeaderChannelSelector extends Component {
               {({ isOpen, hideTarget }) => (
                 <Flyout>
                   <Selector
-                    channels={channels}
+                    channels={selectedChannelGroup || channels}
                     hideTarget={hideTarget}
                     selectedChannel={selectedChannel}
                     updateChannel={updateChannel}

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

@@ -26,15 +26,14 @@ const modalStyles = css`
 `;
 
 const ChannelSelectorModal = props => {
-  const { selectedChannel, channels, updateChannel } =
+  const { selectedChannel, channels, updateChannel, selectedChannelGroup } =
     useContext(ChannelContext);
-
   return (
     <ModalTrigger
       modalStyles={modalStyles}
       target={props => (
         <Selector
-          channels={channels}
+          channels={selectedChannelGroup || channels}
           selectedChannel={selectedChannel}
           updateChannel={updateChannel}
           type={LargeSelector}

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

@@ -193,12 +193,8 @@ const Flyout = ({ children }) => (
 );
 
 const ChannelBanner = () => {
-  const {
-    channels,
-    recommendedChannel,
-    selectedChannel,
-    updateChannel
-  } = useContext(ChannelContext);
+  const { channels, recommendedChannel, selectedChannel, updateChannel } =
+    useContext(ChannelContext);
 
   const { bannerIsOpen, hideTheBanner } = useChannelBanner();
 

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

@@ -27,6 +27,7 @@ import WarehouseStock from '../StockStatus/WarehouseStock';
 
 import addToCartMutation from '../../Cart/queries/addToCart.gql';
 import CartQuery from '../../Cart/queries/cartQuery.gql';
+import { PriceHistoryWrapper } from '../PriceHistory';
 
 const StyledForm = styled(Form)`
   display: flex;
@@ -140,6 +141,10 @@ function AddToCartForm({
                   configurationContext && configurationContext.loading ? 0.3 : 1
               }}
             />
+            <PriceHistoryWrapper
+              articleNumber={product.articleNumber}
+              variant={variant}
+            />
 
             <Campaigns
               campaigns={product.campaigns}

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

@@ -67,6 +67,19 @@ const ProductDetails = styled('div')`
   flex-direction: column;
   flex-grow: 1;
   color: black;
+
+  .price,
+  .new-price {
+    margin-top: 0.75rem;
+  }
+
+  .old-price {
+    margin-top: 0.25rem;
+  }
+
+  .new-price {
+    color: ${theme.colors.red};
+  }
 `;
 
 const Header = styled('h3')`

package/src/components/ProductPage/PriceHistory.js

@@ -0,0 +1,147 @@
+import t from '@jetshop/intl';
+import React, { useContext } from 'react';
+import { useQuery } from '@apollo/react-hooks';
+import PriceHistoryQuery from './PriceHistoryQuery.gql';
+import { styled } from 'linaria/react';
+import { Price } from '@jetshop/ui/Price';
+
+import { FlyoutTrigger } from '@jetshop/ui/Modal/Flyout';
+import { FlyoutTarget } from '@jetshop/ui/Modal/Flyout';
+import ChannelContext from '@jetshop/core/components/ChannelContext/ChannelContext';
+
+const Wrapper = styled.div`
+  --innerFontSize: 0.85rem;
+  position: relative;
+
+  .label {
+    font-size: 0.75rem;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .price-table {
+    position: absolute;
+    padding: 0.35rem 0.9rem;
+    background: white;
+    border: 1px solid #e5e5e5;
+    max-height: 30rem;
+    overflow: scroll;
+    z-index: 2;
+    min-width: 14rem;
+    max-width: 18rem;
+
+    .label {
+      font-size: var(--innerFontSize);
+    }
+
+    li {
+      display: flex;
+      justify-content: space-between;
+
+      .timestamp {
+        font-size: var(--innerFontSize);
+      }
+
+      [data-flight-price=''] {
+        > .price {
+          font-size: var(--innerFontSize);
+          font-weight: normal;
+        }
+      }
+    }
+  }
+`;
+
+export function PriceHistoryWrapper(props) {
+  return (
+    <Wrapper>
+      <FlyoutTrigger
+        id="price-history-flyout"
+        coverStyles={{ zIndex: 0, background: 'transparent' }}
+      >
+        {({ isOpen, hideTarget, showTarget }) => (
+          <button
+            onClick={() => {
+              if (isOpen) {
+                hideTarget();
+              } else {
+                showTarget();
+              }
+            }}
+            className="label"
+          >
+            {t('View price history')}
+          </button>
+        )}
+      </FlyoutTrigger>
+      <FlyoutTarget id="price-history-flyout">
+        {() => <PriceHistory {...props} />}
+      </FlyoutTarget>
+    </Wrapper>
+  );
+}
+
+const days = 30;
+function PriceHistory({ articleNumber, variant }) {
+  const { error, loading, data } = useQuery(PriceHistoryQuery, {
+    variables: { articleNumber, days },
+    errorPolicy: 'all',
+    skip: !articleNumber
+  });
+
+  if (loading || error) {
+    return (
+      <div className="price-table">
+        {loading && (
+          <span className="label">
+            {t('Getting the last { days } days price changes...', {
+              days
+            })}
+          </span>
+        )}
+        {error && <span className="label">{t('Something went wrong')}</span>}
+      </div>
+    );
+  }
+
+  const { product } = data;
+
+  if (!variant) {
+    return <Table history={product.history} days={days} />;
+  }
+
+  const selectedVariant = product.variants.values.find(
+    value => value.articleNumber === variant.articleNumber
+  );
+
+  return <Table history={selectedVariant.history} days={days} />;
+}
+
+const Table = ({ history, days }) => {
+  const { selectedChannel } = useContext(ChannelContext);
+
+  if (history?.length === 0) {
+    return (
+      <div className="price-table">
+        <span>{t('No recent price changes the last { days }', { days })}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="price-table">
+      <ul>
+        {history.previousPrice.map(({ timestamp, price }) => (
+          <li key={timestamp}>
+            <span className="timestamp">
+              {new Date(timestamp).toLocaleDateString([
+                selectedChannel.language.culture
+              ])}
+            </span>
+            <Price price={price} as="span" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/components/ProductPage/PriceHistoryQuery.gql

@@ -0,0 +1,32 @@
+query ProductPriceHistory($articleNumber: String!, $days: Int!) {
+  product(articleNumber: $articleNumber) {
+    id
+    articleNumber
+    history(days: $days) {
+      previousPrice {
+        timestamp
+        price {
+          incVat
+          exVat
+          vat
+        }
+      }
+    }
+
+    variants {
+      values {
+        articleNumber
+        history(days: $days) {
+          previousPrice {
+            timestamp
+            price {
+              incVat
+              vat
+              exVat
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/shop.config.js

@@ -14,7 +14,7 @@ import ContentPage from './components/ContentPage/ContentPage.loadable';
 const config = {
   theme,
   apolloConfig: {
-    shopid: process.env.REACT_APP_SHOP_ID || 'demostore',
+    shopid: process.env.REACT_APP_SHOP_ID || 'kalaskungen',
     graphQLURI:
       process.env.REACT_APP_GRAPHQL_URI || 'https://storeapi.jetshop.io/',
     token:
@@ -46,10 +46,7 @@ const config = {
   },
   channelOverrides: {},
   disableGeoRedirect: true,
-  singleDomainMode:
-    typeof process.env.REACT_APP_SINGLE_DOMAIN_MODE === 'undefined'
-      ? true
-      : process.env.REACT_APP_SINGLE_DOMAIN_MODE, // default to true if this env var is not set
+  singleDomainMode: false,
   schemaExtensions: [],
   preserveRedirect: true,
   structuredData: {

package/translations/default.json

@@ -197,6 +197,9 @@
   "free_shipping_and_return_355b42d1": {
     "message": "Free shipping and return"
   },
+  "getting_the_last_days_days_price_changes_bedecd5": {
+    "message": "Getting the last { days } days price changes..."
+  },
   "go_to_country_517a8515": {
     "message": "Go to { country }"
   },
@@ -338,6 +341,9 @@
   "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 />"
   },
@@ -683,6 +689,9 @@
   "view_password_ec63cb11": {
     "message": "View password"
   },
+  "view_price_history_8078c9af": {
+    "message": "View price history"
+  },
   "visit_product_page_to_add_54331147": {
     "message": "Visit product page to add"
   },

package/translations/sv.json

@@ -772,5 +772,14 @@
   },
   "email_address_is_required_24d62494": {
     "message": "E-postadress är obligatoriskt."
+  },
+  "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"
+  },
+  "view_price_history_8078c9af": {
+    "message": "Visa prishistorik"
   }
 }

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

@@ -1,7 +0,0 @@
-.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

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

package/.vscode/launch.json

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