feat: Upgrade prompt for help center (#8010)

Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -19,6 +19,7 @@
       @open-modal="onClickOpenAddCategoryModal"
     />
     <section
+      v-if="isHelpCenterEnabled"
       class="flex h-full min-h-0 overflow-hidden flex-1 px-0 bg-white dark:bg-slate-900"
     >
       <router-view />
@@ -53,11 +54,12 @@
         @cancel="onClickCloseAddCategoryModal"
       />
     </section>
+    <upgrade-page v-else />
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
-
+import UpgradePage from './UpgradePage';
 import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -70,17 +72,19 @@ import NotificationPanel from 'dashboard/routes/dashboard/notifications/componen
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import portalMixin from '../mixins/portalMixin';
 import AddCategory from '../pages/categories/AddCategory.vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export default {
   components: {
-    Sidebar,
-    HelpCenterSidebar,
+    AccountSelector,
+    AddCategory,
     CommandBar,
-    WootKeyShortcutModal,
+    HelpCenterSidebar,
     NotificationPanel,
     PortalPopover,
-    AddCategory,
-    AccountSelector,
+    Sidebar,
+    UpgradePage,
+    WootKeyShortcutModal,
   },
   mixins: [portalMixin, uiSettingsMixin],
   data() {
@@ -102,13 +106,25 @@ export default {
       categories: 'categories/allCategories',
       meta: 'portals/getMeta',
       isFetching: 'portals/isFetchingPortals',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
+
+    isHelpCenterEnabled() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.HELP_CENTER
+      );
+    },
     isSidebarOpen() {
       const { show_help_center_secondary_sidebar: showSecondarySidebar } =
         this.uiSettings;
       return showSecondarySidebar;
     },
     showHelpCenterSidebar() {
+      if (!this.isHelpCenterEnabled) {
+        return false;
+      }
+
       return this.portals.length === 0 ? false : this.isSidebarOpen;
     },
     selectedPortal() {

app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue

@@ -0,0 +1,135 @@
+<template>
+  <div
+    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full h-full max-w-full overflow-auto bg-white dark:bg-slate-900"
+  >
+    <div class="flex flex-col justify-start sm:justify-center gap-6">
+      <div class="flex flex-col gap-1.5 items-start sm:items-center">
+        <h1
+          class="text-slate-900 dark:text-white text-left sm:text-center text-4xl sm:text-5xl mb-6 font-semibold"
+        >
+          {{ $t('HELP_CENTER.UPGRADE_PAGE.TITLE') }}
+        </h1>
+        <p
+          class="max-w-2xl text-base font-normal leading-6 text-left sm:text-center text-slate-700 dark:text-slate-200"
+        >
+          {{
+            isOnChatwootCloud
+              ? $t('HELP_CENTER.UPGRADE_PAGE.DESCRIPTION')
+              : $t('HELP_CENTER.UPGRADE_PAGE.SELF_HOSTED_DESCRIPTION')
+          }}
+        </p>
+      </div>
+      <div
+        v-if="isOnChatwootCloud"
+        class="flex flex-row gap-3 justify-start items-center sm:justify-center"
+      >
+        <woot-button
+          size="medium"
+          variant="hollow"
+          color-scheme="primary"
+          @click="openHelpCenterDocs"
+        >
+          {{ $t('HELP_CENTER.UPGRADE_PAGE.BUTTON.LEARN_MORE') }}
+        </woot-button>
+        <woot-button
+          size="medium"
+          color-scheme="primary"
+          @click="openBillingPage"
+        >
+          {{ $t('HELP_CENTER.UPGRADE_PAGE.BUTTON.UPGRADE') }}
+        </woot-button>
+      </div>
+    </div>
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-16 w-full max-w-2xl overflow-auto"
+    >
+      <div
+        v-for="feature in upgradeFeature"
+        :key="feature.key"
+        class="w-64 min-w-full"
+      >
+        <div class="flex gap-2 flex-row">
+          <div>
+            <fluent-icon
+              :icon="feature.icon"
+              icon-lib="lucide"
+              :size="26"
+              class="mt-px text-slate-800 dark:text-slate-25"
+            />
+          </div>
+          <div>
+            <h5 class="font-semibold text-lg text-slate-800 dark:text-slate-25">
+              {{ feature.title }}
+            </h5>
+            <p class="text-sm leading-6 text-slate-700 dark:text-slate-100">
+              {{ feature.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import wootConstants from 'dashboard/constants/globals';
+export default {
+  data() {
+    return {
+      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
+      upgradeFeature: [
+        {
+          key: 1,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.TITLE'),
+          icon: 'book-copy',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.DESCRIPTION'
+          ),
+        },
+        {
+          key: 2,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.TITLE'),
+          icon: 'globe-line',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.DESCRIPTION'
+          ),
+        },
+        {
+          key: 3,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.TITLE'),
+          icon: 'heart-handshake',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.DESCRIPTION'
+          ),
+        },
+        {
+          key: 4,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.API.TITLE'),
+          icon: 'search-check',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.API.DESCRIPTION'
+          ),
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', // Pending change text
+    }),
+  },
+  methods: {
+    openBillingPage() {
+      this.$router.push({
+        name: 'billing_settings_index',
+        params: { accountId: this.accountId },
+      });
+    },
+    openHelpCenterDocs() {
+      window.open(this.helpCenterDocsURL, '_blank');
+    },
+  },
+};
+</script>