From 2cde42c7ec725c0a9bc2651aa82465441f7150e8 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 17 Apr 2024 05:29:39 +0530 Subject: [PATCH] feat: add upgrade banner for SLA feature (#9240) - Add an upgrade CTA for the SLA feature ------------------- Co-authored-by: Sojan Jose Co-authored-by: Pranav --- .../layout/config/sidebarItems/settings.js | 18 ++-- .../sidebarComponents/SecondaryNavItem.vue | 33 ++++++-- .../dashboard/i18n/locale/en/sla.json | 11 +++ .../routes/dashboard/settings/sla/Index.vue | 82 +++++++++---------- .../sla/components/BaseEmptyState.vue | 33 ++++++++ .../settings/sla/components/SLAEmptyState.vue | 22 +++++ .../sla/components/SLAPaywallEnterprise.vue | 73 +++++++++++++++++ .../dashboard/store/modules/accounts.js | 26 +++--- .../modules/specs/account/getters.spec.js | 9 -- app/javascript/shared/mixins/configMixin.js | 4 + app/views/layouts/vueapp.html.erb | 3 + 11 files changed, 233 insertions(+), 81 deletions(-) create mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue create mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue create mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js index 3ea6d39bf..f450bd7a7 100644 --- a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js +++ b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js @@ -142,20 +142,13 @@ const settings = accountId => ({ toStateName: 'settings_applications', featureFlag: FEATURE_FLAGS.INTEGRATIONS, }, - { - icon: 'credit-card-person', - label: 'BILLING', - hasSubMenu: false, - toState: frontendURL(`accounts/${accountId}/settings/billing`), - toStateName: 'billing_settings_index', - showOnlyOnCloud: true, - }, { icon: 'key', label: 'AUDIT_LOGS', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`), toStateName: 'auditlogs_list', + isEnterpriseOnly: true, featureFlag: FEATURE_FLAGS.AUDIT_LOGS, beta: true, }, @@ -165,9 +158,18 @@ const settings = accountId => ({ hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/settings/sla/list`), toStateName: 'sla_list', + isEnterpriseOnly: true, featureFlag: FEATURE_FLAGS.SLA, beta: true, }, + { + icon: 'credit-card-person', + label: 'BILLING', + hasSubMenu: false, + toState: frontendURL(`accounts/${accountId}/settings/billing`), + toStateName: 'billing_settings_index', + showOnlyOnCloud: true, + }, ], }); diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue index 05f6ebfe1..a7009523a 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue @@ -2,7 +2,7 @@
  • {{ $t(`SIDEBAR.${menuItem.label}`) }} @@ -19,7 +19,7 @@
    @@ -31,7 +31,7 @@ {{ $t(`SIDEBAR.${menuItem.label}`) }} {{ $t('SIDEBAR.BETA') }} -
      +
        diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue new file mode 100644 index 000000000..eb8bfd65a --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue @@ -0,0 +1,33 @@ + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue new file mode 100644 index 000000000..cfb40dbdc --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue @@ -0,0 +1,22 @@ + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue new file mode 100644 index 000000000..f5f8707c1 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue @@ -0,0 +1,73 @@ + + + diff --git a/app/javascript/dashboard/store/modules/accounts.js b/app/javascript/dashboard/store/modules/accounts.js index c11312914..3b67c69dc 100644 --- a/app/javascript/dashboard/store/modules/accounts.js +++ b/app/javascript/dashboard/store/modules/accounts.js @@ -1,12 +1,15 @@ import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers'; import * as types from '../mutation-types'; import AccountAPI from '../../api/account'; +import { differenceInDays } from 'date-fns'; import EnterpriseAccountAPI from '../../api/enterprise/account'; import { throwErrorMessage } from '../utils/api'; const findRecordById = ($state, id) => $state.records.find(record => record.id === Number(id)) || {}; +const TRIAL_PERIOD_DAYS = 15; + const state = { records: [], uiFlags: { @@ -19,26 +22,19 @@ const state = { export const getters = { getAccount: $state => id => { - return $state.records.find(record => record.id === Number(id)) || {}; + return findRecordById($state, id); }, getUIFlags($state) { return $state.uiFlags; }, - isFeatureEnabledonAccount: - ($state, _, __, rootGetters) => (id, featureName) => { - // If a user is SuperAdmin and has access to the account, then they would see all the available features - const isUserASuperAdmin = - rootGetters.getCurrentUser?.type === 'SuperAdmin'; - if (isUserASuperAdmin) { - return true; - } + isTrialAccount: $state => id => { + const account = findRecordById($state, id); + const createdAt = new Date(account.created_at); + const diffDays = differenceInDays(new Date(), createdAt); - const { features = {} } = findRecordById($state, id); - - return features[featureName] || false; - }, - // There are some features which can be enabled/disabled globally - isFeatureEnabledGlobally: $state => (id, featureName) => { + return diffDays <= TRIAL_PERIOD_DAYS; + }, + isFeatureEnabledonAccount: $state => (id, featureName) => { const { features = {} } = findRecordById($state, id); return features[featureName] || false; }, diff --git a/app/javascript/dashboard/store/modules/specs/account/getters.spec.js b/app/javascript/dashboard/store/modules/specs/account/getters.spec.js index c8613b706..e7eec6101 100644 --- a/app/javascript/dashboard/store/modules/specs/account/getters.spec.js +++ b/app/javascript/dashboard/store/modules/specs/account/getters.spec.js @@ -52,13 +52,4 @@ describe('#getters', () => { )(1, 'auto_resolve_conversations') ).toEqual(true); }); - - it('isFeatureEnabledGlobally', () => { - const state = { - records: [accountData], - }; - expect( - getters.isFeatureEnabledGlobally(state)(1, 'auto_resolve_conversations') - ).toEqual(false); - }); }); diff --git a/app/javascript/shared/mixins/configMixin.js b/app/javascript/shared/mixins/configMixin.js index 7561f08df..6973b7e70 100644 --- a/app/javascript/shared/mixins/configMixin.js +++ b/app/javascript/shared/mixins/configMixin.js @@ -12,5 +12,9 @@ export default { isEnterprise() { return window.chatwootConfig.isEnterprise === 'true'; }, + enterprisePlanName() { + // returns "community" or "enterprise" + return window.chatwootConfig?.enterprisePlanName; + }, }, }; diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb index a80f23cce..ed5723556 100644 --- a/app/views/layouts/vueapp.html.erb +++ b/app/views/layouts/vueapp.html.erb @@ -40,6 +40,9 @@ fbApiVersion: '<%= @global_config['FACEBOOK_API_VERSION'] %>', signupEnabled: '<%= @global_config['ENABLE_ACCOUNT_SIGNUP'] %>', isEnterprise: '<%= @global_config['IS_ENTERPRISE'] %>', + <% if @global_config['IS_ENTERPRISE'] %> + enterprisePlanName: '<%= @global_config['INSTALLATION_PRICING_PLAN'] %>', + <% end %> <% if @global_config['VAPID_PUBLIC_KEY'] %> vapidPublicKey: new Uint8Array(<%= Base64.urlsafe_decode64(@global_config['VAPID_PUBLIC_KEY']).bytes %>), <% end %>