From 1bf76c8008a5161328f33c241a42c9a8fddff6ef Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 22 Jan 2025 18:06:57 +0530
Subject: [PATCH] feat: add paywall check in page layout

---
 .../components-next/captain/PageLayout.vue      | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/captain/PageLayout.vue b/app/javascript/dashboard/components-next/captain/PageLayout.vue
index bc6729f71..2d5a2b18a 100644
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -1,9 +1,11 @@
 <script setup>
+import { computed } from 'vue';
+import { useAccount } from 'dashboard/composables/useAccount';
 import Button from 'dashboard/components-next/button/Button.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
-defineProps({
+const { featureFlag } = defineProps({
   currentPage: {
     type: Number,
     default: 1,
@@ -24,6 +26,10 @@ defineProps({
     type: String,
     default: '',
   },
+  featureFlag: {
+    type: String,
+    default: '',
+  },
   isFetching: {
     type: Boolean,
     default: false,
@@ -39,6 +45,12 @@ defineProps({
 });
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
+const { isCloudFeatureEnabled } = useAccount();
+
+const showPaywall = computed(() => {
+  return !isCloudFeatureEnabled(featureFlag);
+});
+
 const handleButtonClick = () => {
   emit('click');
 };
@@ -83,6 +95,9 @@ const handlePageChange = event => {
         >
           <Spinner />
         </div>
+        <div v-else-if="showPaywall">
+          <slot name="paywall" />
+        </div>
         <div v-else-if="isEmpty">
           <slot name="emptyState" />
         </div>