akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Upgrade prompt for help center (#8010)

Browse Source 
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
2023-10-05 08:34:21 +05:30
committed by GitHub
co-authored by Sojan Jose Pranav Raj S
parent 6f19546c3c
commit 3ea54065b1
13 changed files with 255 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/App.vue
+2 -2
View File
@@ -1,13 +1,13 @@
<template>
<div
v-if="!authUIFlags.isFetching"
v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
id="app"
class="app-wrapper h-full flex-grow-0 min-h-0 w-full"
:class="{ 'app-rtl--wrapper': isRTLView }"
:dir="isRTLView ? 'rtl' : 'ltr'"
>
<update-banner :latest-chatwoot-version="latestChatwootVersion" />
<template v-if="!accountUIFlags.isFetchingItem && currentAccountId">
<template v-if="currentAccountId">
<payment-pending-banner />
<upgrade-banner />
</template>
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+6 -6
View File
@@ -34,26 +34,26 @@
}
&.hollow {
@apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
@apply border border-woot-500 dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
&.secondary {
@apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
}
&.success {
@apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
@apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
}
&.alert {
@apply text-red-700 dark:text-red-100 hover:bg-red-50 dark:hover:bg-red-800;
@apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
}
&.warning {
@apply text-yellow-700 dark:text-yellow-100 hover:bg-yellow-50 dark:hover:bg-yellow-800;
@apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
}
&:hover {
@apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
@apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
&.secondary {
@apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
@@ -68,7 +68,7 @@
}
&.warning {
@apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
@apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
}
}
}
app/javascript/dashboard/components/layout/Sidebar.vue
+6 -2
View File
@@ -11,7 +11,6 @@
@key-shortcut-modal="toggleKeyShortcutModal"
@open-notification-panel="openNotificationPanel"
/>
<secondary-sidebar
v-if="showSecondarySidebar"
:class="sidebarClassName"
@@ -114,7 +113,12 @@ export default {
if (!isAvailableForTheUser) {
return false;
}
if (
menuItem.alwaysVisibleOnChatwootInstances &&
!this.isACustomBrandedInstance
) {
return true;
}
if (menuItem.featureFlag) {
return this.isFeatureEnabledonAccount(
this.accountId,
app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+1
View File
@@ -42,6 +42,7 @@ const primaryMenuItems = accountId => [
key: 'helpcenter',
label: 'HELP_CENTER.TITLE',
featureFlag: FEATURE_FLAGS.HELP_CENTER,
alwaysVisibleOnChatwootInstances: true,
toState: frontendURL(`accounts/${accountId}/portals`),
toStateName: 'default_portal_articles',
roles: ['administrator'],
app/javascript/dashboard/constants/globals.js
+1
View File
@@ -28,6 +28,7 @@ export default {
EXPANDED: 'expanded',
},
DOCS_URL: '//www.chatwoot.com/docs/product/',
HELP_CENTER_DOCS_URL: '//www.chatwoot.com/docs/product/others/help-center',
TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
SMALL_SCREEN_BREAKPOINT: 1024,
AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
app/javascript/dashboard/i18n/locale/en/helpCenter.json
+27
View File
@@ -425,6 +425,33 @@
"ERROR_MESSAGE": "Unable to delete category"
}
}
},
"UPGRADE_PAGE": {
"TITLE": "Help Center",
"DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Upgrade your subscription to enable this feature.",
"SELF_HOSTED_DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Please contact your administrator to enable this feature.",
"BUTTON": {
"LEARN_MORE": "Learn more",
"UPGRADE": "Upgrade"
},
"FEATURES": {
"PORTALS": {
"TITLE": "Multiple portals",
"DESCRIPTION": "Create multiple help center portals for different products using the same account."
},
"LOCALES": {
"TITLE": "Full support for locales",
"DESCRIPTION": "Localize the portal in your language. We support all locales and allow translations for every article."
},
"SEO": {
"TITLE": "SEO-friendly design",
"DESCRIPTION": "Customize your meta tags to improve your visibility on search engines with our SEO-friendly pages."
},
"API": {
"TITLE": "Full API support",
"DESCRIPTION": "Use the portal as a headless CMS with third party front-end frameworks using our APIs."
}
}
}
}
}
app/javascript/dashboard/i18n/locale/en/settings.json
+1 -1
View File
@@ -238,7 +238,7 @@
"REPORTS_OVERVIEW": "Overview",
"FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
"HELP_CENTER": {
"TITLE": "Help Center (Beta)",
"TITLE": "Help Center",
"ALL_ARTICLES": "All Articles",
"MY_ARTICLES": "My Articles",
"DRAFT": "Draft",
app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+22 -6
View File
@@ -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
+135
View File
@@ -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>