VIRCN-9 Added a information modal for the option of "Cannot find my city" in the initiative step.

Author: guillecro

src/components/initiatives/new/AddCityModal.vue

@@ -7,6 +7,7 @@
       <div class="content">
         <h1 class="title is-3">This feature will be available soon</h1>
         <p>Sorry! We will add this feature in a future update, stay tuned!</p>
+        <p>Meanwhile, you can contact us by filling our support form by going to <a href="https://docs.google.com/forms/d/e/1FAIpQLSf02YyfE8ddsf5B0u2wSF_ZggEYQi_-U0fQQcSaqfdtKmpWng/viewform" target="_blank" title="Support and feedback form">to this link</a></p>
         <div class="buttons is-centered">
           <button class="button is-outlined is-dark" type="button" @click="$parent.close()">Close</button>
         </div>

src/components/initiatives/new/ModalSkipStep3.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="modal-card" style="width: 100%">
+    <!-- <header class="modal-card-head">
+      <p class="modal-card-title">Add your city</p>
+    </header>-->
+    <section class="modal-card-body has-text-centered">
+      <div class="content">
+        <h1 class="title is-3">Before continuing...</h1>
+        <p>If you weren't able to find your city, we are sorry about that :(</p>
+        <p>You can contact us to add your location by filling our support form by going to <a href="https://docs.google.com/forms/d/e/1FAIpQLSf02YyfE8ddsf5B0u2wSF_ZggEYQi_-U0fQQcSaqfdtKmpWng/viewform" target="_blank" title="Support and feedback form">to this link</a></p>
+        <div class="buttons is-centered">
+          <button class="button is-outlined is-dark" type="button" @click="$parent.close()">Close</button>
+          <button class="button is-primary" type="button" @click="nextStep">Next step</button>
+        </div>
+      </div>
+    </section>
+    <!-- <footer class="modal-card-foot">
+      <button class="button" type="button" @click="$parent.close()">Close</button>
+      <button class="button is-primary"><i class="fas fa-plus"></i>&nbps;Add city</button>
+    </footer>-->
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    nextStep: function(){
+      this.$emit('continue')
+      this.$parent.close()
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+.modal-card {
+  color: #000;
+}
+</style>

src/i18n/en/forms/user/addInitiative.js

@@ -55,7 +55,8 @@ const addInitiative = {
     noCity: 'My initiative is not located in a city',
     cantFindCity: 'Can\t find your city? Click here',
     notificationNoCity: 'The initiative is not located in a city',
-    skip: 'Skip this step, I cannot locate my city in a map',
+    skip: 'Skip this step, my initiative cannot be placed in a location',
+    cantLocate: 'I cannot find my city in the list',
     feature: {
       title: 'This feature will be available soon',
       text: 'Sorry! We will add this feature in a future update, stay tuned!',

src/views/initiatives/steps/Step3.vue

@@ -86,11 +86,17 @@
     <br>
     <div class="content">
       <p class="has-text-centered">
-        <a @click="skip" class="has-text-primary">
+        <a @click="$emit('goTo',5)" class="has-text-primary">
           <i class="fas fa-share"></i>
           &nbsp;{{$t('forms.user.addInitiative.step3.skip')}}
         </a>
       </p>
+      <p class="has-text-centered">
+        <a @click="skip" class="has-text-primary">
+          <i class="fas fa-info-circle"></i>
+          &nbsp;{{$t('forms.user.addInitiative.step3.cantLocate')}}
+        </a>
+      </p>
     </div>
     <div class="buttons is-centered">
       <button @click="$emit('backward')" class="button is-rounded is-white is-outlined is-medium">
@@ -105,6 +111,7 @@
 
 <script>
 import AddCityModal from "@/components/initiatives/new/AddCityModal";
+import ModalSkipStep3 from "@/components/initiatives/new/ModalSkipStep3.vue"
 import debounce from "lodash/debounce";
 
 export default {
@@ -182,14 +189,6 @@ export default {
       this.selectedCountry = selectedCountry;
       this.queryCity = "";
       this.selectedCity = null;
-      // this.$http
-      //   .get(`/v1/registered-cities?size=100&country_id=${selectedCountry.id}`)
-      //   .then(res => {
-      //     this.dataCities = res.data.data;
-      //   })
-      //   .finally(() => {
-      //     this.fetchingCities = false;
-      //   });
     },
     getCityAsync: debounce(function(name) {
       if (!name.length) {
@@ -209,14 +208,19 @@ export default {
         });
     }, 500),
     skip() {
-      this.model.selectedRegion = null;
-      this.model.selectedCountry = null;
-      this.model.selectedCity = null;
-      this.$emit("forward");
+      this.$modal.open({
+        parent: this,
+        component: ModalSkipStep3,
+        hasModalCard: true,
+        events: {
+          continue: () => {
+            this.$emit('goTo',5)
+          }
+        }
+      });
     },
     selectCity(selectedCity) {
       if (selectedCity === null) return;
-      // this.fetchingCities = true;
       this.selectedCity = selectedCity;
     },
     notLocatedInACity() {
@@ -268,15 +272,6 @@ export default {
             .indexOf(this.queryCountry.toLowerCase()) >= 0
       );
     },
-    // filteredCities() {
-    //   return this.dataCities.filter(
-    //     option =>
-    //       option.name
-    //         .toString()
-    //         .toLowerCase()
-    //         .indexOf(this.queryCity.toLowerCase()) >= 0
-    //   );
-    // }
   }
 };
 </script>