feat: add paywall

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

@@ -413,6 +413,18 @@
       },
       "VALIDATION": {
         "REQUIRED_FIELDS": "SSO URL and Certificate are required fields"
+      },
+      "ENTERPRISE_PAYWALL": {
+        "AVAILABLE_ON": "The SAML SSO feature is only available in the Enterprise plans.",
+        "UPGRADE_PROMPT": "Upgrade to an Enterprise plan to access SAML single sign-on and other advanced security features.",
+        "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
+      },
+      "PAYWALL": {
+        "TITLE": "Upgrade to enable SAML SSO",
+        "AVAILABLE_ON": "The SAML SSO feature is only available in the Enterprise plans.",
+        "UPGRADE_PROMPT": "Upgrade your plan to get access to SAML single sign-on and other advanced features.",
+        "UPGRADE_NOW": "Upgrade now",
+        "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
       }
     }
   },

app/javascript/dashboard/routes/dashboard/settings/security/Index.vue

@@ -1,7 +1,23 @@
 <script setup>
+import { computed } from 'vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
 import SamlSettings from './components/SamlSettings.vue';
+import SamlPaywall from './components/SamlPaywall.vue';
+
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+const { shouldShow, shouldShowPaywall } = usePolicy();
+
+const shouldShowSaml = computed(() =>
+  shouldShow(
+    FEATURE_FLAGS.SAML,
+    ['administrator'],
+    [INSTALLATION_TYPES.CLOUD, INSTALLATION_TYPES.ENTERPRISE]
+  )
+);
+const showPaywall = computed(() => shouldShowPaywall('saml'));
 </script>
 
 <template>
@@ -17,7 +33,8 @@ import SamlSettings from './components/SamlSettings.vue';
       />
     </template>
     <template #body>
-      <SamlSettings />
+      <SamlPaywall v-if="showPaywall" />
+      <SamlSettings v-else-if="shouldShowSaml" />
     </template>
   </SettingsLayout>
 </template>

app/javascript/dashboard/routes/dashboard/settings/security/components/SamlPaywall.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+
+import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
+
+const router = useRouter();
+const currentUser = useMapGetter('getCurrentUser');
+
+const isSuperAdmin = computed(() => {
+  return currentUser.value.type === 'SuperAdmin';
+});
+const { accountId, isOnChatwootCloud } = useAccount();
+
+const i18nKey = computed(() =>
+  isOnChatwootCloud.value ? 'PAYWALL' : 'ENTERPRISE_PAYWALL'
+);
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+</script>
+
+<template>
+  <div
+    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
+  >
+    <BasePaywallModal
+      class="mx-auto"
+      feature-prefix="SECURITY_SETTINGS.SAML"
+      :i18n-key="i18nKey"
+      :is-super-admin="isSuperAdmin"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
+      @upgrade="openBilling"
+    />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/security/components/SamlSettings.vue

@@ -118,7 +118,6 @@ onMounted(() => {
     :title="t('SECURITY_SETTINGS.SAML.TITLE')"
     :description="t('SECURITY_SETTINGS.SAML.NOTE')"
     :hide-content="!hasFeature || !isEnabled || isLoading"
-    with-border
   >
     <template #headerActions>
       <div class="flex justify-end">

app/javascript/dashboard/routes/dashboard/settings/security/security.routes.js

@@ -1,5 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import SettingsWrapper from '../SettingsWrapper.vue';
 import Index from './Index.vue';
 
@@ -27,6 +28,7 @@ export default {
           component: Index,
           meta: {
             permissions: ['administrator'],
+            featureFlag: FEATURE_FLAGS.SAML,
             installationTypes: [
               INSTALLATION_TYPES.CLOUD,
               INSTALLATION_TYPES.ENTERPRISE,