feat: Create component to show contact fields on CRM (#2251)

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

@@ -28,8 +28,8 @@
       class="value--view"
       :class="{ 'is-editable': showEdit }"
     >
-      <p v-if="value" class="value">
-        {{ value }}
+      <p class="value">
+        {{ value || '---' }}
       </p>
       <woot-button
         v-if="showEdit"
@@ -84,7 +84,7 @@ export default {
 
 <style lang="scss" scoped>
 .contact-attribute {
-  margin-bottom: var(--space-normal);
+  margin-bottom: var(--space-small);
 }
 .title-wrap {
   display: flex;
@@ -116,6 +116,7 @@ export default {
 }
 .value {
   display: inline-block;
+  min-width: var(--space-mega);
   border-radius: var(--border-radius-small);
   word-break: break-all;
   margin: 0 var(--space-smaller) 0 var(--space-normal);

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="contact-fields">
+    <h3 class="block-title title">Contact fields</h3>
+    <attribute
+      :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
+      icon="ion-email"
+      emoji=""
+      :value="contact.email"
+      :show-edit="true"
+      @update="onEmailUpdate"
+    />
+    <attribute
+      :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
+      icon="ion-ios-telephone"
+      emoji=""
+      :value="contact.phone_number"
+      :show-edit="true"
+      @update="onPhoneUpdate"
+    />
+    <attribute
+      v-if="additionalAttributes.location"
+      :label="$t('CONTACT_PANEL.LOCATION')"
+      icon="ion-map"
+      emoji="🌍"
+      :value="additionalAttributes.location"
+      :show-edit="true"
+      @update="onLocationUpdate"
+    />
+  </div>
+</template>
+<script>
+import Attribute from './ContactAttribute';
+
+export default {
+  components: { Attribute },
+  props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    additionalAttributes() {
+      return this.contact.additional_attributes || {};
+    },
+    company() {
+      const { company = {} } = this.contact;
+      return company;
+    },
+  },
+  methods: {
+    onEmailUpdate(value) {
+      this.$emit('update', { email: value });
+    },
+    onPhoneUpdate(value) {
+      this.$emit('update', { phone: value });
+    },
+    onLocationUpdate(value) {
+      this.$emit('update', { location: value });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.contact-fields {
+  margin-top: var(--space-medium);
+}
+
+.title {
+  margin-bottom: var(--space-normal);
+}
+</style>

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

@@ -0,0 +1,42 @@
+import ContactFields from '../components/ContactFields';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/Contact/ContactFields',
+  component: ContactFields,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ContactFields },
+  template:
+    '<contact-fields v-bind="$props" :contact="contact" @update="onUpdate" />',
+});
+
+export const DefaultContactFields = Template.bind({});
+DefaultContactFields.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',
+      },
+    },
+  },
+  onUpdate: action('update'),
+};