feat: protect paid courses

apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx

@@ -26,6 +26,7 @@ import toast from 'react-hot-toast'
 import { mutate } from 'swr'
 import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
 import { useMediaQuery } from 'usehooks-ts'
+import PaidCourseActivity from '@components/Objects/Courses/CourseActions/PaidCourseActivity'
 
 interface ActivityClientProps {
   activityid: string
@@ -80,6 +81,7 @@ function ActivityClient(props: ActivityClientProps) {
     else {
       setBgColor('bg-zinc-950');
     }
+    console.log(activity.content)
   }
     , [activity, pathname])
 
@@ -129,7 +131,7 @@ function ActivityClient(props: ActivityClientProps) {
                   </h1>
                 </div>
                 <div className="flex space-x-1 items-center">
-                  {activity && activity.published == true && (
+                  {activity && activity.published == true && activity.content.paid_access != false && (
                     <AuthenticatedClientElement checkMethod="authentication">
                       {activity.activity_type != 'TYPE_ASSIGNMENT' &&
                         <>
@@ -176,6 +178,11 @@ function ActivityClient(props: ActivityClientProps) {
                 <div
                   className={`p-7 drop-shadow-sm rounded-lg ${bgColor}`}
                 >
+                  {/* Paid Courses */}
+                  {activity.content.paid_access == false && (
+                    <PaidCourseActivity course={course} />
+                  )}
+                  {/* Activity Types */}
                   <div>
                     {activity.activity_type == 'TYPE_DYNAMIC' && (
                       <Canva content={activity.content} activity={activity} />

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

@@ -10,8 +10,8 @@ import { getUriWithOrg } from '@services/config/config'
 import { getProductsByCourse } from '@services/payments/products'
 import { LogIn, LogOut, ShoppingCart, AlertCircle } from 'lucide-react'
 import Modal from '@components/StyledElements/Modal/Modal'
-import CourseCTA from './CoursePaidOptions'
 import CoursePaidOptions from './CoursePaidOptions'
+import { checkPaidAccess } from '@services/payments/payments'
 
 interface Author {
   user_uuid: string
@@ -77,6 +77,7 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
   const [linkedProducts, setLinkedProducts] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [hasAccess, setHasAccess] = useState<boolean | null>(null)
 
   const isStarted = course.trail?.runs?.some(
     (run) => run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
@@ -101,6 +102,28 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
     fetchLinkedProducts()
   }, [course.id, course.org_id, session.data?.tokens?.access_token])
 
+  useEffect(() => {
+    const checkAccess = async () => {
+      if (!session.data?.user) return
+      try {
+        const response = await checkPaidAccess(
+          parseInt(course.id),
+          course.org_id,
+          session.data?.tokens?.access_token
+        )
+        setHasAccess(response.has_access)
+        
+      } catch (error) {
+        console.error('Failed to check course access')
+        setHasAccess(false)
+      }
+    }
+
+    if (linkedProducts.length > 0) {
+      checkAccess()
+    }
+  }, [course.id, course.org_id, session.data?.tokens?.access_token, linkedProducts])
+
   const handleCourseAction = async () => {
     if (!session.data?.user) {
       router.push(getUriWithOrg(orgslug, '/signup?orgslug=' + orgslug))
@@ -119,30 +142,69 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
   if (linkedProducts.length > 0) {
     return (
       <div className="space-y-4">
-        <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
-          <div className="flex items-center gap-3">
-            <AlertCircle className="w-5 h-5 text-amber-800" />
-            <h3 className="text-amber-800 font-semibold">Paid Course</h3>
+        {hasAccess ? (
+          <>
+            <div className="p-4 bg-green-50 border border-green-200 rounded-lg nice-shadow">
+              <div className="flex items-center gap-3">
+                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                <h3 className="text-green-800 font-semibold">You Own This Course</h3>
+              </div>
+              <p className="text-green-700 text-sm mt-1">
+                You have purchased this course and have full access to all content.
+              </p>
+            </div>
+            <button
+              onClick={handleCourseAction}
+              className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 ${
+                isStarted
+                  ? 'bg-red-500 text-white hover:bg-red-600'
+                  : 'bg-neutral-900 text-white hover:bg-neutral-800'
+              }`}
+            >
+              {isStarted ? (
+                <>
+                  <LogOut className="w-5 h-5" />
+                  Leave Course
+                </>
+              ) : (
+                <>
+                  <LogIn className="w-5 h-5" />
+                  Start Course
+                </>
+              )}
+            </button>
+          </>
+        ) : (
+          <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
+            <div className="flex items-center gap-3">
+              <AlertCircle className="w-5 h-5 text-amber-800" />
+              <h3 className="text-amber-800 font-semibold">Paid Course</h3>
+            </div>
+            <p className="text-amber-700 text-sm mt-1">
+              This course requires purchase to access its content.
+            </p>
           </div>
-          <p className="text-amber-700 text-sm">
-            This course requires purchase to access its content.
-          </p>
-        </div>
-        <Modal
-          isDialogOpen={isModalOpen}
-          onOpenChange={setIsModalOpen}
-          dialogContent={<CoursePaidOptions course={course} />}
-          dialogTitle="Purchase Course"
-          dialogDescription="Select a payment option to access this course"
-          minWidth="sm"
-        />
-        <button
-          className="w-full bg-neutral-900 text-white py-3 rounded-lg nice-shadow font-semibold hover:bg-neutral-800 transition-colors flex items-center justify-center gap-2"
-          onClick={() => setIsModalOpen(true)}
-        >
-          <ShoppingCart className="w-5 h-5" />
-          Purchase Course
-        </button>
+        )}
+        
+        {!hasAccess && (
+          <>
+            <Modal
+              isDialogOpen={isModalOpen}
+              onOpenChange={setIsModalOpen}
+              dialogContent={<CoursePaidOptions course={course} />}
+              dialogTitle="Purchase Course"
+              dialogDescription="Select a payment option to access this course"
+              minWidth="sm"
+            />
+            <button
+              className="w-full bg-neutral-900 text-white py-3 rounded-lg nice-shadow font-semibold hover:bg-neutral-800 transition-colors flex items-center justify-center gap-2"
+              onClick={() => setIsModalOpen(true)}
+            >
+              <ShoppingCart className="w-5 h-5" />
+              Purchase Course
+            </button>
+          </>
+        )}
       </div>
     )
   }

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import { AlertCircle, ShoppingCart } from 'lucide-react'
+import CoursePaidOptions from './CoursePaidOptions'
+
+interface PaidCourseActivityProps {
+  course: any;
+}
+
+function PaidCourseActivity({ course }: PaidCourseActivityProps) {
+  return (
+    <div className="space-y-4 ">
+      <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
+        <div className="flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-amber-800" />
+          <h3 className="text-amber-800 font-semibold">Paid Content</h3>
+        </div>
+        <p className="text-amber-700 text-sm mt-1">
+          This content requires a course purchase to access. Please purchase the course to continue.
+        </p>
+      </div>
+      <CoursePaidOptions course={course} />
+    </div>
+  )
+}
+
+export default PaidCourseActivity

apps/web/services/payments/payments.ts

@@ -10,6 +10,15 @@ export async function getPaymentConfigs(orgId: number, access_token: string) {
   return res;
 }
 
+export async function checkPaidAccess(courseId: number, orgId: number, access_token: string) {
+  const result = await fetch(
+    `${getAPIUrl()}payments/${orgId}/courses/${courseId}/access`,
+    RequestBodyWithAuthHeader('GET', null, null, access_token)
+  );
+  const res = await errorHandling(result);
+  return res;
+}
+
 export async function createPaymentConfig(orgId: number, data: any, access_token: string) {
   const result = await fetch(
     `${getAPIUrl()}payments/${orgId}/config`,