Chore: Add link to product docs on sidebar (#5119)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -3,6 +3,7 @@
     <primary-sidebar
       :logo-source="globalConfig.logoThumbnail"
       :installation-name="globalConfig.installationName"
+      :is-a-custom-branded-instance="isACustomBrandedInstance"
       :account-id="accountId"
       :menu-items="primaryMenuItems"
       :active-menu-item="activePrimaryMenu.key"
@@ -68,6 +69,7 @@ export default {
     ...mapGetters({
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
+      isACustomBrandedInstance: 'globalConfig/isACustomBrandedInstance',
       isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -16,6 +16,13 @@
       />
     </nav>
     <div class="menu vertical user-menu">
+      <primary-nav-item
+        v-if="!isACustomBrandedInstance"
+        icon="book-open-globe"
+        name="DOCS"
+        :open-in-new-page="true"
+        :to="helpDocsURL"
+      />
       <notification-bell @open-notification-panel="openNotificationPanel" />
       <agent-details @toggle-menu="toggleOptions" />
       <options-menu
@@ -34,7 +41,7 @@ import PrimaryNavItem from './PrimaryNavItem';
 import OptionsMenu from './OptionsMenu';
 import AgentDetails from './AgentDetails';
 import NotificationBell from './NotificationBell';
-
+import wootConstants from 'dashboard/constants';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export default {
@@ -46,6 +53,10 @@ export default {
     NotificationBell,
   },
   props: {
+    isACustomBrandedInstance: {
+      type: Boolean,
+      default: false,
+    },
     logoSource: {
       type: String,
       default: '',
@@ -69,6 +80,7 @@ export default {
   },
   data() {
     return {
+      helpDocsURL: wootConstants.DOCS_URL,
       showOptionsMenu: false,
     };
   },

app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue

@@ -5,6 +5,8 @@
       :href="href"
       class="button clear button--only-icon menu-item"
       :class="{ 'is-active': isActive || isChildMenuActive }"
+      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
+      :target="openInNewPage ? '_blank' : undefined"
       @click="navigate"
     >
       <fluent-icon :icon="icon" />
@@ -36,6 +38,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    openInNewPage: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

app/javascript/dashboard/constants.js

@@ -12,5 +12,6 @@ export default {
     SNOOZED: 'snoozed',
     ALL: 'all',
   },
+  DOCS_URL: '//www.chatwoot.com/docs/product/',
 };
 export const DEFAULT_REDIRECT_URL = '/app/';

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

@@ -194,7 +194,8 @@
       "DRAFT": "Draft",
       "ARCHIVED": "Archived",
       "CATEGORY": "Category"
-    }
+    },
+    "DOCS": "Read docs"
   },
   "BILLING_SETTINGS": {
     "TITLE": "Billing",

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -28,6 +28,7 @@
     "M12.375 6.005a4.75 4.75 0 1 0 0 9.5 4.75 4.75 0 0 0 0-9.5Zm-3.5 4.75a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Z",
     "M6.5 2A2.5 2.5 0 0 0 4 4.5v15A2.5 2.5 0 0 0 6.5 22h13.25a.75.75 0 0 0 0-1.5H6.5a1 1 0 0 1-1-1h14.25a.75.75 0 0 0 .75-.75V4.5A2.5 2.5 0 0 0 18 2H6.5ZM19 18H5.5V4.5a1 1 0 0 1 1-1H18a1 1 0 0 1 1 1V18Z"
   ],
+  "book-open-globe-outline": "M3.5 5.75a.25.25 0 0 1 .25-.25H10c.69 0 1.25.56 1.25 1.25v8.959a6.49 6.49 0 0 1 1.5-2.646V6.75c0-.69.56-1.25 1.25-1.25h6.25a.25.25 0 0 1 .25.25v5.982A6.518 6.518 0 0 1 22 12.81V5.75A1.75 1.75 0 0 0 20.25 4H14c-.788 0-1.499.331-2 .863A2.742 2.742 0 0 0 10 4H3.75A1.75 1.75 0 0 0 2 5.75v12.5c0 .966.784 1.75 1.75 1.75H10c.495 0 .96-.13 1.36-.36a6.473 6.473 0 0 1-.343-1.663A1.248 1.248 0 0 1 10 18.5H3.75a.25.25 0 0 1-.25-.25V5.75ZM16.007 17c.04-1.415.248-2.669.553-3.585.171-.513.364-.893.554-1.134.195-.247.329-.281.386-.281.057 0 .192.034.386.281.19.241.383.62.554 1.134.305.916.513 2.17.553 3.585h-2.986Zm-.396-3.9c.108-.323.23-.622.368-.887A5.504 5.504 0 0 0 12.023 17h2.984c.04-1.5.26-2.866.604-3.9Zm3.778 0a6.133 6.133 0 0 0-.368-.887A5.504 5.504 0 0 1 22.978 17h-2.985c-.04-1.5-.26-2.866-.604-3.9Zm.604 4.9h2.985a5.504 5.504 0 0 1-3.957 4.787c.138-.265.26-.564.368-.886.345-1.035.564-2.4.604-3.901Zm-2.107 4.719c-.194.247-.329.281-.386.281-.057 0-.191-.034-.386-.281-.19-.241-.383-.62-.554-1.135-.305-.915-.513-2.17-.553-3.584h2.986c-.04 1.415-.248 2.669-.553 3.584-.171.514-.364.894-.554 1.135ZM12.023 18a5.504 5.504 0 0 0 3.956 4.787 6.133 6.133 0 0 1-.367-.886c-.346-1.035-.565-2.4-.605-3.901h-2.984Z",
   "building-bank-outline": "M13.032 2.325a1.75 1.75 0 0 0-2.064 0L3.547 7.74c-.978.713-.473 2.26.736 2.26H4.5v5.8A2.75 2.75 0 0 0 3 18.25v1.5c0 .413.336.75.75.75h16.5a.75.75 0 0 0 .75-.75v-1.5a2.75 2.75 0 0 0-1.5-2.45V10h.217c1.21 0 1.713-1.547.736-2.26l-7.421-5.416Zm-1.18 1.211a.25.25 0 0 1 .295 0L18.95 8.5H5.05l6.803-4.964ZM18 10v5.5h-2V10h2Zm-3.5 0v5.5h-1.75V10h1.75Zm-3.25 0v5.5H9.5V10h1.75Zm-5.5 7h12.5c.69 0 1.25.56 1.25 1.25V19h-15v-.75c0-.69.56-1.25 1.25-1.25ZM6 15.5V10h2v5.5H6Z",
   "calendar-clock-outline": [
     "M21 6.25A3.25 3.25 0 0 0 17.75 3H6.25A3.25 3.25 0 0 0 3 6.25v11.5A3.25 3.25 0 0 0 6.25 21h5.772a6.471 6.471 0 0 1-.709-1.5H6.25a1.75 1.75 0 0 1-1.75-1.75V8.5h15v2.813a6.471 6.471 0 0 1 1.5.709V6.25ZM6.25 4.5h11.5c.966 0 1.75.784 1.75 1.75V7h-15v-.75c0-.966.784-1.75 1.75-1.75Z",

app/javascript/shared/store/globalConfig.js

@@ -41,6 +41,7 @@ const state = {
 export const getters = {
   get: $state => $state,
   isOnChatwootCloud: $state => $state.deploymentEnv === 'cloud',
+  isACustomBrandedInstance: $state => $state.installationName !== 'Chatwoot',
 };
 
 export const actions = {};