Organizations paywall

frontend/src/assets/scss/dialogs.scss

@@ -24,7 +24,7 @@
     @apply p-6 mr-0;
   }
   &__body {
-    @apply p-0;
+    @apply p-0 break-normal;
   }
 
   &__title {
@@ -35,13 +35,13 @@
     @apply bg-gray-50 flex items-center px-6 py-4 h-fit rounded-b-lg;
   }
 
-  &.plain{
-    .el-dialog__header{
-      @apply p-0
+  &.plain {
+    .el-dialog__header {
+      @apply p-0;
     }
   }
 
-  &--sm{
+  &--sm {
     max-width: 400px;
   }
 }

frontend/src/modules/dashboard/components/dashboard-organizations.vue

@@ -98,13 +98,10 @@
             </p>
           </div>
           <div class="pt-1 flex justify-center">
-            <router-link
-              :to="{
-                name: 'organization',
-                query: { activeTab: 'new-and-active' }
-              }"
-              class="text-xs leading-5 font-medium text-red"
-              >View more</router-link
+            <el-button
+              class="btn-link btn-link--primary text-xs leading-5 font-medium"
+              @click="onViewMoreClick"
+              >View more</el-button
             >
           </div>
         </div>
@@ -170,26 +167,27 @@
             </p>
           </div>
           <div class="pt-1 flex justify-center">
-            <router-link
-              :to="{
-                name: 'organization',
-                query: { activeTab: 'new-and-active' }
-              }"
-              class="text-xs leading-5 font-medium text-red"
-              >View more</router-link
+            <el-button
+              class="btn-link btn-link--primary text-xs leading-5 font-medium"
+              @click="onViewMoreClick"
+              >View more</el-button
             >
           </div>
         </div>
       </div>
     </section>
   </div>
+  <app-paywall-modal
+    v-model="isUpgradeModalOpen"
+    module="organizations"
+  />
 </template>
 
 <script>
-import AppDashboardTab from '@/modules/dashboard/components/shared/dashboard-tab'
+import AppDashboardTab from '@/modules/dashboard/components/shared/dashboard-tab.vue'
 import { mapGetters } from 'vuex'
 import moment from 'moment'
-import AppWidgetCubeRenderer from '@/modules/widget/components/cube/widget-cube-renderer'
+import AppWidgetCubeRenderer from '@/modules/widget/components/cube/widget-cube-renderer.vue'
 import {
   newOrganizationChart,
   activeOrganizationChart,
@@ -198,17 +196,24 @@ import {
   newOrganizationCount,
   activeOrganizationCount
 } from '@/modules/dashboard/dashboard.cube'
-import AppDashboardOrganizationItem from '@/modules/dashboard/components/organization/dashboard-organization-item'
-import AppDashboardCount from '@/modules/dashboard/components/dashboard-count'
+import AppDashboardOrganizationItem from '@/modules/dashboard/components/organization/dashboard-organization-item.vue'
+import AppDashboardCount from '@/modules/dashboard/components/dashboard-count.vue'
 import { formatNumberToCompact } from '@/utils/number'
+import {
+  isFeatureEnabled,
+  featureFlags
+} from '@/utils/posthog'
+import config from '@/config'
+import AppPaywallModal from '@/modules/layout/components/paywall-modal.vue'
 
 export default {
   name: 'AppDashboardOrganizations',
   components: {
     AppDashboardCount,
     AppDashboardOrganizationItem,
     AppWidgetCubeRenderer,
-    AppDashboardTab
+    AppDashboardTab,
+    AppPaywallModal
   },
   data() {
     return {
@@ -218,7 +223,8 @@ export default {
       newOrganizationCount,
       activeOrganizationCount,
       chartOptions,
-      hideLabels
+      hideLabels,
+      isUpgradeModalOpen: false
     }
   },
   computed: {
@@ -256,7 +262,21 @@ export default {
       }
       return d.format('ddd, MMM D')
     },
-    formatNumberToCompact
+    formatNumberToCompact,
+    async onViewMoreClick() {
+      const isFlagEnabled = await isFeatureEnabled(
+        featureFlags.organizations
+      )
+
+      if (config.hasPremiumModules && isFlagEnabled) {
+        this.$router.push({
+          name: 'organization',
+          query: { activeTab: 'new-and-active' }
+        })
+      } else {
+        this.isUpgradeModalOpen = true
+      }
+    }
   }
 }
 </script>

frontend/src/modules/dashboard/components/organization/dashboard-organization-item.vue

@@ -12,12 +12,9 @@
     </div>
   </article>
   <article v-else class="flex">
-    <router-link
-      class="flex items-center group"
-      :to="{
-        name: 'organizationView',
-        params: { id: organization.id }
-      }"
+    <div
+      class="flex items-center group hover:cursor-pointer"
+      @click="onOrganizationClick"
     >
       <app-avatar :entity="entity" size="xxs" />
       <div class="flex-grow pl-3">
@@ -32,16 +29,27 @@
           }}
         </p>
       </div>
-    </router-link>
+    </div>
   </article>
+  <app-paywall-modal
+    v-model="isUpgradeModalOpen"
+    module="organizations"
+  />
 </template>
 
 <script>
-import AppAvatar from '@/shared/avatar/avatar'
-import AppLoading from '@/shared/loading/loading-placeholder'
+import AppAvatar from '@/shared/avatar/avatar.vue'
+import AppLoading from '@/shared/loading/loading-placeholder.vue'
+import {
+  isFeatureEnabled,
+  featureFlags
+} from '@/utils/posthog'
+import config from '@/config'
+import AppPaywallModal from '@/modules/layout/components/paywall-modal.vue'
+
 export default {
   name: 'AppDashboardOrganizationItem',
-  components: { AppLoading, AppAvatar },
+  components: { AppLoading, AppAvatar, AppPaywallModal },
   props: {
     organization: {
       type: Object,
@@ -54,13 +62,34 @@ export default {
       default: false
     }
   },
+  data() {
+    return {
+      isUpgradeModalOpen: false
+    }
+  },
   computed: {
     entity() {
       return {
         avatar: this.organization.logo,
         displayName: this.organization.name.replace('@', '')
       }
     }
+  },
+  methods: {
+    async onOrganizationClick() {
+      const isFlagEnabled = await isFeatureEnabled(
+        featureFlags.organizations
+      )
+
+      if (config.hasPremiumModules && isFlagEnabled) {
+        this.$router.push({
+          name: 'organizationView',
+          params: { id: this.organization.id }
+        })
+      } else {
+        this.isUpgradeModalOpen = true
+      }
+    }
   }
 }
 </script>

frontend/src/modules/layout/components/paywall-modal.vue

@@ -0,0 +1,99 @@
+<template>
+  <app-dialog
+    v-model="model"
+    size="small"
+    class="paywall-modal"
+    :pre-title="modal.preTitle"
+    :title="modal.title"
+  >
+    <template #content>
+      <div class="px-6 pb-6">
+        <div class="bg-image">
+          <img
+            class="w-11/12 ml-10 mt-6"
+            :src="modal.imageSrc"
+          />
+        </div>
+
+        <div class="text-gray-500 text-sm">
+          {{ modal.content }}
+        </div>
+
+        <router-link
+          :to="{
+            name: 'settings',
+            query: { activeTab: 'plans' }
+          }"
+        >
+          <el-button
+            class="btn btn--md btn--primary btn--full mt-8"
+            >Upgrade plan</el-button
+          >
+        </router-link>
+        <router-link
+          :to="{
+            name: 'organization'
+          }"
+        >
+          <el-button
+            class="btn btn--md btn-link btn-link--primary btn--full mt-3 !ml-0"
+            >Know more</el-button
+          >
+        </router-link>
+      </div>
+    </template>
+  </app-dialog>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue'
+
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  module: {
+    type: String,
+    required: true
+  }
+})
+
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(v) {
+    emit('update:modelValue', v)
+  }
+})
+
+const modal = computed(() => modalContent[props.module])
+
+const modalContent = {
+  organizations: {
+    title: 'Organizations',
+    preTitle: 'Growth feature',
+    imageSrc: '/images/organizations-paywall.png',
+    content:
+      'Get a complete organization directory that you can search, filter, and sort instantly. Each organization also has its own profile page, which highlights key information about that organization and all the community members that belong to it'
+  },
+  // TODO: Community Help Center paywall
+  'community-help-center': {}
+}
+</script>
+
+<style lang="scss">
+.paywall-modal {
+  .bg-image {
+    @apply rounded-md h-52 overflow-hidden mb-6;
+    background: linear-gradient(
+        279.88deg,
+        rgba(233, 79, 46, 0) 0%,
+        rgba(233, 79, 46, 0.05) 100%
+      ),
+      #f9fafb;
+  }
+}
+</style>

frontend/src/modules/layout/layout-routes.js

@@ -1,4 +1,4 @@
-import ErrorPage from '@/modules/layout/components/error-page.vue'
+import ErrorPage from '@/modules/layout/pages/error-page.vue'
 
 export default [
   {