feat: Use accordion in conversation sidepanel (#2839)

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -144,7 +144,10 @@
     padding-left: 0;
 
     .conversation--details {
+      border-radius: var(--border-radius-small);
       margin-left: 0;
+      padding-left: var(--space-two);
+      padding-right: var(--space-small);
     }
   }
 }

app/javascript/dashboard/components/Accordion/AccordionItem.stories.js

@@ -0,0 +1,30 @@
+import { action } from '@storybook/addon-actions';
+import AccordionItemComponent from './AccordionItem';
+
+export default {
+  title: 'Components/Generic/Accordion',
+  component: AccordionItemComponent,
+  argTypes: {
+    title: {
+      control: {
+        type: 'string',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AccordionItem: AccordionItemComponent },
+  template: `
+    <accordion-item v-bind="$props" @click="onClick">
+    This is a sample content you can pass as a slot
+    </accordion-item>
+  `,
+});
+
+export const AccordionItem = Template.bind({});
+AccordionItem.args = {
+  onClick: action('Added'),
+  title: 'Title of the accordion item',
+};

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="cw-accordion">
+    <button class="cw-accordion--title" @click="$emit('click')">
+      <div class="cw-accordion--title-wrap">
+        <emoji-or-icon class="icon-or-emoji" :icon="icon" :emoji="emoji" />
+        <h5>
+          {{ title }}
+        </h5>
+      </div>
+      <div class="button-icon--wrap">
+        <slot name="button" />
+        <div class="chevron-icon__wrap" @click="$emit('click')">
+          <i v-if="isOpen" class="ion-minus chevron-icon"></i>
+          <i v-else class="ion-plus chevron-icon"></i>
+        </div>
+      </div>
+    </button>
+    <div v-if="isOpen" class="cw-accordion--content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    emoji: {
+      type: String,
+      default: '',
+    },
+    isOpen: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.cw-accordion {
+  // This is done to fix contact sidebar border issues
+  // If you are using it else, find a fix to remove this hack
+  margin-top: -1px;
+  font-size: var(--font-size-small);
+}
+.cw-accordion--title {
+  align-items: center;
+  background: var(--b-50);
+  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  padding: var(--space-small) var(--space-normal);
+  user-select: none;
+  width: 100%;
+
+  h5 {
+    font-size: var(--font-size-normal);
+    margin-bottom: 0;
+    padding: 0 var(--space-small) 0 0;
+  }
+}
+
+.cw-accordion--title-wrap {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--space-micro);
+}
+
+.title-icon__wrap {
+  display: flex;
+  align-items: baseline;
+}
+
+.icon-or-emoji {
+  display: inline-block;
+  width: var(--space-two);
+}
+
+.button-icon--wrap {
+  display: flex;
+  flex-direction: row;
+}
+
+.chevron-icon__wrap {
+  display: flex;
+  justify-content: flex-end;
+  width: var(--space-slab);
+  color: var(--w-500);
+}
+
+.cw-accordion--content {
+  padding: var(--space-normal);
+}
+</style>

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -127,7 +127,7 @@ export default {
   display: flex;
   justify-content: space-between;
 
-  background: var(--b-100);
+  background: var(--b-50);
 }
 
 .button-group {

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

@@ -119,7 +119,6 @@ export default {
     width: 100%;
     height: 100%;
     max-width: 100%;
-    padding: var(--space-normal) var(--space-two);
   }
 }
 </style>

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

@@ -142,6 +142,14 @@
     "TEAM_LABEL": "Assigned Team",
     "SELECT": {
       "PLACEHOLDER": "None"
+    },
+    "ACCORDION": {
+      "CONTACT_DETAILS": "Contact Details",
+      "CONVERSATION_ACTIONS": "Conversation Actions",
+      "CONVERSATION_LABELS": "Conversation Labels",
+      "CONVERSATION_INFO": "Conversation Information",
+      "CONTACT_ATTRIBUTES": "Contact Attributes",
+      "PREVIOUS_CONVERSATION": "Previous Conversations"
     }
   },
   "EMAIL_HEADER": {

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

@@ -1,6 +1,7 @@
 <template>
   <div class="contact-conversation--panel">
     <contact-details-item
+      v-if="showTitle"
       :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
       icon="ion-chatboxes"
       emoji="💬"
@@ -39,6 +40,10 @@ export default {
     Spinner,
   },
   props: {
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
     contactId: {
       type: [String, Number],
       required: true,
@@ -77,11 +82,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.contact-conversation__wrap {
-  margin-left: var(--space-medium);
-}
-
 .no-label-message {
+  margin-bottom: var(--space-normal);
   color: var(--b-500);
 }
 

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

@@ -1,6 +1,7 @@
 <template>
   <div class="custom-attributes--panel">
     <contact-details-item
+      v-if="showTitle"
       :title="$t('CUSTOM_ATTRIBUTES.TITLE')"
       icon="ion-code"
       emoji="📕"
@@ -30,6 +31,10 @@ export default {
   },
 
   props: {
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
     customAttributes: {
       type: Object,
       default: () => ({}),
@@ -51,13 +56,13 @@ export default {
     },
     parseAttributeToString(attribute) {
       switch (typeof attribute) {
-         case 'string':
+        case 'string':
-           return attribute;
+          return attribute;
-         case 'object':
+        case 'object':
-           return JSON.stringify(attribute);
+          return JSON.stringify(attribute);
-         default:
+        default:
-           return `${attribute}`;
+          return `${attribute}`;
-       }
+      }
     },
   },
 };
@@ -71,10 +76,6 @@ export default {
 .conv-details--item {
   padding-bottom: 0;
 }
-.custom-attribute--row {
-  margin-bottom: var(--space-small);
-  margin-left: var(--space-medium);
-}
 
 .custom-attribute--row__attribute {
   font-weight: 500;

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

@@ -5,122 +5,153 @@
     </span>
     <contact-info :contact="contact" :channel-type="channelType" />
     <div class="conversation--actions">
-      <div class="multiselect-wrap--small">
+      <accordion-item
-        <contact-details-item
+        :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
-          :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
+        :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
-          icon="ion-headphone"
+        @click="value => onContactItemClick('is_conv_actions_open', value)"
-          emoji="🧑‍🚀"
-        >
-          <template v-slot:button>
-            <woot-button
-              v-if="showSelfAssign"
-              icon="ion-arrow-right-c"
-              variant="link"
-              size="small"
-              class-names="button-content"
-              @click="onSelfAssign"
-            >
-              {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
-            </woot-button>
-          </template>
-        </contact-details-item>
-        <multiselect-dropdown
-          :options="agentsList"
-          :selected-item="assignedAgent"
-          :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
-          :multiselector-placeholder="
-            $t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
-          "
-          :no-search-result="
-            $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.AGENT')
-          "
-          :input-placeholder="
-            $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.AGENT')
-          "
-          @click="onClickAssignAgent"
-        />
-      </div>
-      <div class="multiselect-wrap--small">
-        <contact-details-item
-          :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
-          icon="ion-ios-people"
-          emoji="🎢"
-        />
-        <multiselect-dropdown
-          :options="teamsList"
-          :selected-item="assignedTeam"
-          :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
-          :multiselector-placeholder="
-            $t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
-          "
-          :no-search-result="
-            $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
-          "
-          :input-placeholder="
-            $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.TEAM')
-          "
-          @click="onClickAssignTeam"
-        />
-      </div>
-    </div>
-    <conversation-labels :conversation-id="conversationId" />
-    <div v-if="browser.browser_name" class="conversation--details">
-      <contact-details-item
-        v-if="location"
-        :title="$t('CONTACT_FORM.FORM.LOCATION.LABEL')"
-        :value="location"
-        icon="ion-map"
-        emoji="📍"
-      />
-      <contact-details-item
-        v-if="ipAddress"
-        :title="$t('CONTACT_PANEL.IP_ADDRESS')"
-        :value="ipAddress"
-        icon="ion-android-locate"
-        emoji="🧭"
-      />
-      <contact-details-item
-        v-if="browser.browser_name"
-        :title="$t('CONTACT_PANEL.BROWSER')"
-        :value="browserName"
-        icon="ion-ios-world-outline"
-        emoji="🌐"
-      />
-      <contact-details-item
-        v-if="browser.platform_name"
-        :title="$t('CONTACT_PANEL.OS')"
-        :value="platformName"
-        icon="ion-laptop"
-        emoji="💻"
-      />
-      <contact-details-item
-        v-if="referer"
-        :title="$t('CONTACT_PANEL.INITIATED_FROM')"
-        :value="referer"
-        icon="ion-link"
-        emoji="🔗"
       >
-        <a :href="referer" rel="noopener noreferrer nofollow" target="_blank">
+        <div>
-          {{ referer }}
+          <div class="multiselect-wrap--small">
-        </a>
+            <contact-details-item
-      </contact-details-item>
+              :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
-      <contact-details-item
+            >
-        v-if="initiatedAt"
+              <template v-slot:button>
-        :title="$t('CONTACT_PANEL.INITIATED_AT')"
+                <woot-button
-        :value="initiatedAt.timestamp"
+                  v-if="showSelfAssign"
-        icon="ion-clock"
+                  icon="ion-arrow-right-c"
-        emoji="🕰"
+                  variant="link"
-      />
+                  size="small"
+                  @click="onSelfAssign"
+                >
+                  {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
+                </woot-button>
+              </template>
+            </contact-details-item>
+            <multiselect-dropdown
+              :options="agentsList"
+              :selected-item="assignedAgent"
+              :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
+              :multiselector-placeholder="
+                $t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
+              "
+              :no-search-result="
+                $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.AGENT')
+              "
+              :input-placeholder="
+                $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.AGENT')
+              "
+              @click="onClickAssignAgent"
+            />
+          </div>
+          <div class="multiselect-wrap--small">
+            <contact-details-item
+              :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
+            />
+            <multiselect-dropdown
+              :options="teamsList"
+              :selected-item="assignedTeam"
+              :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
+              :multiselector-placeholder="
+                $t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
+              "
+              :no-search-result="
+                $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
+              "
+              :input-placeholder="
+                $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.TEAM')
+              "
+              @click="onClickAssignTeam"
+            />
+          </div>
+          <contact-details-item
+            :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_LABELS')"
+          />
+          <conversation-labels
+            :show-title="false"
+            :conversation-id="conversationId"
+          />
+        </div>
+      </accordion-item>
     </div>
-    <contact-custom-attributes
+
+    <accordion-item
+      v-if="browser.browser_name"
+      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
+      :is-open="isContactSidebarItemOpen('is_conv_details_open')"
+      @click="value => onContactItemClick('is_conv_details_open', value)"
+    >
+      <div class="conversation--details">
+        <contact-details-item
+          v-if="location"
+          :title="$t('CONTACT_FORM.FORM.LOCATION.LABEL')"
+          :value="location"
+          icon="ion-map"
+          emoji="📍"
+        />
+        <contact-details-item
+          v-if="ipAddress"
+          :title="$t('CONTACT_PANEL.IP_ADDRESS')"
+          :value="ipAddress"
+          icon="ion-android-locate"
+          emoji="🧭"
+        />
+        <contact-details-item
+          v-if="browser.browser_name"
+          :title="$t('CONTACT_PANEL.BROWSER')"
+          :value="browserName"
+          icon="ion-ios-world-outline"
+          emoji="🌐"
+        />
+        <contact-details-item
+          v-if="browser.platform_name"
+          :title="$t('CONTACT_PANEL.OS')"
+          :value="platformName"
+          icon="ion-laptop"
+          emoji="💻"
+        />
+        <contact-details-item
+          v-if="referer"
+          :title="$t('CONTACT_PANEL.INITIATED_FROM')"
+          :value="referer"
+          icon="ion-link"
+          emoji="🔗"
+        >
+          <a :href="referer" rel="noopener noreferrer nofollow" target="_blank">
+            {{ referer }}
+          </a>
+        </contact-details-item>
+        <contact-details-item
+          v-if="initiatedAt"
+          :title="$t('CONTACT_PANEL.INITIATED_AT')"
+          :value="initiatedAt.timestamp"
+          icon="ion-clock"
+          emoji="🕰"
+        />
+      </div>
+    </accordion-item>
+    <accordion-item
       v-if="hasContactAttributes"
-      :custom-attributes="contact.custom_attributes"
+      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-    />
+      :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
-    <contact-conversations
+      @click="value => onContactItemClick('is_contact_attributes_open', value)"
+    >
+      <contact-custom-attributes
+        :show-title="false"
+        :custom-attributes="contact.custom_attributes"
+      />
+    </accordion-item>
+    <accordion-item
       v-if="contact.id"
-      :contact-id="contact.id"
+      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')"
-      :conversation-id="conversationId"
+      :is-open="isContactSidebarItemOpen('is_previous_conv_open')"
-    />
+      @click="value => onContactItemClick('is_previous_conv_open', value)"
+    >
+      <contact-conversations
+        :show-title="false"
+        :contact-id="contact.id"
+        :conversation-id="conversationId"
+      />
+    </accordion-item>
   </div>
 </template>
 
@@ -129,12 +160,14 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import agentMixin from '../../../mixins/agentMixin';
 
+import AccordionItem from 'dashboard/components/Accordion/AccordionItem';
 import ContactConversations from './ContactConversations.vue';
+import ContactCustomAttributes from './ContactCustomAttributes';
 import ContactDetailsItem from './ContactDetailsItem.vue';
 import ContactInfo from './contact/ContactInfo';
 import ConversationLabels from './labels/LabelBox.vue';
-import ContactCustomAttributes from './ContactCustomAttributes';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 import flag from 'country-code-emoji';
 
@@ -146,8 +179,9 @@ export default {
     ContactInfo,
     ConversationLabels,
     MultiselectDropdown,
+    AccordionItem,
   },
-  mixins: [alertMixin, agentMixin],
+  mixins: [alertMixin, agentMixin, uiSettingsMixin],
   props: {
     conversationId: {
       type: [Number, String],
@@ -191,9 +225,8 @@ export default {
       return this.additionalAttributes.initiated_at;
     },
     browserName() {
-      return `${this.browser.browser_name || ''} ${
+      return `${this.browser.browser_name || ''} ${this.browser
-        this.browser.browser_version || ''
+        .browser_version || ''}`;
-      }`;
     },
     contactAdditionalAttributes() {
       return this.contact.additional_attributes || {};
@@ -217,8 +250,10 @@ export default {
       return `${cityAndCountry} ${countryFlag}`;
     },
     platformName() {
-      const { platform_name: platformName, platform_version: platformVersion } =
+      const {
-        this.browser;
+        platform_name: platformName,
+        platform_version: platformVersion,
+      } = this.browser;
       return `${platformName || ''} ${platformVersion || ''}`;
     },
     channelType() {
@@ -300,6 +335,16 @@ export default {
     this.getContactDetails();
   },
   methods: {
+    onContactItemClick(key) {
+      this.updateUISettings({ [key]: !this.isContactSidebarItemOpen(key) });
+    },
+    isContactSidebarItemOpen(key) {
+      if (this.currentChat.id) {
+        const { [key]: isOpen } = this.uiSettings;
+        return isOpen;
+      }
+      return false;
+    },
     onPanelToggle() {
       this.onToggle();
     },
@@ -372,7 +417,6 @@ export default {
 ::v-deep {
   .contact--profile {
     padding-bottom: var(--space-slab);
-    margin-bottom: var(--space-normal);
     border-bottom: 1px solid var(--color-border-light);
   }
   .conversation--actions .multiselect-wrap--small {
@@ -423,18 +467,7 @@ export default {
   justify-content: center;
 }
 
-.conversation--actions {
+.contact-info {
-  margin-bottom: var(--space-normal);
+  margin-top: var(--space-two);
-}
-
-.option__desc {
-  display: flex;
-  align-items: center;
-
-  &::v-deep .status-badge {
-    margin-right: var(--space-small);
-    min-width: 0;
-    flex-shrink: 0;
-  }
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -151,7 +151,7 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 .contact--profile {
   align-items: flex-start;
-  margin-bottom: var(--space-normal);
+  padding: var(--space-normal);
 
   .user-thumbnail-box {
     margin-right: $space-normal;

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -5,6 +5,7 @@
       class="contact-conversation--list"
     >
       <contact-details-item
+        v-if="showTitle"
         :title="$t('CONTACT_PANEL.LABELS.CONVERSATION.TITLE')"
         icon="ion-pricetags"
         emoji="🏷️"
@@ -63,6 +64,10 @@ export default {
 
   mixins: [clickaway],
   props: {
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
     conversationId: {
       type: Number,
       required: true,
@@ -160,17 +165,16 @@ export default {
   width: 100%;
 
   .label-wrap {
-    margin-left: var(--space-medium);
-    position: relative;
     line-height: var(--space-medium);
+    position: relative;
 
     .dropdown-wrap {
       display: flex;
-      position: absolute;
+      left: -1px;
       margin-right: var(--space-medium);
+      position: absolute;
       top: var(--space-medium);
       width: 100%;
-      left: -1px;
 
       .dropdown-pane {
         width: 100%;

app/javascript/shared/components/ui/dropdown/AddLabel.vue

@@ -23,7 +23,7 @@ export default {
   &::v-deep .label {
     cursor: pointer;
     background: transparent;
-    border-color: var(--s-700);
+    border-color: var(--s-600);
     margin: 0;
 
     &:hover {