feat: Add a component to show contact information (#2204)

* Feat: Add component to show contact introduction.

* fix: Hide sperator if company is not present

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/modules/contact/components/ContactIntro.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="contact--intro">
+    <thumbnail
+      :src="contact.thumbnail"
+      size="64px"
+      :username="contact.name"
+      :status="contact.availability_status"
+    />
+
+    <div class="contact--details">
+      <h2 class="block-title contact--name">
+        {{ contact.name }}
+      </h2>
+      <h3 class="sub-block-title contact--work">
+        {{ contact.title }}
+        <i v-if="contact.company.name" class="icon ion-minus-round" />
+        <span class="company-name">{{ contact.company.name }}</span>
+      </h3>
+      <p v-if="additionalAttributes.description" class="contact--bio">
+        {{ additionalAttributes.description }}
+      </p>
+      <social-icons :social-profiles="socialProfiles" />
+    </div>
+    <div class="contact-actions">
+      <woot-button
+        class="new-message"
+        size="small expanded"
+        icon="ion-paper-airplane"
+        @click="onNewMessageClick"
+      >
+        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
+      </woot-button>
+      <woot-button
+        variant="hollow"
+        size="small expanded"
+        icon="ion-compose"
+        @click="onEditClick"
+      >
+        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import SocialIcons from 'dashboard/routes/dashboard/conversation/contact/SocialIcons';
+
+export default {
+  components: {
+    Thumbnail,
+    SocialIcons,
+  },
+  props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    additionalAttributes() {
+      return this.contact.additional_attributes || {};
+    },
+    socialProfiles() {
+      const {
+        social_profiles: socialProfiles,
+        screen_name: twitterScreenName,
+      } = this.additionalAttributes;
+
+      return { twitter: twitterScreenName, ...(socialProfiles || {}) };
+    },
+  },
+  methods: {
+    onEditClick() {
+      this.$emit('edit');
+    },
+    onNewMessageClick() {
+      this.$emit('message');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
+
+.contact--details {
+  margin-top: var(--space-small);
+}
+
+.contact--work {
+  color: var(--color-body);
+
+  .icon {
+    font-size: var(--font-size-nano);
+    vertical-align: middle;
+  }
+}
+
+.contact--name {
+  @include text-ellipsis;
+  text-transform: capitalize;
+  white-space: normal;
+  font-weight: var(--font-weight-bold);
+}
+
+.contact--bio {
+  margin: var(--space-smaller) 0 0;
+}
+
+.button.new-message {
+  margin-right: var(--space-small);
+}
+
+.contact-actions {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-top: var(--space-small);
+}
+</style>

app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js

@@ -0,0 +1,43 @@
+import ContactIntro from '../components/ContactIntro';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/Contact/ContactIntro',
+  component: ContactIntro,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ContactIntro },
+  template:
+    '<contact-intro v-bind="$props" :user="user" @edit="onEdit" @message="onNewMessage" />',
+});
+
+export const DefaultNote = Template.bind({});
+DefaultNote.args = {
+  contact: {
+    id: 979442,
+    name: 'Eden Hazard',
+    title: 'Playmaker',
+    thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
+    company: {
+      id: 10,
+      name: 'Chelsea',
+    },
+    email: 'hazard@chelsea.com',
+    availability_status: 'offline',
+    phone_number: '',
+    custom_attributes: {},
+    additional_attributes: {
+      description:
+        'Known for his dribbling, he is considered to be one of the best players in the world.',
+      social_profiles: {
+        twitter: 'hazardeden10',
+        facebook: 'hazardeden10',
+        linkedin: 'hazardeden10',
+      },
+    },
+  },
+  onEdit: action('edit'),
+  onNewMessage: action('new message 💬'),
+};