Merge branch 'cart-basic' into development

Author: lauraluiz

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-lock.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",

package.json

@@ -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/index.html

@@ -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

public/js/main.js

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

src/assets/img/loading.svg

@@ -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/_add-to-bag-btn.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;