chore: Improve location display in sidebar (#1509)

- Log IP Address on widget load - Save country code to contact
2020-12-13 22:23:56 +05:30
parent 060ef4a427
commit edb09d5a9c
10 changed files with 57 additions and 33 deletions
--- a/app/controllers/api/v1/accounts/contacts_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -35,7 +35,6 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
  def create
    ActiveRecord::Base.transaction do
      @contact = Current.account.contacts.new(contact_params)
-      set_ip
      @contact.save!
      @contact_inbox = build_contact_inbox
    end
@@ -43,7 +42,6 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController

  def update
    @contact.assign_attributes(contact_update_params)
-    set_ip
    @contact.save!
  rescue ActiveRecord::RecordInvalid => e
    render json: {
@@ -99,11 +97,4 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
  def fetch_contact
    @contact = Current.account.contacts.includes(contact_inboxes: [:inbox]).find(params[:id])
  end
-
-  def set_ip
-    return if @contact.account.feature_enabled?('ip_lookup')
-
-    @contact[:additional_attributes][:created_at_ip] ||= request.remote_ip
-    @contact[:additional_attributes][:updated_at_ip] = request.remote_ip
-  end
 end
--- a/app/controllers/widgets_controller.rb
+++ b/app/controllers/widgets_controller.rb
@@ -41,13 +41,21 @@ class WidgetsController < ActionController::Base
  def build_contact
    return if @contact.present?

-    contact_inbox = @web_widget.create_contact_inbox
+    contact_inbox = @web_widget.create_contact_inbox(additional_attributes)
    @contact = contact_inbox.contact

    payload = { source_id: contact_inbox.source_id, inbox_id: @web_widget.inbox.id }
    @token = ::Widget::TokenService.new(payload: payload).generate_token
  end

+  def additional_attributes
+    if @web_widget.inbox.account.feature_enabled?('ip_lookup')
+      { created_at_ip: request.remote_ip }
+    else
+      {}
+    end
+  end
+
  def permitted_params
    params.permit(:website_token, :cw_conversation)
  end
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/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,
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/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 || {}) };
    },
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/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,
        },
--- a/app/jobs/contact_ip_lookup_job.rb
+++ b/app/jobs/contact_ip_lookup_job.rb
@@ -24,8 +24,12 @@ class ContactIpLookupJob < ApplicationJob
    ip = get_contact_ip(contact)
    return if ip.blank?

-    contact.additional_attributes['city'] = Geocoder.search(ip).first.city
-    contact.additional_attributes['country'] = Geocoder.search(ip).first.country
+    geocoder_result = Geocoder.search(ip).first
+    return unless geocoder_result
+
+    contact.additional_attributes['city'] = geocoder_result.city
+    contact.additional_attributes['country'] = geocoder_result.country
+    contact.additional_attributes['country_code'] = geocoder_result.country_code
    contact.save!
  end

--- a/app/models/channel/web_widget.rb
+++ b/app/models/channel/web_widget.rb
@@ -62,9 +62,12 @@ class Channel::WebWidget < ApplicationRecord
    "
  end

-  def create_contact_inbox
+  def create_contact_inbox(additional_attributes = {})
    ActiveRecord::Base.transaction do
-      contact = inbox.account.contacts.create!(name: ::Haikunator.haikunate(1000))
+      contact = inbox.account.contacts.create!(
+        name: ::Haikunator.haikunate(1000),
+        additional_attributes: additional_attributes
+      )
      contact_inbox = ::ContactInbox.create!(
        contact_id: contact.id,
        inbox_id: inbox.id,
--- a/app/models/contact.rb
+++ b/app/models/contact.rb
@@ -38,9 +38,8 @@ class Contact < ApplicationRecord
  has_many :messages, as: :sender, dependent: :destroy

  before_validation :prepare_email_attribute
-  after_create_commit :dispatch_create_event
+  after_create_commit :dispatch_create_event, :ip_lookup
  after_update_commit :dispatch_update_event
-  after_commit :ip_lookup

  def get_source_id(inbox_id)
    contact_inboxes.find_by!(inbox_id: inbox_id).source_id
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "chart.js": "~2.5.0",
    "copy-text-to-clipboard": "^2.1.1",
    "core-js": "3",
+    "country-code-emoji": "^1.0.0",
    "date-fns": "^2.16.1",
    "dotenv": "^8.0.0",
    "foundation-sites": "~6.5.3",
--- a/yarn.lock
+++ b/yarn.lock
@@ -3213,6 +3213,11 @@ cosmiconfig@^6.0.0:
    path-type "^4.0.0"
    yaml "^1.7.2"

+country-code-emoji@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/country-code-emoji/-/country-code-emoji-1.0.0.tgz#7c77791839c9e9921beec08ef080caa7cfb8b40c"
+  integrity sha512-fBM5A49oZkOxOVb0bx7q7Hanlfh8e3z/r6/ZnFhbL57JXGIgWPC2HYrjXEyiGML7OFftDV/WfAlJdDkoAbj1Rg==
+
 create-ecdh@^4.0.0:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"