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>