Feat: Create contact from contacts page (#1806)

* Add contact create modal to contacts page

* Test cases

* Review fixes

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -6,6 +6,7 @@
         :on-search-submit="onSearchSubmit"
         this-selected-contact-id=""
         :on-input-search="onInputSearch"
+        :on-toggle-create="onToggleCreate"
       />
       <contacts-table
         :contacts="records"
@@ -25,6 +26,7 @@
       :contact="selectedContact"
       :on-close="closeContactInfoPanel"
     />
+    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
   </div>
 </template>
 
@@ -34,6 +36,7 @@ import { mapGetters } from 'vuex';
 import ContactsHeader from './Header';
 import ContactsTable from './ContactsTable';
 import ContactInfoPanel from './ContactInfoPanel';
+import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
 import TableFooter from 'dashboard/components/widgets/TableFooter';
 
 export default {
@@ -42,11 +45,12 @@ export default {
     ContactsTable,
     TableFooter,
     ContactInfoPanel,
+    CreateContact,
   },
   data() {
     return {
       searchQuery: '',
-      showEditModal: false,
+      showCreateModal: false,
       selectedContactId: '',
     };
   },
@@ -123,6 +127,9 @@ export default {
       this.selectedContactId = '';
       this.showContactInfoPanelPane = false;
     },
+    onToggleCreate() {
+      this.showCreateModal = !this.showCreateModal;
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -24,6 +24,11 @@
             @click="onSearchSubmit"
           />
         </div>
+
+        <button class="button success icon" @click="onToggleCreate">
+          <i class="icon ion-android-add-circle" />
+          {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
+        </button>
       </div>
     </div>
   </header>
@@ -45,6 +50,15 @@ export default {
       type: Function,
       default: () => {},
     },
+    onToggleCreate: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      showCreateModal: false,
+    };
   },
   computed: {
     searchButtonClass() {
@@ -69,35 +83,41 @@ export default {
   width: 100%;
   margin-bottom: var(--space-slab);
 }
+
+.right-aligned-wrap {
+  display: flex;
+}
+
 .search-wrap {
   width: 400px;
-  height: 3.6rem;
+  height: 3.8rem;
   display: flex;
   align-items: center;
   position: relative;
+  margin-right: var(--space-small);
 
   .search-icon {
     position: absolute;
     top: 1px;
     left: var(--space-one);
-    height: 3.6rem;
+    height: 3.8rem;
     line-height: 3.6rem;
     font-size: var(--font-size-medium);
     color: var(--b-700);
   }
   .contact-search {
     margin: 0;
-    height: 3.6rem;
+    height: 3.8rem;
     width: 100%;
     padding-left: var(--space-large);
     padding-right: 6rem;
+    border-color: var(--s-100);
   }
 
   .button {
     margin-left: var(--space-small);
     height: 3.2rem;
-    top: var(--space-micro);
-    right: var(--space-micro);
+    right: var(--space-smaller);
     position: absolute;
     padding: 0 var(--space-small);
     transition: transform 100ms linear;

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

@@ -81,7 +81,10 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { DuplicateContactException } from 'shared/helpers/CustomErrors';
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
 import { required } from 'vuelidate/lib/validators';
 
 export default {
@@ -144,6 +147,9 @@ export default {
     onCancel() {
       this.$emit('cancel');
     },
+    onSuccess() {
+      this.$emit('success');
+    },
     setContactObject() {
       const { email: email, phone_number: phoneNumber, name } = this.contact;
       const additionalAttributes = this.contact.additional_attributes || {};
@@ -189,12 +195,15 @@ export default {
       }
       try {
         await this.onSubmit(this.getContactObject());
+        this.onSuccess();
         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 if (error instanceof ExceptionWithMessage) {
+          this.showAlert(error.data);
         } else {
           this.showAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
         }
@@ -212,4 +221,8 @@ export default {
     padding: 0 var(--space-smaller);
   }
 }
+
+.input-group-label {
+  font-size: var(--font-size-small);
+}
 </style>

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

@@ -0,0 +1,55 @@
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel">
+    <div class="column content-box">
+      <woot-modal-header
+        :header-title="$t('CREATE_CONTACT.TITLE')"
+        :header-content="$t('CREATE_CONTACT.DESC')"
+      />
+      <contact-form
+        :in-progress="uiFlags.isCreating"
+        :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
+      />
+    </div>
+  </woot-modal>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ContactForm from './ContactForm';
+
+export default {
+  components: {
+    ContactForm,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    ...mapGetters({
+      uiFlags: 'contacts/getUIFlags',
+    }),
+  },
+
+  methods: {
+    onCancel() {
+      this.$emit('cancel');
+    },
+    onSuccess() {
+      this.$emit('cancel');
+    },
+    async onSubmit(contactItem) {
+      await this.$store.dispatch('contacts/create', contactItem);
+    },
+  },
+};
+</script>

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

@@ -11,6 +11,8 @@
         :contact="contact"
         :in-progress="uiFlags.isUpdating"
         :on-submit="onSubmit"
+        @success="onSuccess"
+        @cancel="onCancel"
       />
     </div>
   </woot-modal>
@@ -45,6 +47,9 @@ export default {
     onCancel() {
       this.$emit('cancel');
     },
+    onSuccess() {
+      this.$emit('cancel');
+    },
     async onSubmit(contactItem) {
       await this.$store.dispatch('contacts/update', contactItem);
     },