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>