feat: maps functionality

.eslintrc.js

@@ -9,8 +9,11 @@ module.exports = {
   rules: {
     'jsdoc/no-undefined-types': [
       'warn', {
-        definedTypes: ['MyParcel'],
+        definedTypes: [
+          'MyParcel',
+          'MyParcelDeliveryOptions',
+        ],
       },
     ],
-  }
+  },
 };

index.d.ts

@@ -0,0 +1 @@
+import 'types'

package.json

@@ -24,7 +24,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.8",
     "@myparcel/js-sdk": "^2.0.0",
-    "core-js": "^3.4.2",
+    "core-js": "^3.4.4",
     "custom-event-polyfill": "^1.0.7",
     "debounce": "^1.2.0",
     "lodash.isequal": "^4.5.0",
@@ -38,19 +38,19 @@
     "@commitlint/config-conventional": "^8.2.0",
     "@myparcel/eslint-config": "^1.1.1",
     "@types/jest": "^24.0.23",
-    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/cli-plugin-unit-jest": "^4.0.5",
-    "@vue/cli-service": "^4.0.5",
+    "@types/leaflet": "^1.5.5",
+    "@vue/cli-plugin-babel": "^4.1.1",
+    "@vue/cli-plugin-unit-jest": "^4.1.1",
+    "@vue/cli-service": "^4.1.1",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
     "babel-minify-webpack-plugin": "^0.3.1",
     "babel-plugin-intl": "^0.1.1",
     "conventional-github-releaser": "^3.1.3",
     "copy-webpack-plugin": "^5.0.5",
-    "coveralls": "^3.0.8",
+    "coveralls": "^3.0.9",
     "cross-env": "^6.0.3",
-    "eslint-plugin-jsdoc": "^18.1.4",
     "full-icu": "^1.3.0",
     "node-sass": "^4.13.0",
     "sass-loader": "^8.0.0",

src/App.vue

@@ -71,7 +71,7 @@ export default {
       /**
        * Whether the delivery options are loading or not.
        *
-       * @type {boolean}
+       * @type {Boolean}
        */
       loading: true,
 
@@ -134,7 +134,7 @@ export default {
      *
      * Otherwise returns true.
      *
-     * @returns {boolean}
+     * @returns {Boolean}
      */
     hasValidAddress() {
       if (!this.$configBus.address || !this.$configBus.address.cc) {
@@ -176,7 +176,7 @@ export default {
     /**
      * Check if the cc in the given address allows delivery options and if any top level setting is enabled.
      *
-     * @returns {boolean}
+     * @returns {Boolean}
      */
     hasSomethingToShow() {
       return this.$configBus.isValidCountry
@@ -263,7 +263,7 @@ export default {
     },
 
     /**
-     * Show the delivery options, getting all necessary data in the process..
+     * Show the delivery options, getting all necessary data in the process.
      *
      * @param {CustomEvent|Object} event - Address.
      *
@@ -328,7 +328,7 @@ export default {
     /**
      * Trigger an update on the checkout. Throttled to avoid overloading the external platform with updates.
      *
-     * @param {boolean} force - Ignore the safety check and force dispatching the event.
+     * @param {Boolean} force - Ignore the safety check and force dispatching the event.
      */
     updateExternal({ name, value }) {
       const isEmptied = name === CONFIG.DELIVERY && value === null;

src/assets/scss/_keyframes.scss

@@ -8,3 +8,21 @@
   50% { background-position: 100% 50% }
   100% { background-position: 0 50% }
 }
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  20% {
+    transform: scale(1.5);
+    opacity: 0.6;
+  }
+  70% {
+    opacity: 0;
+    transform: scale(4);
+  }
+  100% {
+    transform: scale(5);
+  }
+}

src/assets/scss/_map.scss

@@ -1,11 +1,57 @@
 .#{$classBase}__pickup-locations {
   &--map {
-    height: 400px;
+    &--modal {
+      .#{$classBase}__pickup-locations__leaflet {
+        height: auto;
+      }
+    }
 
     &__leaflet {
+      height: 400px;
 
       &__marker {
-        filter: drop-shadow(2px 2px rgba(0, 0, 0, 0.4));
+        transition: all .2s ease;
+        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
+
+        &--active {
+          background-color: white;
+          border-radius: 100%;
+          border: 5px solid transparent;
+        }
+
+        &--center {
+          $ripple-size: 50px;
+          border: 0;
+          box-shadow: inset -1px -1px 2px darken($positive, 5%);
+          border-radius: 100%;
+          position: relative;
+          overflow: visible;
+          background-color: lighten($positive, 15%);
+
+          &:after {
+            content: ' ';
+            mix-blend-mode: screen;
+            position: absolute;
+            width: $ripple-size;
+            height: $ripple-size;
+            margin: auto;
+            background-color: rgba(lighten($positive, 30%), .5);
+            opacity: 0;
+            border-radius: 100%;
+            top: -($ripple-size / 2 - 5px);
+            left: -($ripple-size / 2 - 5px);
+          }
+
+          &--loading {
+            &:after {
+              animation: ripple 1.2s ease-out infinite;
+            }
+          }
+        }
+      }
+
+      .leaflet-bar > a {
+        text-decoration: none;
       }
 
       .leaflet-popup-content-wrapper {
@@ -15,6 +61,13 @@
           padding: $spacing;
         }
       }
+
+      /*
+       * Animates marker movement. Taken from https://gist.github.com/meule/777d9a8a42e2c99a3386
+       */
+      .leaflet-marker-pane > * {
+        transition: transform .3s linear;
+      }
     }
   }
 }

src/assets/scss/_modal.scss

@@ -1,6 +1,11 @@
 .#{$classBase}__modal {
   position: relative;
 
+  &--inline {
+    padding-top: $modal-content-padding;
+    padding-bottom: $modal-content-padding;
+  }
+
   &--full {
     padding: $modal-content-padding;
   }

src/assets/scss/_variables.scss

@@ -1,7 +1,7 @@
 $classBase: 'development' !default; // Is overridden in prod by vue.config.js
 
 $primary: #eee;
-$positive: green;
+$positive: #227631;
 
 $modal-content-padding: 1em;
 

src/assets/scss/style.scss

@@ -14,11 +14,15 @@
   position: relative;
 
   .#{$classBase} {
+    &__h-auto {
+      height: auto;
+    }
+
     &__d-block {
       display: block;
     }
 
-    &__select {
+    &__w-100 {
       width: 100%;
     }
 

src/components/Pickup/Map/.eslintrc

@@ -2,5 +2,8 @@
   "globals": {
     "L": "readonly",
     "Vue2Leaflet": "readonly"
+  },
+  "rules": {
+    "no-underscore-dangle": "off"
   }
 }