From 8df3fa64c4cd2cd07d46dd6cfda149a21a12f6a5 Mon Sep 17 00:00:00 2001
From: "LDFOUR\\luisd" <luisd@jazusoft.com>
Date: Thu, 20 Feb 2025 15:49:54 -0300
Subject: [PATCH 01/10] WN-146, Partial commit. Implemented design for Message
 Editor. Added the setCurrentLanguages action to the content store (Vuex).

---
 .../Entities/OrganisationTranslation.php      |  14 +-
 package-lock.json                             |  42 +-
 package.json                                  |   2 +
 resources/assets/js/app.js                    |   7 +
 resources/assets/js/pages/content/whatnow.vue | 595 +++++++++---------
 .../js/pages/content/whatnowContentItem.vue   | 339 +++++-----
 .../assets/js/pages/content/whatnowList.vue   |  46 +-
 resources/assets/js/store/modules/content.js  |   6 +
 resources/assets/js/store/mutation-types.js   |   1 +
 resources/lang/en.json                        |   8 +
 10 files changed, 586 insertions(+), 474 deletions(-)

diff --git a/app/Classes/RcnApi/Entities/OrganisationTranslation.php b/app/Classes/RcnApi/Entities/OrganisationTranslation.php
index adb07e6..c7be455 100644
--- a/app/Classes/RcnApi/Entities/OrganisationTranslation.php
+++ b/app/Classes/RcnApi/Entities/OrganisationTranslation.php
@@ -18,6 +18,8 @@ class OrganisationTranslation implements \JsonSerializable, Arrayable
     
     protected $isPublished;
 
+    protected $contributors = [];
+
     
     public static function createFromResponse(array $array)
     {
@@ -26,6 +28,7 @@ public static function createFromResponse(array $array)
         $translation->attributionMessage = $array['attributionMessage'];
         $translation->languageCode = $array['languageCode'];
         $translation->isPublished = $array['published'];
+        $translation->contributors = $array['contributors'];
         return $translation;
     }
 
@@ -53,6 +56,11 @@ public function isPublished(): bool
         return $this->isPublished;
     }
 
+    public function getContributors(): array
+    {
+        return $this->contributors;
+    }
+
     
     public function toArray()
     {
@@ -60,7 +68,8 @@ public function toArray()
             'languageCode' => $this->languageCode,
             'name' => $this->name,
             'attributionMessage' => $this->attributionMessage,
-            'published' => $this->isPublished
+            'published' => $this->isPublished,
+            'contributors' => $this->contributors
         ];
     }
 
@@ -71,7 +80,8 @@ public function jsonSerialize(): array
             'languageCode' => $this->languageCode,
             'name' => $this->name,
             'attributionMessage' => $this->attributionMessage,
-            'published' => $this->isPublished
+            'published' => $this->isPublished,
+            'contributors' => $this->contributors
         ];
     }
 }
diff --git a/package-lock.json b/package-lock.json
index abda9a6..f818000 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "WhatNow Codebase",
+  "name": "whatnow",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -9,6 +9,8 @@
         "@fortawesome/fontawesome-free-brands": "^5.0.0",
         "@fortawesome/fontawesome-free-regular": "^5.0.0",
         "@fortawesome/fontawesome-free-solid": "^5.0.0",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/vue-fontawesome": "^0.0.21",
         "@sentry/browser": "^5.4.0",
         "@sentry/integrations": "^5.4.1",
@@ -1962,6 +1964,44 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/vue-fontawesome": {
       "version": "0.0.21",
       "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.0.21.tgz",
diff --git a/package.json b/package.json
index f6c459a..4ce1f77 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "@fortawesome/fontawesome-free-brands": "^5.0.0",
     "@fortawesome/fontawesome-free-regular": "^5.0.0",
     "@fortawesome/fontawesome-free-solid": "^5.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^0.0.21",
     "@sentry/browser": "^5.4.0",
     "@sentry/integrations": "^5.4.1",
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index a094891..84a0c21 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -20,6 +20,12 @@ import * as Integrations from '@sentry/integrations'
 import '~/plugins'
 import '~/components'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faPencil, faPen, faSpinner, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faPencil, faSpinner, faPen, faTrash, faXmark)
+
 Sentry.init({
   dsn: window.config.sentry_dsn,
   integrations: [new Integrations.Vue({ Vue, attachProps: true })]
@@ -28,6 +34,7 @@ Sentry.init({
 Vue.use(BootstrapVue)
 Vue.component('v-select', vSelect)
 Vue.component('v-gravatar', Gravatar)
+Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.use(VueNoty, {
   theme: 'sunset'
 })
diff --git a/resources/assets/js/pages/content/whatnow.vue b/resources/assets/js/pages/content/whatnow.vue
index 734d039..4bf5506 100644
--- a/resources/assets/js/pages/content/whatnow.vue
+++ b/resources/assets/js/pages/content/whatnow.vue
@@ -1,274 +1,135 @@
-  <template>
-    <b-container fluid>
-      <page-banner>
-        <b-col sm="auto" md="4">
-          <h1>{{ $t('content.whatnow.whatnow') }} {{ currentRegionName && `- ${currentRegionName}` }}</h1>
-        </b-col>
-        <b-col sm="auto" md="8">
-          <div class="d-flex justify-content-end u-gap-24 flex-wrap">
-            <selectSociety v-model="selectedSoc" :societyList="filteredSocieties" :countryCode="countryCode"></selectSociety>
-            <selectRegion v-model="selectedRegion" :socCode="selectedSoc.countryCode" :translationCode="selectedLanguage"></selectRegion>
-          </div>
-        </b-col>
-</page-banner>
-
-<b-row :class="`pb-0 pl-4 pr-4 whatnow-language-picker text-light ${selectingLanguage ? 'pt-2 pb-2':'pb-0'}`" v-if="selectedSoc">
-  <b-col>
-  <b-input-group v-if="selectingLanguage">
-  <b-form-select v-model="languageToAdd" :options="filteredLanguages" />
-  <div class="input-group-append">
-  <b-button class="h-100 btn-small-radius" variant="dark" @click="addNewLanguage"><fa :icon="['fas', 'plus']" /></b-button>
-<b-button class="h-100 btn-small-radius" variant="outline-danger" @click="selectingLanguage = false"><fa :icon="['fas', 'times']" /></b-button>
-</div>
-</b-input-group>
-<b-nav tabs v-else>
-  <b-nav-item
-    v-for="lang in currentLanguages"
-  :key="lang"
-  @click="selectedLanguage = lang"
-  :active="selectedLanguage === lang">
-  <div class="nav-link-wrapper text-center h-100">
-    {{ lang | uppercase }} <br />
-    <small v-if="languages[lang]">{{ truncate(languages[lang].name, 8) }}</small>
-  </div>
-</b-nav-item>
-<b-nav-item v-b-tooltip.hover :title="selectingLanguage ? null : $t('content.whatnow.add_language')" @click="selectingLanguage = true" v-if="can(user, permissions.CONTENT_CREATE)">
-  <fa class="mt-2" :icon="['fas', 'plus']"/>
-  </b-nav-item>
-</b-nav>
-</b-col>
-</b-row>
-
-<b-row class="pl-4 pr-4 pb-3 pt-3 whatnow-publish-banner text-light" v-if="selectedSoc">
-  <b-col>
-    <p>{{ selectedSoc.label }}</p>
-  </b-col>
-  <b-col cols="auto">
-    <b-button size="lg" variant="primary" class="float-right pl-5 pr-5" v-if="can(user, permissions.CONTENT_PUBLISH)"
-              v-b-modal.publish-modal
-    :disabled="toPublish.length === 0 || !attributionSet">
-    <span v-if="toPublish.length === 0">{{ $t('content.whatnow.no_publish') }}</span>
-    <span v-else-if="!attributionSet">{{ $t('content.whatnow.set_attribution') }}</span>
-    <span v-else-if="toPublish.length > 0 && !publishing">{{ $t('content.whatnow.publish') }}</span>
-    <span v-else-if="publishing">{{ $t('content.whatnow.publishing') }} <fa class="ml-2" spin :icon="['fas', 'spinner']"/></span>
-  </b-button>
-</b-col>
-</b-row>
-<b-row class="pl-4 pr-4 pb-4 pt-3 bg-white" v-if="selectedLanguage && selectedSoc">
-  <b-col>
-    {{ $t('content.whatnow.attribution') }}
-    <b-button size="sm" variant="primary" class="float-right rtl-float-left" @click="showEditAttributionModal" v-if="canEditAttribution">{{ $t('common.edit') }}</b-button>
-  <b-modal
-    v-model="showEditAttribution" centered
-  :title="addingNewLanguage ? $t('content.whatnow.add_language') : $t('content.whatnow.edit_attribtion')"
-  v-if="attributionTranslation !== null && canEditAttribution"
-  no-close-on-backdrop
-  no-close-on-esc
-  hide-header-close
-  @cancel="cancelEditAttribution()">
-  <p v-if="addingNewLanguage">
-    {{ $t('content.whatnow.add_language_attribution') }}
-  </p>
-  <b-form-group :label="$t('content.whatnow.attribution_url')" label-for="url">
-  <b-form-input
-    type="url" id="url"
-    name="url" maxlength="255"
-    v-model="attributionToEdit.url"
-  :state="updateErrors.errors.url ? false : null"
-  placeholder="https://" />
-  <b-form-invalid-feedback id="urlFeedback">
-    <!-- This will only be shown if the preceeding input has an invalid state -->
-    <p v-for="error in updateErrors.errors.url">
-      {{ error }}
-    </p>
-  </b-form-invalid-feedback>
-</b-form-group>
-<b-form-group :label="$t('content.whatnow.society_name')" label-for="socName">
-  <b-form-input
-  type="text"
-id="socName"
-name="socName"
-maxlength="255"
-v-model="attributionEditTranslation.name"
-:state="updateErrors.errors[`translations.${updateErrors.indexError}.name`] ? false : null"
-v-if="attributionEditTranslation"
-  />
-  <b-form-invalid-feedback id="socNameFeedback">
-  <p>
-  {{ $t('common.not_empty')}}
-</p>
-</b-form-invalid-feedback>
-</b-form-group>
-<b-form-group :label="$t('content.whatnow.attribution_message')" label-for="message">
-  <textarea
-  :class="`form-control ${updateErrors.errors[`translations.${updateErrors.indexError}.attributionMessage`] ? 'is-invalid': ''}`"
-id="message"
-name="message"
-maxlength="2048"
-rows="5"
-v-model="attributionEditTranslation.attributionMessage"
-v-if="attributionEditTranslation"></textarea>
-  </b-form-group>
-<div slot="modal-footer" class="w-100">
-              <span v-if="attributionEditTranslation && attributionEditTranslation.published">
-                {{ $t('content.whatnow.attribution_publish') }}
-              </span>
-  <b-btn size="sm" class="float-right ml-1" variant="secondary" @click="cancelEditAttribution">
-  {{ $t('cancel') }}
-</b-btn>
-<b-btn size="sm" class="float-right" variant="primary" @click="publishAttribution(true)">
-  <span v-if="attributionPublishing">
-  <fa spin :icon="['fas', 'spinner']"/>
-  </span>
-<span v-if="attributionEditTranslation && attributionEditTranslation.published">{{ $t('content.whatnow.publish') }}</span>
-<span v-else>{{ $t('common.save_changes') }}</span>
-
-</b-btn>
-</div>
-</b-modal>
-<hr />
-<b-row>
-  <b-col>
-    <b>{{ $t('content.whatnow.attribution_url') }}</b>
-  </b-col>
-  <b-col>
-    <b>{{ $t('content.whatnow.society_name') }}</b>
-  </b-col>
-  <b-col>
-    <b>{{ $t('content.whatnow.attribution_message') }}</b>
-  </b-col>
-</b-row>
-<transition name="fade">
-  <b-row class="whatnow-row mt-2 border border-secondary" v-if="attribution !== null && !loadingContent">
-    <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
-                <span v-if="attribution.url">
-                  <a :href="attribution.url" rel="noreferrer" target="_blank">{{ truncate(attribution.url, 20) }}</a>
-    </span>
-    <span class="border border-warning p-1 rounded bg-warning" v-else>{{ $t('content.whatnow.no_translation')}}</span>
-  </b-col>
-  <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
-                <span v-if="attributionTranslation && attributionTranslation.name">
-                  {{ attribution.name }} <br />
-                  <small><i>{{ truncate(attributionTranslation.name, 90) }}</i></small>
-                </span>
-    <span class="border border-warning p-1 rounded bg-warning" v-else>{{ $t('content.whatnow.no_translation')}}</span>
-  </b-col>
-  <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
-                <span v-if="attributionTranslation && attributionTranslation.attributionMessage">
-                  {{ truncate(attributionTranslation.attributionMessage, 90) }}
-                </span>
-    <span class="border border-warning p-1 rounded bg-warning" v-else>{{ $t('content.whatnow.no_translation')}}</span>
-  </b-col>
-</b-row>
-</transition>
-<transition name="fade">
-  <b-row class="whatnow-row mt-2 border border-secondary" v-if="loadingContent">
-    <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
-      <spooky width="75%" height="20px"></spooky>
-    </b-col>
-    <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
-      <spooky width="75%" height="20px"></spooky>
-    </b-col>
-    <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
-      <spooky width="75%" height="20px"></spooky>
-      <spooky width="100%" height="10px" class="mt-2"></spooky>
-      <spooky width="100%" height="10px" class="mt-1"></spooky>
-    </b-col>
-  </b-row>
-</transition>
-</b-col>
-</b-row>
-<b-row class="pl-4 pr-4 pb-4 pt-3 bg-white" v-else-if="!selectedLanguage && selectedSoc">
-  <h3>{{ $t('content.whatnow.no_languages') }}</h3>
-</b-row>
-<b-row class="pl-4 pr-4 pb-4 pt-3 bg-white" v-else-if="!selectedSoc">
-  <h3>{{ $t('content.whatnow.no_soc') }}</h3>
-</b-row>
-<whatnow-list :selectedSoc="selectedSoc" :selectedRegion="selectedRegion" :selectedLanguage="selectedLanguage" v-if="selectedLanguage && selectedSoc"></whatnow-list>
-  <!-- Publish Modal -->
-  <b-modal
-    id="publish-modal" size="lg"
-    centered
-        :ok-title="$t('content.whatnow.publish')"
-ok-variant="dark"
-cancel-variant="outline-danger"
-hide-header
-@ok="publish"
-v-if="attribution !== null && selectedLanguage && selectedSoc">
-  <div class="px-3">
-  <h3>{{ $t('content.whatnow.content_to_publish')}}</h3>
-<p v-if="attributionTranslation">
-  {{ attributionTranslation.name }} - {{ selectedLanguage | uppercase }}
-</p>
-<b-card class="border whatnow-publish-modal">
-  <div v-if="attributionTranslation && !attributionTranslation.published">
+<template>
+  <b-container fluid class="h-100">
     <b-row>
       <b-col>
-        <h4>Attribution</h4>
-        <hr />
+        <div class="whatnow-message-editor-header">
+          <h1>{{ $t('content.message_editor.title') }} {{ currentRegionName && `- ${currentRegionName}` }}</h1>
+        </div>
       </b-col>
     </b-row>
-    <b-row>
-      <b-col md="3">
-        <b>{{ $t('content.whatnow.attribution_url') }}</b>
-      </b-col>
-      <b-col md="9">
-        {{ attribution.url }}
+    <b-row class="pl-4 pr-4 pb-3 pt-3 selects-container d-flex align-items-center justify-content-start m-auto"
+      v-show="selectedSoc">
+      <b-col class="d-flex align-items-center">
+        <selectSociety v-model="selectedSoc" :societyList="filteredSocieties" :countryCode="countryCode">
+        </selectSociety>
+        <selectRegion v-model="selectedRegion" :socCode="selectedSoc.countryCode" :translationCode="selectedLanguage">
+        </selectRegion>
       </b-col>
     </b-row>
-    <b-row>
-      <b-col md="3">
-        <b>{{ $t('content.whatnow.society_name') }}</b>
+    <b-row class="m-3">
+      <b-col>
+        <b-nav tabs class="whatnow-message-editor-tabs">
+          <b-nav-item v-for="lang in currentLanguages" :key="lang" class="wn-item" @click="selectedLanguage = lang"
+            :active="selectedLanguage === lang">
+            <div class="nav-link-wrapper text-center h-100" v-if="lang">
+              {{ lang | uppercase }} -
+              <small v-if="languages[lang]">{{ truncate(languages[lang].name, 8) }}</small>
+            </div>
+          </b-nav-item>
+          <b-nav-item class="add-lang-btn ml-2" v-b-tooltip.hover
+            :title="selectingLanguage ? null : $t('content.whatnow.add_language')" @click="selectingLanguage = true"
+            v-if="can(user, permissions.CONTENT_CREATE)">
+            <fa :icon="['fas', 'plus']" />
+          </b-nav-item>
+        </b-nav>
       </b-col>
-      <b-col md="9" v-if="attributionTranslation">
-        {{ attributionTranslation.name }}
+    </b-row>
+    <b-row class="whatnow-message-editor-ns-title" v-if="selectedSoc">
+      <b-col>
+        <div class="d-flex justify-content-between align-items-center">
+          <h4>
+            {{ selectedSoc.name }}
+          </h4>
+
+          <div class="d-flex align-items-center">
+            <b-button variant="outline-primary" size="sm" class="mr-2" v-if="canEditAttribution && !languageToAdd && !editing" @click="editing = true"
+              :disabled="!canEditAttribution" :key="'edit'">
+              <font-awesome-icon :icon="['fas', 'pen']" />
+              {{ $t('common.edit') }}
+            </b-button>
+            <b-button variant="primary" size="sm" class="mr-2" v-if="canEditAttribution && (languageToAdd || editing)"
+              :disabled="!canEditAttribution" @click="publishAttribution(true)" :key="'save'">
+              <font-awesome-icon :icon="['fas', 'check']" />
+              {{ $t('common.save') }}
+            </b-button>
+            <b-button variant="outline-primary" size="sm" class="mr-2" v-if="canEditAttribution && editing" :disabled="!canEditAttribution" :key="'add'">
+              Add contributor
+            </b-button>
+            <b-button variant="outline-primary" size="sm" 
+              v-if="canEditAttribution && (languageToAdd || editing)" @click="discard" :disabled="!canEditAttribution"
+              :key="'cancel'">
+              <font-awesome-icon :icon="['fas', 'xmark']" />
+              {{ $t('common.cancel') }}
+            </b-button>
+          </div>
+        </div>
       </b-col>
     </b-row>
-    <b-row>
-      <b-col md="3">
-        <b>{{ $t('content.whatnow.attribution_message') }}</b>
+    <!-- FORM ORG -->
+    <b-row align-v="stretch"
+      class="pl-4 pr-4 pb-3 pt-3 whatnow-message-editor-form-card d-flex align-items-center justify-content-start m-auto">
+      <b-col lg="1">
+        <div slot="button-content" class="text-dark py-0">
+          <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
+          <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
+        </div>
+      </b-col>
+      <b-col lg="5">
+        <b-row>
+          <b-col lg="12">
+            <b-form-group :label="$t('content.message_editor.society_name_label')" label-for="socName">
+              <b-form-input type="text" id="socName" name="socName" maxlength="255"
+                v-model="attributionEditTranslation.name"
+                :state="updateErrors.errors[`translations.${updateErrors.indexError}.name`] ? false : null"
+                v-if="attributionEditTranslation" :disabled="isFormDisabled" />
+              <b-form-invalid-feedback id="socNameFeedback">
+                <p>
+                  {{ $t('common.not_empty') }}
+                </p>
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </b-col>
+          <b-col lg="12">
+            <b-form-group :label="$t('content.message_editor.attribution_url_label')" label-for="url">
+              <b-form-input type="url" id="url" name="url" maxlength="255" v-model="attributionToEdit.url"
+                :state="updateErrors.errors.url ? false : null" placeholder="https://" :disabled="isFormDisabled" />
+              <b-form-invalid-feedback id="urlFeedback">
+                <!-- This will only be shown if the preceeding input has an invalid state -->
+                <p v-for="error in updateErrors.errors.url">
+                  {{ error }}
+                </p>
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </b-col>
+        </b-row>
       </b-col>
-      <b-col md="9" v-if="attributionTranslation">
-        {{ attributionTranslation.attributionMessage }}
+
+      <b-col lg="6">
+        <b-form-group :label="$t('content.message_editor.attribution_message_label')" label-for="message">
+          <textarea
+            :class="`form-control ${updateErrors.errors[`translations.${updateErrors.indexError}.attributionMessage`] ? 'is-invalid' : ''}`"
+            id="message" name="message" maxlength="2048" rows="5"
+            v-model="attributionEditTranslation.attributionMessage" v-if="attributionEditTranslation"
+            :disabled="isFormDisabled"></textarea>
+        </b-form-group>
       </b-col>
     </b-row>
-    <hr />
-  </div>
-  <h4>{{ $t('content.whatnow.whatnow_content') }}</h4>
-  <hr />
-  <div class="whatnow-publish-content-wrapper">
-    <div v-for="content in toPublish" :key="content.eventType" class="mb-3" v-if="content.translations[selectedLanguage]">
-    <h5>{{ content.eventType }} {{ content.regionName ? `- ${content.regionName}` : "" }}</h5>
-
-    <b-card class="bg-grey mb-1 hazard-instruction-card" v-for="key in ['title', 'description', 'webUrl']" :key="key" v-if="attributionExists(key)">
+    <!-- END FORM ORG -->
     <b-row>
-      <b-col md="3">
-        {{ $t(`common.${key}`) }}
-      </b-col>
-      <b-col md="9">
-        {{ truncate(content.translations[selectedLanguage][key], 60) }}
+      <b-col>
+        <whatnow-list :selectedSoc="selectedSoc" :selectedRegion="selectedRegion" :selectedLanguage="selectedLanguage"
+          v-if="selectedLanguage && selectedSoc"></whatnow-list>
       </b-col>
     </b-row>
-</b-card>
-
-<b-card :class="`bg-grey mb-1 hazard-instruction-card hazard-instruction-card-${stageName}`"
-v-for="(instruction, stageName) in content.translations[selectedLanguage].stages"
-v-if="instruction" :key="stageName">
-<b-row>
-  <b-col md="3">
-    {{ $t(`content.edit_whatnow.${stageName}`) }}
-  </b-col>
-  <b-col md="9">
-    {{ instruction.length }} {{ $t('content.whatnow.steps') }}
-  </b-col>
-</b-row>
-</b-card>
-</div>
-</div>
-</b-card>
-</div>
-</b-modal>
-</b-container>
+
+
+    <b-modal v-model="selectingLanguage" id="role-changed" centered :title="'Add new language'" ref="selectLangModal"
+      ok-variant="primary" cancel-variant="outline-primary" @ok="addNewLanguage" @cancel="languageToAdd = null"
+      :ok-title="$t('common.add')" :cancel-title="$t('common.cancel')">
+      <b-form-select v-model="languageToAdd" :options="filteredLanguages" />
+    </b-modal>
+  </b-container>
+
 </template>
 
 <script>
@@ -277,22 +138,23 @@ import SelectSociety from '~/pages/content/simpleSocietyPicker'
 import SelectRegion from '~/pages/content/regionPicker'
 import WhatnowList from '~/pages/content/whatnowList'
 import PageBanner from '~/components/PageBanner'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import * as permissionsList from '../../store/permissions'
 import Spooky from '~/components/global/Spooky'
 import axios from 'axios'
 import { languages } from 'countries-list'
-
+import Avatar from 'vue-avatar'
 export default {
   components: {
     SelectSociety,
     SelectRegion,
     Spooky,
     WhatnowList,
-    PageBanner
+    PageBanner,
+    Avatar
   },
   props: ['countryCode', 'regionSlug'],
-  data () {
+  data() {
     return {
       selectedSoc: null,
       selectedRegion: null,
@@ -317,27 +179,28 @@ export default {
       attributionEditTranslation: null,
       updateErrors: {
         errors: {}
-      }
+      },
+      editing: false
     }
   },
   watch: {
-    regions () {
+    regions() {
       if (this.regions.length && this.regionSlug) {
         this.selectedRegion = this.regions.find(region => region.title === this.regionSlug) || null
       }
     },
-    selectedSoc () {
+    selectedSoc() {
       if (this.countryCode !== this.selectedSoc.countryCode) {
-        this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title }})
+        this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title } })
       }
     },
-    selectedRegion () {
+    selectedRegion() {
       if (this.regionSlug !== this.selectedRegion?.title) {
-        this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title }})
+        this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title } })
       }
     },
     selectedLanguage: {
-      handler (val, oldVal) {
+      handler(val, oldVal) {
         if (val !== oldVal) {
           this.contentChange()
           this.setLocalStorage()
@@ -347,37 +210,43 @@ export default {
       deep: true
     },
     currentContent: {
-      async handler (val, oldVal) {
+      async handler(val, oldVal) {
         if (this.selectedSoc) {
           await this.$store.dispatch('content/fetchOrganisationSingle', this.selectedSoc.countryCode)
         }
         this.contentChange()
       }
     },
-    currentLanguages () {
+    currentLanguages() {
       if (this.currentLanguages && this.currentLanguages.find && !this.currentLanguages.find(lang => this.selectedLanguage === lang)) {
         if (this.currentLanguages.length > 0) {
           this.selectedLanguage = this.currentLanguages[0]
         }
       }
     },
-    lastError () {
+    lastError() {
       if (this.lastError.response) {
         this.updateErrors = this.lastError.response.data
       }
     },
-    attribution () {
+    attribution() {
       this.setAttributionToEdit()
     }
   },
-  mounted () {
+  mounted() {
     this.getLocalStorage()
-    this.$store.dispatch('content/fetchOrganisations').then(() => {
-      this.selectedSoc = this.filteredSocieties.find((soc) => soc.countryCode === this.countryCode)
-    })
+    this.getData()
   },
   methods: {
-    async publish () {
+    ...mapActions({
+      setCurrentLanguages: 'content/setCurrentLanguages'
+    }),
+    async getData() {
+      this.$store.dispatch('content/fetchOrganisations').then(() => {
+      this.selectedSoc = this.filteredSocieties.find((soc) => soc.countryCode === this.countryCode)
+    })
+    },
+    async publish() {
       if (this.toPublish.length > 0) {
         this.loadingContent = true
         this.publishing = true
@@ -406,14 +275,14 @@ export default {
         this.loadingContent = false
       }
     },
-    setLocalStorage () {
+    setLocalStorage() {
       localStorage.setItem('lang', this.selectedLanguage)
     },
-    attributionExists (key) {
+    attributionExists(key) {
       const attributionTranslation = this.attribution.translations.find(translation => translation.languageCode === this.selectedLanguage)
       return attributionTranslation && attributionTranslation[key]
     },
-    getLocalStorage () {
+    getLocalStorage() {
       let lang = localStorage.getItem('lang')
 
       if (!lang) {
@@ -422,7 +291,7 @@ export default {
 
       this.selectedLanguage = lang
     },
-    contentChange () {
+    contentChange() {
       if (this.selectedSoc) {
         this.currentTranslations = this.currentContent.map((content) => {
           const flattened = JSON.parse(JSON.stringify(content))
@@ -433,7 +302,7 @@ export default {
         })
       }
     },
-    getPublishPayload () {
+    getPublishPayload() {
       if (this.currentTranslations) {
         return this.currentTranslations.reduce((filtered, translation) => {
           if (translation.currentTranslation && translation.currentTranslation.published === false) {
@@ -448,7 +317,7 @@ export default {
       }
       return []
     },
-    addNewLanguage () {
+    addNewLanguage() {
       // Does it exist already?
       let found = false
       for (const key in this.currentLanguages) {
@@ -471,14 +340,17 @@ export default {
         this.showEditAttribution = true
         this.selectingLanguage = false
       }
+
+      this.currentLanguages.push(this.languageToAdd)
+      this.selectingLanguage = false 
     },
-    async publishAttribution (fireEvent = false) {
+    async publishAttribution(fireEvent = false) {
       if (fireEvent) {
         this.$fireGTEvent(this.$gtagEvents.EditAttribution)
       }
 
       this.attributionPublishing = true
-      this.updateErrors = { errors: {}}
+      this.updateErrors = { errors: {} }
       try {
         await this.$store.dispatch('content/updateAttribution', { countryCode: this.selectedSoc.countryCode, data: this.attributionToEdit })
         await this.$store.dispatch('content/fetchOrganisationSingle', this.selectedSoc.countryCode)
@@ -491,7 +363,7 @@ export default {
         this.attributionPublishing = false
       }
     },
-    setAttributionToEdit () {
+    setAttributionToEdit() {
       if (this.attribution) {
         this.attributionToEdit = JSON.parse(JSON.stringify(this.attribution))
         const attributionTranslation = this.attributionToEdit.translations.find(translation => translation.languageCode === this.selectedLanguage)
@@ -509,23 +381,37 @@ export default {
         }
       }
     },
-    showEditAttributionModal () {
+    showEditAttributionModal() {
       this.showEditAttribution = true
       this.addingNewLanguage = false
     },
-    cancelEditAttribution () {
+    cancelEditAttribution() {
       if (this.addingNewLanguage) {
         this.selectedLanguage = this.previousLanguage
         this.addingNewLanguage = false
       }
       this.showEditAttribution = false
+    },
+    openSelectLangModal() {
+      this.$refs.selectLangModal.show()
+    },
+    discard() {
+      const filteredLangs = this.currentLanguages.filter(lang => lang !== this.languageToAdd)
+      this.setCurrentLanguages(filteredLangs)
+      this.languageToAdd = null
+      this.addingNewLanguage = false
+      this.editing = false
+      this.getData()
     }
   },
-  metaInfo () {
+  metaInfo() {
     return { title: this.$t('content.whatnow.whatnow') }
   },
   computed: {
-    filteredLanguages () {
+    isFormDisabled() {
+      return !this.editing && !this.addingNewLanguage
+    },
+    filteredLanguages() {
       const languages = [{ value: null, text: this.$t('content.whatnow.select_language') }]
       for (const key in this.languages) {
         if (this.languages.hasOwnProperty(key)) {
@@ -537,7 +423,7 @@ export default {
       }
       return languages
     },
-    toPublish () {
+    toPublish() {
       if (this.currentTranslations) {
         const toPublish = this.currentTranslations.filter(translation => translation.currentTranslation && translation.currentTranslation.published === false)
         if (toPublish.length) {
@@ -546,7 +432,7 @@ export default {
       }
       return []
     },
-    filteredSocieties () {
+    filteredSocieties() {
       if (this.user) {
         if (this.can(this.user, permissionsList.ALL_ORGANISATIONS)) {
           return this.societies
@@ -555,28 +441,28 @@ export default {
       }
       return this.societies
     },
-    attribution () {
+    attribution() {
       if (this.selectedSoc) {
         return this.societies.find(soc => soc.countryCode === this.selectedSoc.countryCode)
       }
       return null
     },
-    attributionTranslation () {
+    attributionTranslation() {
       if (this.attribution) {
         return this.attribution.translations.find(translation => translation.languageCode === this.selectedLanguage)
       }
       return null
     },
-    canEditAttribution () {
+    canEditAttribution() {
       if ((this.attributionTranslation && !this.attributionTranslation.published) || !this.attributionTranslation) {
         return this.can(this.user, permissionsList.CONTENT_CREATE) && !this.selectedRegion
       }
       return this.can(this.user, permissionsList.CONTENT_PUBLISH) && !this.selectedRegion
     },
-    attributionSet () {
+    attributionSet() {
       return this.attributionTranslation && this.attributionTranslation.name && this.attributionTranslation.attributionMessage
     },
-    currentRegionName () {
+    currentRegionName() {
       if (!this.selectedRegion) {
         return ""
       }
@@ -594,7 +480,122 @@ export default {
       societies: 'content/organisations',
       lastError: 'generic/lastError',
       regions: 'content/regionsArray'
-    })
+    }),
   }
 }
 </script>
+
+<style scoped lang="scss">
+@import '../../../sass/variables.scss';
+
+.whatnow-message-editor-tabs.nav-tabs {
+  border-bottom: none;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #dee2e6;
+    z-index: -1;
+  }
+
+  .nav-item {
+
+    .nav-link,
+    .nav-link-wrapper,
+    .nav-link.active {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+      margin-right: 2px;
+    }
+  }
+
+  .nav-item.add-lang-btn {
+    margin-top: 4px;
+
+    .nav-link,
+    .nav-link-wrapper,
+    .nav-link.active {
+      border: none;
+    }
+
+    background-color: #f3f3f3;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    outline: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    svg {
+      color: $red;
+      font-size: 11px;
+    }
+  }
+}
+
+.whatnow-message-editor-ns-title {
+  margin: 18px 0;
+
+  .btn-outline-primary {
+    padding: 0px 12px
+  }
+
+  .btn-primary {
+    padding: 2px 12px
+  }
+
+
+
+  h4 {
+    font-size: 24px;
+    font-weight: 500;
+    color: #1e1e1e;
+  }
+}
+
+.whatnow-message-editor-header {
+  h1 {
+    font-size: 38px;
+    font-weight: 600;
+    color: #1e1e1e;
+  }
+}
+
+.whatnow-message-editor-form-card {
+  background: #F7F7F7;
+  border-radius: 10px;
+
+  label {
+    font-size: 16px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    color: $text-dark;
+  }
+
+  input,
+  textarea {
+    border-radius: 6px;
+    background-color: $bg-input-light;
+    height: 36px;
+    font-size: 11px;
+    border: none;
+    outline: none;
+  }
+
+  textarea {
+    min-height: 115px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/pages/content/whatnowContentItem.vue b/resources/assets/js/pages/content/whatnowContentItem.vue
index a1bc68e..1b9edbb 100644
--- a/resources/assets/js/pages/content/whatnowContentItem.vue
+++ b/resources/assets/js/pages/content/whatnowContentItem.vue
@@ -1,43 +1,41 @@
 <template>
-  <b-row class="whatnow-row mt-2 border border-secondary" v-if="!isPromo">
-    <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
+  <!-- WN MESSAGE EDITOR -->
+  <b-row class="whatnow-row whatnow-row--message_editor mt-2" v-if="!isPromo">
+    <b-col lg="2" class="whatnow-col-item--message_editor">
       {{ content.eventType }}
     </b-col>
-    <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
+    <b-col lg="3" class="whatnow-col-item--message_editor">
       <span v-if="contentExists('title', content)">{{ truncate(content.currentTranslation.title, 90) }}</span>
-      <span class="border border-warning p-1 rounded bg-warning" v-else>{{ $t('content.whatnow.no_translation')}}</span>
+      <span class="border border-warning p-1 rounded bg-warning" v-else>{{ $t('content.whatnow.no_translation') }}</span>
     </b-col>
-    <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
-      <span v-if="contentExists('description', content)">{{ truncate(content.currentTranslation.description, 90) }}</span>
-      <span class="border border-warning p-1 rounded bg-warning" v-else>{{ $t('content.whatnow.no_translation')}}</span>
+    <b-col lg="3" class="whatnow-col-item--message_editor">
+      <span v-if="contentExists('description', content)">{{ truncate(content.currentTranslation.description, 90)
+        }}</span>
+      <span class="border border-warning p-1 rounded bg-warning" v-else>{{ $t('content.whatnow.no_translation') }}</span>
     </b-col>
-    <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
-      <span v-if="contentExists('published', content)">{{ content.currentTranslation.published ? $t('no') : $t('yes') }}</span>
+    <b-col lg="2" class="whatnow-col-item--message_editor">
+      <span v-if="contentExists('published', content)">{{ content.currentTranslation.published ? $t('no') : $t('yes')
+        }}</span>
       <span v-else>-</span>
     </b-col>
-    <b-col class="pt-5 pb-5">
-      <b-button
-        variant="primary"
-        size="sm"
-        class="mb-1"
-        :to="editLink"
+    <b-col lg="2" class="whatnow-col-item--message_editor">
+      <b-button variant="outline-primary" size="sm" class="mb-1 mr-1" :to="editLink"
         v-if="(can(user, permissions.CONTENT_EDIT) || can(user, permissions.CONTENT_VIEW))"
         :disabled="deletingContentTranslation === content.id">
-          {{ can(user, permissions.CONTENT_EDIT) ?  $t('common.edit') : $t('common.view_content') }}
+        <font-awesome-icon :icon="['fas', 'pen']" />
+        {{ can(user, permissions.CONTENT_EDIT) ? $t('common.edit') : $t('common.view_content') }}
       </b-button>
-      <b-button
-        variant="danger"
-        size="sm"
-        class="mb-1"
-        v-if="can(user, permissions.CONTENT_DELETE) && !forceCreate"
-        :disabled="deletingContentTranslation === content.id"
-        @click="deleteContentTranslation(content.id)">
-          <fa :icon="['fas', 'spinner']" spin v-show="deletingContentTranslation === content.id"/>
-          {{ $t('common.delete') }}
+      <b-button variant="outline-primary" size="sm" class="mb-1" v-if="can(user, permissions.CONTENT_DELETE) && !forceCreate"
+        :disabled="deletingContentTranslation === content.id" @click="deleteContentTranslation(content.id)">
+        <font-awesome-icon :icon="['fas', 'spinner']" spin v-show="deletingContentTranslation === content.id" />
+        <font-awesome-icon :icon="['fas', 'trash']" />
+        {{ $t('common.delete') }}
       </b-button>
     </b-col>
   </b-row>
-  <!-- Whatnow promo -->
+  <!--END WN MESSAGE EDITOR -->
+
+  <!-- WN MESSAGE -->
   <b-row v-else>
     <b-col v-if="content.translations[selectedLanguage]">
       <b-card no-body class="whatnow-collapse-card">
@@ -49,16 +47,19 @@
             <div class="ml-2 rtl-mr-2">
               <h4 class="subtitle">{{ content.currentTranslation.title }}</h4>
               <p v-if="contentExists('description', content)">
-                {{ showCollapse ? content.currentTranslation.description : truncate(content.currentTranslation.description, 90) }}
+                {{ showCollapse ? content.currentTranslation.description :
+                  truncate(content.currentTranslation.description, 90) }}
               </p>
             </div>
             <div class="ml-auto rtl-mr-auto">
               <b-button @click="showCollapse = !showCollapse" variant="link" class="rounded-circle">
-                <fa icon="chevron-down" size="2x" class="animate-font-awesome" :transform="{ rotate: showCollapse ? 180 : 0 }"/>
+                <fa icon="chevron-down" size="2x" class="animate-font-awesome"
+                  :transform="{ rotate: showCollapse ? 180 : 0 }" />
               </b-button>
             </div>
           </div>
-          <b-collapse class="collapse-content" :id="`accordion-${content.id}`" accordion="content-accordion" role="tabpanel" v-model="showCollapse">
+          <b-collapse class="collapse-content" :id="`accordion-${content.id}`" accordion="content-accordion"
+            role="tabpanel" v-model="showCollapse">
             <div class="pl-3">
               <h4 class="card-tit mb-3 subtitle-in">
                 {{ $t('content.whatnow.date_added') }}:
@@ -88,8 +89,8 @@
                     <div class="button-container mt-4 mb-4">
                       <div></div>
                       <b-button :to="{ name: 'users.list', params: {} }" variant="danger" class="button-go">{{
-                          $t('content.whatnow.show_more')
-                        }}
+                        $t('content.whatnow.show_more')
+                      }}
                       </b-button>
                     </div>
                   </b-card>
@@ -107,8 +108,8 @@
                     <div class="button-container mt-4 mb-4">
                       <div></div>
                       <b-button :to="{ name: 'users.list', params: {} }" variant="danger" class="button-go">{{
-                          $t('content.whatnow.show_more')
-                        }}
+                        $t('content.whatnow.show_more')
+                      }}
                       </b-button>
                     </div>
                   </b-card>
@@ -126,14 +127,14 @@
                     <div class="button-container mt-4 mb-4">
                       <div></div>
                       <b-button :to="{ name: 'users.list', params: {} }" variant="danger" class="button-go">{{
-                          $t('content.whatnow.show_more')
-                        }}
+                        $t('content.whatnow.show_more')
+                      }}
                       </b-button>
                     </div>
                   </b-card>
                 </b-col>
               </b-row>
-               <b-row class="hazard-cards-container">
+              <b-row class="hazard-cards-container">
                 <b-col cols="12">
                   <h4 class="subtitle-card">{{ $t('content.whatnow.disaster') }}</h4>
                 </b-col>
@@ -150,8 +151,8 @@
                     <div class="button-container mt-4 mb-4">
                       <div></div>
                       <b-button :to="{ name: 'users.list', params: {} }" variant="danger" class="button-go">{{
-                          $t('content.whatnow.show_more')
-                        }}
+                        $t('content.whatnow.show_more')
+                      }}
                       </b-button>
                     </div>
                   </b-card>
@@ -169,8 +170,8 @@
                     <div class="button-container mt-4 mb-4">
                       <div></div>
                       <b-button :to="{ name: 'users.list', params: {} }" variant="danger" class="button-go">{{
-                          $t('content.whatnow.show_more')
-                        }}
+                        $t('content.whatnow.show_more')
+                      }}
                       </b-button>
                     </div>
                   </b-card>
@@ -188,8 +189,8 @@
                     <div class="button-container mt-4 mb-4">
                       <div></div>
                       <b-button :to="{ name: 'users.list', params: {} }" variant="danger" class="button-go">{{
-                          $t('content.whatnow.show_more')
-                        }}
+                        $t('content.whatnow.show_more')
+                      }}
                       </b-button>
                     </div>
                   </b-card>
@@ -212,8 +213,8 @@
                     <div class="button-container mt-4 mb-4">
                       <div></div>
                       <b-button :to="{ name: 'users.list', params: {} }" variant="danger" class="button-go">{{
-                          $t('content.whatnow.show_more')
-                        }}
+                        $t('content.whatnow.show_more')
+                      }}
                       </b-button>
                     </div>
                   </b-card>
@@ -241,138 +242,160 @@
                     :instructionName="stageName"
                   />
                 </b-card> -->
-              </b-card-body>
-            </b-collapse>
-          </b-card-header>
+            </b-card-body>
+          </b-collapse>
+        </b-card-header>
 
-        </b-card>
-      </b-col>
-    </b-row>
-  </template>
-  <script>
-  import { mapGetters } from 'vuex'
-  import * as permissionsList from '../../store/permissions'
-  import swal from 'sweetalert2'
-  import WhatnowDownloadImage from './whatnowDownloadImage'
+      </b-card>
+    </b-col>
+  </b-row>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import * as permissionsList from '../../store/permissions'
+import swal from 'sweetalert2'
+import WhatnowDownloadImage from './whatnowDownloadImage'
 
-  export default {
-    props: ['selectedLanguage', 'content', 'isPromo', 'regionSlug', 'forceCreate'],
-    components: {
-      WhatnowDownloadImage
+export default {
+  props: ['selectedLanguage', 'content', 'isPromo', 'regionSlug', 'forceCreate'],
+  components: {
+    WhatnowDownloadImage
+  },
+  data() {
+    return {
+      deletingContentTranslation: null,
+      permissions: permissionsList,
+      showCollapse: false
+    }
+  },
+  methods: {
+    deleteContentTranslation(id) {
+      swal({
+        title: this.$t('common.are_you_sure'),
+        text: `${this.$t('content.whatnow.delete_content_translation')} (${this.selectedLanguage.toUpperCase()})`,
+        type: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: this.$t('common.delete')
+      }).then(async () => {
+        this.deletingContentTranslation = id
+        try {
+          await this.$store.dispatch('content/deleteContentTranslation', id)
+          this.$emit('languageChange')
+          this.$noty.success(`${this.$t('common.removed')} ${this.content.eventType} (${this.selectedLanguage.toUpperCase()})`)
+        } catch (e) {
+          this.$noty.error(this.$t('error_alert_text'))
+        }
+        this.deletingContentTranslation = null
+      }).catch(swal.noop)
     },
-    data () {
-      return {
-        deletingContentTranslation: null,
-        permissions: permissionsList,
-        showCollapse: false
+    contentExists(key, content) {
+      if (content.currentTranslation) {
+        if (content.currentTranslation[key] !== null && content.currentTranslation[key] !== undefined) {
+          return true
+        }
       }
-    },
-    methods: {
-      deleteContentTranslation (id) {
-        swal({
-          title: this.$t('common.are_you_sure'),
-          text: `${this.$t('content.whatnow.delete_content_translation')} (${this.selectedLanguage.toUpperCase()})`,
-          type: 'warning',
-          showCancelButton: true,
-          confirmButtonColor: '#3085d6',
-          cancelButtonColor: '#d33',
-          confirmButtonText: this.$t('common.delete')
-        }).then(async () => {
-          this.deletingContentTranslation = id
-          try {
-            await this.$store.dispatch('content/deleteContentTranslation', id)
-            this.$emit('languageChange')
-            this.$noty.success(`${this.$t('common.removed')} ${this.content.eventType} (${this.selectedLanguage.toUpperCase()})`)
-          } catch (e) {
-            this.$noty.error(this.$t('error_alert_text'))
-          }
-          this.deletingContentTranslation = null
-        }).catch(swal.noop)
-      },
-      contentExists (key, content) {
-        if (content.currentTranslation) {
-          if (content.currentTranslation[key] !== null && content.currentTranslation[key] !== undefined) {
-            return true
+      return false
+    }
+  },
+  computed: {
+    editLink() {
+      if (!this.forceCreate) {
+        return { name: 'content.editWhatnow', params: { whatnowId: this.content.id, langCode: this.selectedLanguage, regionSlug: this.regionSlug } }
+      } else {
+        return {
+          name: 'content.create',
+          params: {
+            organisation: this.content.countryCode,
+            langCode: this.selectedLanguage,
+            regionSlug: this.regionSlug,
+            eventTypeToCreate: this.content.eventType
           }
         }
-        return false
       }
     },
-    computed: {
-      editLink () {
-        if (!this.forceCreate) {
-          return { name: 'content.editWhatnow', params: { whatnowId: this.content.id, langCode: this.selectedLanguage, regionSlug: this.regionSlug } }
-        } else {
-          return  {
-            name: 'content.create',
-            params: {
-              organisation: this.content.countryCode,
-              langCode: this.selectedLanguage,
-              regionSlug: this.regionSlug,
-              eventTypeToCreate: this.content.eventType
-            }
-          }
-        }
-      },
-      ...mapGetters({
-        user: 'auth/user'
-      })
-    }
+    ...mapGetters({
+      user: 'auth/user'
+    })
   }
-  </script>
-  <style scoped>
-    .collapse-content {
-      padding: 3rem;
-      margin-top: -2rem;
-    }
+}
+</script>
+<style scoped lang="scss">
+.collapse-content {
+  padding: 3rem;
+  margin-top: -2rem;
+}
 
-    .card-tit {
-    }
+.card-tit {}
 
-    .hazard-instruction-card {
-      border: none
-    }
+.hazard-instruction-card {
+  border: none
+}
 
-    .home-card {
-      background: #E9E9E9;
-    }
+.home-card {
+  background: #E9E9E9;
+}
 
-    .hazard-cards-container {
-      background: #E1E1E1;
-      border-radius: 10px;
-      padding: 1rem;
-      margin: 2rem;
-    }
+.hazard-cards-container {
+  background: #E1E1E1;
+  border-radius: 10px;
+  padding: 1rem;
+  margin: 2rem;
+}
 
-    .button-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-    .subtitle {
-      font-weight: 500;
-      font-size: 28px
-    }
+.subtitle {
+  font-weight: 500;
+  font-size: 28px
+}
 
-    .subtitle-in {
-      font-weight: 500;
-      font-size: 26px
-    }
+.subtitle-in {
+  font-weight: 500;
+  font-size: 26px
+}
 
-    .subtitle-card {
-      font-weight: 600;
-      font-size: 26px;
-      color: red;
-    }
+.subtitle-card {
+  font-weight: 600;
+  font-size: 26px;
+  color: red;
+}
+
+.card-title {
+  font-weight: 500;
+  font-size: 35px;
+}
 
-    .card-title {
-      font-weight: 500;
-      font-size: 35px;
+.card-text {
+  font-weight: 400;
+  font-size: 20px;
+}
+
+/* MESSAGE EDITOR */
+.whatnow-row--message_editor {
+  border-radius: 10px;
+  background-color: #f7f7f7;
+  font-size: 12.5px;
+  color: #000;
+  height: 100px;
+
+  .whatnow-col-item--message_editor {
+    border-right: 3px solid #fff;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    &:last-of-type {
+      border: none;
     }
 
-    .card-text {
-      font-weight: 400;
-      font-size: 20px;
+    .btn {
+      padding: 0 14px;
     }
-  </style>
+  }
+}
+</style>
diff --git a/resources/assets/js/pages/content/whatnowList.vue b/resources/assets/js/pages/content/whatnowList.vue
index f28a899..28c28c4 100644
--- a/resources/assets/js/pages/content/whatnowList.vue
+++ b/resources/assets/js/pages/content/whatnowList.vue
@@ -1,31 +1,31 @@
 <template>
     <b-row class="pl-4 pr-4 pb-4 pt-3">
       <b-col>
-        <span v-if="!isPromo">{{ $t('content.whatnow.content') }}</span>
-        <b-button
-          size="sm"
-          variant="primary"
-          class="float-right rtl-float-left"
-          v-if="user && can(user, permissions.CONTENT_CREATE) && selectedSoc && !isPromo"
-          :to="{ name: 'content.create', params: { organisation: selectedSoc.countryCode, langCode: this.selectedLanguage, regionSlug: this.selectedRegion?.title } }">
-          {{ $t('content.whatnow.create') }}
-          <fa :icon="['fas', 'plus']" />
-        </b-button>
+        <div class="d-flex justify-content-between align-items-center">
+          <h4 class="whatnow-list-title" v-if="!isPromo">{{ $t('content.whatnow.content') }}</h4>
+          <b-button
+            size="sm"
+            variant="outline-primary"
+            v-if="user && can(user, permissions.CONTENT_CREATE) && selectedSoc && !isPromo"
+            :to="{ name: 'content.create', params: { organisation: selectedSoc.countryCode, langCode: this.selectedLanguage, regionSlug: this.selectedRegion?.title } }">
+            {{ $t('content.message_editor.create_btn') }}
+          </b-button>
+        </div>
         <hr v-if="!isPromo"/>
         <b-row v-if="!isPromo && translationsExist">
-          <b-col>
-            <b>{{ $t('content.whatnow.hazard') }}</b>
+          <b-col lg="2">
+            <b class="whatnow-list-th">{{ $t('content.whatnow.hazard') }}</b>
           </b-col>
-          <b-col>
+          <b-col lg="3" class="whatnow-list-th">
             <b>{{ $t('common.title') }}</b>
           </b-col>
-          <b-col>
+          <b-col lg="3" class="whatnow-list-th">
             <b>{{ $t('common.description') }}</b>
           </b-col>
-          <b-col>
+          <b-col lg="2" class="whatnow-list-th">
             <b>{{ $t('common.unpublished_edits') }}</b>
           </b-col>
-          <b-col v-if="user">
+          <b-col lg="2" class="whatnow-list-th" v-if="user">
             <b>{{ $t('common.actions') }}</b>
           </b-col>
         </b-row>
@@ -234,3 +234,17 @@ export default {
   }
 }
 </script>
+<style scoped lang="scss">
+@import '../../../sass/variables.scss';
+h4.whatnow-list-title {
+  font-size: 24px;
+  font-weight: 500;
+  color: $text-dark;
+}
+
+.whatnow-list-th {
+  font-size: 14px;
+  font-weight: 600;
+  color: $black;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/store/modules/content.js b/resources/assets/js/store/modules/content.js
index 48ae48b..17051a8 100644
--- a/resources/assets/js/store/modules/content.js
+++ b/resources/assets/js/store/modules/content.js
@@ -102,6 +102,9 @@ export const mutations = {
   },
   [types.CONTENT_FAILURE] (state, { error }) {
     state.errors.push(error)
+  },
+  [types.SET_CURRENT_LANGUAGES] (state, languages) {
+    state.currentLanguages = languages
   }
 }
 // actions
@@ -223,5 +226,8 @@ export const actions = {
       commit(`generic/${types.NETWORK_FAILURE}`, { error }, { root: true })
       throw error
     }
+  },
+  setCurrentLanguages ({ commit }, languages) {
+    commit(types.SET_CURRENT_LANGUAGES, languages)
   }
 }
diff --git a/resources/assets/js/store/mutation-types.js b/resources/assets/js/store/mutation-types.js
index 6610ffa..6cfc1ef 100644
--- a/resources/assets/js/store/mutation-types.js
+++ b/resources/assets/js/store/mutation-types.js
@@ -36,6 +36,7 @@ export const FETCH_ORGANISATIONS_SUCCESS = 'FETCH_ORGANISATIONS_SUCCESS'
 export const FETCH_ORGANISATION_SINGLE_SUCCESS = 'FETCH_ORGANISATION_SINGLE_SUCCESS'
 export const FETCH_INSTRUCTION_SUCCESS = 'FETCH_INSTRUCTION_SUCCESS'
 export const FETCH_REGIONS_SUCCESS = 'FETCH_REGIONS_SUCCESS'
+export const SET_CURRENT_LANGUAGES = 'SET_CURRENT_LANGUAGES'
 
 // generic.js
 export const NETWORK_FAILURE = 'NETWORK_FAILURE'
diff --git a/resources/lang/en.json b/resources/lang/en.json
index a31d4f7..5e73757 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -275,6 +275,7 @@
     "actions": "Actions",
     "create": "Create",
     "edit": "Edit",
+    "save": "Save",
     "deactivate": "Deactivate",
     "activate": "Activate",
     "are_you_sure": "Are you sure?",
@@ -485,6 +486,13 @@
       "key_message_label": "Key message title",
       "supporting_message_label": "Supporting message"
     },
+    "message_editor": {
+      "title": "Message Editor",
+      "society_name_label": "National society name",
+      "attribution_url_label": "Attribution URL",
+      "attribution_message_label": "Attribution Message",
+      "create_btn": "Add hazard"
+    },
     "audit": "Audit log",
     "export": "Export",
     "bulk_upload": {

From fd2ebe2d2c87660b731b8332b0396e36e2710d9e Mon Sep 17 00:00:00 2001
From: "LDFOUR\\luisd" <luisd@jazusoft.com>
Date: Fri, 21 Feb 2025 08:49:06 -0300
Subject: [PATCH 02/10] WN-146, I added the contributor logic in message
 editor.

---
 resources/assets/js/pages/content/whatnow.vue | 164 +++++++++++++-----
 resources/lang/en.json                        |   4 +-
 2 files changed, 119 insertions(+), 49 deletions(-)

diff --git a/resources/assets/js/pages/content/whatnow.vue b/resources/assets/js/pages/content/whatnow.vue
index 4bf5506..eb345b1 100644
--- a/resources/assets/js/pages/content/whatnow.vue
+++ b/resources/assets/js/pages/content/whatnow.vue
@@ -42,7 +42,8 @@
           </h4>
 
           <div class="d-flex align-items-center">
-            <b-button variant="outline-primary" size="sm" class="mr-2" v-if="canEditAttribution && !languageToAdd && !editing" @click="editing = true"
+            <b-button variant="outline-primary" size="sm" class="mr-2"
+              v-if="canEditAttribution && !languageToAdd && !editing" @click="editing = true"
               :disabled="!canEditAttribution" :key="'edit'">
               <font-awesome-icon :icon="['fas', 'pen']" />
               {{ $t('common.edit') }}
@@ -52,12 +53,12 @@
               <font-awesome-icon :icon="['fas', 'check']" />
               {{ $t('common.save') }}
             </b-button>
-            <b-button variant="outline-primary" size="sm" class="mr-2" v-if="canEditAttribution && editing" :disabled="!canEditAttribution" :key="'add'">
-              Add contributor
+            <b-button variant="outline-primary" size="sm" class="mr-2" v-if="canEditAttribution && editing"
+              :disabled="!canEditAttribution" :key="'add'" @click="addContributor">
+              {{ $t('common.add') + ' ' + $t('content.message_editor.contributor_single') }}
             </b-button>
-            <b-button variant="outline-primary" size="sm" 
-              v-if="canEditAttribution && (languageToAdd || editing)" @click="discard" :disabled="!canEditAttribution"
-              :key="'cancel'">
+            <b-button variant="outline-primary" size="sm" v-if="canEditAttribution && (languageToAdd || editing)"
+              @click="discard" :disabled="!canEditAttribution" :key="'cancel'">
               <font-awesome-icon :icon="['fas', 'xmark']" />
               {{ $t('common.cancel') }}
             </b-button>
@@ -67,44 +68,46 @@
     </b-row>
     <!-- FORM ORG -->
     <b-row align-v="stretch"
-      class="pl-4 pr-4 pb-3 pt-3 whatnow-message-editor-form-card d-flex align-items-center justify-content-start m-auto">
-      <b-col lg="1">
-        <div slot="button-content" class="text-dark py-0">
-          <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
-          <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
-        </div>
-      </b-col>
+      class="pl-4 pr-4 pb-3 pt-3 whatnow-message-editor-form-card d-flex align-items-center justify-content-start mb-3 mr-3 ml-auto mr-auto">
+
       <b-col lg="5">
-        <b-row>
-          <b-col lg="12">
-            <b-form-group :label="$t('content.message_editor.society_name_label')" label-for="socName">
-              <b-form-input type="text" id="socName" name="socName" maxlength="255"
-                v-model="attributionEditTranslation.name"
-                :state="updateErrors.errors[`translations.${updateErrors.indexError}.name`] ? false : null"
-                v-if="attributionEditTranslation" :disabled="isFormDisabled" />
-              <b-form-invalid-feedback id="socNameFeedback">
-                <p>
-                  {{ $t('common.not_empty') }}
-                </p>
-              </b-form-invalid-feedback>
-            </b-form-group>
-          </b-col>
-          <b-col lg="12">
-            <b-form-group :label="$t('content.message_editor.attribution_url_label')" label-for="url">
-              <b-form-input type="url" id="url" name="url" maxlength="255" v-model="attributionToEdit.url"
-                :state="updateErrors.errors.url ? false : null" placeholder="https://" :disabled="isFormDisabled" />
-              <b-form-invalid-feedback id="urlFeedback">
-                <!-- This will only be shown if the preceeding input has an invalid state -->
-                <p v-for="error in updateErrors.errors.url">
-                  {{ error }}
-                </p>
-              </b-form-invalid-feedback>
-            </b-form-group>
-          </b-col>
-        </b-row>
+        <div class="d-flex justify-content-start align-items-start">
+          <div slot="button-content" class="text-dark py-0 mr-3">
+            <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
+            <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
+          </div>
+          <b-row>
+            <b-col lg="12">
+              <b-form-group :label="$t('content.message_editor.society_name_label')" label-for="socName">
+                <b-form-input type="text" id="socName" name="socName" maxlength="255"
+                  v-model="attributionEditTranslation.name"
+                  :state="updateErrors.errors[`translations.${updateErrors.indexError}.name`] ? false : null"
+                  v-if="attributionEditTranslation" :disabled="isFormDisabled" />
+                <b-form-invalid-feedback id="socNameFeedback">
+                  <p>
+                    {{ $t('common.not_empty') }}
+                  </p>
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </b-col>
+            <b-col lg="12">
+              <b-form-group :label="$t('content.message_editor.attribution_url_label')" label-for="url">
+                <b-form-input type="url" id="url" name="url" maxlength="255" v-model="attributionToEdit.url"
+                  :state="updateErrors.errors.url ? false : null" placeholder="https://" :disabled="isFormDisabled" />
+                <b-form-invalid-feedback id="urlFeedback">
+                  <!-- This will only be shown if the preceeding input has an invalid state -->
+                  <p v-for="error in updateErrors.errors.url">
+                    {{ error }}
+                  </p>
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </div>
+
       </b-col>
 
-      <b-col lg="6">
+      <b-col lg="7">
         <b-form-group :label="$t('content.message_editor.attribution_message_label')" label-for="message">
           <textarea
             :class="`form-control ${updateErrors.errors[`translations.${updateErrors.indexError}.attributionMessage`] ? 'is-invalid' : ''}`"
@@ -114,6 +117,29 @@
         </b-form-group>
       </b-col>
     </b-row>
+
+    <b-row v-if="contributors.length > 0" align-v="stretch"
+      class="pl-4 pr-4 pb-3 pt-3 whatnow-message-editor-form-card d-flex align-items-center justify-content-start m-auto mb-3 mr-3 ml-auto mr-auto">
+      <b-col lg="12">
+        <div v-for="(contributor, index) in attributionEditTranslation.contributors" :key="index">
+          <div class="d-flex justify-content-start align-items-start">
+            <div slot="button-content" class="text-dark py-0 mr-3">
+              <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
+              <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
+            </div>
+            <b-form-group :label="$t('content.message_editor.contributor_name_label')" class="w-50"
+              :label-for="'contributorName' + index">
+              <b-form-input type="text" :id="'contributorName' + index" :name="'contributorName' + index"
+                v-model="contributor.name" maxlength="100" :state="updateErrors.errors[`contributors.${index}.name`] ? false : null"/>
+              <b-form-invalid-feedback v-if="updateErrors.errors[`contributors.${index}.name`]">
+                {{ $t('common.not_empty') }}
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </div>
+        </div>
+      </b-col>
+    </b-row>
+
     <!-- END FORM ORG -->
     <b-row>
       <b-col>
@@ -174,13 +200,15 @@ export default {
         countryCode: '',
         url: '',
         name: '',
-        translations: []
+        translations: [],
+        contributors: []
       },
       attributionEditTranslation: null,
       updateErrors: {
         errors: {}
       },
-      editing: false
+      editing: false,
+      contributors: []
     }
   },
   watch: {
@@ -243,8 +271,8 @@ export default {
     }),
     async getData() {
       this.$store.dispatch('content/fetchOrganisations').then(() => {
-      this.selectedSoc = this.filteredSocieties.find((soc) => soc.countryCode === this.countryCode)
-    })
+        this.selectedSoc = this.filteredSocieties.find((soc) => soc.countryCode === this.countryCode)
+      })
     },
     async publish() {
       if (this.toPublish.length > 0) {
@@ -342,7 +370,7 @@ export default {
       }
 
       this.currentLanguages.push(this.languageToAdd)
-      this.selectingLanguage = false 
+      this.selectingLanguage = false
     },
     async publishAttribution(fireEvent = false) {
       if (fireEvent) {
@@ -350,7 +378,14 @@ export default {
       }
 
       this.attributionPublishing = true
-      this.updateErrors = { errors: {} }
+
+      const valid = this.validateForm()
+      if (!valid) {
+        this.attributionPublishing = false
+        return
+      }
+
+
       try {
         await this.$store.dispatch('content/updateAttribution', { countryCode: this.selectedSoc.countryCode, data: this.attributionToEdit })
         await this.$store.dispatch('content/fetchOrganisationSingle', this.selectedSoc.countryCode)
@@ -364,20 +399,24 @@ export default {
       }
     },
     setAttributionToEdit() {
+      console.log('this.attribution', this.attribution)
       if (this.attribution) {
         this.attributionToEdit = JSON.parse(JSON.stringify(this.attribution))
         const attributionTranslation = this.attributionToEdit.translations.find(translation => translation.languageCode === this.selectedLanguage)
+        console.log('attributionTranslation', attributionTranslation)
         if (!attributionTranslation) {
           const newTranslation = {
             attributionMessage: '',
             languageCode: this.selectedLanguage,
             name: '',
-            published: false
+            published: false,
+            contributors: []
           }
           this.attributionToEdit.translations.push(newTranslation)
           this.attributionEditTranslation = newTranslation
         } else {
           this.attributionEditTranslation = attributionTranslation
+          this.contributors = this.attributionEditTranslation.contributors
         }
       }
     },
@@ -401,7 +440,36 @@ export default {
       this.languageToAdd = null
       this.addingNewLanguage = false
       this.editing = false
+      this.contributors = []
       this.getData()
+    },
+    addContributor() {
+      this.attributionEditTranslation.contributors.push({ name: '', logo: '' })
+    },
+    validateForm() {
+      this.updateErrors = { errors: {} }
+
+      if (!this.attributionEditTranslation.name) {
+        this.updateErrors.errors[`translations.${this.updateErrors.indexError}.name`] = true;
+      }
+      if (!this.attributionEditTranslation.attributionMessage) {
+        this.updateErrors.errors[`translations.${this.updateErrors.indexError}.attributionMessage`] = true;
+      }
+      if (!this.attributionToEdit.url) {
+        this.updateErrors.errors.url = ["URL no puede estar vacía"];
+      }
+
+      this.attributionEditTranslation.contributors.forEach((contributor, index) => {
+        if (!contributor.name.trim()) {
+          this.updateErrors.errors[`contributors.${index}.name`] = true;
+        }
+
+        if (Object.keys(this.updateErrors).length > 0) {
+          return false;
+        }
+
+        return true;
+      });
     }
   },
   metaInfo() {
diff --git a/resources/lang/en.json b/resources/lang/en.json
index 5e73757..bb2c5b0 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -491,7 +491,9 @@
       "society_name_label": "National society name",
       "attribution_url_label": "Attribution URL",
       "attribution_message_label": "Attribution Message",
-      "create_btn": "Add hazard"
+      "create_btn": "Add hazard",
+      "contributor_name_label": "Contributor Name",
+      "contributor_single": "Contributor"
     },
     "audit": "Audit log",
     "export": "Export",

From c376ee370a2782408f068ab894d25242023ffab6 Mon Sep 17 00:00:00 2001
From: Juan24 <93536474+juanbroder24@users.noreply.github.com>
Date: Fri, 21 Feb 2025 21:29:00 -0300
Subject: [PATCH 03/10] upload custom modal

---
 .../RcnApi/Resources/WhatNowResource.php      |  47 +++--
 .../js/components/global/UploadModal.vue      | 161 ++++++++++++++++++
 routes/api.php                                |   5 +
 3 files changed, 199 insertions(+), 14 deletions(-)
 create mode 100644 resources/assets/js/components/global/UploadModal.vue

diff --git a/app/Classes/RcnApi/Resources/WhatNowResource.php b/app/Classes/RcnApi/Resources/WhatNowResource.php
index 4d7a1b6..fc36821 100644
--- a/app/Classes/RcnApi/Resources/WhatNowResource.php
+++ b/app/Classes/RcnApi/Resources/WhatNowResource.php
@@ -10,7 +10,7 @@
 
 class WhatNowResource extends AbstractResource implements WhatNowResourceInterface
 {
-    
+
     public function getOrganisationByCountryCode(string $countryCode)
     {
         return $this->handleApiCall(function () use ($countryCode) {
@@ -22,7 +22,7 @@ public function getOrganisationByCountryCode(string $countryCode)
         });
     }
 
-    
+
     public function getOrganisations()
     {
         return $this->handleApiCall(function () {
@@ -36,7 +36,7 @@ public function getOrganisations()
         });
     }
 
-    
+
     public function updateOrganisationByCountryCode(Organisation $organisation)
     {
         return $this->handleApiCall(function () use ($organisation) {
@@ -50,7 +50,7 @@ public function updateOrganisationByCountryCode(Organisation $organisation)
         });
     }
 
-    
+
     public function getPublishedInstructionsByCountryCode(string $countryCode): Collection
     {
         return $this->handleApiCall(function () use ($countryCode) {
@@ -64,7 +64,7 @@ public function getPublishedInstructionsByCountryCode(string $countryCode): Coll
         });
     }
 
-    
+
     public function getLatestInstructionsByCountryCode(string $countryCode): Collection
     {
         return $this->handleApiCall(function () use ($countryCode) {
@@ -78,7 +78,7 @@ public function getLatestInstructionsByCountryCode(string $countryCode): Collect
         });
     }
 
-    
+
     public function getAllInstructions(): Collection
     {
         return $this->handleApiCall(function () {
@@ -92,7 +92,7 @@ public function getAllInstructions(): Collection
         });
     }
 
-    
+
     public function getInstruction(int $id): Instruction
     {
         return $this->handleApiCall(function () use ($id) {
@@ -103,7 +103,7 @@ public function getInstruction(int $id): Instruction
         });
     }
 
-    
+
     public function getLatestInstructionRevision(int $id): Instruction
     {
         return $this->handleApiCall(function () use ($id) {
@@ -114,7 +114,7 @@ public function getLatestInstructionRevision(int $id): Instruction
         });
     }
 
-    
+
     public function createInstruction(Instruction $instruction): Instruction
     {
         return $this->handleApiCall(function () use ($instruction) {
@@ -128,7 +128,7 @@ public function createInstruction(Instruction $instruction): Instruction
         });
     }
 
-    
+
     public function updateInstruction(Instruction $instruction): Instruction
     {
         if (! $instruction->getId()) {
@@ -150,7 +150,7 @@ public function updateInstruction(Instruction $instruction): Instruction
         });
     }
 
-    
+
     public function createTranslation($id, InstructionTranslation $translation): Instruction
     {
         return $this->handleApiCall(function () use ($id, $translation) {
@@ -164,7 +164,7 @@ public function createTranslation($id, InstructionTranslation $translation): Ins
         });
     }
 
-    
+
     public function patchTranslation($id, $translationId, $patch)
     {
         return $this->handleApiCall(function () use ($id, $translationId, $patch) {
@@ -178,7 +178,7 @@ public function patchTranslation($id, $translationId, $patch)
         });
     }
 
-    
+
     public function publishTranslations($ids)
     {
         $this->handleApiCall(function () use ($ids) {
@@ -188,7 +188,7 @@ public function publishTranslations($ids)
         });
     }
 
-    
+
     public function deleteInstruction(int $id): void
     {
         $this->handleApiCall(function () use ($id) {
@@ -238,4 +238,23 @@ public function deleteRegion(int $regionId)
             $response = $this->http->delete("regions/region/$regionId");
         });
     }
+    public function uploadFile($filePath, $fileName)
+    {
+        try {
+            $response = $this->http->post('upload', [
+                'multipart' => [
+                    [
+                        'name'     => 'file',
+                        'contents' => fopen($filePath, 'r'),
+                        'filename' => $fileName
+                    ]
+                ]
+            ]);
+
+            return json_decode($response->getBody(), true);
+        } catch (\Exception $e) {
+            $this->logger->error('File upload failed: ' . $e->getMessage());
+            throw $e;
+        }
+    }
 }
diff --git a/resources/assets/js/components/global/UploadModal.vue b/resources/assets/js/components/global/UploadModal.vue
new file mode 100644
index 0000000..66bbe63
--- /dev/null
+++ b/resources/assets/js/components/global/UploadModal.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <!-- Button to open the modal -->
+    <b-button @click="showModal = true" class="global-button-style">
+      Upload File
+    </b-button>
+
+    <!-- Modal -->
+    <b-modal v-model="showModal" title="Upload File" @hide="resetModal">
+      <div class="upload-area" @click="triggerFileInput" v-if="!file">
+        <input type="file" ref="fileInput" @change="handleFileUpload" class="file-input" />
+        <p>Click or drag file to this area to upload</p>
+      </div>
+
+      <div v-if="file" class="file-preview">
+        <p>{{ file.name }} ({{ (file.size / 1024 / 1024).toFixed(2) }} MB)</p>
+        <b-button variant="danger" size="sm" class="thin-x" @click="removeFile">X</b-button>
+      </div>
+
+      <b-button v-if="file && !uploading" @click="uploadFile" class="global-button-style">Upload</b-button>
+
+      <b-progress v-if="uploading" :max="100" :value="progress" class="mb-3" :variant="uploadFailed ? 'danger' : 'success'"></b-progress>
+      <p v-if="uploading">Uploading... {{ progress }}%</p>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { BToast } from 'bootstrap-vue'
+
+export default {
+  data() {
+    return {
+      showModal: false,
+      file: null,
+      uploading: false,
+      progress: 0,
+      uploadFailed: false,
+      uploadSuccess: false,
+      errorMessage: ""
+    }
+  },
+  methods: {
+    triggerFileInput() {
+      this.$refs.fileInput.click()
+    },
+    handleFileUpload(event) {
+      this.file = event.target.files[0]
+
+      if (!this.file) return
+
+      // Validate file type
+      const allowedTypes = ["image/png", "image/jpeg"]
+      if (!allowedTypes.includes(this.file.type)) {
+        this.showNotification("Only PNG and JPG files are allowed.", "danger")
+        this.file = null
+        return
+      }
+
+      // Validate file size (10MB limit)
+      if (this.file.size > 10 * 1024 * 1024) {
+        this.showNotification("File size must not exceed 10MB.", "danger")
+        this.file = null
+        return
+      }
+    },
+    removeFile() {
+      this.file = null
+    },
+    async uploadFile() {
+      if (!this.file) return
+
+      const formData = new FormData()
+      formData.append('file', this.file)
+
+      this.uploading = true
+      this.progress = 0
+      this.uploadFailed = false
+      this.uploadSuccess = false
+
+      try {
+        const response = await axios.post('/api/upload-file', formData, {
+          headers: { 'Content-Type': 'multipart/form-data' },
+          onUploadProgress: progressEvent => {
+            this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          }
+        })
+
+        if (response.status === 200) {
+          this.uploadSuccess = true
+          this.showNotification("Upload successful!", "success")
+          setTimeout(() => {
+            this.showModal = false
+          }, 1500) // Delay to show success message
+        } else {
+          this.uploadFailed = true
+          this.showNotification("Upload failed. Please try again.", "danger")
+        }
+      } catch (error) {
+        this.uploadFailed = true
+        this.showNotification("An error occurred during upload.", "danger")
+        console.error(error)
+      } finally {
+        setTimeout(() => {
+          this.uploading = false
+          this.file = null
+        }, 1500)
+      }
+    },
+    resetModal() {
+      this.file = null
+      this.uploading = false
+      this.progress = 0
+      this.uploadFailed = false
+      this.uploadSuccess = false
+      this.errorMessage = ""
+    },
+    showNotification(message, variant) {
+      this.$bvToast.toast(message, {
+        title: 'Notification',
+        variant: variant,
+        solid: true
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.upload-area {
+  border: 2px dashed #d3d3d3;
+  border-radius: 5px;
+  padding: 50px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+.upload-area:hover {
+  background-color: #f8f9fa;
+}
+.file-input {
+  display: none;
+}
+.file-preview {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f8f9fa;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+.thin-x {
+  font-size: 12px;
+  padding: 2px 5px;
+}
+.b-progress {
+  transition: width 0.5s ease;
+}
+</style>
diff --git a/routes/api.php b/routes/api.php
index 56ced3b..63307e5 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -18,6 +18,7 @@
     Route::get('instructions/{id}/{translation}/{stage}/download', 'WhatNow\InstructionController@renderImage'); // Download instruction image
     Route::get('event-types/', 'WhatNow\EventTypeController@list'); // List all event types
     Route::post('event-types/', 'WhatNow\EventTypeController@create'); // Create new event type
+
 });
 
 // Protected routes - requires API authentication
@@ -91,6 +92,10 @@
     Route::post('regions', 'WhatNow\RegionController@createRegion'); // Create region
     Route::put('regions/region/{regionId}', 'WhatNow\RegionController@updateRegion'); // Update region
     Route::delete('regions/region/{regionId}', 'WhatNow\RegionController@deleteRegion'); // Delete region
+
+    //file upload
+    Route::post('upload-file', 'FileController@uploadFile');
+
 });
 
 // Guest routes - for unauthenticated users

From 1a5776cae11820d7c8e17d68b6efbac0b89ecd8a Mon Sep 17 00:00:00 2001
From: "LDFOUR\\luisd" <luisd@jazusoft.com>
Date: Sat, 22 Feb 2025 10:07:16 -0300
Subject: [PATCH 04/10] publish button

---
 resources/assets/js/pages/content/whatnow.vue | 123 +++++++++++++++++-
 1 file changed, 121 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/pages/content/whatnow.vue b/resources/assets/js/pages/content/whatnow.vue
index eb345b1..6cbd6fd 100644
--- a/resources/assets/js/pages/content/whatnow.vue
+++ b/resources/assets/js/pages/content/whatnow.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid class="h-100">
+  <b-container fluid class="h-100 whatnow-message-editor-container">
     <b-row>
       <b-col>
         <div class="whatnow-message-editor-header">
@@ -130,7 +130,8 @@
             <b-form-group :label="$t('content.message_editor.contributor_name_label')" class="w-50"
               :label-for="'contributorName' + index">
               <b-form-input type="text" :id="'contributorName' + index" :name="'contributorName' + index"
-                v-model="contributor.name" maxlength="100" :state="updateErrors.errors[`contributors.${index}.name`] ? false : null"/>
+                v-model="contributor.name" maxlength="100"
+                :state="updateErrors.errors[`contributors.${index}.name`] ? false : null" />
               <b-form-invalid-feedback v-if="updateErrors.errors[`contributors.${index}.name`]">
                 {{ $t('common.not_empty') }}
               </b-form-invalid-feedback>
@@ -148,6 +149,98 @@
       </b-col>
     </b-row>
 
+    <!-- PUBLISH BUTTON -->
+    <div class="publish-bottom-container d-flex justify-content-end" v-if="selectedSoc">
+      <b-button size="md" variant="outline-primary" v-if="can(user, permissions.CONTENT_PUBLISH)"
+        v-b-modal.publish-modal :disabled="toPublish.length === 0 || !attributionSet" class="align-self-center">
+        <span v-if="toPublish.length === 0">{{ $t('content.whatnow.no_publish') }}</span>
+        <span v-else-if="!attributionSet">{{ $t('content.whatnow.set_attribution') }}</span>
+        <span v-else-if="toPublish.length > 0 && !publishing">{{ $t('content.whatnow.publish') }}</span>
+        <span v-else-if="publishing">{{ $t('content.whatnow.publishing') }}
+          <fa class="ml-2" spin :icon="['fas', 'spinner']" />
+        </span>
+      </b-button>
+    </div>
+
+    <!-- Publish Modal -->
+    <b-modal id="publish-modal" size="lg" centered :ok-title="$t('content.whatnow.publish')" ok-variant="dark"
+      cancel-variant="outline-danger" hide-header @ok="publish"
+      v-if="attribution !== null && selectedLanguage && selectedSoc">
+      <div class="px-3">
+        <h3>{{ $t('content.whatnow.content_to_publish') }}</h3>
+        <p v-if="attributionTranslation">
+          {{ attributionTranslation.name }} - {{ selectedLanguage | uppercase }}
+        </p>
+        <b-card class="border whatnow-publish-modal">
+          <div v-if="attributionTranslation && !attributionTranslation.published">
+            <b-row>
+              <b-col>
+                <h4>Attribution</h4>
+                <hr />
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col md="3">
+                <b>{{ $t('content.whatnow.attribution_url') }}</b>
+              </b-col>
+              <b-col md="9">
+                {{ attribution.url }}
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col md="3">
+                <b>{{ $t('content.whatnow.society_name') }}</b>
+              </b-col>
+              <b-col md="9" v-if="attributionTranslation">
+                {{ attributionTranslation.name }}
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col md="3">
+                <b>{{ $t('content.whatnow.attribution_message') }}</b>
+              </b-col>
+              <b-col md="9" v-if="attributionTranslation">
+                {{ attributionTranslation.attributionMessage }}
+              </b-col>
+            </b-row>
+            <hr />
+          </div>
+          <h4>{{ $t('content.whatnow.whatnow_content') }}</h4>
+          <hr />
+          <div class="whatnow-publish-content-wrapper">
+            <div v-for="content in toPublish" :key="content.eventType" class="mb-3"
+              v-if="content.translations[selectedLanguage]">
+              <h5>{{ content.eventType }} {{ content.regionName ? `- ${content.regionName}` : "" }}</h5>
+
+              <b-card class="bg-grey mb-1 hazard-instruction-card" v-for="key in ['title', 'description', 'webUrl']"
+                :key="key" v-if="attributionExists(key)">
+                <b-row>
+                  <b-col md="3">
+                    {{ $t(`common.${key}`) }}
+                  </b-col>
+                  <b-col md="9">
+                    {{ truncate(content.translations[selectedLanguage][key], 60) }}
+                  </b-col>
+                </b-row>
+              </b-card>
+
+              <b-card :class="`bg-grey mb-1 hazard-instruction-card hazard-instruction-card-${stageName}`"
+                v-for="(instruction, stageName) in content.translations[selectedLanguage].stages" v-if="instruction"
+                :key="stageName">
+                <b-row>
+                  <b-col md="3">
+                    {{ $t(`content.edit_whatnow.${stageName}`) }}
+                  </b-col>
+                  <b-col md="9">
+                    {{ instruction.length }} {{ $t('content.whatnow.steps') }}
+                  </b-col>
+                </b-row>
+              </b-card>
+            </div>
+          </div>
+        </b-card>
+      </div>
+    </b-modal>
 
     <b-modal v-model="selectingLanguage" id="role-changed" centered :title="'Add new language'" ref="selectLangModal"
       ok-variant="primary" cancel-variant="outline-primary" @ok="addNewLanguage" @cancel="languageToAdd = null"
@@ -379,6 +472,7 @@ export default {
 
       this.attributionPublishing = true
 
+      debugger;
       const valid = this.validateForm()
       if (!valid) {
         this.attributionPublishing = false
@@ -392,6 +486,7 @@ export default {
         this.showEditAttribution = false
         this.attributionPublishing = false
         this.addingNewLanguage = false
+        this.editing = false
       } catch (e) {
         // Find index of translation we've just edited so we can find it in the response from the server
         this.updateErrors.indexError = this.attributionToEdit.translations.findIndex(translation => translation.languageCode === this.selectedLanguage)
@@ -439,6 +534,7 @@ export default {
       this.setCurrentLanguages(filteredLangs)
       this.languageToAdd = null
       this.addingNewLanguage = false
+      this.selectedLanguage = this.previousLanguage
       this.editing = false
       this.contributors = []
       this.getData()
@@ -556,6 +652,29 @@ export default {
 <style scoped lang="scss">
 @import '../../../sass/variables.scss';
 
+.whatnow-message-editor-container {
+  position: relative;
+
+  .publish-bottom-container {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    height: 70px;
+    width: 100%;
+    background-color: $white;
+
+    button {
+      margin-right: 50px;
+      font-size: 18px;
+      
+      &:focus {
+        box-shadow: none;
+        border-color: $red;
+      }
+    }
+  }
+}
+
 .whatnow-message-editor-tabs.nav-tabs {
   border-bottom: none;
   position: relative;

From 363e45a173f4cf03f951b7e27f42b5cdc1c4246a Mon Sep 17 00:00:00 2001
From: "LDFOUR\\luisd" <luisd@jazusoft.com>
Date: Sat, 22 Feb 2025 11:22:26 -0300
Subject: [PATCH 05/10] Fix: save NS attributions

---
 resources/assets/js/pages/content/whatnow.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/assets/js/pages/content/whatnow.vue b/resources/assets/js/pages/content/whatnow.vue
index 6cbd6fd..667ae32 100644
--- a/resources/assets/js/pages/content/whatnow.vue
+++ b/resources/assets/js/pages/content/whatnow.vue
@@ -472,8 +472,8 @@ export default {
 
       this.attributionPublishing = true
 
-      debugger;
       const valid = this.validateForm()
+
       if (!valid) {
         this.attributionPublishing = false
         return
@@ -559,13 +559,13 @@ export default {
         if (!contributor.name.trim()) {
           this.updateErrors.errors[`contributors.${index}.name`] = true;
         }
+      });
 
-        if (Object.keys(this.updateErrors).length > 0) {
-          return false;
-        }
+      if (Object.keys(this.updateErrors.errors).length > 0) {
+        return false;
+      }
 
-        return true;
-      });
+      return true;
     }
   },
   metaInfo() {

From 409475325d4bc281331a3baf6853d54a74f96bc8 Mon Sep 17 00:00:00 2001
From: "LDFOUR\\luisd" <luisd@jazusoft.com>
Date: Sat, 22 Feb 2025 12:44:26 -0300
Subject: [PATCH 06/10] partial commit: upload logo (ns and colaborators)

---
 .../js/components/global/UploadModal.vue      | 10 ++-
 resources/assets/js/pages/content/whatnow.vue | 69 +++++++++++++++++--
 2 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/resources/assets/js/components/global/UploadModal.vue b/resources/assets/js/components/global/UploadModal.vue
index 66bbe63..f21f516 100644
--- a/resources/assets/js/components/global/UploadModal.vue
+++ b/resources/assets/js/components/global/UploadModal.vue
@@ -1,10 +1,5 @@
 <template>
   <div>
-    <!-- Button to open the modal -->
-    <b-button @click="showModal = true" class="global-button-style">
-      Upload File
-    </b-button>
-
     <!-- Modal -->
     <b-modal v-model="showModal" title="Upload File" @hide="resetModal">
       <div class="upload-area" @click="triggerFileInput" v-if="!file">
@@ -30,9 +25,9 @@ import axios from 'axios'
 import { BToast } from 'bootstrap-vue'
 
 export default {
+  props: ['disabled', 'showModal'],
   data() {
     return {
-      showModal: false,
       file: null,
       uploading: false,
       progress: 0,
@@ -97,6 +92,8 @@ export default {
           this.uploadFailed = true
           this.showNotification("Upload failed. Please try again.", "danger")
         }
+
+        this.$emit('fileUploaded', response.data)
       } catch (error) {
         this.uploadFailed = true
         this.showNotification("An error occurred during upload.", "danger")
@@ -115,6 +112,7 @@ export default {
       this.uploadFailed = false
       this.uploadSuccess = false
       this.errorMessage = ""
+      this.$emit('modalReset')
     },
     showNotification(message, variant) {
       this.$bvToast.toast(message, {
diff --git a/resources/assets/js/pages/content/whatnow.vue b/resources/assets/js/pages/content/whatnow.vue
index 667ae32..31869bc 100644
--- a/resources/assets/js/pages/content/whatnow.vue
+++ b/resources/assets/js/pages/content/whatnow.vue
@@ -72,9 +72,16 @@
 
       <b-col lg="5">
         <div class="d-flex justify-content-start align-items-start">
+          <!-- NS IMG -->
           <div slot="button-content" class="text-dark py-0 mr-3">
             <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
-            <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
+            <div v-else class="upload-img-button">
+              <b-button :variant="'link'" @click="openUploadModal(logoType.NS)"
+                class="p-0 d-flex flex-column align-items-center justify-content-center">
+                <fa :icon="['fas', 'plus']" />
+                <span>Add a logo</span>
+              </b-button>
+            </div>
           </div>
           <b-row>
             <b-col lg="12">
@@ -123,9 +130,16 @@
       <b-col lg="12">
         <div v-for="(contributor, index) in attributionEditTranslation.contributors" :key="index">
           <div class="d-flex justify-content-start align-items-start">
+            <!-- CONTRIBUTOR IMG -->
             <div slot="button-content" class="text-dark py-0 mr-3">
               <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
-              <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
+              <div v-else class="upload-img-button">
+                <b-button :variant="'link'"@click="openUploadModal(logoType.CONTRIBUTOR, index)"
+                  class="p-0 d-flex flex-column align-items-center justify-content-center">
+                  <fa :icon="['fas', 'plus']" />
+                  <span>Add a logo</span>
+                </b-button>
+              </div>
             </div>
             <b-form-group :label="$t('content.message_editor.contributor_name_label')" class="w-50"
               :label-for="'contributorName' + index">
@@ -247,6 +261,8 @@
       :ok-title="$t('common.add')" :cancel-title="$t('common.cancel')">
       <b-form-select v-model="languageToAdd" :options="filteredLanguages" />
     </b-modal>
+
+    <upload-modal ref="uploadModal" @modalReset="handleUploadModalReset" @fileUploaded="handleFileUploaded" @fileUploadFailed="fileUploadFailed" :showModal="showUploadImage"></upload-modal>
   </b-container>
 
 </template>
@@ -262,7 +278,8 @@ import * as permissionsList from '../../store/permissions'
 import Spooky from '~/components/global/Spooky'
 import axios from 'axios'
 import { languages } from 'countries-list'
-import Avatar from 'vue-avatar'
+import UploadModal from '~/components/global/UploadModal'
+
 export default {
   components: {
     SelectSociety,
@@ -270,7 +287,7 @@ export default {
     Spooky,
     WhatnowList,
     PageBanner,
-    Avatar
+    UploadModal
   },
   props: ['countryCode', 'regionSlug'],
   data() {
@@ -301,7 +318,15 @@ export default {
         errors: {}
       },
       editing: false,
-      contributors: []
+      contributors: [],
+      showUploadImage: false,
+      logoType: {
+        NS: 'NS',
+        CONTRIBUTOR: 'CONTRIBUTOR'
+      },
+      logoTypeSelected: null,
+      logoFileUrl: null,
+      contributorIndex: null
     }
   },
   watch: {
@@ -566,7 +591,22 @@ export default {
       }
 
       return true;
-    }
+    },
+    openUploadModal(type, contributorIndex = null) {
+      this.logoTypeSelected = type
+      this.showUploadImage = true
+      this.contributorIndex = contributorIndex
+    },
+    handleUploadModalReset() {
+      this.showUploadImage = false
+      this.logoTypeSelected = null
+      this.logoFileUrl = null
+      this.contributorIndex = null
+    },
+    handleFileUploaded(event) {
+      console.log('event upload file', event)
+      // this.attributionEditTranslation.logo = file
+    },
   },
   metaInfo() {
     return { title: this.$t('content.whatnow.whatnow') }
@@ -666,13 +706,28 @@ export default {
     button {
       margin-right: 50px;
       font-size: 18px;
-      
+
       &:focus {
         box-shadow: none;
         border-color: $red;
       }
     }
   }
+
+  .upload-img-button {
+    .btn {
+      font-size: 8px;
+      color: #838383;
+      background-color: #fff;
+      height: 60px;
+      width: 60px;
+      border-radius: 50%;
+
+      .fa-plus {
+        font-size: 12px;
+      }
+    }
+  }
 }
 
 .whatnow-message-editor-tabs.nav-tabs {

From a1e650b08fdd46de62b2d4c03c2b8c28fd081f53 Mon Sep 17 00:00:00 2001
From: Juan24 <93536474+juanbroder24@users.noreply.github.com>
Date: Sat, 22 Feb 2025 12:48:22 -0300
Subject: [PATCH 07/10] file controller

---
 app/Http/Controllers/FileController.php | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 app/Http/Controllers/FileController.php

diff --git a/app/Http/Controllers/FileController.php b/app/Http/Controllers/FileController.php
new file mode 100644
index 0000000..1126a81
--- /dev/null
+++ b/app/Http/Controllers/FileController.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Classes\RcnApi\RcnApiClient;
+use Illuminate\Http\Request;
+
+class FileController extends Controller
+{
+    protected $rcnApiClient;
+
+    public function __construct(RcnApiClient $rcnApiClient)
+    {
+        $this->rcnApiClient = $rcnApiClient;
+    }
+
+    public function uploadFile(Request $request)
+    {
+        $request->validate([
+            'file' => 'required|file'
+        ]);
+
+        $file = $request->file('file');
+        $filePath = $file->getPathname();
+        $fileName = $file->getClientOriginalName();
+
+        try {
+            $response = $this->rcnApiClient->whatnow()->uploadFile($filePath, $fileName);
+            return response()->json($response);
+        } catch (\Exception $e) {
+            return response()->json(['error' => 'File upload failed'], 500);
+        }
+    }
+}

From 73af443cc06c52f043d578445384eac3f36962b4 Mon Sep 17 00:00:00 2001
From: "LDFOUR\\luisd" <luisd@jazusoft.com>
Date: Sat, 22 Feb 2025 17:29:21 -0300
Subject: [PATCH 08/10] WN-146, feature: upload logos (NS and Contributors)
 using UploadModal component.

---
 app/Classes/RcnApi/Entities/Organisation.php  |  10 ++
 .../js/components/global/UploadModal.vue      |   9 +-
 resources/assets/js/pages/content/whatnow.vue | 125 +++++++++++++++---
 3 files changed, 121 insertions(+), 23 deletions(-)

diff --git a/app/Classes/RcnApi/Entities/Organisation.php b/app/Classes/RcnApi/Entities/Organisation.php
index b536933..d287503 100644
--- a/app/Classes/RcnApi/Entities/Organisation.php
+++ b/app/Classes/RcnApi/Entities/Organisation.php
@@ -18,6 +18,8 @@ class Organisation implements \JsonSerializable, Arrayable
     
     protected $translations = [];
 
+    protected $imageUrl;
+
     
     public static function createFromArray(array $array)
     {
@@ -25,6 +27,7 @@ public static function createFromArray(array $array)
         $attribution->name = $array['name'];
         $attribution->countryCode = $array['countryCode'];
         $attribution->url = $array['url'];
+        $attribution->imageUrl = $array['imageUrl'];
 
         if (is_array($array['translations'])) {
             foreach ($array['translations'] as $translationArray) {
@@ -65,6 +68,11 @@ public function getTranslations(): array
         return $this->translations;
     }
 
+    public function getLogo(): ?string
+    {
+        return $this->imageUrl;
+    }
+
     
     public function getTranslationsByLanguage(string $languageCode): ?OrganisationTranslation
     {
@@ -99,6 +107,7 @@ public function toArray(): array
             'countryCode' => $this->countryCode,
             'name' => $this->name,
             'url' => $this->url,
+            'imageUrl' => $this->imageUrl,
             'translations' => array_values(array_map(function (OrganisationTranslation $translation) {
                 return $translation->toArray();
             }, $this->translations))
@@ -111,6 +120,7 @@ public function jsonSerialize(): array
         return [
             'name' => $this->name,
             'url' => $this->url,
+            'imageUrl' => $this->imageUrl,
             'translations' => $this->translations
         ];
     }
diff --git a/resources/assets/js/components/global/UploadModal.vue b/resources/assets/js/components/global/UploadModal.vue
index f21f516..fd9f127 100644
--- a/resources/assets/js/components/global/UploadModal.vue
+++ b/resources/assets/js/components/global/UploadModal.vue
@@ -25,7 +25,7 @@ import axios from 'axios'
 import { BToast } from 'bootstrap-vue'
 
 export default {
-  props: ['disabled', 'showModal'],
+  props: ['disabled', 'showModal', 'fileName'],
   data() {
     return {
       file: null,
@@ -41,7 +41,12 @@ export default {
       this.$refs.fileInput.click()
     },
     handleFileUpload(event) {
-      this.file = event.target.files[0]
+      const file = event.target.files[0];
+      const fileExtension = file.name.split('.').pop()
+
+      const renamedFile = new File([file], this.fileName + '.' + fileExtension, { type: file.type });
+      
+      this.file = renamedFile;
 
       if (!this.file) return
 
diff --git a/resources/assets/js/pages/content/whatnow.vue b/resources/assets/js/pages/content/whatnow.vue
index 31869bc..07e1f62 100644
--- a/resources/assets/js/pages/content/whatnow.vue
+++ b/resources/assets/js/pages/content/whatnow.vue
@@ -74,12 +74,14 @@
         <div class="d-flex justify-content-start align-items-start">
           <!-- NS IMG -->
           <div slot="button-content" class="text-dark py-0 mr-3">
-            <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
-            <div v-else class="upload-img-button">
-              <b-button :variant="'link'" @click="openUploadModal(logoType.NS)"
+            <div class="upload-img-button">
+              <b-button :variant="'link'" @click="openUploadModal(logoType.NS)" :disabled="isFormDisabled"
                 class="p-0 d-flex flex-column align-items-center justify-content-center">
-                <fa :icon="['fas', 'plus']" />
-                <span>Add a logo</span>
+                <img  :src="attributionToEdit.imageUrl" v-if="attributionToEdit.imageUrl" />
+                <div class="upload-img-button-controls">
+                  <fa :icon="['fas', 'plus']" />
+                  <span>Add a logo</span>
+                </div>
               </b-button>
             </div>
           </div>
@@ -132,12 +134,14 @@
           <div class="d-flex justify-content-start align-items-start">
             <!-- CONTRIBUTOR IMG -->
             <div slot="button-content" class="text-dark py-0 mr-3">
-              <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
-              <div v-else class="upload-img-button">
-                <b-button :variant="'link'"@click="openUploadModal(logoType.CONTRIBUTOR, index)"
+              <div class="upload-img-button">
+                <b-button :variant="'link'" @click="openUploadModal(logoType.CONTRIBUTOR, index)" :disabled="isFormDisabled"
                   class="p-0 d-flex flex-column align-items-center justify-content-center">
-                  <fa :icon="['fas', 'plus']" />
-                  <span>Add a logo</span>
+                  <img  :src="contributor.logo" v-if="contributor.logo" />
+                  <div class="upload-img-button-controls">
+                    <fa :icon="['fas', 'plus']" />
+                    <span>Add a logo</span>
+                  </div>
                 </b-button>
               </div>
             </div>
@@ -150,6 +154,10 @@
                 {{ $t('common.not_empty') }}
               </b-form-invalid-feedback>
             </b-form-group>
+            <b-button variant="link" class="align-self-center ml-1 contributor-delete-btn" size="sm" v-if="canEditAttribution && (languageToAdd || editing)"
+              @click="deleteContributor(index)" :disabled="!canEditAttribution" :key="'cancel'">
+              <font-awesome-icon :icon="['fas', 'trash']" />
+            </b-button>
           </div>
         </div>
       </b-col>
@@ -262,7 +270,7 @@
       <b-form-select v-model="languageToAdd" :options="filteredLanguages" />
     </b-modal>
 
-    <upload-modal ref="uploadModal" @modalReset="handleUploadModalReset" @fileUploaded="handleFileUploaded" @fileUploadFailed="fileUploadFailed" :showModal="showUploadImage"></upload-modal>
+    <upload-modal ref="uploadModal" :fileName="logoFileName" @modalReset="handleUploadModalReset" @fileUploaded="handleFileUploaded" :showModal="showUploadImage"></upload-modal>
   </b-container>
 
 </template>
@@ -310,6 +318,7 @@ export default {
         countryCode: '',
         url: '',
         name: '',
+        imageUrl: '',
         translations: [],
         contributors: []
       },
@@ -325,7 +334,7 @@ export default {
         CONTRIBUTOR: 'CONTRIBUTOR'
       },
       logoTypeSelected: null,
-      logoFileUrl: null,
+      logoFileName: null,
       contributorIndex: null
     }
   },
@@ -504,6 +513,21 @@ export default {
         return
       }
 
+      //parse path img
+      if (this.attributionToEdit.imageUrl) {
+        const path = this.attributionToEdit.imageUrl.split("/").pop();
+        this.attributionToEdit.imageUrl = path;
+      }
+      if (this.attributionEditTranslation.contributors.length > 0) {
+        const { contributors } = this.attributionEditTranslation
+        this.attributionEditTranslation.contributors = contributors.map(contributor => {
+          if (contributor.logo) {
+            const path = contributor.logo.split("/").pop();
+            return { ...contributor, logo: path }
+          }
+          return contributor
+        })
+      }
 
       try {
         await this.$store.dispatch('content/updateAttribution', { countryCode: this.selectedSoc.countryCode, data: this.attributionToEdit })
@@ -519,18 +543,18 @@ export default {
       }
     },
     setAttributionToEdit() {
-      console.log('this.attribution', this.attribution)
       if (this.attribution) {
         this.attributionToEdit = JSON.parse(JSON.stringify(this.attribution))
         const attributionTranslation = this.attributionToEdit.translations.find(translation => translation.languageCode === this.selectedLanguage)
-        console.log('attributionTranslation', attributionTranslation)
         if (!attributionTranslation) {
           const newTranslation = {
             attributionMessage: '',
             languageCode: this.selectedLanguage,
             name: '',
             published: false,
-            contributors: []
+            contributors: [],
+            imageUrl: '',
+            
           }
           this.attributionToEdit.translations.push(newTranslation)
           this.attributionEditTranslation = newTranslation
@@ -596,17 +620,32 @@ export default {
       this.logoTypeSelected = type
       this.showUploadImage = true
       this.contributorIndex = contributorIndex
+
+      if (type === this.logoType.NS) {
+        this.logoFileName = this.selectedSoc.countryCode + '_logo'
+      } else {
+        const name = this.selectedSoc.countryCode + '_contributor_logo'
+        this.logoFileName = name + contributorIndex;
+      }
     },
     handleUploadModalReset() {
       this.showUploadImage = false
       this.logoTypeSelected = null
-      this.logoFileUrl = null
+      this.logoFileName = null
       this.contributorIndex = null
     },
-    handleFileUploaded(event) {
-      console.log('event upload file', event)
-      // this.attributionEditTranslation.logo = file
+    handleFileUploaded({ path }) {
+      if (this.logoTypeSelected === this.logoType.NS) {
+        this.attributionToEdit.imageUrl = path
+      } else {
+        this.attributionEditTranslation.contributors[this.contributorIndex].logo = path
+      }
+      this.publishAttribution(true)
+      this.handleUploadModalReset()
     },
+    deleteContributor(index) {
+      this.attributionEditTranslation.contributors.splice(index, 1)
+    }
   },
   metaInfo() {
     return { title: this.$t('content.whatnow.whatnow') }
@@ -677,6 +716,14 @@ export default {
 
       return this.selectedRegion.translations[0]?.title || ""
     },
+    async isValidImage(url) {
+      try {
+        const response = await fetch(url, { method: 'HEAD' });
+        return response.ok && response.headers.get("content-type")?.startsWith("image/");
+      } catch (error) {
+        return false;
+      }
+    },
     ...mapGetters({
       user: 'auth/user',
       currentContent: 'content/currentContent',
@@ -715,6 +762,7 @@ export default {
   }
 
   .upload-img-button {
+    
     .btn {
       font-size: 8px;
       color: #838383;
@@ -722,10 +770,39 @@ export default {
       height: 60px;
       width: 60px;
       border-radius: 50%;
+      position: relative;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: contain;
+      }
 
-      .fa-plus {
-        font-size: 12px;
+      .upload-img-button-controls {
+        background-color: rgba(0, 0, 0, 0.2);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        span {
+          font-size: 8px;
+          color: #838383;
+        }
+
+        .fa-plus {
+          font-size: 12px;
+        }
       }
+
+
     }
   }
 }
@@ -839,5 +916,11 @@ export default {
   textarea {
     min-height: 115px;
   }
+
+  .contributor-delete-btn {
+    svg {
+      color: $red;
+    }	
+  }
 }
 </style>
\ No newline at end of file

From fa0f0470246a59473995f8b66e4075f7e017f9ce Mon Sep 17 00:00:00 2001
From: "LDFOUR\\luisd" <luisd@jazusoft.com>
Date: Sat, 22 Feb 2025 18:02:31 -0300
Subject: [PATCH 09/10] WN-146, I added colors variables

---
 resources/assets/js/pages/content/whatnow.vue | 42 ++++++++++---------
 resources/assets/sass/_variables.scss         |  3 ++
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/resources/assets/js/pages/content/whatnow.vue b/resources/assets/js/pages/content/whatnow.vue
index 07e1f62..6cea8a9 100644
--- a/resources/assets/js/pages/content/whatnow.vue
+++ b/resources/assets/js/pages/content/whatnow.vue
@@ -518,15 +518,19 @@ export default {
         const path = this.attributionToEdit.imageUrl.split("/").pop();
         this.attributionToEdit.imageUrl = path;
       }
-      if (this.attributionEditTranslation.contributors.length > 0) {
-        const { contributors } = this.attributionEditTranslation
-        this.attributionEditTranslation.contributors = contributors.map(contributor => {
-          if (contributor.logo) {
-            const path = contributor.logo.split("/").pop();
-            return { ...contributor, logo: path }
+
+      if (this.attributionToEdit.translations?.length > 0) {
+        for (const translation of this.attributionToEdit.translations) {
+          if (translation.contributors.length > 0) {
+            translation.contributors = translation.contributors.map(contributor => {
+              if (contributor.logo) {
+                const path = contributor.logo.split("/").pop();
+                return { ...contributor, logo: path }
+              }
+              return contributor
+            })
           }
-          return contributor
-        })
+        }
       }
 
       try {
@@ -624,7 +628,7 @@ export default {
       if (type === this.logoType.NS) {
         this.logoFileName = this.selectedSoc.countryCode + '_logo'
       } else {
-        const name = this.selectedSoc.countryCode + '_contributor_logo'
+        const name = this.selectedSoc.countryCode + '_' + this.selectedLanguage + '_contributor_logo'
         this.logoFileName = name + contributorIndex;
       }
     },
@@ -638,7 +642,7 @@ export default {
       if (this.logoTypeSelected === this.logoType.NS) {
         this.attributionToEdit.imageUrl = path
       } else {
-        this.attributionEditTranslation.contributors[this.contributorIndex].logo = path
+        this.contributors[this.contributorIndex].logo = path
       }
       this.publishAttribution(true)
       this.handleUploadModalReset()
@@ -765,8 +769,8 @@ export default {
     
     .btn {
       font-size: 8px;
-      color: #838383;
-      background-color: #fff;
+      color: $bg-upload-button;
+      background-color: $white;
       height: 60px;
       width: 60px;
       border-radius: 50%;
@@ -777,11 +781,10 @@ export default {
         width: 100%;
         height: 100%;
         border-radius: 50%;
-        object-fit: contain;
+        object-fit: cover;
       }
 
       .upload-img-button-controls {
-        background-color: rgba(0, 0, 0, 0.2);
         position: absolute;
         width: 100%;
         height: 100%;
@@ -794,7 +797,6 @@ export default {
 
         span {
           font-size: 8px;
-          color: #838383;
         }
 
         .fa-plus {
@@ -818,7 +820,7 @@ export default {
     left: 0;
     width: 100%;
     height: 1px;
-    background-color: #dee2e6;
+    background-color: $border-tabs;
     z-index: -1;
   }
 
@@ -842,7 +844,7 @@ export default {
       border: none;
     }
 
-    background-color: #f3f3f3;
+    background-color: $bg-add-lang;
     width: 25px;
     height: 25px;
     border-radius: 50%;
@@ -879,7 +881,7 @@ export default {
   h4 {
     font-size: 24px;
     font-weight: 500;
-    color: #1e1e1e;
+    color: $text-dark;
   }
 }
 
@@ -887,12 +889,12 @@ export default {
   h1 {
     font-size: 38px;
     font-weight: 600;
-    color: #1e1e1e;
+    color: $text-dark;
   }
 }
 
 .whatnow-message-editor-form-card {
-  background: #F7F7F7;
+  background: $card-solid-bg;
   border-radius: 10px;
 
   label {
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index 6fe2d10..839ecfd 100644
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -53,6 +53,7 @@ $border-primary-2: solid 2px $red;
 $border-primary-3: solid 3px $red;
 $border-separator: solid 1px #e5e5e5;
 $urgency-card-border: solid 1px #e6e6e6;
+$border-tabs: #dee2e6;
 
 // Nav Pills
 $nav-pills-border-radius: 0;
@@ -66,6 +67,8 @@ $facebook-blue: #00447c;
 $google-red: $light-red;
 $bg-primary: $red;
 $bg-disabled: #e9e9e9;
+$bg-upload-button: #838383;
+$bg-add-lang: #f3f3f3;
 
 // Font
 $font-size-base: 0.75rem;

From 9f4f1ff207a7d995f2fb75fb9094a79ceee21bdd Mon Sep 17 00:00:00 2001
From: "LDFOUR\\luisd" <luisd@jazusoft.com>
Date: Sat, 22 Feb 2025 18:28:02 -0300
Subject: [PATCH 10/10] upload modal texts

---
 resources/assets/js/components/global/UploadModal.vue | 8 ++++----
 resources/lang/en.json                                | 7 ++++++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/components/global/UploadModal.vue b/resources/assets/js/components/global/UploadModal.vue
index fd9f127..366020d 100644
--- a/resources/assets/js/components/global/UploadModal.vue
+++ b/resources/assets/js/components/global/UploadModal.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <!-- Modal -->
-    <b-modal v-model="showModal" title="Upload File" @hide="resetModal">
+    <b-modal v-model="showModal" title="Upload File" @hide="resetModal" hide-footer>
       <div class="upload-area" @click="triggerFileInput" v-if="!file">
         <input type="file" ref="fileInput" @change="handleFileUpload" class="file-input" />
-        <p>Click or drag file to this area to upload</p>
+        <p>{{ $t('upload_modal.drag_button_text') }}</p>
       </div>
 
       <div v-if="file" class="file-preview">
@@ -12,10 +12,10 @@
         <b-button variant="danger" size="sm" class="thin-x" @click="removeFile">X</b-button>
       </div>
 
-      <b-button v-if="file && !uploading" @click="uploadFile" class="global-button-style">Upload</b-button>
+      <b-button v-if="file && !uploading" @click="uploadFile" class="global-button-style">{{$t('upload_modal.button_text')}}</b-button>
 
       <b-progress v-if="uploading" :max="100" :value="progress" class="mb-3" :variant="uploadFailed ? 'danger' : 'success'"></b-progress>
-      <p v-if="uploading">Uploading... {{ progress }}%</p>
+      <p v-if="uploading">{{$t('common.upploading')}}... {{ progress }}%</p>
     </b-modal>
   </div>
 </template>
diff --git a/resources/lang/en.json b/resources/lang/en.json
index 56b27ae..4144df5 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -318,7 +318,8 @@
     "email_sent": "Email sent",
     "duplicate_lang_error": "Sorry, the chosen language already exists",
     "duplicate_lang_description": "Please either edit the existing language or select a new language from the dropdown",
-    "estimated_users": "Number of estimated users"
+    "estimated_users": "Number of estimated users",
+    "upploading": "Uploading"
   },
   "banners": {
     "get_started_create": ", Get Started and Create Your First App",
@@ -422,6 +423,10 @@
       }
     }
   },
+  "upload_modal": {
+    "drag_button_text": "Click or drag file to this area to upload",
+    "button_text": "Upload"
+  },
   "content": {
     "content": "Content",
     "audit_log": {