From 4591fb1be5aa4bbab27b1c0f0ec17d3cb546bef1 Mon Sep 17 00:00:00 2001
From: Edie Lemoine <edie@myparcel.nl>
Date: Tue, 3 Dec 2019 11:26:55 +0100
Subject: [PATCH] refactor: change the pickup locations views strings and
 setting

---
 src/components/Pickup/Pickup.vue     | 40 ++++++++++++++++++++--------
 src/config/data/defaultConfig.js     |  2 +-
 src/config/data/locales/be/config.js |  2 +-
 src/config/data/settingsConfig.js    | 20 ++++++--------
 types/index.d.ts                     |  2 +-
 5 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/components/Pickup/Pickup.vue b/src/components/Pickup/Pickup.vue
index 65cdd46d..cbe36bb8 100644
--- a/src/components/Pickup/Pickup.vue
+++ b/src/components/Pickup/Pickup.vue
@@ -2,10 +2,10 @@
   <td>
     <div>
       <button
-        @click="() => select('list')"
+        @click="selected = views.list"
         v-text="$configBus.strings.pickupLocationsListButton" />
       <button
-        @click="() => select('map')"
+        @click="selected = views.map"
         v-text="$configBus.strings.pickupLocationsMapButton" />
     </div>
 
@@ -13,7 +13,7 @@
       <keep-alive>
         <div :class="$classBase + '__pickup-locations--list'">
           <recursive-form
-            v-if="selected === 'list'"
+            v-if="selected === views.list"
             :option="listOption" />
         </div>
       </keep-alive>
@@ -21,7 +21,7 @@
     <transition name="shove">
       <keep-alive>
         <leaflet
-          v-if="selected === 'map'"
+          v-if="selected === views.map"
           :data="data"
           @update="emitUpdate" />
       </keep-alive>
@@ -31,11 +31,14 @@
 
 <script>
 import * as EVENTS from '@/config/data/eventConfig';
-import { FEATURE_MAX_PAGE_ITEMS, FEATURE_PICKUP_LOCATIONS_MAP } from '@/config/data/settingsConfig';
+import * as SETTINGS from '@/config/data/settingsConfig';
 import Leaflet from '@/components/Pickup/Map/Leaflet';
 import { PICKUP_LOCATION } from '@/config/data/formConfig';
 import PickupOption from '@/components/Pickup/PickupOption';
 
+const MAP_VIEW = 'map';
+const LIST_VIEW = 'list';
+
 export default {
   name: 'Pickup',
   components: { Leaflet },
@@ -47,27 +50,42 @@ export default {
   },
   data() {
     return {
-      selected: this.$configBus.get(FEATURE_PICKUP_LOCATIONS_MAP) ? 'map' : 'list',
+      selected: this.getDefaultMapView(),
       listOption: {
         name: PICKUP_LOCATION,
         type: 'radio',
         component: PickupOption,
-        pagination: this.$configBus.get(FEATURE_MAX_PAGE_ITEMS),
+        pagination: this.$configBus.get(SETTINGS.FEATURE_MAX_PAGE_ITEMS),
         choices: this.data.choices,
       },
+      views: {
+        map: MAP_VIEW,
+        list: LIST_VIEW,
+      },
     };
   },
   methods: {
-    select(item) {
-      this.selected = item;
-    },
-
     /**
      * @param {Object} event - Event object.
      */
     emitUpdate(event) {
       this.$configBus.$emit(EVENTS.UPDATE, event);
     },
+
+    /**
+     * Get the default map view setting or fall back to default.
+     *
+     * @returns {String}
+     */
+    getDefaultMapView() {
+      const setting = this.$configBus.get(SETTINGS.FEATURE_PICKUP_LOCATIONS_DEFAULT_VIEW);
+
+      if (setting && this.views.includes(setting)) {
+        return setting;
+      }
+
+      return this.views.map;
+    },
   },
 };
 </script>
diff --git a/src/config/data/defaultConfig.js b/src/config/data/defaultConfig.js
index 8bf3c514..85964195 100644
--- a/src/config/data/defaultConfig.js
+++ b/src/config/data/defaultConfig.js
@@ -35,7 +35,7 @@ const baseConfig = {
     [SETTINGS.PRICE_STANDARD_DELIVERY]: 0,
 
     [SETTINGS.FEATURE_ALLOW_RETRY]: true,
-    [SETTINGS.FEATURE_PICKUP_LOCATIONS_MAP]: false,
+    [SETTINGS.FEATURE_PICKUP_LOCATIONS_DEFAULT_VIEW]: 'map',
     [SETTINGS.FEATURE_MAX_PAGE_ITEMS]: 5,
 
     /**
diff --git a/src/config/data/locales/be/config.js b/src/config/data/locales/be/config.js
index fce8b0d4..58736d34 100644
--- a/src/config/data/locales/be/config.js
+++ b/src/config/data/locales/be/config.js
@@ -15,7 +15,7 @@ export const config = {
   /**
    * For the same reason as above, prefer the map view to the list view.
    */
-  [SETTINGS.FEATURE_PICKUP_LOCATIONS_MAP]: true,
+  [SETTINGS.FEATURE_PICKUP_LOCATIONS_DEFAULT_VIEW]: true,
 
   /**
    * Show more pickup items by default for BE because it doesn't show the distance.
diff --git a/src/config/data/settingsConfig.js b/src/config/data/settingsConfig.js
index c5ac1933..11ce583d 100644
--- a/src/config/data/settingsConfig.js
+++ b/src/config/data/settingsConfig.js
@@ -40,25 +40,21 @@ export const CARRIER_SETTINGS = 'carrierSettings';
  */
 export const FEATURE_ALLOW_RETRY = 'allowRetry';
 
-/**
- * Enable a map for the pickup locations instead of the default list.
- *
- * @type {String}
- */
-export const FEATURE_PICKUP_LOCATIONS_MAP = 'pickupLocationsMap';
-
-/**
- * Tile layer data for use with the pickup locations map.
- *
- * @type {String}
+/*
+ * The default view of pickup locations.
  */
-export const PICKUP_LOCATIONS_MAP_TILE_LAYER_DATA = 'pickupLocationsMapTileLayerData';
+export const FEATURE_PICKUP_LOCATIONS_DEFAULT_VIEW = 'pickupLocationsDefaultView';
 
 /*
  * Show distance under each pickup location if true. Otherwise shows street name and number.
  */
 export const FEATURE_PICKUP_SHOW_DISTANCE = 'pickupShowDistance';
 
+/*
+ * Tile layer data for use with the pickup locations map.
+ */
+export const PICKUP_LOCATIONS_MAP_TILE_LAYER_DATA = 'pickupLocationsMapTileLayerData';
+
 /*
  * Max amount of pickup locations shown.
  */
diff --git a/types/index.d.ts b/types/index.d.ts
index 9e3ec3cd..35acc294 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -141,8 +141,8 @@ declare namespace MyParcelDeliveryOptions {
 
     // Feature toggles
     allowRetry: Boolean
+    pickupLocationsDefaultView: 'map' | 'list'
     pickupShowDistance: Boolean
-    pickupLocationsMap: Boolean
 
     pickupLocationsMapTileLayerData: MapTileLayerData
   }