rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: protect paid courses

Browse source
This commit is contained in:
swve 2024-11-02 23:16:33 +01:00
parent b7f09885df
commit 3988ee1d4b
9 changed files with 266 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

110
apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
View file

@ -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>
)
}

26
apps/web/components/Objects/Courses/CourseActions/PaidCourseActivity.tsx Normal file
View file

@ -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