feat: Add a component to display contact attributes in CRM (chatwoot#…

…2217)

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

.codeclimate.yml

@@ -30,3 +30,6 @@ exclude_patterns:
   - "**/*.md"
   - "**/*.yml"
   - "app/javascript/dashboard/i18n/locale"
+  - "stories/**/*"
+  - "**/*.stories.js"
+  - "**/stories/"

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="contact-attribute">
+    <div class="title-wrap">
+      <h4 class="text-block-title title">
+        <div class="title--icon">
+          <emoji-or-icon :icon="icon" :emoji="emoji" />
+        </div>
+        {{ label }}
+      </h4>
+    </div>
+    <div class="value-wrap">
+      <p v-if="value" class="value">
+        {{ value }}
+      </p>
+      <woot-button
+        v-if="showEdit"
+        variant="clear link"
+        size="tiny"
+        color-scheme="secondary"
+        icon="ion-compose"
+        class-names="edit-button"
+        @click="onEdit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    label: { type: String, required: true },
+    icon: { type: String, default: '' },
+    emoji: { type: String, default: '' },
+    value: { type: [String, Number], default: '' },
+    showEdit: { type: Boolean, default: false },
+  },
+  methods: {
+    onEdit() {
+      this.$emit('edit');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.contact-attribute {
+  margin-bottom: var(--space-normal);
+}
+.title-wrap {
+  display: flex;
+  align-items: center;
+}
+.title {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+.title--icon {
+  width: var(--space-two);
+}
+.edit-button {
+  display: none;
+}
+.value-wrap {
+  display: flex;
+
+  &:hover {
+    .value {
+      background: var(--color-background);
+    }
+    .edit-button {
+      display: block;
+    }
+  }
+}
+.value {
+  display: inline-block;
+  border-radius: var(--border-radius-small);
+  word-break: break-all;
+  margin: 0 var(--space-smaller) 0 var(--space-normal);
+  padding: var(--space-micro) var(--space-smaller);
+}
+</style>

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

@@ -0,0 +1,43 @@
+import ContactAttribute from '../components/ContactAttribute';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/Contact/ContactAttribute',
+  component: ContactAttribute,
+  argTypes: {
+    label: {
+      defaultValue: 'Email',
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      defaultValue: 'dwight@schrute.farms',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      defaultValue: 'ion-email',
+      control: {
+        type: 'text',
+      },
+    },
+    showEdit: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ContactAttribute },
+  template: '<contact-attribute v-bind="$props" @edit="onEdit" />',
+});
+
+export const DefaultAttribute = Template.bind({});
+DefaultAttribute.args = {
+  onEdit: action('edit'),
+};

app/javascript/shared/components/EmojiOrIcon.vue

@@ -14,7 +14,7 @@ export default {
   computed: {
     ...mapGetters({ uiSettings: 'getUISettings' }),
     isIconTypeEmoji() {
-      const { icon_type: iconType } = this.uiSettings;
+      const { icon_type: iconType } = this.uiSettings || {};
       return iconType === 'emoji';
     },
     showEmoji() {