Revert "Updates sidebar on dashboard"

This reverts commit 6186d14593.

app/javascript/dashboard/api/conversations.js

@@ -10,8 +10,8 @@ class ConversationApi extends ApiClient {
     return axios.get(`${this.url}/${conversationID}/labels`);
   }
 
-  updateLabels(conversationID, labels) {
+  createLabels(conversationID) {
-    return axios.post(`${this.url}/${conversationID}/labels`, { labels });
+    return axios.get(`${this.url}/${conversationID}/labels`);
   }
 }
 

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -1,5 +1,3 @@
-@import '~widget/assets/scss/mixins';
-
 //borders
 @mixin border-nil() {
   border-color: transparent;
@@ -141,7 +139,7 @@
 }
 
 @mixin elegent-shadow() {
-  box-shadow: 0 10px 25px 0 rgba(49, 49, 93, 0.15);
+  box-shadow: 0 10px 25px 0 rgba(49,49,93,0.15);
 }
 
 @mixin elegant-card() {
@@ -183,55 +181,41 @@
 // .element{
 //     @include arrow(top, #000, 50px);
 // }
-@mixin arrow($direction, $color, $size) {
+@mixin arrow($direction, $color, $size){
-  display: block;
+    display: block;
-  height: 0;
+    height: 0;
-  width: 0;
+    width: 0;
-  content: '';
+    content: '';
 
-  @if $direction=='top' {
+    @if $direction == 'top' {
-    border-left: $size solid transparent;
+      border-left: $size solid transparent;
-    border-right: $size solid transparent;
+      border-right: $size solid transparent;
-    border-bottom: $size solid $color;
+      border-bottom: $size solid $color;
-  }
+    } @else if $direction == 'right' {
-
+      border-top: $size solid transparent;
-  @else if $direction=='right' {
+      border-bottom: $size solid transparent;
-    border-top: $size solid transparent;
+      border-left: $size solid $color;
-    border-bottom: $size solid transparent;
+    } @else if $direction == 'bottom' {
-    border-left: $size solid $color;
+      border-top: $size solid $color;
-  }
+      border-right: $size solid transparent;
-
+      border-left: $size solid transparent;
-  @else if $direction=='bottom' {
+    } @else if $direction == 'left' {
-    border-top: $size solid $color;
+      border-top: $size solid transparent;
-    border-right: $size solid transparent;
+      border-right: $size solid $color;
-    border-left: $size solid transparent;
+      border-bottom: $size solid transparent;
-  }
+    } @else if $direction == 'top-left' {
-
+      border-top: $size solid $color;
-  @else if $direction=='left' {
+      border-right: $size solid transparent;
-    border-top: $size solid transparent;
+    } @else if $direction == 'top-right' {
-    border-right: $size solid $color;
+      border-top: $size solid $color;
-    border-bottom: $size solid transparent;
+      border-left: $size solid transparent;
-  }
+    } @else if $direction == 'bottom-left' {
-
+      border-bottom: $size solid $color;
-  @else if $direction=='top-left' {
+      border-right: $size solid transparent;
-    border-top: $size solid $color;
+    } @else if $direction == 'bottom-right' {
-    border-right: $size solid transparent;
+      border-bottom: $size solid $color;
-  }
+      border-left: $size solid transparent;
-
+    }
-  @else if $direction=='top-right' {
-    border-top: $size solid $color;
-    border-left: $size solid transparent;
-  }
-
-  @else if $direction=='bottom-left' {
-    border-bottom: $size solid $color;
-    border-right: $size solid transparent;
-  }
-
-  @else if $direction=='bottom-right' {
-    border-bottom: $size solid $color;
-    border-left: $size solid transparent;
-  }
 }
 
 @mixin text-ellipsis {

app/javascript/dashboard/assets/scss/_variables.scss

@@ -53,16 +53,6 @@ $color-body: #3C4858;
 $color-heading: #1F2D3D;
 $color-extra-light-blue: #F5F7F9;
 
-$primary-color: $color-woot;
-$secondary-color: #FF5216;
-$success-color: #13ce66;
-$warning-color: #ffc82c;
-$alert-color: #ff4949;
-
-// Color-palettes
-
-$color-primary-dark: darken($color-woot, 20%);
-
 // Thumbnail
 $thumbnail-radius: 4rem;
 
@@ -91,6 +81,3 @@ $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !d
 
 // Ionicons
 $ionicons-font-path: '~ionicons/fonts';
-
-// Transitions
-$transition-ease-in: all 0.250s ease-in;

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -2,13 +2,7 @@
   margin-bottom: $space-normal;
   min-height: 38px;
 
-  &.multiselect--active {
+  > .multiselect__tags {
-    >.multiselect__tags {
-      border-color: $color-woot;
-    }
-  }
-
-  >.multiselect__tags {
     @include margin(0);
     border: 1px solid $color-border;
     min-height: 44px;
@@ -19,34 +13,12 @@
     }
 
     .multiselect__tag {
-
-      $vertical-space: $space-smaller+$space-micro;
       margin-top: $space-one;
-      background: $color-background;
-      color: $color-heading;
-      padding: $vertical-space $space-medium $vertical-space $space-one;
-    }
-
-    .multiselect__tag-icon {
-      line-height: $space-medium + $space-micro;
-
-      &:after {
-        color: $color-primary-dark;
-      }
-
-      &:hover {
-        background: $color-background;
-
-        &:after {
-          color: $color-woot;
-        }
-      }
     }
 
     .multiselect__input {
       @include ghost-input;
       @include padding($zero);
-      font-size: $font-size-small;
 
       margin-bottom: $zero;
     }
@@ -69,50 +41,4 @@
       top: 60%;
     }
   }
-
-  .multiselect__content .multiselect__option {
-    font-size: $font-size-small;
-    font-weight: $font-weight-normal;
-
-    &.multiselect__option--highlight {
-      font-weight: $font-weight-medium;
-    }
-  }
-}
-
-
-.sidebar-labels-wrap {
-
-  &.has-edited,
-  &:hover {
-    .multiselect {
-      cursor: pointer;
-      margin-top: $space-small;
-
-      >.multiselect__tags {
-        border-color: $color-border;
-      }
-
-      >.multiselect__select {
-        visibility: visible;
-      }
-    }
-  }
-
-  .multiselect {
-
-    >.multiselect__select {
-      visibility: hidden;
-    }
-
-    >.multiselect__tags {
-      border-color: transparent;
-    }
-
-    &.multiselect--active {
-      >.multiselect__tags {
-        border-color: $color-woot;
-      }
-    }
-  }
 }

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -24,18 +24,9 @@
     }
   }
 
-  >.icon {
+  > .icon {
     font-size: $font-size-default;
   }
-
-  &.tiny {
-    font-size: $font-size-mini;
-    padding: $space-small $space-slab;
-  }
-
-  &.round {
-    border-radius: $space-larger;
-  }
 }
 
 .button--fixed-right-top {

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -5,7 +5,6 @@
   @include flex;
   @include flex-align($x: justify, $y: middle);
   @include border-normal-bottom;
-
   // Resolve Button
   .button {
     @include margin(0);
@@ -45,7 +44,6 @@
     .user--name {
       @include margin(0);
       font-size: $font-size-medium;
-      text-transform: capitalize;
     }
 
     .user--profile__meta {
@@ -66,7 +64,7 @@
 }
 
 .button.resolve--button {
-  >.icon {
+  > .icon {
     padding-right: $space-small;
     font-size: $font-size-default;
   }

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -47,19 +47,16 @@
   @include background-gray;
   @include margin(0);
   @include border-normal-left;
-
   .current-chat {
     @include flex;
     @include full-height;
     flex-direction: column;
     @include flex-align(center, middle);
-
     div {
       @include flex;
       @include full-height;
       flex-direction: column;
       @include flex-align(center, middle);
-
       img {
         @include margin($space-normal);
         width: 10rem;
@@ -90,7 +87,7 @@
   height: 100%;
   overflow-y: scroll;
 
-  >li {
+  > li {
     @include flex;
     @include flex-shrink;
     @include margin($zero $zero $space-smaller);
@@ -150,7 +147,7 @@
       @include flex-align(right, null);
 
       .wrap {
-        margin-right: $space-normal;
+        margin-right: $space-small;
         text-align: right;
       }
 

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -13,7 +13,6 @@
   .tabs-title {
     a {
       font-size: $font-size-default;
-      font-weight: $font-weight-medium;
       padding-bottom: $space-slab;
       padding-top: $space-slab;
     }

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -23,7 +23,7 @@
       src="~dashboard/assets/images/fb-badge.png"
     />
     <div
-      v-else-if="status === 'online'"
+      v-else-if="badge === 'Channel::WebWidget' && status === 'online'"
       class="source-badge user--online"
       :style="statusStyle"
     ></div>

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

@@ -8,7 +8,7 @@
         :username="chat.meta.sender.name"
       />
       <div class="user--profile__meta">
-        <h3 class="user--name text-truncate">
+        <h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
           {{ chat.meta.sender.name }}
         </h3>
         <button
@@ -93,9 +93,7 @@ export default {
       ];
     },
     viewProfileButtonLabel() {
-      return `${
+      return `${this.isContactPanelOpen ? 'Hide' : 'View'}  Profile`;
-        this.isContactPanelOpen ? 'Close' : 'Open'
-      }  Conversation Details`;
     },
   },
 

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -1,6 +1,5 @@
 {
   "CONTACT_PANEL": {
-    "CONVERSATION_TITLE": "Conversation Details",
     "BROWSER": "Browser",
     "OS": "Operating System",
     "INITIATED_FROM": "Initiated from",
@@ -11,10 +10,7 @@
     },
     "LABELS": {
       "NO_RECORDS_FOUND": "There are no labels associated to this conversation.",
-      "TITLE": "Conversation Labels",
+      "TITLE": "Labels"
-      "UPDATE_BUTTON": "Update Labels",
-      "ADD_BUTTON": "Add Labels",
-      "UPDATE_ERROR": "Couldn't update labels, try Again 🧐"
     }
   }
 }

app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="contact-conversation--panel">
-    <contact-details-item :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')" />
+    <contact-details-item
+      icon="ion-chatbubbles"
+      :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
+    />
     <div v-if="!uiFlags.isFetching">
-      <p v-if="!previousConversations.length" class="no-results">
+      <i v-if="!previousConversations.length">
         {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
-      </p>
+      </i>
       <div v-else class="contact-conversation--list">
         <conversation-card
           v-for="conversation in previousConversations"
@@ -75,17 +78,11 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 
 .contact-conversation--panel {
-  padding: $space-normal;
+  @include border-normal-top;
-  padding-top: 0;
+  padding: $space-medium;
 }
 
 .contact-conversation--list {
-  margin-top: $space-normal;
+  margin-top: -$space-normal;
-}
-
-.no-results {
-  margin: 0;
-  color: $color-gray;
-  padding: 0 $space-small;
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="conv-details--item">
-    <h4 class="conv-details--item__label">
+    <div class="conv-details--item__label">
       <i :class="icon" class="conv-details--item__icon"></i>
       {{ title }}
-    </h4>
+    </div>
     <div v-if="value" class="conv-details--item__value">
       {{ value }}
     </div>
@@ -14,7 +14,7 @@
 export default {
   props: {
     title: { type: String, required: true },
-    icon: { type: String, default: '' },
+    icon: { type: String, required: true },
     value: { type: [String, Number], default: '' },
   },
 };
@@ -32,18 +32,16 @@ export default {
   }
 
   .conv-details--item__icon {
-    padding-right: $space-smaller;
+    padding-right: $space-micro;
   }
 
   .conv-details--item__label {
     font-weight: $font-weight-medium;
     margin-bottom: $space-micro;
-    font-size: $font-size-small;
   }
 
   .conv-details--item__value {
     word-break: break-all;
-    margin-top: $space-slab;
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -48,12 +48,6 @@
         {{ contact.additional_attributes.description }}
       </div>
     </div>
-    <conversation-labels :conversation-id="conversationId" />
-    <contact-conversations
-      v-if="contact.id"
-      :contact-id="contact.id"
-      :conversation-id="conversationId"
-    />
     <div v-if="browser" class="conversation--details">
       <contact-details-item
         v-if="browser.browser_name"
@@ -80,6 +74,13 @@
         icon="ion-clock"
       />
     </div>
+    <contact-conversations
+      v-if="contact.id"
+      :contact-id="contact.id"
+      :conversation-id="conversationId"
+    />
+
+    <conversation-labels :conversation-id="conversationId" />
   </div>
 </template>
 
@@ -168,11 +169,9 @@ export default {
 }
 
 .contact--profile {
-  padding: $space-normal;
+  width: 100%;
+  padding: $space-normal $space-medium $zero;
   align-items: center;
-  margin: $space-medium $space-normal 0;
-  @include elegant-card;
-  @include light-shadow;
 
   .user-thumbnail-box {
     margin-right: $space-normal;
@@ -192,10 +191,9 @@ export default {
 
 .contact--name {
   @include text-ellipsis;
-  text-transform: capitalize;
 
   font-weight: $font-weight-bold;
-  font-size: $font-size-medium;
+  font-size: $font-size-default;
 }
 
 .contact--email {
@@ -212,7 +210,8 @@ export default {
 }
 
 .conversation--details {
-  padding: $space-two $space-normal;
+  padding: $space-medium;
+  width: 100%;
 }
 
 .conversation--labels {

app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue

@@ -1,51 +1,21 @@
 <template>
-  <div
+  <div class="contact-conversation--panel">
-    class="contact-conversation--panel sidebar-labels-wrap"
+    <contact-details-item
-    :class="hasEditedClass"
+      icon="ion-pricetags"
-  >
+      :title="$t('CONTACT_PANEL.LABELS.TITLE')"
-    <div v-if="!conversationUiFlags.isFetching" class="wrap">
+    />
-      <div class="contact-conversation--list">
+    <div v-if="!uiFlags.isFetching">
-        <label class="select-tags">
+      <i v-if="!labels.length">
-          {{ $t('CONTACT_PANEL.LABELS.TITLE') }}
+        {{ $t('CONTACT_PANEL.LABELS.NO_RECORDS_FOUND') }}
-          <p v-if="!savedLabels.length && !showLabelInput" class="no-results">
+      </i>
-            {{ $t('CONTACT_PANEL.LABELS.NO_RECORDS_FOUND') }}
+      <div v-else class="contact-conversation--list">
-            <button
+        <span
-              type="button success"
+          v-for="label in labels"
-              class="button nice tiny"
+          :key="label"
-              @click="showLabelBox"
+          class="conversation--label label primary"
-            >
+        >
-              {{ $t('CONTACT_PANEL.LABELS.ADD_BUTTON') }}
+          {{ label }}
-            </button>
+        </span>
-          </p>
-          <multiselect
-            v-if="showLabelInput || savedLabels.length"
-            v-model="selectedLabels"
-            :options="savedLabels"
-            tag-placeholder="Add this as new tag"
-            placeholder="Search or add a tag"
-            :multiple="true"
-            :taggable="true"
-            @tag="addLabel"
-          />
-        </label>
-        <div class="row align-middle align-justify">
-          <span v-if="labelUiFlags.isError" class="error">{{
-            $t('CONTACT_PANEL.LABELS.UPDATE_ERROR')
-          }}</span>
-          <button
-            v-if="hasEdited"
-            type="button"
-            class="button nice tiny"
-            @click="onUpdateLabels"
-          >
-            <spinner v-if="labelUiFlags.isUpdating" size="tiny" />
-            {{
-              labelUiFlags.isUpdating
-                ? 'saving...'
-                : $t('CONTACT_PANEL.LABELS.UPDATE_BUTTON')
-            }}
-          </button>
-        </div>
       </div>
     </div>
     <spinner v-else></spinner>
@@ -54,11 +24,12 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';
-import ConversationAPI from '../../../api/conversations';
+import ContactDetailsItem from './ContactDetailsItem.vue';
 
 export default {
   components: {
+    ContactDetailsItem,
     Spinner,
   },
   props: {
@@ -67,75 +38,25 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      isSearching: false,
-      selectedLabels: [],
-      showLabelInput: false,
-    };
-  },
   computed: {
-    hasEdited() {
+    labels() {
-      if (this.selectedLabels.length !== this.savedLabels.length) {
+      return this.$store.getters['conversationLabels/getConversationLabels'](
-        return true;
+        this.conversationId
-      }
-      const isSame = this.selectedLabels.every(label =>
-        this.savedLabels.includes(label)
       );
-      return !isSame;
-    },
-    savedLabels() {
-      const saved = this.$store.getters[
-        'conversationLabels/getConversationLabels'
-      ](this.conversationId);
-      return saved;
-    },
-    hasEditedClass() {
-      return this.hasEdited ? 'has-edited' : '';
     },
     ...mapGetters({
-      conversationUiFlags: 'contactConversations/getUIFlags',
+      uiFlags: 'contactConversations/getUIFlags',
-      labelUiFlags: 'conversationLabels/getUIFlags',
     }),
   },
   watch: {
     conversationId(newConversationId, prevConversationId) {
       if (newConversationId && newConversationId !== prevConversationId) {
-        this.$store
+        this.$store.dispatch('conversationLabels/get', newConversationId);
-          .dispatch('conversationLabels/get', newConversationId)
-          .then(() => {
-            this.selectedLabels = [...this.savedLabels];
-          });
       }
     },
   },
   mounted() {
-    this.$store
+    this.$store.dispatch('conversationLabels/get', this.conversationId);
-      .dispatch('conversationLabels/get', this.conversationId)
-      .then(() => {
-        this.selectedLabels = [...this.savedLabels];
-      });
-  },
-  methods: {
-    addLabel(label) {
-      this.selectedLabels = [...this.selectedLabels, label];
-    },
-    asyncSearchLabels(query) {
-      this.isSearching = true;
-      ConversationAPI(query).then(response => {
-        this.countries = response;
-        this.isLoading = false;
-      });
-    },
-    onUpdateLabels() {
-      this.$store.dispatch('conversationLabels/update', {
-        conversationId: this.conversationId,
-        labels: this.selectedLabels,
-      });
-    },
-    showLabelBox() {
-      this.showLabelInput = true;
-    },
   },
 };
 </script>
@@ -145,7 +66,12 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 
 .contact-conversation--panel {
-  padding: $space-normal;
+  @include border-normal-top;
+  padding: $space-medium;
+}
+
+.contact-conversation--list {
+  margin-top: -$space-normal;
 }
 
 .conversation--label {
@@ -154,36 +80,4 @@ export default {
   font-size: $font-size-small;
   padding: $space-smaller;
 }
-.wrap {
-  margin-top: $space-slab;
-}
-
-.select-tags {
-  margin-top: $space-small;
-  .multiselect {
-    &:hover {
-      cursor: pointer;
-    }
-    transition: $transition-ease-in;
-    margin-bottom: 0;
-  }
-}
-
-.button {
-  margin-top: $space-small;
-  margin-left: auto;
-}
-
-.no-results {
-  margin: $space-normal 0 0 0;
-  color: $color-gray;
-  padding: 0 $space-small;
-  font-weight: $font-weight-normal;
-}
-
-.error {
-  color: $alert-color;
-  font-size: $font-size-mini;
-  font-weight: $font-weight-medium;
-}
 </style>

app/javascript/dashboard/store/modules/conversationLabels.js

@@ -6,8 +6,6 @@ const state = {
   records: {},
   uiFlags: {
     isFetching: false,
-    isUpdating: false,
-    isError: false,
   },
 };
 
@@ -40,30 +38,6 @@ export const actions = {
       });
     }
   },
-  update: async ({ commit }, { conversationId, labels }) => {
-    commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
-      isUpdating: true,
-    });
-    try {
-      const response = await ConversationAPI.updateLabels(
-        conversationId,
-        labels
-      );
-      commit(types.default.SET_CONVERSATION_LABELS, {
-        id: conversationId,
-        data: response.data.payload,
-      });
-      commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
-        isUpdating: false,
-        isError: false,
-      });
-    } catch (error) {
-      commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
-        isUpdating: false,
-        isError: true,
-      });
-    }
-  },
 };
 
 export const mutations = {

app/javascript/shared/components/Spinner.vue

@@ -1,16 +1,7 @@
 <template>
-  <span class="spinner" :class="size"></span>
+  <span class="spinner small"></span>
 </template>
-<script>
+
-export default {
-  props: {
-    size: {
-      type: String,
-      default: 'small',
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables';
 
@@ -48,7 +39,7 @@ export default {
   vertical-align: middle;
 
   &.message {
-    padding: $space-one;
+    padding: $space-normal;
     top: 0;
     left: 0;
     margin: 0 auto;
@@ -72,17 +63,5 @@ export default {
       margin-top: -$space-small;
     }
   }
-
-  &.tiny {
-    width: $space-one;
-    height: $space-one;
-    padding: 0 $space-smaller;
-
-    &:before {
-      width: $space-one;
-      height: $space-one;
-      margin-top: -$space-small + $space-micro;
-    }
-  }
 }
 </style>

app/javascript/widget/assets/scss/_mixins.scss

@@ -1,5 +1,5 @@
 // scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix
-$shadow-color-1: rgba(50, 50, 93, 0.08);
+$shadow-color-1: rgba(50, 50, 93, 0.2);
 $shadow-color-2: rgba(0, 0, 0, 0.07);
 $shadow-color-3: rgba(50, 50, 93, .08);
 $shadow-color-4: rgba(0, 0, 0, .05);

app/javascript/widget/assets/scss/sdk.js

@@ -101,10 +101,10 @@ export const SDK_CSS = ` .woot-widget-holder {
     width: 400px !important;
     min-height: 250px !important;
     max-height: 590px !important;
-    -o-border-radius: 16px !important;
+    -o-border-radius: 8px !important;
-    -moz-border-radius: 16px !important;
+    -moz-border-radius: 8px !important;
-    -webkit-border-radius: 16px !important;
+    -webkit-border-radius: 8px !important;
-    border-radius: 16px !important;
+    border-radius: 8px !important;
   }
 }
 

app/javascript/widget/components/GroupedAvatars.vue

@@ -4,6 +4,7 @@
       <Thumbnail
         size="24px"
         :username="user.name"
+        status="online"
         :src="user.avatar"
         has-border
       />