feat: add payments feature access based on config

apps/api/src/db/organization_config.py

@@ -40,7 +40,6 @@ class AssignmentOrgConfig(BaseModel):
 
 class PaymentOrgConfig(BaseModel):
     enabled: bool = True
-    stripe_key: str = ""
 
 
 class DiscussionOrgConfig(BaseModel):
@@ -91,7 +90,7 @@ class OrgCloudConfig(BaseModel):
 
 # Main Config
 class OrganizationConfigBase(BaseModel):
-    config_version: str = "1.1"
+    config_version: str = "1.2"
     general: OrgGeneralConfig
     features: OrgFeatureConfig
     cloud: OrgCloudConfig

apps/api/src/services/install/install.py

@@ -330,7 +330,7 @@ def install_create_organization(org_object: OrganizationCreate, db_session: Sess
 
     # Org Config
     org_config = OrganizationConfigBase(
-        config_version="1.1",
+        config_version="1.2",
         general=OrgGeneralConfig(
             enabled=True,
             color="normal",
@@ -345,7 +345,7 @@ def install_create_organization(org_object: OrganizationCreate, db_session: Sess
             storage=StorageOrgConfig(enabled=True, limit=0),
             ai=AIOrgConfig(enabled=True, limit=0, model="gpt-4o-mini"),
             assignments=AssignmentOrgConfig(enabled=True, limit=0),
-            payments=PaymentOrgConfig(enabled=True, stripe_key=""),
+            payments=PaymentOrgConfig(enabled=False),
             discussions=DiscussionOrgConfig(enabled=True, limit=0),
             analytics=AnalyticsOrgConfig(enabled=True, limit=0),
             collaboration=CollaborationOrgConfig(enabled=True, limit=0),

apps/api/src/tests/utils/init_data_for_tests.py

@@ -8,7 +8,7 @@ from src.services.install.install import (
     install_default_elements,
 )
 
-
+# TODO: Depreceated and need to be removed and remade
 async def create_initial_data_for_tests(db_session: Session):
     # Install default elements
     await install_default_elements({}, db_session)

apps/web/app/orgs/[orgslug]/dash/payments/[subpage]/page.tsx

@@ -10,8 +10,7 @@ import { useOrg } from '@components/Contexts/OrgContext'
 import PaymentsConfigurationPage from '@components/Dashboard/Pages/Payments/PaymentsConfigurationPage'
 import PaymentsProductPage from '@components/Dashboard/Pages/Payments/PaymentsProductPage'
 import PaymentsCustomersPage from '@components/Dashboard/Pages/Payments/PaymentsCustomersPage'
-
-
+import useFeatureFlag from '@components/Hooks/useFeatureFlag'
 
 export type PaymentsParams = {
   subpage: string
@@ -25,10 +24,27 @@ function PaymentsPage({ params }: { params: PaymentsParams }) {
   const [H1Label, setH1Label] = useState('')
   const [H2Label, setH2Label] = useState('')
   
+  const isPaymentsEnabled = useFeatureFlag({
+    path: ['features', 'payments', 'enabled'],
+    defaultValue: false
+  })
+
   useEffect(() => {
     handleLabels()
   }, [selectedSubPage])
 
+  if (!isPaymentsEnabled) {
+    return (
+      <div className="h-screen w-full bg-[#f8f8f8] flex items-center justify-center p-4">
+        <div className="bg-white p-6 rounded-lg shadow-md text-center max-w-md">
+          <h2 className="text-xl font-bold mb-4">Payments Not Available</h2>
+          <p className="text-gray-600">The payments feature is not enabled for this organization.</p>
+          <p className="text-gray-600 mt-2">Please contact your administrator to enable payments.</p>
+        </div>
+      </div>
+    )
+  }
+
   function handleLabels() {
     if (selectedSubPage === 'general') {
       setH1Label('Payments')

apps/web/components/Dashboard/Menus/DashLeftMenu.tsx

@@ -11,11 +11,13 @@ import UserAvatar from '../../Objects/UserAvatar'
 import AdminAuthorization from '@components/Security/AdminAuthorization'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
+import useFeatureFlag from '@components/Hooks/useFeatureFlag'
 
 function DashLeftMenu() {
   const org = useOrg() as any
   const session = useLHSession() as any
   const [loading, setLoading] = React.useState(true)
+  const isPaymentsEnabled = useFeatureFlag({ path: ['features', 'payments', 'enabled'], defaultValue: false })
 
   function waitForEverythingToLoad() {
     if (org && session) {
@@ -112,6 +114,7 @@ function DashLeftMenu() {
                 <Users size={18} />
               </Link>
             </ToolTip>
+            {isPaymentsEnabled && (
               <ToolTip content={'Payments'} slateBlack sideOffset={8} side="right">
                 <Link
                   className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
@@ -120,6 +123,7 @@ function DashLeftMenu() {
                   <BadgeDollarSign size={18} />
                 </Link>
               </ToolTip>
+            )}
             <ToolTip
               content={'Organization'}
               slateBlack

apps/web/components/Dashboard/Pages/Org/OrgEditGeneral/OrgEditGeneral.tsx

@@ -12,7 +12,7 @@ import { useRouter } from 'next/navigation'
 import { useOrg } from '@components/Contexts/OrgContext'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import { getOrgLogoMediaDirectory, getOrgThumbnailMediaDirectory } from '@services/media/media'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Ui/tabs"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/ui/tabs"
 import { Toaster, toast } from 'react-hot-toast';
 import { constructAcceptValue } from '@/lib/constants';
 

apps/web/components/Dashboard/Pages/Payments/PaymentsConfigurationPage.tsx

@@ -10,8 +10,8 @@ import toast from 'react-hot-toast';
 import useSWR, { mutate } from 'swr';
 import Modal from '@components/Objects/StyledElements/Modal/Modal';
 import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal';
-import { Button } from '@components/Ui/button';
-import { Alert, AlertDescription, AlertTitle } from '@components/Ui/alert';
+import { Button } from '@components/ui/button';
+import { Alert, AlertDescription, AlertTitle } from '@components/ui/alert';
 import { useRouter } from 'next/navigation';
 import { getUriWithoutOrg } from '@services/config/config';
 

apps/web/components/Dashboard/Pages/Payments/PaymentsCustomersPage.tsx

@@ -9,9 +9,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@components/Ui/table"
+} from "@components/ui/table"
 import { getOrgCustomers } from '@services/payments/payments'
-import { Badge } from '@components/Ui/badge'
+import { Badge } from '@components/ui/badge'
 import PageLoading from '@components/Objects/Loaders/PageLoading'
 import { RefreshCcw, SquareCheck } from 'lucide-react'
 import { getUserAvatarMediaDirectory } from '@services/media/media'

apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx

@@ -9,14 +9,14 @@ import { Plus, Pencil, Info, RefreshCcw, SquareCheck, ChevronDown, ChevronUp, Ar
 import Modal from '@components/Objects/StyledElements/Modal/Modal';
 import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal';
 import toast from 'react-hot-toast';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/Ui/select"
-import { Button } from "@components/Ui/button"
-import { Input } from "@components/Ui/input"
-import { Textarea } from "@components/Ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/ui/select"
+import { Button } from "@components/ui/button"
+import { Input } from "@components/ui/input"
+import { Textarea } from "@components/ui/textarea"
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
-import { Label } from '@components/Ui/label';
-import { Badge } from '@components/Ui/badge';
+import { Label } from '@components/ui/label';
+import { Badge } from '@components/ui/badge';
 import { getPaymentConfigs } from '@services/payments/payments';
 import ProductLinkedCourses from './SubComponents/ProductLinkedCourses';
 import { usePaymentsEnabled } from '@hooks/usePaymentsEnabled';

apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx

@@ -6,11 +6,11 @@ import { Formik, Form, Field, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
 import { mutate } from 'swr';
-import { Button } from "@components/Ui/button";
-import { Input } from "@components/Ui/input";
-import { Textarea } from "@components/Ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/Ui/select";
-import { Label } from "@components/Ui/label";
+import { Button } from "@components/ui/button";
+import { Input } from "@components/ui/input";
+import { Textarea } from "@components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/ui/select";
+import { Label } from "@components/ui/label";
 import currencyCodes from 'currency-codes';
 
 const validationSchema = Yup.object().shape({

apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { useOrg } from '@components/Contexts/OrgContext';
 import { useLHSession } from '@components/Contexts/LHSessionContext';
 import { linkCourseToProduct } from '@services/payments/products';
-import { Button } from "@components/Ui/button";
-import { Input } from "@components/Ui/input";
+import { Button } from "@components/ui/button";
+import { Input } from "@components/ui/input";
 import { Search } from 'lucide-react';
 import toast from 'react-hot-toast';
 import { mutate } from 'swr';

apps/web/components/Dashboard/Pages/Payments/SubComponents/ProductLinkedCourses.tsx

@@ -3,7 +3,7 @@ import { getCoursesLinkedToProduct, unlinkCourseFromProduct } from '@services/pa
 import { useLHSession } from '@components/Contexts/LHSessionContext';
 import { useOrg } from '@components/Contexts/OrgContext';
 import { Trash2, Plus, BookOpen } from 'lucide-react';
-import { Button } from "@components/Ui/button";
+import { Button } from "@components/ui/button";
 import toast from 'react-hot-toast';
 import { mutate } from 'swr';
 import Modal from '@components/Objects/StyledElements/Modal/Modal';

apps/web/components/Hooks/useFeatureFlag.tsx

@@ -0,0 +1,36 @@
+import { useOrg } from '@components/Contexts/OrgContext'
+import { useEffect, useState } from 'react'
+
+type FeatureType = {
+  path: string[]
+  defaultValue?: boolean
+}
+
+function useFeatureFlag(feature: FeatureType) {
+  const org = useOrg() as any
+  const [isEnabled, setIsEnabled] = useState<boolean>(!!feature.defaultValue)
+
+  useEffect(() => {
+    if (org?.config?.config) {
+      let currentValue = org.config.config
+      
+      // Traverse the path to get the feature flag value
+      for (const key of feature.path) {
+        if (currentValue && typeof currentValue === 'object') {
+          currentValue = currentValue[key]
+        } else {
+          currentValue = feature.defaultValue || false
+          break
+        }
+      }
+
+      setIsEnabled(!!currentValue)
+    } else {
+      setIsEnabled(!!feature.defaultValue)
+    }
+  }, [org, feature])
+
+  return isEnabled
+}
+
+export default useFeatureFlag

apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx

@@ -4,8 +4,8 @@ import { useLHSession } from '@components/Contexts/LHSessionContext'
 import useSWR from 'swr'
 import { getProductsByCourse, getStripeProductCheckoutSession } from '@services/payments/products'
 import { RefreshCcw, SquareCheck, ChevronDown, ChevronUp } from 'lucide-react'
-import { Badge } from '@components/Ui/badge'
-import { Button } from '@components/Ui/button'
+import { Badge } from '@components/ui/badge'
+import { Button } from '@components/ui/button'
 import toast from 'react-hot-toast'
 import { useRouter } from 'next/navigation'
 import { getUriWithOrg } from '@services/config/config'

apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx

@@ -1,7 +1,7 @@
 'use client'
-import { Input } from "@components/Ui/input"
-import { Textarea } from "@components/Ui/textarea"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/Ui/select"
+import { Input } from "@components/ui/input"
+import { Textarea } from "@components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/ui/select"
 import FormLayout, {
   FormField,
   FormLabelAndMessage,

apps/web/components/Objects/StyledElements/Modal/Modal.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@components/Ui/dialog"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@components/ui/dialog"
 import { ButtonBlack } from '../Form/Form'
 import { cn } from "@/lib/utils"
 

apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx

@@ -17,7 +17,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@components/Ui/dropdown-menu"
+} from "@components/ui/dropdown-menu"
 
 type Course = {
   course_uuid: string

apps/web/components/Pages/Payments/UnconfiguredPaymentsDisclaimer.tsx

@@ -1,5 +1,5 @@
 import {  Settings, ChevronRight, CreditCard } from 'lucide-react'
-import { Alert, AlertTitle, AlertDescription } from '@components/Ui/alert'
+import { Alert, AlertTitle, AlertDescription } from '@components/ui/alert'
 import { AlertTriangle, ShoppingCart, Users } from 'lucide-react'
 import React from 'react'
 import Link from 'next/link'

apps/web/components/ui/toggle-group.tsx

@@ -5,7 +5,7 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 import { type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
-import { toggleVariants } from "@components/Ui/toggle"
+import { toggleVariants } from "@components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>