Remove texts, add emails list

components/complaint/ComplaintDisclaimer.vue

@@ -20,7 +20,7 @@
         Înainte de a completa reclamația, este important să știi că informațiile pe care le vei furniza vor fi transmise către URMĂTOARELE entități: <span class="font-weight-bold">{{ institutions }}</span>
       </p>
       <p class="disclaimer-text" data-listen-text>
-        Dacă ai întrebări sau îngrijorări în legătură cu acest proces, te rugăm să ceri ajutorul unei persoane în care ai încredere. Este important să înțelegi că informațiile pe care le furnizezi vor fi tratate cu confidențialitate și respect față de drepturile tale.
+        Dacă ai întrebări sau îngrijorări în legătură cu acest proces, te rugăm să ceri ajutorul unei persoane în care ai încredere.
       </p>
     </div>
 

components/complaint/ComplaintEmailsModal.vue

@@ -0,0 +1,159 @@
+<template>
+  <v-dialog
+    width="928"
+    scrollable
+    persistent
+    v-model="dialog"
+    content-class="complaint-emails-modal"
+    :fullscreen="$vuetify.breakpoint.smAndDown"
+  >
+    <v-card flat>
+      <div class="emails-header">
+        <div class="d-flex align-center">
+          <v-spacer />
+          <v-btn icon color="#111827" @click="$emit('close')">
+            <v-icon>
+              mdi-close
+            </v-icon>
+          </v-btn>
+        </div>
+
+        <div class="emails-header-content">
+          <div>
+            <span class="emails-title">
+              Adresele de email care vor primi plângerea ta
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <v-card-text height="600px" class="mt-3">
+        <v-list>
+          <v-list-item
+            v-for="(email, i) in emails"
+            :key="`email_${i}`"
+          >
+            <v-list-item-content>
+              <v-list-item-title>
+                <span style="text-transform: uppercase;">{{ email }}</span>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+
+export default {
+  props: {
+    emails: {
+      type: Array,
+      default: () => [],
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      dialog: this.visible,
+    }
+  },
+  watch: {
+    visible(val) {
+      this.dialog = val
+    }
+  },
+}
+
+</script>
+
+<style lang="scss">
+
+.complaint-emails-modal {
+  .v-card {
+    border-radius: 8px !important;
+    border: 2px solid $yellow600 !important;
+
+    .emails-header {
+      padding: 27px 25px 0 25px;
+
+      .emails-header-content {
+        margin: 50px 55px 0 55px;
+
+        .emails-title {
+          color: #333;
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 150%;
+          font-style: normal;
+          text-transform: uppercase;
+          font-family: Inter, sans-serif;
+        }
+
+        .search-input {
+          width: 50%;
+
+          input {
+            text-transform: uppercase;
+          }
+        }
+
+        .results-text {
+          color: $gray600;
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 150%;
+          font-style: normal;
+          text-transform: uppercase;
+        }
+      }
+    }
+
+    .v-card__text {
+      padding-left: 80px;
+      padding-right: 80px;
+    }
+  }
+}
+
+@media #{map-get($display-breakpoints, 'sm-and-down')} {
+  .complaint-emails-modal {
+    .emails-header-content {
+      margin: 50px 30px 0 30px !important;
+
+      .search-input {
+        width: 75% !important;
+      }
+    }
+
+    .v-card__text {
+      padding-left: 50px !important;
+      padding-right: 50px !important;
+    }
+  }
+}
+
+@media #{map-get($display-breakpoints, 'xs-only')} {
+  .complaint-emails-modal {
+    .emails-header-content {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+
+      .search-input {
+        width: 100% !important;
+      }
+    }
+
+    .v-card__text {
+      padding-left: 20px !important;
+      padding-right: 20px !important;
+    }
+  }
+}
+
+</style>

components/complaint/ComplaintPreview.vue

@@ -16,6 +16,17 @@
       </span>
     </div>
 
+    <v-btn
+      v-if="institutionsEmails.length > 0"
+      outlined
+      color="#FFF"
+      data-listen-text
+      class="emails-button mt-2"
+      @click="showEmails = true"
+    >
+      Vezi adresele de email
+    </v-btn>
+
     <div class="form-container">
       <div class="preview-container">
         <div class="preview-text">
@@ -45,10 +56,6 @@
           <span data-listen-text>Motivul pentru care vreau să mă mut este <span class="font-weight-bold">{{ reason }}</span></span>
         </div>
 
-        <div class="preview-text mt-4">
-          <span data-listen-text>Solicit ca datele mele personale să nu devină publice ca urmare a acestei plângeri, a cărei soluționare o cer.</span>
-        </div>
-
         <div v-if="uploads.length > 0" class="preview-text mt-5">
           <span>Am atașat plângerii următoarele dovezi:</span>
           <span data-listen-text style="display: none">
@@ -68,12 +75,19 @@
       @back="$emit('back')"
       @next="$emit('next')"
     />
+
+    <complaint-emails-modal
+      :visible="showEmails"
+      :emails="institutionsEmails"
+      @close="showEmails = false"
+    />
   </div>
 </template>
 
 <script>
 
 import { mapState, mapGetters } from 'vuex'
+import ComplaintEmailsModal from './ComplaintEmailsModal'
 
 const options = {
   beaten: 'Am fost bătut/ă',
@@ -86,14 +100,24 @@ const options = {
 }
 
 export default {
+  components: {
+    ComplaintEmailsModal
+  },
   props: {
     steps: {
       type: Number,
       default: 0,
     },
   },
+  data() {
+    return {
+      showEmails: false,
+    }
+  },
   computed: {
     ...mapState('complaint', [
+      'lat',
+      'lng',
       'cnp',
       'type',
       'name',
@@ -103,6 +127,7 @@ export default {
       'uploads',
       'location',
       'locationTo',
+      'institutionsEmails',
     ]),
     ...mapGetters('complaint', ['getInstitutions']),
     step() {
@@ -112,6 +137,23 @@ export default {
       return this.getInstitutions()
     },
   },
+  async mounted() {
+    const params = {
+      lat: this.lat,
+      lng: this.lng,
+      type: this.type,
+      location_id: null,
+      victim: this.victim,
+    }
+
+    if (this.location) {
+      params.location_id = this.location.id
+    }
+
+    try {
+      await this.$store.dispatch('complaint/getInstitutions', params)
+    } catch (e) {}
+  },
   methods: {
     detailsText(detail) {
       if (detail === 'other') {
@@ -137,6 +179,31 @@ export default {
 <style lang="scss">
 
 .complaint-preview {
+  .emails-button {
+    border-radius: 8px;
+    height: auto !important;
+    background-color: #FFF;
+    border: 1px solid #374151;
+    padding: 0.75rem 1rem !important;
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+    .v-btn__content {
+      color: #374151;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+      font-style: normal;
+      font-family: "Encode Sans", sans-serif;
+    }
+
+    &:hover {
+      &::before {
+        transition: none;
+        background: none;
+      }
+    }
+  }
+
   .preview-container {
     height: 510px;
     overflow-y: auto;

components/complaint/ComplaintType.vue

@@ -82,17 +82,7 @@ export default {
 
       this.$store.commit('complaint/setType', type)
     },
-    async submit() {
-      this.loading = true
-
-      try {
-        await this.$store.dispatch('complaint/getInstitutions', {
-          type: this.type,
-          victim: this.victim,
-        })
-      } catch (e) {}
-
-      this.loading = false
+    submit() {
       this.$emit('next')
     },
   }

components/complaint/ComplaintVictim.vue

@@ -42,16 +42,6 @@ export default {
   methods: {
     async handleChange(victim) {
       this.$store.commit('complaint/setVictim', victim)
-
-      if (victim === 'me') {
-        this.$emit('next')
-        return
-      }
-
-      try {
-        await this.$store.dispatch('complaint/getInstitutions', { victim })
-      } catch (e) {}
-
       this.$emit('next')
     }
   }

pages/admin/complaints/_complaint_id/view.vue

@@ -120,10 +120,6 @@
                             </div>
                           </div>
 
-                          <div class="mb-4">
-                            Solicit ca datele mele personale să nu devină publice ca urmare a acestei plângeri, a cărei soluționare o cer.
-                          </div>
-
                           <div v-if="complaint.proof_type === 'later' || complaint.proof_type === 'yes'" class="mb-4">
                             <label class="complaint-label">Atasamente</label>
                             <div v-if="complaint.proof_type === 'later'">Am dovezi si le pot oferi la cerere</div>

store/complaint.js

@@ -19,6 +19,7 @@ const initialState = {
 
   locations: [],
   institutions: [],
+  institutionsEmails: [],
 }
 
 const state = () => ({
@@ -130,6 +131,9 @@ const mutations = {
   setInstitutions(state, institutions) {
     state.institutions = institutions
   },
+  setInstitutionsEmails(state, institutionsEmails) {
+    state.institutionsEmails = institutionsEmails
+  },
   reset(state) {
     Object.assign(state, initialState)
   }
@@ -143,7 +147,10 @@ const actions = {
   },
   async getInstitutions ({ commit }, params) {
     return this.$axios.get(`/api/public/complaints/institutions/list`, { params })
-      .then(result => commit('setInstitutions', result.data))
+      .then(result => {
+        commit('setInstitutions', result.data.institutions)
+        commit('setInstitutionsEmails', result.data.emails)
+      })
   },
   async create ({ commit }, params) {
     return this.$axios.post(`/api/complaints`, params)