WN-248

package.json

@@ -27,8 +27,10 @@
     "countries-list": "^2.3.1",
     "country-list": "^1.1.0",
     "dotenv": "^8.2.0",
+    "html2canvas": "^1.4.1",
     "jquery": "^3.6.1",
     "js-cookie": "^3.0.1",
+    "jspdf": "^3.0.0",
     "markdown": "^0.5.0",
     "popper.js": "^1.16.1",
     "sweetalert2": "^6.10.3",

resources/assets/js/pages/content/whatnowContentItem.vue

@@ -87,44 +87,27 @@
                   <b-col cols="12">
                     <h4 class="subtitle-card">{{ urgency.text }}</h4>
                   </b-col>
-                  <b-col 
-                    class="hazard-card" 
-                    cols="4" 
-                    v-for="(stageKey, index) in Object.keys(content.currentTranslation.stages)" 
-                    :key="'stage'+index" 
+                  <b-col
+                    class="hazard-card"
+                    cols="4"
+                    v-for="(stageKey, index) in Object.keys(content.currentTranslation.stages)"
+                    :key="'stage'+index"
                     v-if="urgency.stages.includes(stageKey)"
                   >
-                    <b-card class="h-100 key-message-card" v-if="content.currentTranslation.stages[stageKey]">
-                      <div class="mb-2">
-                        <h4 class="card-title mb-3">
-                          {{ $t('content.edit_whatnow.'+stageKey) }}
-                        </h4>
-                        <div class="key-message-item" v-for="(keyMessage, index) in content.currentTranslation.stages[stageKey]" :key="'instruction'+index">
-                          <h5 class="card-text key-message-item-title">
-                            {{ keyMessage.title  }}
-                          </h5>
-                          <ul class="key-message-item-list">
-                            <li class="text-card" v-for="(supportingMessage, index) in keyMessage.content" :key="'supportingMessage'+index">
-                              {{ supportingMessage }}
-                            </li>
-                          </ul>
-                        </div>
-                      </div>
-                      <div class="button-container mt-4 mb-4 key-message-item-btn">
-                        <b-button variant="danger" class="button-go" @click="openKeyMessageVisualizer(content.currentTranslation.stages[stageKey], content.eventType)">
-                          {{ $t('content.whatnow.show_more') }}
-                        </b-button>
-                      </div>
-                    </b-card>
+                    <whatnow-message-card v-if="content.currentTranslation.stages[stageKey]"
+                      :stage="content.currentTranslation.stages[stageKey]"
+                      :stageName="stageKey" :eventType="content.eventType"
+                      :title="content.currentTranslation.title"
+                      :description="content.currentTranslation.description"
+                      :selectedSoc="selectedSoc"
+                      :selectedLanguage="selectedLanguage"
+                    />
                   </b-col>
                 </b-row>
               </b-card-body>
           </b-collapse>
         </b-card-header>
       </b-card>
-      <b-modal size="xl"  ref="keyMessageVisualizer" :hide-header="true" id="pre-image" centered ok-variant="outline-primary" :ok-title="'Descargar'">
-        <whatnowPrevisualizer :keyMessage="openedKeyMessage"></whatnowPrevisualizer>
-      </b-modal>
     </b-col>
   </b-row>
 </template>
@@ -133,13 +116,15 @@ import { mapGetters } from 'vuex'
 import * as permissionsList from '../../store/permissions'
 import swal from 'sweetalert2'
 import WhatnowDownloadImage from './whatnowDownloadImage'
-import whatnowPrevisualizer from './whatnowPrevisualizer.vue'
+import whatnowPrevisualizer from './whatnowPrevisualizer'
+import WhatnowMessageCard from './whatnowMessageCard'
 
 export default {
-  props: ['selectedLanguage', 'content', 'isPromo', 'regionSlug', 'forceCreate'],
+  props: ['selectedLanguage', 'content', 'isPromo', 'regionSlug', 'forceCreate', 'selectedSoc'],
   components: {
     WhatnowDownloadImage,
-    whatnowPrevisualizer
+    whatnowPrevisualizer,
+    WhatnowMessageCard,
   },
   data() {
     return {
@@ -166,7 +151,6 @@ export default {
           description: this.$t('content.edit_whatnow.recovery_description')
         },
       ],
-      openedKeyMessage: null
     }
   },
   methods: {
@@ -199,10 +183,6 @@ export default {
       }
       return false
     },
-    openKeyMessageVisualizer(keyMessage) {
-      this.openedKeyMessage = keyMessage
-      this.$refs.keyMessageVisualizer.show()
-    },
   },
   computed: {
     editLink() {
@@ -270,31 +250,6 @@ export default {
   }
 }
 
-.key-message-item {
-  margin-bottom: 11px;
-  &::after {
-    content: '';
-    display: block;
-    width: 90%;
-    height: 0.7px;
-    background-color: $cad-solid-bg-3;
-    margin: 24px auto;
-  }
-
-  .key-message-item-title {
-    font-size: 16.8px;
-    font-weight: 500;
-    color: #000;
-  }
-
-  ul.key-message-item-list {
-    li {
-      font-size: 14px;
-      color: #1e1e1e;
-    }
-  }
-}
-
 .hazard-card {
   .key-message-item-btn {
     position: absolute;
@@ -346,11 +301,6 @@ export default {
   font-size: 14px;
 }
 
-.key-message-card {
-  background: #E9E9E9;
-  padding-bottom: 40px;
-}
-
 .content-info {
   color: #1e1e1e;
   .card-title {

resources/assets/js/pages/content/whatnowList.vue

@@ -43,7 +43,8 @@
             :content="content"
             :isPromo="isPromo"
             v-on:languageChange="languageChange"
-            :regionSlug="selectedRegion?.title">
+            :regionSlug="selectedRegion?.title"
+            :selectedSoc="selectedSoc">
           </whatnow-content-item>
           <whatnow-content-item
             v-for="content in uncreatedTranslations"
@@ -54,7 +55,8 @@
             :isPromo="isPromo"
             v-on:languageChange="languageChange"
             :regionSlug="selectedRegion?.title"
-            :forceCreate="true">
+            :forceCreate="true"
+            :selectedSoc="selectedSoc">
           </whatnow-content-item>
         </transition-group>
 

resources/assets/js/pages/content/whatnowMessageCard.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <b-card class="h-100 key-message-card" >
+      <div class="mb-2">
+        <h4 class="card-title mb-3">
+          {{ $t('content.edit_whatnow.'+stageName) }}
+        </h4>
+        <div class="key-message-item" v-for="(keyMessage, index) in stage" :key="'stage'+index">
+          <h5 class="card-text key-message-item-title">
+            {{ keyMessage.title  }}
+          </h5>
+          <ul class="key-message-item-list">
+            <li class="text-card" v-for="(supportingMessage, index) in keyMessage.content" :key="'supportingMessage'+index">
+              {{ supportingMessage }}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="button-container mt-4 mb-4 key-message-item-btn">
+        <b-button variant="danger" class="button-go" @click="openKeyMessageVisualizer()">
+          {{ $t('content.whatnow.show_more') }}
+        </b-button>
+      </div>
+    </b-card>
+    <b-modal size="xl"  ref="keyMessageVisualizer" :hide-footer="true" id="pre-image" centered :hide-header="true">
+      <whatnowPrevisualizer
+        :keyMessage="stage"
+        :eventType="eventType"
+        :stageName="stageName"
+        :title="title"
+        :description="description"
+        :selectedSoc="selectedSoc"
+        :selectedLanguage="selectedLanguage"
+      />
+    </b-modal>
+  </div>
+</template>
+<script>
+import whatnowPrevisualizer from './whatnowPrevisualizer.vue'
+
+export default {
+  props: ['stage', 'stageName', 'eventType', 'stageName', 'title', 'description', 'selectedSoc', 'selectedLanguage'],
+  components: {
+    whatnowPrevisualizer
+  },
+  methods: {
+    openKeyMessageVisualizer() {
+      this.$refs.keyMessageVisualizer.show()
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+.key-message-card {
+  background: #E9E9E9;
+  padding-bottom: 40px;
+}
+.key-message-item {
+  margin-bottom: 11px;
+  &::after {
+    content: '';
+    display: block;
+    width: 90%;
+    height: 0.7px;
+    background-color: $cad-solid-bg-3;
+    margin: 24px auto;
+  }
+
+  .key-message-item-title {
+    font-size: 16.8px;
+    font-weight: 500;
+    color: #000;
+  }
+
+  ul.key-message-item-list {
+    li {
+      font-size: 14px;
+      color: #1e1e1e;
+    }
+  }
+}
+</style>