feat: Create modal to merge two contacts (#2457)

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

@@ -91,9 +91,9 @@ export default {
 .close-button {
   position: absolute;
   right: var(--space-normal);
-  top: var(--space-slab);
+  top: 3.6rem;
   font-size: var(--font-size-big);
-  color: var(--color-heading);
+  color: var(--s-500);
 
   .close-icon {
     margin-right: var(--space-smaller);

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

@@ -222,8 +222,9 @@ export default {
       return this.additionalAttributes.initiated_at;
     },
     browserName() {
-      return `${this.browser.browser_name || ''} ${this.browser
-        .browser_version || ''}`;
+      return `${this.browser.browser_name || ''} ${
+        this.browser.browser_version || ''
+      }`;
     },
     contactAdditionalAttributes() {
       return this.contact.additional_attributes || {};
@@ -247,10 +248,8 @@ export default {
       return `${cityAndCountry} ${countryFlag}`;
     },
     platformName() {
-      const {
-        platform_name: platformName,
-        platform_version: platformVersion,
-      } = this.browser;
+      const { platform_name: platformName, platform_version: platformVersion } =
+        this.browser;
       return `${platformName || ''} ${platformVersion || ''}`;
     },
     channelType() {
@@ -421,10 +420,11 @@ export default {
 
 .close-button {
   position: absolute;
-  right: $space-normal;
-  top: $space-slab;
+  right: $space-two;
+  top: $space-slab + $space-two;
   font-size: $font-size-default;
   color: $color-heading;
+  z-index: 9999;
 }
 
 .conversation--labels {

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

@@ -48,59 +48,49 @@
           />
         </div>
       </div>
-      <div v-if="!showNewMessage">
-        <div>
-          <woot-button
-            class="edit-contact"
-            variant="link"
-            size="small"
-            @click="toggleEditModal"
-          >
-            {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-        <div v-if="isAdmin">
-          <woot-button
-            class="delete-contact"
-            variant="link"
-            size="small"
-            color-scheme="alert"
-            @click="toggleDeleteModal"
-            :disabled="uiFlags.isDeleting"
-          >
-            {{ $t('DELETE_CONTACT.BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-      <div v-else>
-        <div class="contact-actions">
-          <woot-button
-            v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
-            class="new-message"
-            icon="ion-chatboxes"
-            size="small expanded"
-            @click="toggleConversationModal"
-          />
-          <woot-button
-            v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
-            class="edit-contact"
-            icon="ion-edit"
-            variant="smooth"
-            size="small expanded"
-            @click="toggleEditModal"
-          />
-          <woot-button
-            v-if="isAdmin"
-            v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
-            class="delete-contact"
-            icon="ion-trash-a"
-            variant="hollow"
-            size="small expanded"
-            color-scheme="alert"
-            @click="toggleDeleteModal"
-            :disabled="uiFlags.isDeleting"
-          />
-        </div>
+      <div class="contact-actions">
+        <woot-button
+          v-if="showNewMessage"
+          v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
+          title="$t('CONTACT_PANEL.NEW_MESSAGE')"
+          class="new-message"
+          icon="ion-chatboxes"
+          size="small expanded"
+          @click="toggleConversationModal"
+        />
+        <woot-button
+          v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
+          title="$t('EDIT_CONTACT.BUTTON_LABEL')"
+          class="edit-contact"
+          icon="ion-edit"
+          variant="smooth"
+          size="small expanded"
+          @click="toggleEditModal"
+        />
+        <woot-button
+          v-if="isAdmin"
+          v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          title="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          class="merge-contact"
+          icon="ion-merge"
+          variant="smooth"
+          size="small expanded"
+          color-scheme="secondary"
+          :disabled="uiFlags.isMerging"
+          @click="openMergeModal"
+        />
+        <woot-button
+          v-if="isAdmin"
+          v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          title="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          class="delete-contact"
+          icon="ion-trash-a"
+          variant="smooth"
+          size="small expanded"
+          color-scheme="alert"
+          :disabled="uiFlags.isDeleting"
+          @click="toggleDeleteModal"
+        />
       </div>
       <edit-contact
         v-if="showEditModal"
@@ -114,6 +104,12 @@
         :contact="contact"
         @cancel="toggleConversationModal"
       />
+      <contact-merge-modal
+        v-if="showMergeModal"
+        :primary-contact="contact"
+        :show="showMergeModal"
+        @close="toggleMergeModal"
+      />
     </div>
     <woot-confirm-delete-modal
       v-if="showDeleteModal"
@@ -130,11 +126,14 @@
   </div>
 </template>
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
+
 import ContactInfoRow from './ContactInfoRow';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons';
 import EditContact from './EditContact';
 import NewConversation from './NewConversation';
+import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal';
 import alertMixin from 'shared/mixins/alertMixin';
 import adminMixin from '../../../../mixins/isAdmin';
 import { mapGetters } from 'vuex';
@@ -146,8 +145,9 @@ export default {
     Thumbnail,
     SocialIcons,
     NewConversation,
+    ContactMergeModal,
   },
-  mixins: [alertMixin, adminMixin],
+  mixins: [alertMixin, adminMixin, clickaway],
   props: {
     contact: {
       type: Object,
@@ -166,6 +166,7 @@ export default {
     return {
       showEditModal: false,
       showConversationModal: false,
+      showMergeModal: false,
       showDeleteModal: false,
     };
   },
@@ -201,6 +202,9 @@ export default {
     },
   },
   methods: {
+    toggleMergeModal() {
+      this.showMergeModal = !this.showMergeModal;
+    },
     toggleEditModal() {
       this.showEditModal = !this.showEditModal;
     },
@@ -232,24 +236,26 @@ export default {
         );
       }
     },
+    openMergeModal() {
+      this.toggleMergeModal();
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
 .contact--profile {
+  position: relative;
   align-items: flex-start;
   padding: var(--space-normal);
 
   .user-thumbnail-box {
-    margin-right: $space-normal;
+    margin-right: var(--space-normal);
   }
 }
 
 .contact--details {
-  margin-top: $space-small;
+  margin-top: var(--space-small);
   width: 100%;
 }
 
@@ -270,31 +276,25 @@ export default {
   margin-top: var(--space-small);
 }
 
-.edit-contact {
-  margin-left: var(--space-medium);
-}
-
-.delete-contact {
-  margin-left: var(--space-medium);
-}
-
 .contact-actions {
   display: flex;
   align-items: center;
   width: 100%;
 
-  .new-message {
-    font-size: var(--font-size-medium);
-  }
-
-  .edit-contact {
-    margin-left: var(--space-small);
-    font-size: var(--font-size-medium);
-  }
-
+  .new-message,
+  .edit-contact,
+  .merge-contact,
   .delete-contact {
-    margin-left: var(--space-small);
-    font-size: var(--font-size-medium);
+    margin-right: var(--space-small);
   }
 }
+.merege-summary--card {
+  padding: var(--space-normal);
+}
+
+.button--contact-menu {
+  position: absolute;
+  right: var(--space-normal);
+  top: 0;
+}
 </style>