mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
Merge pull request #457 from learnhouse/feat/landing-pages
Landing pages
This commit is contained in:
Badr B.
GitHub
commit
6d770698d0
18 changed files with 3008 additions and 396 deletions
|
|
@ -0,0 +1,232 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getUriWithoutOrg, getUriWithOrg } from '@services/config/config'
|
||||
import { getProductsByCourse } from '@services/payments/products'
|
||||
import { LogIn, LogOut, ShoppingCart } from 'lucide-react'
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
import CoursePaidOptions from './CoursePaidOptions'
|
||||
import { checkPaidAccess } from '@services/payments/payments'
|
||||
import { removeCourse, startCourse } from '@services/courses/activity'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import UserAvatar from '../../UserAvatar'
|
||||
import { getUserAvatarMediaDirectory } from '@services/media/media'
|
||||
|
||||
interface Author {
|
||||
user_uuid: string
|
||||
avatar_image: string
|
||||
first_name: string
|
||||
last_name: string
|
||||
username: string
|
||||
}
|
||||
|
||||
interface CourseRun {
|
||||
status: string
|
||||
course_id: string
|
||||
}
|
||||
|
||||
interface Course {
|
||||
id: string
|
||||
authors: Author[]
|
||||
trail?: {
|
||||
runs: CourseRun[]
|
||||
}
|
||||
chapters?: Array<{
|
||||
name: string
|
||||
activities: Array<{
|
||||
activity_uuid: string
|
||||
name: string
|
||||
activity_type: string
|
||||
}>
|
||||
}>
|
||||
}
|
||||
|
||||
interface CourseActionsMobileProps {
|
||||
courseuuid: string
|
||||
orgslug: string
|
||||
course: Course & {
|
||||
org_id: number
|
||||
}
|
||||
}
|
||||
|
||||
const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobileProps) => {
|
||||
const router = useRouter()
|
||||
const session = useLHSession() as any
|
||||
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
|
||||
) ?? false
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLinkedProducts = async () => {
|
||||
try {
|
||||
const response = await getProductsByCourse(
|
||||
course.org_id,
|
||||
course.id,
|
||||
session.data?.tokens?.access_token
|
||||
)
|
||||
setLinkedProducts(response.data || [])
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch linked products')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
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(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
|
||||
return
|
||||
}
|
||||
|
||||
if (isStarted) {
|
||||
await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['courses'], orgslug)
|
||||
router.refresh()
|
||||
} else {
|
||||
await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['courses'], orgslug)
|
||||
|
||||
// Get the first activity from the first chapter
|
||||
const firstChapter = course.chapters?.[0]
|
||||
const firstActivity = firstChapter?.activities?.[0]
|
||||
|
||||
if (firstActivity) {
|
||||
// Redirect to the first activity
|
||||
router.push(
|
||||
getUriWithOrg(orgslug, '') +
|
||||
`/course/${courseuuid}/activity/${firstActivity.activity_uuid.replace('activity_', '')}`
|
||||
)
|
||||
} else {
|
||||
router.refresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="animate-pulse h-16 bg-gray-100 rounded-lg" />
|
||||
}
|
||||
|
||||
const author = course.authors[0]
|
||||
const authorName = author.first_name && author.last_name
|
||||
? `${author.first_name} ${author.last_name}`
|
||||
: `@${author.username}`
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<UserAvatar
|
||||
border="border-4"
|
||||
avatar_url={author.avatar_image ? getUserAvatarMediaDirectory(author.user_uuid, author.avatar_image) : ''}
|
||||
predefined_avatar={author.avatar_image ? undefined : 'empty'}
|
||||
width={40}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-neutral-400 font-medium">Author</span>
|
||||
<span className="text-sm font-semibold text-neutral-800">{authorName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0">
|
||||
{linkedProducts.length > 0 ? (
|
||||
hasAccess ? (
|
||||
<button
|
||||
onClick={handleCourseAction}
|
||||
className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-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-4 h-4" />
|
||||
Leave Course
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Start Course
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<Modal
|
||||
isDialogOpen={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
dialogContent={<CoursePaidOptions course={course} />}
|
||||
dialogTitle="Purchase Course"
|
||||
dialogDescription="Select a payment option to access this course"
|
||||
minWidth="sm"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="py-2 px-4 rounded-lg bg-neutral-900 text-white font-semibold text-sm hover:bg-neutral-800 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
Purchase
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
<button
|
||||
onClick={handleCourseAction}
|
||||
className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
|
||||
isStarted
|
||||
? 'bg-red-500 text-white hover:bg-red-600'
|
||||
: 'bg-neutral-900 text-white hover:bg-neutral-800'
|
||||
}`}
|
||||
>
|
||||
{!session.data?.user ? (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign In
|
||||
</>
|
||||
) : isStarted ? (
|
||||
<>
|
||||
<LogOut className="w-4 h-4" />
|
||||
Leave Course
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Start Course
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CourseActionsMobile
|
||||
|
|
@ -32,6 +32,14 @@ interface Course {
|
|||
trail?: {
|
||||
runs: CourseRun[]
|
||||
}
|
||||
chapters?: Array<{
|
||||
name: string
|
||||
activities: Array<{
|
||||
activity_uuid: string
|
||||
name: string
|
||||
activity_type: string
|
||||
}>
|
||||
}>
|
||||
}
|
||||
|
||||
interface CourseActionsProps {
|
||||
|
|
@ -129,10 +137,29 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
|||
router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
|
||||
return
|
||||
}
|
||||
const action = isStarted ? removeCourse : startCourse
|
||||
await action('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['courses'], orgslug)
|
||||
router.refresh()
|
||||
|
||||
if (isStarted) {
|
||||
await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['courses'], orgslug)
|
||||
router.refresh()
|
||||
} else {
|
||||
await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['courses'], orgslug)
|
||||
|
||||
// Get the first activity from the first chapter
|
||||
const firstChapter = course.chapters?.[0]
|
||||
const firstActivity = firstChapter?.activities?.[0]
|
||||
|
||||
if (firstActivity) {
|
||||
// Redirect to the first activity
|
||||
router.push(
|
||||
getUriWithOrg(orgslug, '') +
|
||||
`/course/${courseuuid}/activity/${firstActivity.activity_uuid.replace('activity_', '')}`
|
||||
)
|
||||
} else {
|
||||
router.refresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
|
|
|
|||
|
|
@ -37,10 +37,26 @@ const Onboarding: React.FC = () => {
|
|||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isOnboardingComplete, setIsOnboardingComplete] = useState(true);
|
||||
const [isTemporarilyClosed, setIsTemporarilyClosed] = useState(false);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const router = useRouter();
|
||||
const org = useOrg() as any;
|
||||
const isUserAdmin = useAdminStatus() as any;
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
// Initial check
|
||||
checkMobile();
|
||||
|
||||
// Add event listener for window resize
|
||||
window.addEventListener('resize', checkMobile);
|
||||
|
||||
// Cleanup
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
const onboardingData: OnboardingStep[] = [
|
||||
{
|
||||
imageSrc: OnBoardWelcome,
|
||||
|
|
@ -208,6 +224,7 @@ const Onboarding: React.FC = () => {
|
|||
localStorage.setItem('isOnboardingCompleted', 'true');
|
||||
localStorage.removeItem('onboardingLastStep'); // Clean up stored step
|
||||
setIsModalOpen(false);
|
||||
setIsOnboardingComplete(true);
|
||||
console.log('Onboarding skipped');
|
||||
};
|
||||
|
||||
|
|
@ -219,7 +236,7 @@ const Onboarding: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{isUserAdmin.isAdmin && !isUserAdmin.loading && !isOnboardingComplete && <Modal
|
||||
{isUserAdmin.isAdmin && !isUserAdmin.loading && !isOnboardingComplete && !isMobile && <Modal
|
||||
isDialogOpen={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
minHeight="sm"
|
||||
|
|
@ -236,12 +253,20 @@ const Onboarding: React.FC = () => {
|
|||
/>
|
||||
}
|
||||
dialogTrigger={
|
||||
|
||||
<div className='fixed pb-10 w-full bottom-0 bg-gradient-to-t from-1% from-gray-950/25 to-transparent'>
|
||||
<div className='bg-gray-950 flex space-x-2 font-bold cursor-pointer hover:bg-gray-900 shadow-md items-center text-gray-200 px-5 py-2 w-fit rounded-full mx-auto'>
|
||||
<Sprout size={20} />
|
||||
<p>Onboarding</p>
|
||||
<div className='h-2 w-2 bg-green-500 animate-pulse rounded-full'></div>
|
||||
<div
|
||||
className="ml-2 pl-2 border-l border-gray-700 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
skipOnboarding();
|
||||
}}
|
||||
>
|
||||
<Check size={16} className="hover:text-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -307,6 +332,13 @@ const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
|
|||
>
|
||||
<PictureInPicture size={16} />
|
||||
</div>
|
||||
<div
|
||||
className="inline-flex items-center px-5 space-x-2 cursor-pointer py-1 rounded-full text-gray-600 antialiased font-bold bg-gray-100 hover:bg-gray-200"
|
||||
onClick={skipOnboarding}
|
||||
>
|
||||
<p>End</p>
|
||||
<Check size={16} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='actions_buttons flex space-x-2'>
|
||||
{step.buttons?.map((button, index) => (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,156 @@
|
|||
'use client'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
|
||||
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import { deleteCourseFromBackend } from '@services/courses/courses'
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import { BookMinus, FilePenLine, Settings2, MoreVertical } from 'lucide-react'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import React from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@components/ui/dropdown-menu"
|
||||
|
||||
type Course = {
|
||||
course_uuid: string
|
||||
name: string
|
||||
description: string
|
||||
thumbnail_image: string
|
||||
org_id: string
|
||||
update_date: string
|
||||
}
|
||||
|
||||
type PropsType = {
|
||||
course: Course
|
||||
orgslug: string
|
||||
customLink?: string
|
||||
}
|
||||
|
||||
interface AdminEditOptionsProps {
|
||||
course: Course
|
||||
orgslug: string
|
||||
deleteCourse: () => Promise<void>
|
||||
}
|
||||
|
||||
export const removeCoursePrefix = (course_uuid: string) => course_uuid.replace('course_', '')
|
||||
|
||||
const AdminEditOptions: React.FC<AdminEditOptionsProps> = ({ course, orgslug, deleteCourse }) => {
|
||||
return (
|
||||
<AuthenticatedClientElement
|
||||
action="update"
|
||||
ressourceType="courses"
|
||||
checkMethod="roles"
|
||||
orgId={course.org_id}
|
||||
>
|
||||
<div className="absolute top-2 right-2 z-20">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="p-1 bg-white rounded-full hover:bg-gray-100 transition-colors shadow-md">
|
||||
<MoreVertical size={20} className="text-gray-700" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link prefetch href={getUriWithOrg(orgslug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/content`)}>
|
||||
<FilePenLine className="mr-2 h-4 w-4" /> Edit Content
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link prefetch href={getUriWithOrg(orgslug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/general`)}>
|
||||
<Settings2 className="mr-2 h-4 w-4" /> Settings
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Course"
|
||||
confirmationMessage="Are you sure you want to delete this course?"
|
||||
dialogTitle={`Delete ${course.name}?`}
|
||||
dialogTrigger={
|
||||
<button className="w-full text-left flex items-center px-2 py-1 rounded-md text-sm bg-rose-500/10 hover:bg-rose-500/20 transition-colors text-red-600">
|
||||
<BookMinus className="mr-4 h-4 w-4" /> Delete Course
|
||||
</button>
|
||||
}
|
||||
functionToExecute={deleteCourse}
|
||||
status="warning"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</AuthenticatedClientElement>
|
||||
)
|
||||
}
|
||||
|
||||
const CourseThumbnailLanding: React.FC<PropsType> = ({ course, orgslug, customLink }) => {
|
||||
const router = useRouter()
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
|
||||
const deleteCourse = async () => {
|
||||
const toastId = toast.loading('Deleting course...')
|
||||
try {
|
||||
await deleteCourseFromBackend(course.course_uuid, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['courses'], orgslug)
|
||||
toast.success('Course deleted successfully')
|
||||
router.refresh()
|
||||
} catch (error) {
|
||||
toast.error('Failed to delete course')
|
||||
} finally {
|
||||
toast.dismiss(toastId)
|
||||
}
|
||||
}
|
||||
|
||||
const thumbnailImage = course.thumbnail_image
|
||||
? getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)
|
||||
: '../empty_thumbnail.png'
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden min-w-[280px] w-full max-w-sm flex-shrink-0 m-2">
|
||||
<AdminEditOptions
|
||||
course={course}
|
||||
orgslug={orgslug}
|
||||
deleteCourse={deleteCourse}
|
||||
/>
|
||||
<Link prefetch href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}>
|
||||
<div
|
||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-t-xl w-full aspect-video bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${thumbnailImage})` }}
|
||||
/>
|
||||
</Link>
|
||||
<div className='flex flex-col w-full p-4 space-y-3'>
|
||||
<div className="space-y-2">
|
||||
<h2 className="font-bold text-gray-800 leading-tight text-base min-h-[2.75rem] line-clamp-2">{course.name}</h2>
|
||||
<p className='text-xs text-gray-700 leading-normal min-h-[3.75rem] line-clamp-3'>{course.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{course.update_date && (
|
||||
<div className="inline-flex h-5 min-w-[140px] items-center justify-center px-2 rounded-md bg-gray-100/80 border border-gray-200">
|
||||
<span className="text-[10px] font-medium text-gray-600 truncate">
|
||||
Updated {new Date(course.update_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link
|
||||
prefetch
|
||||
href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}
|
||||
className="inline-flex items-center justify-center w-full px-3 py-1.5 bg-black text-white text-xs font-medium rounded-lg hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
Start Learning
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CourseThumbnailLanding
|
||||
Loading…
Add table
Add a link
Reference in a new issue