From 4fc2dc143c931f392291a5db7a1a62a62f5d73cc Mon Sep 17 00:00:00 2001
From: Clairton Rodrigo Heinzen <clairton.rodrigo@gmail.com>
Date: Fri, 27 Sep 2024 05:22:51 -0300
Subject: [PATCH] feat: show error campaign audience

---
 .../api/v1/accounts/campaigns_controller.rb   |  2 +-
 .../dashboard/i18n/locale/en/campaign.json    |  5 ++
 .../conversation/contact/ContactForm.vue      |  3 ++
 .../settings/campaigns/CampaignCard.vue       | 50 +++++++++++++------
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/app/controllers/api/v1/accounts/campaigns_controller.rb b/app/controllers/api/v1/accounts/campaigns_controller.rb
index bb1122be28ab0..6509ed606cf1e 100644
--- a/app/controllers/api/v1/accounts/campaigns_controller.rb
+++ b/app/controllers/api/v1/accounts/campaigns_controller.rb
@@ -3,7 +3,7 @@ class Api::V1::Accounts::CampaignsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
 
   def index
-    @campaigns = Current.account.campaigns.limit(50).order(created_at: :desc)
+    @campaigns = Current.account.campaigns.limit(200).order(created_at: :desc)
   end
 
   def show; end
diff --git a/app/javascript/dashboard/i18n/locale/en/campaign.json b/app/javascript/dashboard/i18n/locale/en/campaign.json
index bbcc463ee493c..99832e0bc115a 100644
--- a/app/javascript/dashboard/i18n/locale/en/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/en/campaign.json
@@ -121,6 +121,11 @@
       "HEADER": "Ongoing campaigns",
       "404": "There are no ongoing campaigns created",
       "INBOXES_NOT_FOUND": "Please create an website inbox and start adding campaigns"
+    },
+    "AUDIENCE": {
+      "REPORT": "Report",
+      "ERROR": "Error",
+      "FAILED": "Failed"
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 5281ed890e04b..436d1dd92d969 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -202,6 +202,9 @@ export default {
     },
     onPhoneNumberInputChange(value, code) {
       this.activeDialCode = code;
+      if (!code && value) {
+        this.phoneNumber = value;
+      }
     },
     setPhoneCode(code) {
       if (this.phoneNumber !== '' && this.parsePhoneNumber) {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
index c002171ba2aa1..e7512dff54d85 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
@@ -61,13 +61,19 @@ export default {
       }
       return reports;
     },
-  },
-  campaignListError() {
-    const audience = this.campaign.audience || [];
-    return audience
-      .filter(a => a.status === 'error')
-      .map(a => `${a.name}: ${a.phone_number}`)
-      .join('<br/>');
+    campaignListError() {
+      const audience = this.campaign.audience || [];
+      return audience
+        .filter(a => a.status === 'error')
+        .map(
+          a =>
+            `${this.$t('CONTACT_FORM.FORM.NAME.LABEL')}: ${a.name},
+             ${this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL')}: ${
+               a.phone_number
+             }`
+        )
+        .join('<br/>');
+    },
   },
   methods: {
     messageStamp,
@@ -139,16 +145,30 @@ export default {
       >
         {{ messageStamp(new Date(campaign.scheduled_at), 'LLL d, h:mm a') }}
       </div>
-      <div
-        v-if="campaign.inbox.channel_type == 'Channel::Whatsapp'"
-        class="mb-1 text-xs text-slate-700 dark:text-slate-500"
-      >
+    </div>
+
+    <div
+      v-if="campaign.inbox.channel_type == 'Channel::Whatsapp'"
+      class="flex flex-row items-center mt-5 space-x-3"
+    >
+      <div class="mb-1 text-xs text-slate-700 dark:text-slate-500">
+        {{ $t('CAMPAIGN.AUDIENCE.REPORT') }}:
+      </div>
+      <div class="mb-1 text-xs text-slate-700 dark:text-slate-500">
         {{ campaignReport }}
       </div>
-      <div
-        v-if="campaign.inbox.channel_type == 'Channel::Whatsapp'"
-        class="mb-1 text-xs text-slate-700 dark:text-slate-500"
-      >
+    </div>
+
+    <div
+      v-if="
+        campaign.inbox.channel_type == 'Channel::Whatsapp' && campaignListError
+      "
+      class="flex flex-row items-center mt-5 space-x-3"
+    >
+      <div class="mb-1 text-xs text-slate-700 dark:text-slate-500">
+        {{ $t('CAMPAIGN.AUDIENCE.ERROR') }}:
+      </div>
+      <div class="mb-1 text-xs text-slate-700 dark:text-slate-500">
         {{ campaignListError }}
       </div>
     </div>