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>
2021-09-06 00:19:09 +05:30
parent 9acac38635
commit 7fc575a474
12 changed files with 346 additions and 156 deletions
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/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);
    }
  }
 }
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.stories.js
+++ b/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',
+};
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/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>
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/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 {
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/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>
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/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": {
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/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);
 }

--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
+++ b/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':
-           return attribute;
-         case 'object':
-           return JSON.stringify(attribute);
-         default:
-           return `${attribute}`;
-       }
+        case 'string':
+          return attribute;
+        case 'object':
+          return JSON.stringify(attribute);
+        default:
+          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;
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/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">
-        <contact-details-item
-          :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
-          icon="ion-headphone"
-          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="🔗"
+      <accordion-item
+        :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
+        :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
+        @click="value => onContactItemClick('is_conv_actions_open', value)"
      >
-        <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>
+          <div class="multiselect-wrap--small">
+            <contact-details-item
+              :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
+            >
+              <template v-slot:button>
+                <woot-button
+                  v-if="showSelfAssign"
+                  icon="ion-arrow-right-c"
+                  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"
-    />
-    <contact-conversations
+      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
+      :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
+      @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"
-      :conversation-id="conversationId"
-    />
+      :title="$t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')"
+      :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 || ''} ${
-        this.browser.browser_version || ''
-      }`;
+      return `${this.browser.browser_name || ''} ${this.browser
+        .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 } =
-        this.browser;
+      const {
+        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 {
-  margin-bottom: var(--space-normal);
-}
-
-.option__desc {
-  display: flex;
-  align-items: center;
-
-  &::v-deep .status-badge {
-    margin-right: var(--space-small);
-    min-width: 0;
-    flex-shrink: 0;
-  }
+.contact-info {
+  margin-top: var(--space-two);
 }
 </style>
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/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;
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/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%;
--- a/app/javascript/shared/components/ui/dropdown/AddLabel.vue
+++ b/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 {