fix: name and email address overflow issue in customer side panel (#1348)

* Complete name and email address overflow  issue

* Changes as per review

* Code cleanup

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

@@ -3,6 +3,7 @@
     "NOT_AVAILABLE": "Not Available",
     "EMAIL_ADDRESS": "Email Address",
     "PHONE_NUMBER": "Phone number",
+    "COPY_SUCCESSFUL": "Copied to clipboard successfully",
     "COMPANY": "Company",
     "LOCATION": "Location",
     "CONVERSATION_TITLE": "Conversation Details",

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

@@ -23,7 +23,9 @@
             :value="contact.email"
             icon="ion-email"
             :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
+            show-copy
           />
+
           <contact-info-row
             :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
             :value="contact.phone_number"
@@ -120,6 +122,7 @@ export default {
 
 .contact--details {
   margin-top: $space-small;
+  width: 100%;
 
   p {
     margin-bottom: 0;
@@ -136,7 +139,7 @@ export default {
 .contact--name {
   @include text-ellipsis;
   text-transform: capitalize;
-
+  white-space: normal;
   font-weight: $font-weight-bold;
   font-size: $font-size-default;
 }

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

@@ -2,11 +2,21 @@
   <div class="contact-info--row">
     <a v-if="href" :href="href" class="contact-info--details">
       <i :class="icon" class="contact-info--icon" />
-      <span v-if="value" class="text-truncate">{{ value }}</span>
+      <span v-if="value" class="text-truncate" :title="value">{{ value }}</span>
       <span v-else class="text-muted">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>
+
+      <button
+        v-if="showCopy"
+        type="submit"
+        class="button nice link hollow grey-btn"
+        @click="onCopy"
+      >
+        <i class="icon copy-icon ion-clipboard"></i>
+      </button>
     </a>
+
     <div v-else class="contact-info--details">
       <i :class="icon" class="contact-info--icon" />
       <span v-if="value" class="text-truncate">{{ value }}</span>
@@ -17,7 +27,10 @@
   </div>
 </template>
 <script>
+import copy from 'copy-text-to-clipboard';
+import alertMixin from 'shared/mixins/alertMixin';
 export default {
+  mixins: [alertMixin],
   props: {
     href: {
       type: String,
@@ -31,6 +44,17 @@ export default {
       type: String,
       default: '',
     },
+    showCopy: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onCopy(e) {
+      e.preventDefault();
+      copy(this.value);
+      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+    },
   },
 };
 </script>
@@ -50,6 +74,13 @@ export default {
   margin-bottom: $space-smaller;
   color: $color-body;
 
+  .copy-icon {
+    margin-left: $space-one;
+    &:hover {
+      color: $color-woot;
+    }
+  }
+
   &.a {
     &:hover {
       text-decoration: underline;