LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 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
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

4
app/javascript/dashboard/App.vue
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>

12
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
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;
}
}
}

8
app/javascript/dashboard/components/layout/Sidebar.vue
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,

1
app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
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'],

1
app/javascript/dashboard/constants/globals.js
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'],

27
app/javascript/dashboard/i18n/locale/en/helpCenter.json
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."
}
}
}
}
}

2
app/javascript/dashboard/i18n/locale/en/settings.json
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",

28
app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
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() {

135
app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue Normal file
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>

5
app/javascript/shared/components/FluentIcon/DashboardIcon.vue
View File

@@ -5,6 +5,7 @@
:type="type"
:icons="icons"
:view-box="viewBox"
:icon-lib="iconLib"
/>
</template>
<script>
@@ -33,6 +34,10 @@ export default {
type: String,
default: '0 0 24 24',
},
iconLib: {
type: String,
default: 'fluent',
},
},
data() {
return { icons };

22
app/javascript/shared/components/FluentIcon/Icon.vue
View File

@@ -1,5 +1,6 @@
<template>
<svg
v-if="iconLib === 'fluent'"
:width="size"
:height="size"
fill="none"
@@ -13,6 +14,23 @@
fill="currentColor"
/>
</svg>
<svg
v-else
:width="size"
:height="size"
fill="none"
:viewBox="viewBox"
xmlns="http://www.w3.org/2000/svg"
>
<g v-for="(pathData, index) in pathSource" :key="index">
<path
:key="pathData"
:d="pathData"
stroke="currentColor"
stroke-width="1.66667"
/>
</g>
</svg>
</template>
<script>
export default {
@@ -37,6 +55,10 @@ export default {
type: String,
default: '0 0 24 24',
},
iconLib: {
type: String,
default: 'fluent',
},
},
computed: {

5
app/javascript/shared/components/FluentIcon/Index.vue
View File

@@ -5,6 +5,7 @@
:type="type"
:icons="icons"
:view-box="viewBox"
:icon-lib="iconLib"
/>
</template>
<script>
@@ -33,6 +34,10 @@ export default {
type: String,
default: '0 0 24 24',
},
iconLib: {
type: String,
default: 'fluent',
},
},
data() {
return { icons };

22
app/javascript/shared/components/FluentIcon/dashboard-icons.json
View File

@@ -224,5 +224,27 @@
"M6 3.99988L5.728 4.01854C5.24919 4.08427 4.81038 4.32115 4.49271 4.68539C4.17505 5.04962 4.00002 5.51656 4 5.99986V7.99984H2L1.728 8.01851C1.24919 8.08423 0.810374 8.32112 0.492709 8.68535C0.175044 9.04959 2.04617e-05 9.51653 0 9.99982L0.0186659 10.2718C0.0843951 10.7506 0.321281 11.1894 0.685517 11.5071C1.04975 11.8248 1.5167 11.9998 2 11.9998H4V13.9998L4.01867 14.2718C4.0844 14.7506 4.32128 15.1894 4.68551 15.5071C5.04975 15.8247 5.5167 15.9997 6 15.9998L6.272 15.9811C7.248 15.8478 8 15.0131 8 13.9998V11.9998H10L10.272 11.9811C11.248 11.8478 12 11.0131 12 9.99982L11.9813 9.72782C11.9156 9.24902 11.6787 8.81021 11.3145 8.49255C10.9502 8.17489 10.4833 7.99986 10 7.99984H8V5.99986L7.98133 5.72786C7.9156 5.24906 7.67872 4.81025 7.31448 4.49258C6.95024 4.17492 6.4833 3.9999 6 3.99988Z",
"M14 0L13.9093 0.00622212C13.7497 0.0281315 13.6035 0.107093 13.4976 0.228504C13.3917 0.349915 13.3333 0.505562 13.3333 0.666661V1.33332H12.6667L12.576 1.33954C12.4164 1.36145 12.2701 1.44041 12.1642 1.56183C12.0584 1.68324 12 1.83888 12 1.99998L12.0062 2.09065C12.0281 2.25025 12.1071 2.39652 12.2285 2.50241C12.3499 2.60829 12.5056 2.66664 12.6667 2.66664H13.3333V3.3333L13.3396 3.42397C13.3615 3.58357 13.4404 3.72984 13.5618 3.83573C13.6833 3.94162 13.8389 3.99996 14 3.99996L14.0907 3.99374C14.416 3.9493 14.6667 3.67108 14.6667 3.3333V2.66664H15.3333L15.424 2.66042C15.7493 2.61598 16 2.33776 16 1.99998L15.9938 1.90932C15.9719 1.74971 15.8929 1.60345 15.7715 1.49756C15.6501 1.39167 15.4944 1.33333 15.3333 1.33332H14.6667V0.666661L14.6605 0.575995C14.6385 0.416393 14.5596 0.270123 14.4382 0.164236C14.3168 0.0583485 14.1611 6.79363e-06 14 0Z",
"M16 12.0001L15.8187 12.0125C15.4995 12.0563 15.2069 12.2143 14.9951 12.4571C14.7834 12.6999 14.6667 13.0112 14.6667 13.3334V14.6667H13.3333L13.152 14.6792C12.8328 14.723 12.5403 14.8809 12.3285 15.1237C12.1167 15.3665 12 15.6778 12 16L12.0124 16.1814C12.0563 16.5006 12.2142 16.7931 12.457 17.0049C12.6998 17.2167 13.0111 17.3333 13.3333 17.3334H14.6667V18.6667L14.6791 18.848C14.7229 19.1672 14.8809 19.4598 15.1237 19.6715C15.3665 19.8833 15.6778 20 16 20L16.1813 19.9876C16.832 19.8987 17.3333 19.3422 17.3333 18.6667V17.3334H18.6667L18.848 17.3209C19.4987 17.232 20 16.6756 20 16L19.9876 15.8187C19.9437 15.4995 19.7858 15.207 19.543 14.9952C19.3002 14.7834 18.9889 14.6667 18.6667 14.6667H17.3333V13.3334L17.3209 13.1521C17.2771 12.8329 17.1191 12.5403 16.8763 12.3285C16.6335 12.1168 16.3222 12.0001 16 12.0001Z"
],
"book-copy-outline": [
"M3.66675 15.3334V5.33341C3.66675 4.89139 3.84234 4.46746 4.1549 4.1549C4.46746 3.84234 4.89139 3.66675 5.33341 3.66675H14.5001",
"M6.16675 13.6667H5.33341C4.89139 13.6667 4.46746 13.8423 4.1549 14.1549C3.84234 14.4675 3.66675 14.8914 3.66675 15.3334C3.66675 15.7754 3.84234 16.1994 4.1549 16.5119C4.46746 16.8245 4.89139 17.0001 5.33341 17.0001H6.16675",
"M20.3333 17H11.1667C10.7246 17 10.3007 17.1756 9.98816 17.4882C9.6756 17.8007 9.5 18.2246 9.5 18.6667M9.5 18.6667C9.5 19.1087 9.6756 19.5326 9.98816 19.8452C10.3007 20.1577 10.7246 20.3333 11.1667 20.3333H20.3333V7H11.1667C10.7246 7 10.3007 7.17559 9.98816 7.48816C9.6756 7.80072 9.5 8.22464 9.5 8.66667V18.6667Z"
],
"globe-line-outline": [
"M12.0001 20.3334C16.6025 20.3334 20.3334 16.6025 20.3334 12.0001C20.3334 7.39771 16.6025 3.66675 12.0001 3.66675C7.39771 3.66675 3.66675 7.39771 3.66675 12.0001C3.66675 16.6025 7.39771 20.3334 12.0001 20.3334Z",
"M3.66675 12H20.3334",
"M12.0001 3.66675C14.0845 5.94871 15.269 8.91011 15.3334 12.0001C15.269 15.0901 14.0845 18.0515 12.0001 20.3334C9.91568 18.0515 8.73112 15.0901 8.66675 12.0001C8.73112 8.91011 9.91568 5.94871 12.0001 3.66675Z"
],
"heart-handshake-outline": [
"M17.8334 13.6667C19.0751 12.45 20.3334 10.9917 20.3334 9.08333C20.3334 7.86776 19.8505 6.70197 18.991 5.84243C18.1314 4.98289 16.9657 4.5 15.7501 4.5C14.2834 4.5 13.2501 4.91667 12.0001 6.16667C10.7501 4.91667 9.71675 4.5 8.25008 4.5C7.03451 4.5 5.86872 4.98289 5.00918 5.84243C4.14963 6.70197 3.66675 7.86776 3.66675 9.08333C3.66675 11 4.91675 12.4583 6.16675 13.6667L12.0001 19.5L17.8334 13.6667Z",
"M12 6.16675L9.53334 8.63341C9.36402 8.8015 9.22964 9.00143 9.13794 9.22169C9.04624 9.44194 8.99902 9.67817 8.99902 9.91675C8.99902 10.1553 9.04624 10.3916 9.13794 10.6118C9.22964 10.8321 9.36402 11.032 9.53334 11.2001C10.2167 11.8834 11.3083 11.9084 12.0333 11.2584L13.7583 9.67508C14.1907 9.28274 14.7537 9.06541 15.3375 9.06541C15.9214 9.06541 16.4843 9.28274 16.9167 9.67508L19.3833 11.8917",
"M16.9999 14.4999L15.3333 12.8333",
"M14.4999 16.9999L12.8333 15.3333"
],
"search-check-outline": [
"M8.66675 11.1667L10.3334 12.8333L13.6667 9.5",
"M11.1667 17.8333C14.8486 17.8333 17.8333 14.8486 17.8333 11.1667C17.8333 7.48477 14.8486 4.5 11.1667 4.5C7.48477 4.5 4.5 7.48477 4.5 11.1667C4.5 14.8486 7.48477 17.8333 11.1667 17.8333Z",
"M19.5001 19.5001L15.9167 15.9167"
]
}