feat: Ability to receive location on whatsapp inbox (#5742)

- Ability to receive location messages on WhatsApp Inbox ref: https://github.com/chatwoot/chatwoot/issues/3398 Co-authored-by: Sojan Jose <sojan@pepalo.com>
2022-11-08 10:36:47 +05:00 · 2022-11-08 10:36:47 +05:00 · 6ff0c93659
commit 6ff0c93659
parent 20406dce01
5 changed files with 88 additions and 19 deletions
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@ -40,6 +40,12 @@
              :url="attachment.data_url"
              :readable-time="readableTime"
            />
+            <bubble-location
+              v-else-if="attachment.file_type === 'location'"
+              :latitude="attachment.coordinates_lat"
+              :longitude="attachment.coordinates_long"
+              :name="attachment.fallback_title"
+            />
            <bubble-file
              v-else
              :url="attachment.data_url"
@ -119,6 +125,7 @@ import BubbleImage from './bubble/Image';
 import BubbleFile from './bubble/File';
 import BubbleVideo from './bubble/Video.vue';
 import BubbleActions from './bubble/Actions';
+import BubbleLocation from './bubble/Location';

 import Spinner from 'shared/components/Spinner';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu';
@ -136,6 +143,7 @@ export default {
    BubbleFile,
    BubbleVideo,
    BubbleMailHead,
+    BubbleLocation,
    ContextMenu,
    Spinner,
  },
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
@ -7,14 +7,16 @@
      <h5 class="text-block-title text-truncate">
        {{ name }}
      </h5>
-      <a
-        class="download clear link button small"
-        rel="noreferrer noopener nofollow"
-        target="_blank"
-        :href="mapUrl"
-      >
-        {{ $t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
-      </a>
+      <div class="link-wrap">
+        <a
+          class="download clear link button small"
+          rel="noreferrer noopener nofollow"
+          target="_blank"
+          :href="mapUrl"
+        >
+          {{ $t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
+        </a>
+      </div>
    </div>
  </div>
 </template>
@ -51,23 +53,26 @@ export default {
  cursor: pointer;

  .icon-wrap {
-    color: var(--white);
+    color: var(--s-600);
    line-height: 1;
    margin: 0 var(--space-smaller);
  }

  .text-block-title {
    margin: 0;
-    color: var(--white);
+    color: var(--s-800);
    word-break: break-word;
  }

-  .button {
-    color: var(--s-25);
+  .meta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-right: var(--space-normal);
  }

-  .meta {
-    padding-right: var(--space-normal);
+  .link-wrap {
+    display: flex;
  }
 }
 </style>
--- a/app/services/whatsapp/incoming_message_base_service.rb
+++ b/app/services/whatsapp/incoming_message_base_service.rb
@ -23,6 +23,7 @@ class Whatsapp::IncomingMessageBaseService
      source_id: @processed_params[:messages].first[:id].to_s
    )
    attach_files
+    attach_location
    @message.save!
  end

@ -78,6 +79,7 @@ class Whatsapp::IncomingMessageBaseService
    return :image if %w[image sticker].include?(file_type)
    return :audio if %w[audio voice].include?(file_type)
    return :video if ['video'].include?(file_type)
+    return :location if ['location'].include?(file_type)

    :file
  end
@ -91,7 +93,7 @@ class Whatsapp::IncomingMessageBaseService
  end

  def attach_files
-    return if %w[text button interactive].include?(message_type)
+    return if %w[text button interactive location].include?(message_type)

    attachment_payload = @processed_params[:messages].first[message_type.to_sym]
    attachment_file = download_attachment_file(attachment_payload)
@ -111,4 +113,19 @@ class Whatsapp::IncomingMessageBaseService
  def download_attachment_file(attachment_payload)
    Down.download(inbox.channel.media_url(attachment_payload[:id]), headers: inbox.channel.api_headers)
  end
+
+  def attach_location
+    return unless @processed_params[:messages].first[:type] == 'location'
+
+    location = @processed_params[:messages].first['location']
+    location_name = location['name'] ? "#{location['name']}, #{location['address']}" : ''
+    @message.attachments.new(
+      account_id: @message.account_id,
+      file_type: file_content_type(message_type),
+      coordinates_lat: location['latitude'],
+      coordinates_long: location['longitude'],
+      fallback_title: location_name,
+      external_url: location['url']
+    )
+  end
 end
--- a/db/seeds.rb
+++ b/db/seeds.rb
@ -66,7 +66,21 @@ unless Rails.env.production?
  # sample email collect
  Seeders::MessageSeeder.create_sample_email_collect_message conversation

-  Message.create!(content: 'Hello', account: account, inbox: inbox, conversation: conversation, message_type: :incoming)
+  Message.create!(content: 'Hello', account: account, inbox: inbox, conversation: conversation, sender: contact_inbox.contact,
+                  message_type: :incoming)
+
+  # sample location message
+  #
+  location_message = Message.new(content: 'location', account: account, inbox: inbox, sender: contact_inbox.contact, conversation: conversation,
+                                 message_type: :incoming)
+  location_message.attachments.new(
+    account_id: account.id,
+    file_type: 'location',
+    coordinates_lat: 37.7893768,
+    coordinates_long: -122.3895553,
+    fallback_title: 'Bay Bridge, San Francisco, CA, USA'
+  )
+  location_message.save!

  # sample card
  Seeders::MessageSeeder.create_sample_cards_message conversation
--- a/spec/services/whatsapp/incoming_message_service_spec.rb
+++ b/spec/services/whatsapp/incoming_message_service_spec.rb
@ -39,8 +39,8 @@ describe Whatsapp::IncomingMessageService do
      end
    end

-    context 'when ignores the message' do
-      it 'with message type is ephemeral' do
+    context 'when unsupported message types' do
+      it 'ignores type ephemeral' do
        params = {
          'contacts' => [{ 'profile' => { 'name' => 'Sojan Jose' }, 'wa_id' => '2423423243' }],
          'messages' => [{ 'from' => '2423423243', 'id' => 'SDFADSf23sfasdafasdfa', 'text' => { 'body' => 'Test' },
@ -53,7 +53,7 @@ describe Whatsapp::IncomingMessageService do
        expect(whatsapp_channel.inbox.messages.count).to eq(0)
      end

-      it 'with message type is unsupported' do
+      it 'ignores type unsupported' do
        params = {
          'contacts' => [{ 'profile' => { 'name' => 'Sojan Jose' }, 'wa_id' => '2423423243' }],
          'messages' => [{
@ -132,5 +132,30 @@ describe Whatsapp::IncomingMessageService do
        expect(whatsapp_channel.inbox.messages.first.attachments.present?).to be true
      end
    end
+
+    context 'when valid location message params' do
+      it 'creates appropriate conversations, message and contacts' do
+        params = {
+          'contacts' => [{ 'profile' => { 'name' => 'Sojan Jose' }, 'wa_id' => '2423423243' }],
+          'messages' => [{ 'from' => '2423423243', 'id' => 'SDFADSf23sfasdafasdfa',
+                           'location' => { 'id' => 'b1c68f38-8734-4ad3-b4a1-ef0c10d683',
+                                           'address': 'San Francisco, CA, USA',
+                                           'latitude': 37.7893768,
+                                           'longitude': -122.3895553,
+                                           'name': 'Bay Bridge',
+                                           'url': 'http://location_url.test' },
+                           'timestamp' => '1633034394', 'type' => 'location' }]
+        }.with_indifferent_access
+        described_class.new(inbox: whatsapp_channel.inbox, params: params).perform
+        expect(whatsapp_channel.inbox.conversations.count).not_to eq(0)
+        expect(Contact.all.first.name).to eq('Sojan Jose')
+        location_attachment = whatsapp_channel.inbox.messages.first.attachments.first
+        expect(location_attachment.file_type).to eq('location')
+        expect(location_attachment.fallback_title).to eq('Bay Bridge, San Francisco, CA, USA')
+        expect(location_attachment.coordinates_lat).to eq(37.7893768)
+        expect(location_attachment.coordinates_long).to eq(-122.3895553)
+        expect(location_attachment.external_url).to eq('http://location_url.test')
+      end
+    end
  end
 end