feat: Add the ability to receive contact(vCard) on a WhatsApp inbox (#6330)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -45,6 +45,11 @@
               :longitude="attachment.coordinates_long"
               :name="attachment.fallback_title"
             />
+            <bubble-contact
+              v-else-if="attachment.file_type === 'contact'"
+              :name="data.content"
+              :phone-number="attachment.fallback_title"
+            />
             <instagram-image-error-placeholder
               v-else-if="hasImageError && hasInstagramStory"
             />
@@ -125,6 +130,7 @@ import BubbleLocation from './bubble/Location';
 import BubbleMailHead from './bubble/MailHead';
 import BubbleText from './bubble/Text';
 import BubbleVideo from './bubble/Video.vue';
+import BubbleContact from './bubble/Contact';
 import Spinner from 'shared/components/Spinner';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu';
 import instagramImageErrorPlaceholder from './instagramImageErrorPlaceholder.vue';
@@ -143,6 +149,7 @@ export default {
     BubbleMailHead,
     BubbleText,
     BubbleVideo,
+    BubbleContact,
     ContextMenu,
     Spinner,
     instagramImageErrorPlaceholder,

app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="contact--group">
+    <fluent-icon icon="call" class="file--icon" size="18" />
+    <div class="meta">
+      <p class="text-truncate margin-bottom-0">
+        {{ phoneNumber }}
+      </p>
+    </div>
+    <div v-if="formattedPhoneNumber" class="link-wrap">
+      <woot-button variant="clear" size="small" @click.prevent="addContact">
+        {{ $t('CONVERSATION.SAVE_CONTACT') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    phoneNumber: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    formattedPhoneNumber() {
+      return this.phoneNumber.replace(/\s|-|[A-Za-z]/g, '');
+    },
+    rawPhoneNumber() {
+      return this.phoneNumber.replace(/\D/g, '');
+    },
+  },
+  methods: {
+    async addContact() {
+      try {
+        let contact = await this.filterContactByNumber(this.rawPhoneNumber);
+        if (!contact) {
+          contact = await this.$store.dispatch(
+            'contacts/create',
+            this.getContactObject()
+          );
+          this.showAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
+        }
+        this.openContactNewTab(contact.id);
+      } catch (error) {
+        if (error instanceof DuplicateContactException) {
+          if (error.data.includes('phone_number')) {
+            this.showAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
+          }
+        } else if (error instanceof ExceptionWithMessage) {
+          this.showAlert(error.data);
+        } else {
+          this.showAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
+        }
+      }
+    },
+    getContactObject() {
+      const contactItem = {
+        name: this.name,
+        phone_number: `+${this.rawPhoneNumber}`,
+      };
+      return contactItem;
+    },
+    async filterContactByNumber(phoneNumber) {
+      const query = {
+        attribute_key: 'phone_number',
+        filter_operator: 'equal_to',
+        values: [phoneNumber],
+        attribute_model: 'standard',
+        custom_attribute_type: '',
+      };
+
+      const queryPayload = { payload: [query] };
+      const contacts = await this.$store.dispatch('contacts/filter', {
+        queryPayload,
+        resetState: false,
+      });
+      return contacts.shift();
+    },
+    openContactNewTab(contactId) {
+      const accountId = window.location.pathname.split('/')[3];
+      const url = `/app/accounts/${accountId}/contacts/${contactId}`;
+      window.open(url, '_blank');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.contact--group {
+  align-items: center;
+  display: flex;
+  margin-top: var(--space-smaller);
+
+  .meta {
+    flex: 1;
+    margin-left: var(--space-small);
+  }
+
+  .link-wrap {
+    margin-left: var(--space-small);
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/stories/ContactBubble.stories.js

@@ -0,0 +1,28 @@
+import ContactBubble from '../bubble/Contact.vue';
+
+export default {
+  title: 'Components/Messaging/ContactBubble',
+  component: ContactBubble,
+  argTypes: {
+    name: {
+      defaultValue: 'Eden Hazard',
+      control: {
+        type: 'string',
+      },
+    },
+    phoneNumber: {
+      defaultValue: '+517554433220',
+      control: {
+        type: 'string',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ContactBubble },
+  template: '<contact-bubble v-bind="$props" />',
+});
+
+export const ContactBubbleView = Template.bind({});