From eec90a1319173d0251bc1493e0efef75016c5319 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Fri, 19 Feb 2021 00:10:32 +0530
Subject: [PATCH] chore: Refactor Edit contact modal to separate form (#1805)

---
 .../dashboard/i18n/locale/en/contact.json     |   4 +-
 .../dashboard/conversation/ContactPanel.vue   |   2 +-
 .../conversation/contact/ContactForm.vue      | 215 ++++++++++++++++++
 .../conversation/contact/EditContact.vue      | 199 ++--------------
 4 files changed, 232 insertions(+), 188 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index da85ffab8..cc4e20bb5 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -43,7 +43,9 @@
   "EDIT_CONTACT": {
     "BUTTON_LABEL": "Edit Contact",
     "TITLE": "Edit contact",
-    "DESC": "Edit contact details",
+    "DESC": "Edit contact details"
+  },
+  "CONTACT_FORM": {
     "FORM": {
       "SUBMIT": "Submit",
       "CANCEL": "Cancel",
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index b594420a1..ccf65f329 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -7,7 +7,7 @@
     <div v-if="browser.browser_name" class="conversation--details">
       <contact-details-item
         v-if="location"
-        :title="$t('EDIT_CONTACT.FORM.LOCATION.LABEL')"
+        :title="$t('CONTACT_FORM.FORM.LOCATION.LABEL')"
         :value="location"
         icon="ion-map"
         emoji="📍"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
new file mode 100644
index 000000000..66f0e399f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -0,0 +1,215 @@
+<template>
+  <form class="contact--form" @submit.prevent="handleSubmit">
+    <div class="row">
+      <div class="medium-9 columns">
+        <label :class="{ error: $v.name.$error }">
+          {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
+          <input
+            v-model.trim="name"
+            type="text"
+            :placeholder="$t('CONTACT_FORM.FORM.NAME.PLACEHOLDER')"
+            @input="$v.name.$touch"
+          />
+        </label>
+
+        <label :class="{ error: $v.email.$error }">
+          {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.LABEL') }}
+          <input
+            v-model.trim="email"
+            type="text"
+            :placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
+            @input="$v.email.$touch"
+          />
+        </label>
+      </div>
+    </div>
+    <div class="medium-12 columns">
+      <label :class="{ error: $v.description.$error }">
+        {{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
+        <textarea
+          v-model.trim="description"
+          type="text"
+          :placeholder="$t('CONTACT_FORM.FORM.BIO.PLACEHOLDER')"
+          @input="$v.description.$touch"
+        />
+      </label>
+    </div>
+    <div class="row">
+      <woot-input
+        v-model.trim="phoneNumber"
+        class="medium-6 columns"
+        :label="$t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL')"
+        :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
+      />
+    </div>
+    <woot-input
+      v-model.trim="companyName"
+      class="medium-6 columns"
+      :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
+      :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
+    />
+    <div class="medium-12 columns">
+      <label>
+        Social Profiles
+      </label>
+      <div
+        v-for="socialProfile in socialProfileKeys"
+        :key="socialProfile.key"
+        class="input-group"
+      >
+        <span class="input-group-label">{{ socialProfile.prefixURL }}</span>
+        <input
+          v-model="socialProfileUserNames[socialProfile.key]"
+          class="input-group-field"
+          type="text"
+        />
+      </div>
+    </div>
+    <div class="modal-footer">
+      <div class="medium-12 columns">
+        <woot-submit-button
+          :loading="inProgress"
+          :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
+        />
+        <button class="button clear" @click.prevent="onCancel">
+          {{ $t('CONTACT_FORM.FORM.CANCEL') }}
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { DuplicateContactException } from 'shared/helpers/CustomErrors';
+import { required } from 'vuelidate/lib/validators';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+    inProgress: {
+      type: Boolean,
+      default: false,
+    },
+    onSubmit: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      hasADuplicateContact: false,
+      duplicateContact: {},
+      companyName: '',
+      description: '',
+      email: '',
+      name: '',
+      phoneNumber: '',
+      socialProfileUserNames: {
+        facebook: '',
+        twitter: '',
+        linkedin: '',
+      },
+      socialProfileKeys: [
+        { key: 'facebook', prefixURL: 'https://facebook.com/' },
+        { key: 'twitter', prefixURL: 'https://twitter.com/' },
+        { key: 'linkedin', prefixURL: 'https://linkedin.com/' },
+      ],
+    };
+  },
+  validations: {
+    name: {
+      required,
+    },
+    description: {},
+    email: {},
+    companyName: {},
+    phoneNumber: {},
+    bio: {},
+  },
+
+  watch: {
+    contact() {
+      this.setContactObject();
+    },
+  },
+  mounted() {
+    this.setContactObject();
+  },
+  methods: {
+    onCancel() {
+      this.$emit('cancel');
+    },
+    setContactObject() {
+      const { email: email, phone_number: phoneNumber, name } = this.contact;
+      const additionalAttributes = this.contact.additional_attributes || {};
+
+      this.name = name || '';
+      this.email = email || '';
+      this.phoneNumber = phoneNumber || '';
+      this.companyName = additionalAttributes.company_name || '';
+      this.description = additionalAttributes.description || '';
+      const {
+        social_profiles: socialProfiles = {},
+        screen_name: twitterScreenName,
+      } = additionalAttributes;
+      this.socialProfileUserNames = {
+        twitter: socialProfiles.twitter || twitterScreenName || '',
+        facebook: socialProfiles.facebook || '',
+        linkedin: socialProfiles.linkedin || '',
+      };
+    },
+    getContactObject() {
+      return {
+        id: this.contact.id,
+        name: this.name,
+        email: this.email,
+        phone_number: this.phoneNumber,
+        additional_attributes: {
+          ...this.contact.additional_attributes,
+          description: this.description,
+          company_name: this.companyName,
+          social_profiles: this.socialProfileUserNames,
+        },
+      };
+    },
+    resetDuplicate() {
+      this.hasADuplicateContact = false;
+      this.duplicateContact = {};
+    },
+    async handleSubmit() {
+      this.resetDuplicate();
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      try {
+        await this.onSubmit(this.getContactObject());
+        this.showAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
+      } catch (error) {
+        if (error instanceof DuplicateContactException) {
+          this.hasADuplicateContact = true;
+          this.duplicateContact = error.data;
+          this.showAlert(this.$t('CONTACT_FORM.CONTACT_ALREADY_EXIST'));
+        } else {
+          this.showAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.contact--form {
+  padding: var(--space-normal) var(--space-large) var(--space-large);
+
+  .columns {
+    padding: 0 var(--space-smaller);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
index 7b3a828fc..9d9569f62 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -7,96 +7,23 @@
         "
         :header-content="$t('EDIT_CONTACT.DESC')"
       />
-      <form class="edit-contact--form" @submit.prevent="onSubmit">
-        <div class="row">
-          <div class="medium-9 columns">
-            <label :class="{ error: $v.name.$error }">
-              {{ $t('EDIT_CONTACT.FORM.NAME.LABEL') }}
-              <input
-                v-model.trim="name"
-                type="text"
-                :placeholder="$t('EDIT_CONTACT.FORM.NAME.PLACEHOLDER')"
-                @input="$v.name.$touch"
-              />
-            </label>
-
-            <label :class="{ error: $v.email.$error }">
-              {{ $t('EDIT_CONTACT.FORM.EMAIL_ADDRESS.LABEL') }}
-              <input
-                v-model.trim="email"
-                type="text"
-                :placeholder="$t('EDIT_CONTACT.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
-                @input="$v.email.$touch"
-              />
-            </label>
-          </div>
-        </div>
-        <div class="medium-12 columns">
-          <label :class="{ error: $v.description.$error }">
-            {{ $t('EDIT_CONTACT.FORM.BIO.LABEL') }}
-            <textarea
-              v-model.trim="description"
-              type="text"
-              :placeholder="$t('EDIT_CONTACT.FORM.BIO.PLACEHOLDER')"
-              @input="$v.description.$touch"
-            />
-          </label>
-        </div>
-        <div class="row">
-          <woot-input
-            v-model.trim="phoneNumber"
-            class="medium-6 columns"
-            :label="$t('EDIT_CONTACT.FORM.PHONE_NUMBER.LABEL')"
-            :placeholder="$t('EDIT_CONTACT.FORM.PHONE_NUMBER.PLACEHOLDER')"
-          />
-        </div>
-        <woot-input
-          v-model.trim="companyName"
-          class="medium-6 columns"
-          :label="$t('EDIT_CONTACT.FORM.COMPANY_NAME.LABEL')"
-          :placeholder="$t('EDIT_CONTACT.FORM.COMPANY_NAME.PLACEHOLDER')"
-        />
-        <div class="medium-12 columns">
-          <label>
-            Social Profiles
-          </label>
-          <div
-            v-for="socialProfile in socialProfileKeys"
-            :key="socialProfile.key"
-            class="input-group"
-          >
-            <span class="input-group-label">{{ socialProfile.prefixURL }}</span>
-            <input
-              v-model="socialProfileUserNames[socialProfile.key]"
-              class="input-group-field"
-              type="text"
-            />
-          </div>
-        </div>
-        <div class="modal-footer">
-          <div class="medium-12 columns">
-            <woot-submit-button
-              :loading="uiFlags.isUpdating"
-              :button-text="$t('EDIT_CONTACT.FORM.SUBMIT')"
-            />
-            <button class="button clear" @click.prevent="onCancel">
-              {{ $t('EDIT_CONTACT.FORM.CANCEL') }}
-            </button>
-          </div>
-        </div>
-      </form>
+      <contact-form
+        :contact="contact"
+        :in-progress="uiFlags.isUpdating"
+        :on-submit="onSubmit"
+      />
     </div>
   </woot-modal>
 </template>
 
 <script>
-import alertMixin from 'shared/mixins/alertMixin';
-import { DuplicateContactException } from 'shared/helpers/CustomErrors';
-import { required } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
+import ContactForm from './ContactForm';
 
 export default {
-  mixins: [alertMixin],
+  components: {
+    ContactForm,
+  },
   props: {
     show: {
       type: Boolean,
@@ -107,120 +34,20 @@ export default {
       default: () => ({}),
     },
   },
-  data() {
-    return {
-      hasADuplicateContact: false,
-      duplicateContact: {},
-      companyName: '',
-      description: '',
-      email: '',
-      name: '',
-      phoneNumber: '',
-      socialProfileUserNames: {
-        facebook: '',
-        twitter: '',
-        linkedin: '',
-      },
-      socialProfileKeys: [
-        { key: 'facebook', prefixURL: 'https://facebook.com/' },
-        { key: 'twitter', prefixURL: 'https://twitter.com/' },
-        { key: 'linkedin', prefixURL: 'https://linkedin.com/' },
-      ],
-    };
-  },
-  validations: {
-    name: {
-      required,
-    },
-    description: {},
-    email: {},
-    companyName: {},
-    phoneNumber: {},
-    bio: {},
-  },
+
   computed: {
     ...mapGetters({
       uiFlags: 'contacts/getUIFlags',
     }),
   },
-  watch: {
-    contact() {
-      this.setContactObject();
-    },
-  },
-  mounted() {
-    this.setContactObject();
-  },
+
   methods: {
     onCancel() {
       this.$emit('cancel');
     },
-    setContactObject() {
-      const { email: email, phone_number: phoneNumber, name } = this.contact;
-      const additionalAttributes = this.contact.additional_attributes || {};
-
-      this.name = name || '';
-      this.email = email || '';
-      this.phoneNumber = phoneNumber || '';
-      this.companyName = additionalAttributes.company_name || '';
-      this.description = additionalAttributes.description || '';
-      const {
-        social_profiles: socialProfiles = {},
-        screen_name: twitterScreenName,
-      } = additionalAttributes;
-      this.socialProfileUserNames = {
-        twitter: socialProfiles.twitter || twitterScreenName || '',
-        facebook: socialProfiles.facebook || '',
-        linkedin: socialProfiles.linkedin || '',
-      };
-    },
-    getContactObject() {
-      return {
-        id: this.contact.id,
-        name: this.name,
-        email: this.email,
-        phone_number: this.phoneNumber,
-        additional_attributes: {
-          ...this.contact.additional_attributes,
-          description: this.description,
-          company_name: this.companyName,
-          social_profiles: this.socialProfileUserNames,
-        },
-      };
-    },
-    resetDuplicate() {
-      this.hasADuplicateContact = false;
-      this.duplicateContact = {};
-    },
-    async onSubmit() {
-      this.resetDuplicate();
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
-      try {
-        await this.$store.dispatch('contacts/update', this.getContactObject());
-        this.showAlert(this.$t('EDIT_CONTACT.SUCCESS_MESSAGE'));
-      } catch (error) {
-        if (error instanceof DuplicateContactException) {
-          this.hasADuplicateContact = true;
-          this.duplicateContact = error.data;
-          this.showAlert(this.$t('EDIT_CONTACT.CONTACT_ALREADY_EXIST'));
-        } else {
-          this.showAlert(this.$t('EDIT_CONTACT.ERROR_MESSAGE'));
-        }
-      }
+    async onSubmit(contactItem) {
+      await this.$store.dispatch('contacts/update', contactItem);
     },
   },
 };
 </script>
-
-<style scoped lang="scss">
-.edit-contact--form {
-  padding: var(--space-normal) var(--space-large) var(--space-large);
-
-  .columns {
-    padding: 0 var(--space-smaller);
-  }
-}
-</style>