chore: Improve location display in sidebar (#1509)

- Log IP Address on widget load
- Save country code to contact

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -5,6 +5,12 @@
     </span>
     <contact-info :contact="contact" :channel-type="channelType" />
     <div v-if="browser.browser_name" class="conversation--details">
+      <contact-details-item
+        v-if="location"
+        :title="$t('EDIT_CONTACT.FORM.LOCATION.LABEL')"
+        :value="location"
+        icon="ion-map"
+      />
       <contact-details-item
         v-if="browser.browser_name"
         :title="$t('CONTACT_PANEL.BROWSER')"
@@ -51,6 +57,7 @@ import ContactDetailsItem from './ContactDetailsItem.vue';
 import ContactInfo from './contact/ContactInfo';
 import ConversationLabels from './labels/LabelBox.vue';
 import ContactCustomAttributes from './ContactCustomAttributes';
+import flag from 'country-code-emoji';
 
 export default {
   components: {
@@ -99,6 +106,22 @@ export default {
       return `${this.browser.browser_name || ''} ${this.browser
         .browser_version || ''}`;
     },
+    location() {
+      const {
+        additional_attributes: {
+          country = '',
+          city = '',
+          country_code: countryCode,
+        },
+      } = this.contact;
+      const cityAndCountry = [city, country].filter(item => !!item).join(', ');
+
+      if (!cityAndCountry) {
+        return '';
+      }
+      const countryFlag = countryCode ? flag(countryCode) : '🌎';
+      return `${countryFlag} ${cityAndCountry}`;
+    },
     platformName() {
       const {
         platform_name: platformName,

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -13,8 +13,8 @@
         <div class="contact--name">
           {{ contact.name }}
         </div>
-        <div v-if="additionalAttibutes.description" class="contact--bio">
-          {{ additionalAttibutes.description }}
+        <div v-if="additionalAttributes.description" class="contact--bio">
+          {{ additionalAttributes.description }}
         </div>
         <social-icons :social-profiles="socialProfiles" />
         <div class="contact--metadata">
@@ -33,12 +33,13 @@
             :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
           />
           <contact-info-row
-            :value="additionalAttibutes.location"
+            v-if="additionalAttributes.location"
+            :value="additionalAttributes.location"
             icon="ion-map"
             :title="$t('CONTACT_PANEL.LOCATION')"
           />
           <contact-info-row
-            :value="additionalAttibutes.company_name"
+            :value="additionalAttributes.company_name"
             icon="ion-briefcase"
             :title="$t('CONTACT_PANEL.COMPANY')"
           />
@@ -89,14 +90,14 @@ export default {
     };
   },
   computed: {
-    additionalAttibutes() {
+    additionalAttributes() {
       return this.contact.additional_attributes || {};
     },
     socialProfiles() {
       const {
         social_profiles: socialProfiles,
         screen_name: twitterScreenName,
-      } = this.additionalAttibutes;
+      } = this.additionalAttributes;
 
       return { twitter: twitterScreenName, ...(socialProfiles || {}) };
     },

app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue

@@ -49,13 +49,6 @@
             :label="$t('EDIT_CONTACT.FORM.PHONE_NUMBER.LABEL')"
             :placeholder="$t('EDIT_CONTACT.FORM.PHONE_NUMBER.PLACEHOLDER')"
           />
-
-          <woot-input
-            v-model.trim="location"
-            class="medium-6 columns"
-            :label="$t('EDIT_CONTACT.FORM.LOCATION.LABEL')"
-            :placeholder="$t('EDIT_CONTACT.FORM.LOCATION.PLACEHOLDER')"
-          />
         </div>
         <woot-input
           v-model.trim="companyName"
@@ -121,7 +114,6 @@ export default {
       companyName: '',
       description: '',
       email: '',
-      location: '',
       name: '',
       phoneNumber: '',
       socialProfileUserNames: {
@@ -144,7 +136,6 @@ export default {
     email: {},
     companyName: {},
     phoneNumber: {},
-    location: {},
     bio: {},
   },
   computed: {
@@ -171,7 +162,6 @@ export default {
       this.name = name || '';
       this.email = email || '';
       this.phoneNumber = phoneNumber || '';
-      this.location = additionalAttributes.location || '';
       this.companyName = additionalAttributes.company_name || '';
       this.description = additionalAttributes.description || '';
       const {
@@ -193,7 +183,6 @@ export default {
         additional_attributes: {
           ...this.contact.additional_attributes,
           description: this.description,
-          location: this.location,
           company_name: this.companyName,
           social_profiles: this.socialProfileUserNames,
         },