feat: Adds an option to edit City/Country (#6792)

* feat: Adds an option to edit City/Country

* chore: Minor fix

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -132,6 +132,17 @@
         "PLACEHOLDER": "Enter the company name",
         "LABEL": "Company Name"
       },
+      "COUNTRY": {
+        "PLACEHOLDER": "Enter the country name",
+        "LABEL": "Country Name",
+        "SELECT_PLACEHOLDER": "Select",
+        "REMOVE": "Remove",
+        "SELECT_COUNTRY": "Select Country"
+      },
+      "CITY": {
+        "PLACEHOLDER": "Enter the city name",
+        "LABEL": "City Name"
+      },
       "SOCIAL_PROFILES": {
         "FACEBOOK": {
           "PLACEHOLDER": "Enter the Facebook username",
@@ -346,5 +357,4 @@
       "ERROR_MESSAGE": "Could not merge contacts, try again!"
     }
   }
-
 }

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

@@ -78,6 +78,34 @@
       :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
       :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
     />
+    <div class="row">
+      <div class="medium-12 columns">
+        <label>
+          {{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
+        </label>
+        <multiselect
+          v-model="country"
+          track-by="id"
+          label="name"
+          :placeholder="$t('CONTACT_FORM.FORM.COUNTRY.PLACEHOLDER')"
+          selected-label
+          :select-label="$t('CONTACT_FORM.FORM.COUNTRY.SELECT_PLACEHOLDER')"
+          :deselect-label="$t('CONTACT_FORM.FORM.COUNTRY.REMOVE')"
+          :custom-label="countryNameWithCode"
+          :max-height="160"
+          :options="countries"
+          :allow-empty="true"
+          :option-height="104"
+        />
+      </div>
+    </div>
+    <woot-input
+      v-model="city"
+      class="columns"
+      :label="$t('CONTACT_FORM.FORM.CITY.LABEL')"
+      :placeholder="$t('CONTACT_FORM.FORM.CITY.PLACEHOLDER')"
+    />
+
     <div class="medium-12 columns">
       <label>
         Social Profiles
@@ -116,6 +144,7 @@ import {
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
 import { required, email } from 'vuelidate/lib/validators';
+import countries from 'shared/constants/countries.js';
 
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 
@@ -137,6 +166,7 @@ export default {
   },
   data() {
     return {
+      countries: countries,
       companyName: '',
       description: '',
       email: '',
@@ -144,6 +174,11 @@ export default {
       phoneNumber: '',
       avatarFile: null,
       avatarUrl: '',
+      country: {
+        id: '',
+        name: '',
+      },
+      city: '',
       socialProfileUserNames: {
         facebook: '',
         twitter: '',
@@ -172,7 +207,6 @@ export default {
     },
     bio: {},
   },
-
   watch: {
     contact() {
       this.setContactObject();
@@ -188,6 +222,11 @@ export default {
     onSuccess() {
       this.$emit('success');
     },
+    countryNameWithCode({ name, id }) {
+      if (!id) return name;
+      if (!name && !id) return '';
+      return `${name} (${id})`;
+    },
     setContactObject() {
       const {
         email: emailAddress,
@@ -200,6 +239,13 @@ export default {
       this.email = emailAddress || '';
       this.phoneNumber = phoneNumber || '';
       this.companyName = additionalAttributes.company_name || '';
+      this.country = {
+        id: additionalAttributes.country_code || '',
+        name:
+          additionalAttributes.country ||
+          this.$t('CONTACT_FORM.FORM.COUNTRY.SELECT_COUNTRY'),
+      };
+      this.city = additionalAttributes.city || '';
       this.description = additionalAttributes.description || '';
       this.avatarUrl = this.contact.thumbnail || '';
       const {
@@ -215,6 +261,12 @@ export default {
       };
     },
     getContactObject() {
+      if (this.country === null) {
+        this.country = {
+          id: '',
+          name: '',
+        };
+      }
       const contactObject = {
         id: this.contact.id,
         name: this.name,
@@ -224,6 +276,13 @@ export default {
           ...this.contact.additional_attributes,
           description: this.description,
           company_name: this.companyName,
+          country_code: this.country.id,
+          country:
+            this.country.name ===
+            this.$t('CONTACT_FORM.FORM.COUNTRY.SELECT_COUNTRY')
+              ? ''
+              : this.country.name,
+          city: this.city,
           social_profiles: this.socialProfileUserNames,
         },
       };
@@ -297,4 +356,10 @@ export default {
 .input-group-label {
   font-size: var(--font-size-small);
 }
+
+::v-deep {
+  .multiselect .multiselect__tags .multiselect__single {
+    padding-left: 0;
+  }
+}
 </style>