Merge branch 'cart-basic' into development

README.md

@@ -44,6 +44,15 @@ VUE_APP_CT_API_HOST=https://api.commercetools.co
 
 This will set up the necessary environment variables required to run SUNRISE. Feel free to choose any other approach that best suits your needs.
 
+## Development tips
+
+### Add any queried fields to the mutation
+When executing a mutation (e.g. to update the active cart), we receive as a response the updated resource, which Apollo then uses to update the cached data in Apollo store. It is thanks to this cache that all components are able to display the same information, even after mutations. 
+
+But when we under-fetch in the mutation and fail to update some cached fields we are displaying in a component, this component will not be updated at all with any new data. To avoid that, make sure to add any field you are querying in the mutation. The update mutations are found in the methods `updateMyCart` and `updateMyCustomer`.
+
+Related issue: https://github.com/apollographql/apollo-client/issues/3267
+
 
 ## Run tests
 The project has unit and end-to-end tests covering each functionality. Unit tests will run out of the box, but end-to-end tests require some further configuration, explained in the section below.

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
   transform: {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '\\.(gql|graphql)$': 'jest-transform-graphql',
     '^.+\\.jsx?$': 'babel-jest',
   },
   moduleNameMapper: {

package.json

@@ -12,16 +12,17 @@
   "dependencies": {
     "@commercetools/sdk-auth": "^1.5.0",
     "apollo-cache-inmemory": "^1.3.5",
-    "apollo-client": "^2.4.2",
+    "apollo-client": "^2.4.12",
     "apollo-link-context": "^1.0.8",
     "babel-loader": "^8.0.2",
     "graphql-tag": "^2.9.0",
+    "lodash.debounce": "^4.0.8",
     "register-service-worker": "^1.0.0",
     "vue": "^2.5.17",
     "vue-apollo": "^3.0.0-beta.25",
     "vue-cli-plugin-apollo": "^0.17.2",
-    "vue-clickaway": "^2.2.2",
     "vue-i18n": "^8.4.0",
+    "vue-perfect-scrollbar": "^0.1.0",
     "vue-product-zoomer": "^2.0.11",
     "vue-router": "^3.0.1",
     "vuelidate": "^0.7.4",
@@ -30,13 +31,13 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^4.0.2",
     "@kazupon/vue-i18n-loader": "^0.3.0",
-    "@vue/cli-plugin-babel": "^3.0.3",
-    "@vue/cli-plugin-e2e-cypress": "^3.0.3",
-    "@vue/cli-plugin-eslint": "^3.0.3",
-    "@vue/cli-plugin-pwa": "^3.0.3",
-    "@vue/cli-plugin-unit-jest": "^3.0.3",
-    "@vue/cli-service": "^3.0.3",
-    "@vue/eslint-config-airbnb": "^3.0.3",
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-e2e-cypress": "^3.4.0",
+    "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-plugin-pwa": "^3.4.0",
+    "@vue/cli-plugin-unit-jest": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "@vue/eslint-config-airbnb": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.24",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^23.4.2",
@@ -45,6 +46,7 @@
     "jest-fetch-mock": "^1.6.6",
     "jest-junit": "^5.1.0",
     "jest-localstorage-mock": "^2.2.0",
+    "jest-transform-graphql": "^2.1.0",
     "lint-staged": "^7.2.2",
     "mocha": "^5.2.0",
     "mocha-junit-reporter": "^1.18.0",

public/index.html

@@ -31,7 +31,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
     <script src="<%= BASE_URL %>js/animatedModal.min.js"></script>
     <script src="<%= BASE_URL %>js/main.js"></script>

public/js/main.js

@@ -56,16 +56,18 @@ sizeGuideTable.prototype = {
 
 $(document).ready(() => {
   $(window).load(() => {
+    // Custom scrollbar no longer exists as a dependency, but this functionality is not yet implemented
+    // It's commented out until the functionality is implemented, to keep it as a reference
     // makes the scrollbar's design the same in all browsers
-    $('.nav-minicart ul, .order-summary-items').mCustomScrollbar({
-      theme: 'dark',
-      scrollInertia: 50,
-    });
-
-    $('.store-location-wrapper > .addresses').mCustomScrollbar({
-      theme: 'dark-thin',
-      scrollInertia: 50,
-    });
+    // $('.order-summary-items').mCustomScrollbar({
+    //   theme: 'dark',
+    //   scrollInertia: 50,
+    // });
+    //
+    // $('.store-location-wrapper > .addresses').mCustomScrollbar({
+    //   theme: 'dark-thin',
+    //   scrollInertia: 50,
+    // });
   });
 
   // "Select" elements becomes customized
@@ -75,19 +77,6 @@ $(document).ready(() => {
   $('.search-toggle').click(() => {
     $('.search-box').slideToggle();
   });
-
-  // Your bag dropdown
-  $('.link-your-bag').click(() => {
-    $('.nav-minicart').slideToggle();
-  });
-
-  // Closing dropdown on click outside of it
-  $('html').click(() => {
-    $('.nav-minicart').hide();
-  });
-  $('.list-item-bag, .nav-minicart').click((event) => {
-    event.stopPropagation();
-  });
 });
 
 // Toggling plus and minus icons for mobile navigation menu

src/assets/scss/_add-to-bag-btn.scss

@@ -10,6 +10,6 @@
   }
 }
 .bag-thumb {
-  height: 25px;
-  margin: 0.5em 0.9em 0.7em 0;
+  height: 20px;
+  margin-right: 0.6em;
 }

src/assets/scss/_general.scss

@@ -192,7 +192,7 @@ button {
 }
 
 .fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
+  transition: all .5s;
 }
 .fade-enter, .fade-leave-to {
   opacity: 0;

src/assets/scss/_my-account-personal-details.scss

@@ -188,21 +188,6 @@
   }
 }
 .personal-details-edit-btn {
-  .update-btn {
-    text-transform: uppercase;
-    background: $my-sin;
-    padding: 10px 20px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    margin-right: 15px;
-    font-size: 16px;
-    &:hover {
-      background: lighten($my-sin, 5%);
-    }
-    @media screen and (max-width: 767px) {
-      margin-bottom: 10px;
-    }
-  }
   .cancel-btn {
     border: 2px solid $silver-chalice;
     color: $silver-chalice;

src/assets/scss/_navigation.scss

@@ -447,7 +447,6 @@
 
 
 .nav-minicart {
-  display: none;
   position: absolute;
   width: 500%; // TODO: temp fix
   right: 0;
@@ -464,7 +463,6 @@
     padding: 0;
     list-style: none;
     max-height: 13em;
-    border-bottom: 1px $alto solid;
 
     li {
       width: 100%;
@@ -506,7 +504,7 @@
 
       .details {
         position: absolute;
-        right: 0;
+        right: 15px;
         bottom: 20px;
 
         p {
@@ -555,7 +553,7 @@
 
   .gradient {
     width: 100%;
-    height: 30px;
+    height: 50px;
     float: left;
     position: relative;
     left: 0px;
@@ -591,7 +589,7 @@
   }
 
   @media screen and (min-width: 768px) {
-    width: 400px;
+    width: 360px;
     right: 0;
 
     ul {

src/assets/scss/_pdp.scss

@@ -144,8 +144,8 @@
     vertical-align: top;
 
     .bag-items {
-      height: 52px;
-      line-height: 52px;
+      height: 43px;
+      line-height: 43px;
     }
   }
 }

src/auth.js

@@ -4,11 +4,13 @@ import store from '@/store';
 import config from '@/../sunrise.config';
 
 const tokenInfoStorageName = 'token';
+const isAuthenticatedStorageName = 'auth';
 let storedTokenInfo;
 
 try {
   storedTokenInfo = JSON.parse(localStorage.getItem(tokenInfoStorageName));
-  if (storedTokenInfo && storedTokenInfo.refresh_token) {
+  const isAuthenticated = localStorage.getItem(isAuthenticatedStorageName);
+  if (storedTokenInfo && isAuthenticated) {
     store.dispatch('setAuthenticated', true);
   }
 } catch (error) {
@@ -18,26 +20,39 @@ try {
 
 const tokenProvider = new TokenProvider({
   sdkAuth: new SdkAuth(config.ct.auth),
-  fetchTokenInfo: sdkAuth => sdkAuth.clientCredentialsFlow(),
+  fetchTokenInfo: sdkAuth => sdkAuth.anonymousFlow(),
   onTokenInfoChanged: tokenInfo => localStorage.setItem(tokenInfoStorageName, JSON.stringify(tokenInfo)),
 }, storedTokenInfo);
 
-export function clientLogout() {
+function cleanUpSession() {
+  localStorage.removeItem(isAuthenticatedStorageName);
+  return store.dispatch('setAuthenticated', false);
+}
+
+export function clientLogin(username, password) {
   localStorage.removeItem(tokenInfoStorageName);
-  tokenProvider.fetchTokenInfo = sdkAuth => sdkAuth.clientCredentialsFlow();
+  tokenProvider.fetchTokenInfo = sdkAuth => sdkAuth.customerPasswordFlow({ username, password });
   tokenProvider.invalidateTokenInfo();
-  return apolloProvider.defaultClient.clearStore()
-    .then(() => store.dispatch('setAuthenticated', false))
+  return apolloProvider.defaultClient.resetStore()
+    .then(() => {
+      localStorage.setItem(isAuthenticatedStorageName, true);
+      return store.dispatch('setAuthenticated', true);
+    })
     .catch((error) => {
       // eslint-disable-next-line no-console
-      console.error('Error on cache reset', error);
+      console.error('Error on cache reset during login', error);
+      return cleanUpSession();
     });
 }
 
-export function clientLogin(username, password) {
-  tokenProvider.fetchTokenInfo = sdkAuth => sdkAuth.customerPasswordFlow({ username, password });
-  tokenProvider.invalidateTokenInfo();
-  store.dispatch('setAuthenticated', true);
+export function clientLogout(redirect) {
+  return cleanUpSession()
+    .then(() => redirect())
+    .then(() => apolloProvider.defaultClient.resetStore())
+    .catch((error) => {
+      // eslint-disable-next-line no-console
+      console.error('Error on cache reset during logout', error);
+    });
 }
 
 const buildAuthorizationHeader = () => tokenProvider.getTokenInfo()
@@ -47,6 +62,6 @@ export function getAuthToken() {
   return buildAuthorizationHeader().catch((error) => {
     // eslint-disable-next-line no-console
     console.warn('Could not connect to commercetools, cleaning up session...', error);
-    return clientLogout().then(() => buildAuthorizationHeader());
+    return cleanUpSession().then(() => buildAuthorizationHeader());
   });
 }

src/components/DisplayableMoney.gql

@@ -0,0 +1,5 @@
+fragment DisplayableMoney on Money {
+  centAmount
+  currencyCode
+  fractionDigits
+}