From 20406dce012bdd16a49274691f66568782565d9c Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 7 Nov 2022 20:50:07 -0800
Subject: [PATCH] feat: Adds component to show location based messages (#5809)

- Adds a component to show location-type messages in the dashboard
---
 .../widgets/conversation/bubble/Location.vue  | 73 +++++++++++++++++++
 .../stories/LocationBubble.stories.js         | 34 +++++++++
 .../dashboard/i18n/locale/en/settings.json    |  3 +
 3 files changed, 110 insertions(+)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js

diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
new file mode 100644
index 000000000..6400c3d38
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="location message-text__wrap">
+    <div class="icon-wrap">
+      <fluent-icon icon="location" class="file--icon" size="32" />
+    </div>
+    <div class="meta">
+      <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>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    latitude: {
+      type: Number,
+      default: undefined,
+    },
+    longitude: {
+      type: Number,
+      default: undefined,
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    mapUrl() {
+      return `https://maps.google.com/?q=${this.latitude},${this.longitude}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.location {
+  display: flex;
+  flex-direction: row;
+  padding: var(--space-smaller) 0;
+  cursor: pointer;
+
+  .icon-wrap {
+    color: var(--white);
+    line-height: 1;
+    margin: 0 var(--space-smaller);
+  }
+
+  .text-block-title {
+    margin: 0;
+    color: var(--white);
+    word-break: break-word;
+  }
+
+  .button {
+    color: var(--s-25);
+  }
+
+  .meta {
+    padding-right: var(--space-normal);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js b/app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js
new file mode 100644
index 000000000..8f21a9da1
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js
@@ -0,0 +1,34 @@
+import LocationBubble from '../bubble/Location.vue';
+
+export default {
+  title: 'Components/Help Center',
+  component: LocationBubble,
+  argTypes: {
+    latitude: {
+      defaultValue: 1,
+      control: {
+        type: 'number',
+      },
+    },
+    longitude: {
+      defaultValue: 1,
+      control: {
+        type: 'number',
+      },
+    },
+    name: {
+      defaultValue: '420, Dope street',
+      control: {
+        type: 'string',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LocationBubble },
+  template: '<location-bubble v-bind="$props" />',
+});
+
+export const LocationBubbleView = Template.bind({});
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index c5f954b1c..13c46ced3 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -158,6 +158,9 @@
       "DOWNLOAD": "Download",
       "UPLOADING": "Uploading..."
     },
+    "LOCATION_BUBBLE": {
+      "SEE_ON_MAP": "See on map"
+    },
     "FORM_BUBBLE": {
       "SUBMIT": "Submit"
     }