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>

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,
   },

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>

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