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

Merge pull request #457 from learnhouse/feat/landing-pages

Browse source 
Landing pages
This commit is contained in:
Badr B. 2025-03-06 10:10:22 +01:00 • committed by GitHub
commit 6d770698d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 3008 additions and 396 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/api/src/db/organization_config.py
View file

@ -82,6 +82,7 @@ class OrgGeneralConfig(BaseModel):
color: str = "normal"
watermark: bool = True
# Cloud
class OrgCloudConfig(BaseModel):
plan: Literal["free", "standard", "pro"] = "free"
@ -90,10 +91,11 @@ class OrgCloudConfig(BaseModel):
# Main Config
class OrganizationConfigBase(BaseModel):
config_version: str = "1.2"
config_version: str = "1.3"
general: OrgGeneralConfig
features: OrgFeatureConfig
cloud: OrgCloudConfig
landing: dict = {}
class OrganizationConfig(SQLModel, table=True):

36
apps/api/src/routers/orgs.py
View file

@ -40,6 +40,8 @@ from src.services.orgs.orgs import (
update_org_preview,
update_org_signup_mechanism,
update_org_thumbnail,
update_org_landing,
upload_org_landing_content_service,
)
@ -413,3 +415,37 @@ async def api_delete_org(
"""
return await delete_org(request, org_id, current_user, db_session)
@router.put("/{org_id}/landing")
async def api_update_org_landing(
request: Request,
org_id: int,
landing_object: dict,
current_user: PublicUser = Depends(get_current_user),
db_session: Session = Depends(get_db_session),
):
"""
Update organization landing object
"""
return await update_org_landing(request, landing_object, org_id, current_user, db_session)
@router.post("/{org_id}/landing/content")
async def api_upload_org_landing_content(
request: Request,
org_id: int,
content_file: UploadFile,
current_user: PublicUser = Depends(get_current_user),
db_session: Session = Depends(get_db_session),
):
"""
Upload content for organization landing page
"""
return await upload_org_landing_content_service(
request=request,
content_file=content_file,
org_id=org_id,
current_user=current_user,
db_session=db_session,
)

5
apps/api/src/services/install/install.py
View file

@ -330,7 +330,7 @@ def install_create_organization(org_object: OrganizationCreate, db_session: Sess
# Org Config
org_config = OrganizationConfigBase(
config_version="1.2",
config_version="1.3",
general=OrgGeneralConfig(
enabled=True,
color="normal",
@ -354,7 +354,8 @@ def install_create_organization(org_object: OrganizationCreate, db_session: Sess
cloud=OrgCloudConfig(
plan='free',
custom_domain=False
)
),
landing={}
)
org_config = json.loads(org_config.json())

82
apps/api/src/services/orgs/orgs.py
View file

@ -36,7 +36,7 @@ from src.db.organizations import (
)
from fastapi import HTTPException, UploadFile, status, Request
from src.services.orgs.uploads import upload_org_logo, upload_org_preview, upload_org_thumbnail
from src.services.orgs.uploads import upload_org_logo, upload_org_preview, upload_org_thumbnail, upload_org_landing_content
async def get_organization(
@ -714,6 +714,86 @@ async def upload_org_preview_service(
"filename": name_in_disk
}
async def update_org_landing(
request: Request,
landing_object: dict,
org_id: int,
current_user: PublicUser | AnonymousUser,
db_session: Session,
):
statement = select(Organization).where(Organization.id == org_id)
result = db_session.exec(statement)
org = result.first()
if not org:
raise HTTPException(
status_code=404,
detail="Organization not found",
)
# RBAC check
await rbac_check(request, org.org_uuid, current_user, "update", db_session)
# Get org config
statement = select(OrganizationConfig).where(OrganizationConfig.org_id == org.id)
result = db_session.exec(statement)
org_config = result.first()
if org_config is None:
logging.error(f"Organization {org_id} has no config")
raise HTTPException(
status_code=404,
detail="Organization config not found",
)
# Convert to OrganizationConfigBase model and back to ensure all fields exist
config_model = OrganizationConfigBase(**org_config.config)
# Update the landing object
config_model.landing = landing_object
# Convert back to dict and update
updated_config = json.loads(config_model.json())
org_config.config = updated_config
org_config.update_date = str(datetime.now())
db_session.add(org_config)
db_session.commit()
db_session.refresh(org_config)
return {"detail": "Landing object updated"}
async def upload_org_landing_content_service(
request: Request,
content_file: UploadFile,
org_id: int,
current_user: PublicUser | AnonymousUser,
db_session: Session,
) -> dict:
statement = select(Organization).where(Organization.id == org_id)
result = db_session.exec(statement)
org = result.first()
if not org:
raise HTTPException(
status_code=404,
detail="Organization not found",
)
# RBAC check
await rbac_check(request, org.org_uuid, current_user, "update", db_session)
# Upload content
name_in_disk = await upload_org_landing_content(content_file, org.org_uuid)
return {
"detail": "Landing content uploaded successfully",
"filename": name_in_disk
}
## 🔒 RBAC Utils ##

21
apps/api/src/services/orgs/uploads.py
View file

@ -1,4 +1,6 @@
from uuid import uuid4
from fastapi import UploadFile
from fastapi import HTTPException
from src.services.utils.upload_content import upload_content
@ -46,3 +48,22 @@ async def upload_org_preview(file, org_uuid: str) -> str:
)
return name_in_disk
async def upload_org_landing_content(file: UploadFile, org_uuid: str) -> str:
if not file or not file.filename:
raise HTTPException(status_code=400, detail="No file provided or invalid filename")
contents = file.file.read()
name_in_disk = f"{uuid4()}.{file.filename.split('.')[-1]}"
await upload_content(
"landing",
"orgs",
org_uuid,
contents,
name_in_disk,
["jpg", "jpeg", "png", "gif", "webp", "mp4", "webm", "pdf"] # Common web content formats
)
return name_in_disk

507
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
View file

@ -18,6 +18,7 @@ import CourseUpdates from '@components/Objects/Courses/CourseUpdates/CourseUpdat
import { CourseProvider } from '@components/Contexts/CourseContext'
import { useMediaQuery } from 'usehooks-ts'
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
import CourseActionsMobile from '@components/Objects/Courses/CourseActions/CourseActionsMobile'
const CourseClient = (props: any) => {
const [learnings, setLearnings] = useState<any>([])
@ -65,265 +66,273 @@ const CourseClient = (props: any) => {
{!course && !org ? (
<PageLoading></PageLoading>
) : (
<GeneralWrapperStyled>
<div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
<div>
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
</div>
<div className="mt-4 md:mt-0">
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
<CourseUpdates />
</CourseProvider>}
</div>
</div>
{props.course?.thumbnail_image && org ? (
<div
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
style={{
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
org?.org_uuid,
course?.course_uuid,
course?.thumbnail_image
)})`,
}}
></div>
) : (
<div
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
style={{
backgroundImage: `url('../empty_thumbnail.png')`,
backgroundSize: 'auto',
}}
></div>
)}
<ActivityIndicators
course_uuid={props.course.course_uuid}
orgslug={orgslug}
course={course}
/>
<div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10">
<div className="course_metadata_left w-full md:basis-3/4 space-y-2">
<h2 className="py-3 text-2xl font-bold">About</h2>
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
<p className="py-5 px-5 whitespace-pre-wrap">{course.about}</p>
<>
<GeneralWrapperStyled>
<div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
<div>
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
</div>
<div className="mt-4 md:mt-0">
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
<CourseUpdates />
</CourseProvider>}
</div>
</div>
{learnings.length > 0 && learnings[0]?.text !== 'null' && (
<div>
<h2 className="py-3 text-2xl font-bold">
What you will learn
</h2>
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
{learnings.map((learning: any) => {
// Handle both new format (object with text and emoji) and legacy format (string)
const learningText = typeof learning === 'string' ? learning : learning.text
const learningEmoji = typeof learning === 'string' ? null : learning.emoji
const learningId = typeof learning === 'string' ? learning : learning.id || learning.text
{props.course?.thumbnail_image && org ? (
<div
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
style={{
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
org?.org_uuid,
course?.course_uuid,
course?.thumbnail_image
)})`,
}}
></div>
) : (
<div
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
style={{
backgroundImage: `url('../empty_thumbnail.png')`,
backgroundSize: 'auto',
}}
></div>
)}
if (!learningText) return null
<ActivityIndicators
course_uuid={props.course.course_uuid}
orgslug={orgslug}
course={course}
/>
return (
<div
key={learningId}
className="flex space-x-2 items-center font-semibold text-gray-500"
>
<div className="px-2 py-2 rounded-full">
{learningEmoji ? (
<span>{learningEmoji}</span>
) : (
<Check className="text-gray-400" size={15} />
<div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10">
<div className="course_metadata_left w-full md:basis-3/4 space-y-2">
<h2 className="py-3 text-2xl font-bold">About</h2>
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
<p className="py-5 px-5 whitespace-pre-wrap">{course.about}</p>
</div>
{learnings.length > 0 && learnings[0]?.text !== 'null' && (
<div>
<h2 className="py-3 text-2xl font-bold">
What you will learn
</h2>
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
{learnings.map((learning: any) => {
// Handle both new format (object with text and emoji) and legacy format (string)
const learningText = typeof learning === 'string' ? learning : learning.text
const learningEmoji = typeof learning === 'string' ? null : learning.emoji
const learningId = typeof learning === 'string' ? learning : learning.id || learning.text
if (!learningText) return null
return (
<div
key={learningId}
className="flex space-x-2 items-center font-semibold text-gray-500"
>
<div className="px-2 py-2 rounded-full">
{learningEmoji ? (
<span>{learningEmoji}</span>
) : (
<Check className="text-gray-400" size={15} />
)}
</div>
<p>{learningText}</p>
{learning.link && (
<a
href={learning.link}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline text-sm"
>
<span className="sr-only">Link to {learningText}</span>
<ArrowRight size={14} />
</a>
)}
</div>
<p>{learningText}</p>
{learning.link && (
<a
href={learning.link}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline text-sm"
>
<span className="sr-only">Link to {learningText}</span>
<ArrowRight size={14} />
</a>
)}
</div>
)
})}
</div>
</div>
)}
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
{course.chapters.map((chapter: any) => {
return (
<div key={chapter} className="">
<div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
<h3 className="grow mr-3 break-words">{chapter.name}</h3>
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap flex-shrink-0">
{chapter.activities.length} Activities
</p>
</div>
<div className="py-3">
{chapter.activities.map((activity: any) => {
return (
<>
<p className="flex text-md"></p>
<div className="flex space-x-1 py-2 px-4 items-center">
<div className="courseicon items-center flex space-x-2 text-neutral-400">
{activity.activity_type ===
'TYPE_DYNAMIC' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<Sparkles
className="text-gray-400"
size={13}
/>
</div>
)}
{activity.activity_type === 'TYPE_VIDEO' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<Video
className="text-gray-400"
size={13}
/>
</div>
)}
{activity.activity_type ===
'TYPE_DOCUMENT' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<File
className="text-gray-400"
size={13}
/>
</div>
)}
{activity.activity_type ===
'TYPE_ASSIGNMENT' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<Backpack
className="text-gray-400"
size={13}
/>
</div>
)}
</div>
<Link
className="flex font-semibold grow pl-2 text-neutral-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<p>{activity.name}</p>
</Link>
<div className="flex ">
{activity.activity_type ===
'TYPE_DYNAMIC' && (
<>
<Link
className="flex grow pl-2 text-gray-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
<p>Page</p>
<ArrowRight size={13} />
</div>
</Link>
</>
)}
{activity.activity_type === 'TYPE_VIDEO' && (
<>
<Link
className="flex grow pl-2 text-gray-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
<p>Video</p>
<ArrowRight size={13} />
</div>
</Link>
</>
)}
{activity.activity_type ===
'TYPE_DOCUMENT' && (
<>
<Link
className="flex grow pl-2 text-gray-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
<p>Document</p>
<ArrowRight size={13} />
</div>
</Link>
</>
)}
{activity.activity_type ===
'TYPE_ASSIGNMENT' && (
<>
<Link
className="flex grow pl-2 text-gray-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
<p>Assignment</p>
<ArrowRight size={13} />
</div>
</Link>
</>
)}
</div>
</div>
</>
)
})}
</div>
)
})}
</div>
)
})}
</div>
)}
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
{course.chapters.map((chapter: any) => {
return (
<div key={chapter} className="">
<div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
<h3 className="grow mr-3 break-words">{chapter.name}</h3>
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap flex-shrink-0">
{chapter.activities.length} Activities
</p>
</div>
<div className="py-3">
{chapter.activities.map((activity: any) => {
return (
<>
<p className="flex text-md"></p>
<div className="flex space-x-1 py-2 px-4 items-center">
<div className="courseicon items-center flex space-x-2 text-neutral-400">
{activity.activity_type ===
'TYPE_DYNAMIC' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<Sparkles
className="text-gray-400"
size={13}
/>
</div>
)}
{activity.activity_type === 'TYPE_VIDEO' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<Video
className="text-gray-400"
size={13}
/>
</div>
)}
{activity.activity_type ===
'TYPE_DOCUMENT' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<File
className="text-gray-400"
size={13}
/>
</div>
)}
{activity.activity_type ===
'TYPE_ASSIGNMENT' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<Backpack
className="text-gray-400"
size={13}
/>
</div>
)}
</div>
<Link
className="flex font-semibold grow pl-2 text-neutral-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<p>{activity.name}</p>
</Link>
<div className="flex ">
{activity.activity_type ===
'TYPE_DYNAMIC' && (
<>
<Link
className="flex grow pl-2 text-gray-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
<p>Page</p>
<ArrowRight size={13} />
</div>
</Link>
</>
)}
{activity.activity_type === 'TYPE_VIDEO' && (
<>
<Link
className="flex grow pl-2 text-gray-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
<p>Video</p>
<ArrowRight size={13} />
</div>
</Link>
</>
)}
{activity.activity_type ===
'TYPE_DOCUMENT' && (
<>
<Link
className="flex grow pl-2 text-gray-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
<p>Document</p>
<ArrowRight size={13} />
</div>
</Link>
</>
)}
{activity.activity_type ===
'TYPE_ASSIGNMENT' && (
<>
<Link
className="flex grow pl-2 text-gray-500"
href={
getUriWithOrg(orgslug, '') +
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
'activity_',
''
)}`
}
rel="noopener noreferrer"
>
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
<p>Assignment</p>
<ArrowRight size={13} />
</div>
</Link>
</>
)}
</div>
</div>
</>
)
})}
</div>
</div>
)
})}
</div>
</div>
<div className='course_metadata_right basis-1/4'>
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
</div>
</div>
<div className='course_metadata_right basis-1/4'>
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
</GeneralWrapperStyled>
{isMobile && (
<div className="fixed bottom-0 left-0 right-0 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 p-4 z-50">
<CourseActionsMobile courseuuid={courseuuid} orgslug={orgslug} course={course} />
</div>
</div>
</GeneralWrapperStyled>
)}
</>
)}
</>
)

153
apps/web/app/orgs/[orgslug]/(withmenu)/page.tsx
View file

@ -16,6 +16,8 @@ import { getOrgCollections } from '@services/courses/collections'
import { getServerSession } from 'next-auth'
import { nextAuthOptions } from 'app/auth/options'
import { getOrgThumbnailMediaDirectory } from '@services/media/media'
import LandingClassic from '@components/Landings/LandingClassic'
import LandingCustom from '@components/Landings/LandingCustom'
type MetadataProps = {
params: { orgslug: string }
@ -71,7 +73,7 @@ const OrgHomePage = async (params: any) => {
access_token ? access_token : null
)
const org = await getOrganizationContextInfo(orgslug, {
revalidate: 1800,
revalidate: 0,
tags: ['organizations'],
})
const org_id = org.id
@ -81,141 +83,24 @@ const OrgHomePage = async (params: any) => {
{ revalidate: 0, tags: ['courses'] }
)
// Check if custom landing is enabled
const hasCustomLanding = org.config?.config?.landing?.enabled
return (
<div className="w-full">
<GeneralWrapperStyled>
{/* Collections */}
<div className="flex flex-col space-y-4 mb-8">
<div className="flex items-center justify-between">
<TypeOfContentTitle title="Collections" type="col" />
<AuthenticatedClientElement
checkMethod="roles"
ressourceType="collections"
action="create"
orgId={org_id}
>
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
<NewCollectionButton />
</Link>
</AuthenticatedClientElement>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{collections.map((collection: any) => (
<div key={collection.collection_id} className="flex flex-col p-3">
<CollectionThumbnail
collection={collection}
orgslug={orgslug}
org_id={org.org_id}
/>
</div>
))}
{collections.length === 0 && (
<div className="col-span-full flex justify-center items-center py-8">
<div className="text-center">
<div className="mb-4">
<svg
width="50"
height="50"
viewBox="0 0 295 295"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="mx-auto"
>
<rect
opacity="0.51"
x="10"
y="10"
width="275"
height="275"
rx="75"
stroke="#4B5564"
strokeOpacity="0.15"
strokeWidth="20"
/>
<path
d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z"
fill="#4B5564"
fillOpacity="0.08"
/>
</svg>
</div>
<h1 className="text-xl font-bold text-gray-600 mb-2">
No collections yet
</h1>
<p className="text-md text-gray-400">
<ContentPlaceHolderIfUserIsNotAdmin
text="Create collections to group courses together"
/>
</p>
</div>
</div>
)}
</div>
</div>
{/* Courses */}
<div className="flex flex-col space-y-4">
<div className="flex items-center justify-between">
<TypeOfContentTitle title="Courses" type="cou" />
<AuthenticatedClientElement
ressourceType="courses"
action="create"
checkMethod="roles"
orgId={org_id}
>
<Link href={getUriWithOrg(orgslug, '/courses?new=true')}>
<NewCourseButton />
</Link>
</AuthenticatedClientElement>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{courses.map((course: any) => (
<div key={course.course_uuid} className="p-3">
<CourseThumbnail course={course} orgslug={orgslug} />
</div>
))}
{courses.length === 0 && (
<div className="col-span-full flex justify-center items-center py-8">
<div className="text-center">
<div className="mb-4 ">
<svg
width="50"
height="50"
className="mx-auto"
viewBox="0 0 295 295"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
opacity="0.51"
x="10"
y="10"
width="275"
height="275"
rx="75"
stroke="#4B5564"
strokeOpacity="0.15"
strokeWidth="20"
/>
<path
d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z"
fill="#4B5564"
fillOpacity="0.08"
/>
</svg>
</div>
<h1 className="text-xl font-bold text-gray-600 mb-2">
No courses yet
</h1>
<p className="text-md text-gray-400">
<ContentPlaceHolderIfUserIsNotAdmin text='Create courses to add content' />
</p>
</div>
</div>
)}
</div>
</div>
</GeneralWrapperStyled>
{hasCustomLanding ? (
<LandingCustom
landing={org.config.config.landing}
orgslug={orgslug}
/>
) : (
<LandingClassic
courses={courses}
collections={collections}
orgslug={orgslug}
org_id={org_id}
/>
)}
</div>
)
}

8
apps/web/app/orgs/[orgslug]/dash/org/settings/[subpage]/page.tsx
View file

@ -1,13 +1,14 @@
'use client'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import { getUriWithOrg } from '@services/config/config'
import { ImageIcon, Info, LockIcon, SearchIcon, TextIcon, LucideIcon, Share2Icon } from 'lucide-react'
import { ImageIcon, Info, LockIcon, SearchIcon, TextIcon, LucideIcon, Share2Icon, LayoutDashboardIcon } from 'lucide-react'
import Link from 'next/link'
import React, { useEffect } from 'react'
import { motion } from 'framer-motion'
import OrgEditGeneral from '@components/Dashboard/Pages/Org/OrgEditGeneral/OrgEditGeneral'
import OrgEditImages from '@components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages'
import OrgEditSocials from '@components/Dashboard/Pages/Org/OrgEditSocials/OrgEditSocials'
import OrgEditLanding from '@components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding'
export type OrgParams = {
subpage: string
@ -22,6 +23,7 @@ interface TabItem {
const SETTING_TABS: TabItem[] = [
{ id: 'general', label: 'General', icon: TextIcon },
{ id: 'landing', label: 'Landing Page', icon: LayoutDashboardIcon },
{ id: 'previews', label: 'Images & Previews', icon: ImageIcon },
{ id: 'socials', label: 'Socials', icon: Share2Icon },
]
@ -61,6 +63,9 @@ function OrgPage({ params }: { params: OrgParams }) {
} else if (params.subpage == 'socials') {
setH1Label('Socials')
setH2Label('Manage your organization social media links')
} else if (params.subpage == 'landing') {
setH1Label('Landing Page')
setH2Label('Customize your organization landing page')
}
}
@ -103,6 +108,7 @@ function OrgPage({ params }: { params: OrgParams }) {
{params.subpage == 'general' ? <OrgEditGeneral /> : ''}
{params.subpage == 'previews' ? <OrgEditImages /> : ''}
{params.subpage == 'socials' ? <OrgEditSocials /> : ''}
{params.subpage == 'landing' ? <OrgEditLanding /> : ''}
</motion.div>
</div>
)

1588
apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx Normal file
View file

File diff suppressed because it is too large Load diff

91
apps/web/components/Dashboard/Pages/Org/OrgEditLanding/landing_types.ts Normal file
View file

@ -0,0 +1,91 @@
export interface LandingBackground {
type: 'solid' | 'gradient' | 'image';
color?: string;
colors?: Array<string>;
direction?: string;
image?: string;
}
export interface LandingTestimonialContent {
text: string;
author: string;
}
export interface LandingImage {
url: string;
alt: string;
}
export interface LandingHeading {
text: string;
color: string;
size: string;
}
export interface LandingButton {
text: string;
link: string;
color: string;
background: string;
}
export interface LandingLogos {
type: 'logos';
title: string;
logos: LandingImage[];
}
export interface LandingUsers {
user_uuid: string;
name: string;
description: string;
image_url: string;
}
export interface LandingPeople {
type: 'people';
title: string;
people: LandingUsers[];
}
export interface LandingTextAndImageSection {
type: 'text-and-image';
title: string;
text: string;
flow: 'left' | 'right';
image: LandingImage;
buttons: LandingButton[];
}
export interface LandingCourse {
course_uuid: string;
}
export interface LandingFeaturedCourses {
type: 'featured-courses';
courses: LandingCourse[];
title: string;
}
export interface LandingHeroSection {
type: 'hero';
title: string;
background: LandingBackground;
heading: LandingHeading;
subheading: LandingHeading;
buttons: LandingButton[];
illustration?: {
image: LandingImage;
position: 'left' | 'right';
verticalAlign: 'top' | 'center' | 'bottom';
size: 'small' | 'medium' | 'large';
};
contentAlign?: 'left' | 'center' | 'right';
}
export type LandingSection = LandingTextAndImageSection | LandingHeroSection | LandingLogos | LandingPeople | LandingFeaturedCourses;
export interface LandingObject {
sections: LandingSection[];
enabled?: boolean;
}

160
apps/web/components/Landings/LandingClassic.tsx Normal file
View file

@ -0,0 +1,160 @@
import React from 'react'
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
import TypeOfContentTitle from '@components/Objects/StyledElements/Titles/TypeOfContentTitle'
import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
import CollectionThumbnail from '@components/Objects/Thumbnails/CollectionThumbnail'
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
import NewCourseButton from '@components/Objects/StyledElements/Buttons/NewCourseButton'
import NewCollectionButton from '@components/Objects/StyledElements/Buttons/NewCollectionButton'
import ContentPlaceHolderIfUserIsNotAdmin from '@components/Objects/ContentPlaceHolder'
import Link from 'next/link'
import { getUriWithOrg } from '@services/config/config'
interface LandingClassicProps {
courses: any[]
collections: any[]
orgslug: string
org_id: string
}
function LandingClassic({ courses, collections, orgslug, org_id }: LandingClassicProps) {
return (
<div className="w-full">
<GeneralWrapperStyled>
{/* Collections */}
<div className="flex flex-col space-y-4 mb-8">
<div className="flex items-center justify-between">
<TypeOfContentTitle title="Collections" type="col" />
<AuthenticatedClientElement
checkMethod="roles"
ressourceType="collections"
action="create"
orgId={org_id}
>
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
<NewCollectionButton />
</Link>
</AuthenticatedClientElement>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{collections.map((collection: any) => (
<div key={collection.collection_id} className="flex flex-col p-3">
<CollectionThumbnail
collection={collection}
orgslug={orgslug}
org_id={org_id}
/>
</div>
))}
{collections.length === 0 && (
<div className="col-span-full flex justify-center items-center py-8">
<div className="text-center">
<div className="mb-4">
<svg
width="50"
height="50"
viewBox="0 0 295 295"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="mx-auto"
>
<rect
opacity="0.51"
x="10"
y="10"
width="275"
height="275"
rx="75"
stroke="#4B5564"
strokeOpacity="0.15"
strokeWidth="20"
/>
<path
d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z"
fill="#4B5564"
fillOpacity="0.08"
/>
</svg>
</div>
<h1 className="text-xl font-bold text-gray-600 mb-2">
No collections yet
</h1>
<p className="text-md text-gray-400">
<ContentPlaceHolderIfUserIsNotAdmin
text="Create collections to group courses together"
/>
</p>
</div>
</div>
)}
</div>
</div>
{/* Courses */}
<div className="flex flex-col space-y-4">
<div className="flex items-center justify-between">
<TypeOfContentTitle title="Courses" type="cou" />
<AuthenticatedClientElement
ressourceType="courses"
action="create"
checkMethod="roles"
orgId={org_id}
>
<Link href={getUriWithOrg(orgslug, '/courses?new=true')}>
<NewCourseButton />
</Link>
</AuthenticatedClientElement>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{courses.map((course: any) => (
<div key={course.course_uuid} className="p-3">
<CourseThumbnail course={course} orgslug={orgslug} />
</div>
))}
{courses.length === 0 && (
<div className="col-span-full flex justify-center items-center py-8">
<div className="text-center">
<div className="mb-4 ">
<svg
width="50"
height="50"
className="mx-auto"
viewBox="0 0 295 295"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
opacity="0.51"
x="10"
y="10"
width="275"
height="275"
rx="75"
stroke="#4B5564"
strokeOpacity="0.15"
strokeWidth="20"
/>
<path
d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z"
fill="#4B5564"
fillOpacity="0.08"
/>
</svg>
</div>
<h1 className="text-xl font-bold text-gray-600 mb-2">
No courses yet
</h1>
<p className="text-md text-gray-400">
<ContentPlaceHolderIfUserIsNotAdmin text='Create courses to add content' />
</p>
</div>
</div>
)}
</div>
</div>
</GeneralWrapperStyled>
</div>
)
}
export default LandingClassic

251
apps/web/components/Landings/LandingCustom.tsx Normal file
View file

@ -0,0 +1,251 @@
'use client'
import React from 'react'
import { LandingSection } from '@components/Dashboard/Pages/Org/OrgEditLanding/landing_types'
import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
import useSWR from 'swr'
import { getOrgCourses } from '@services/courses/courses'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import CourseThumbnailLanding from '@components/Objects/Thumbnails/CourseThumbnailLanding'
interface LandingCustomProps {
landing: {
sections: LandingSection[]
enabled: boolean
}
orgslug: string
}
function LandingCustom({ landing, orgslug }: LandingCustomProps) {
const session = useLHSession() as any
const access_token = session?.data?.tokens?.access_token
// Fetch all courses for the organization
const { data: allCourses } = useSWR(
orgslug ? [orgslug, access_token] : null,
([slug, token]) => getOrgCourses(slug, null, token)
)
const renderSection = (section: LandingSection) => {
switch (section.type) {
case 'hero':
return (
<div
key={`hero-${section.title}`}
className="min-h-[400px] sm:min-h-[500px] mt-[20px] sm:mt-[40px] mx-2 sm:mx-4 lg:mx-16 w-full flex items-center justify-center rounded-xl border border-gray-100"
style={{
background: section.background.type === 'solid'
? section.background.color
: section.background.type === 'gradient'
? `linear-gradient(${section.background.direction || '45deg'}, ${section.background.colors?.join(', ')})`
: `url(${section.background.image}) center/cover`
}}
>
<div className={`w-full h-full flex flex-col sm:flex-row ${
section.illustration?.position === 'right' ? 'sm:flex-row-reverse' : 'sm:flex-row'
} items-stretch`}>
{/* Logo */}
{section.illustration?.image.url && (
<div className={`flex items-${section.illustration.verticalAlign} p-6 w-full ${
section.illustration.size === 'small' ? 'sm:w-1/4' :
section.illustration.size === 'medium' ? 'sm:w-1/3' :
'sm:w-2/5'
}`}>
<img
src={section.illustration.image.url}
alt={section.illustration.image.alt}
className="w-full object-contain"
/>
</div>
)}
{/* Content */}
<div className={`flex-1 flex items-center ${
section.contentAlign === 'left' ? 'justify-start text-left' :
section.contentAlign === 'right' ? 'justify-end text-right' :
'justify-center text-center'
} p-6`}>
<div className="max-w-2xl">
<h1
className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-4"
style={{ color: section.heading.color }}
>
{section.heading.text}
</h1>
<h2
className="text-sm sm:text-base md:text-lg mb-4 sm:mb-6 md:mb-8 font-medium"
style={{ color: section.subheading.color }}
>
{section.subheading.text}
</h2>
<div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 ${
section.contentAlign === 'left' ? 'justify-start' :
section.contentAlign === 'right' ? 'justify-end' :
'justify-center'
} items-center`}>
{section.buttons.map((button, index) => (
<a
key={index}
href={button.link}
className="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-extrabold shadow transition-transform hover:scale-105"
style={{
backgroundColor: button.background,
color: button.color
}}
>
{button.text}
</a>
))}
</div>
</div>
</div>
</div>
</div>
)
case 'text-and-image':
return (
<div
key={`text-image-${section.title}`}
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
>
<div className={`flex flex-col md:flex-row items-center gap-8 md:gap-12 bg-white rounded-xl p-6 md:p-8 lg:p-12 nice-shadow ${
section.flow === 'right' ? 'md:flex-row-reverse' : ''
}`}>
<div className="flex-1 w-full max-w-2xl">
<h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900 tracking-tight">{section.title}</h2>
<div className="prose prose-lg prose-gray max-w-none">
<p className="text-base md:text-lg leading-relaxed text-gray-600 whitespace-pre-line">
{section.text}
</p>
</div>
<div className="flex flex-wrap gap-4 mt-8">
{section.buttons.map((button, index) => (
<a
key={index}
href={button.link}
className="px-6 py-3 rounded-xl font-medium shadow-sm transition-all duration-200 hover:scale-105"
style={{
backgroundColor: button.background,
color: button.color
}}
>
{button.text}
</a>
))}
</div>
</div>
<div className="flex-1 w-full md:w-auto">
<div className="relative w-full max-w-[500px] mx-auto px-4 md:px-8">
<div className="relative w-full aspect-[4/3]">
<img
src={section.image.url}
alt={section.image.alt}
className="object-contain w-full h-full rounded-lg"
/>
</div>
</div>
</div>
</div>
</div>
)
case 'logos':
return (
<div
key={`logos-${section.type}`}
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
>
{section.title && (
<h2 className="text-2xl md:text-3xl font-bold text-left mb-16 text-gray-900">{section.title}</h2>
)}
<div className="flex justify-center w-full">
<div className="flex flex-wrap justify-center gap-16 max-w-7xl">
{section.logos.map((logo, index) => (
<div key={index} className="flex items-center justify-center w-[220px] h-[120px]">
<img
src={logo.url}
alt={logo.alt}
className="max-h-24 max-w-[200px] object-contain hover:opacity-80 transition-opacity"
/>
</div>
))}
</div>
</div>
</div>
)
case 'people':
return (
<div
key={`people-${section.title}`}
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
>
<h2 className="text-2xl md:text-3xl font-bold text-left mb-10 text-gray-900">{section.title}</h2>
<div className="flex flex-wrap justify-center gap-x-20 gap-y-8">
{section.people.map((person, index) => (
<div key={index} className="w-[140px] flex flex-col items-center">
<div className="w-24 h-24 mb-4">
<img
src={person.image_url}
alt={person.name}
className="w-full h-full rounded-full object-cover border-4 border-white nice-shadow"
/>
</div>
<h3 className="text-lg font-semibold text-center text-gray-900">{person.name}</h3>
<p className="text-sm text-center text-gray-600 mt-1">{person.description}</p>
</div>
))}
</div>
</div>
)
case 'featured-courses':
if (!allCourses) {
return (
<div
key={`featured-courses-${section.title}`}
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
>
<h2 className="text-2xl md:text-3xl font-bold text-left mb-6 text-gray-900">{section.title}</h2>
<div className="text-center py-6 text-gray-500">Loading courses...</div>
</div>
)
}
const featuredCourses = allCourses.filter((course: any) =>
section.courses.includes(course.course_uuid)
)
return (
<div
key={`featured-courses-${section.title}`}
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
>
<h2 className="text-2xl md:text-3xl font-bold text-left mb-6 text-gray-900">{section.title}</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full">
{featuredCourses.map((course: any) => (
<div key={course.course_uuid} className="w-full flex justify-center">
<CourseThumbnailLanding
course={course}
orgslug={orgslug}
/>
</div>
))}
{featuredCourses.length === 0 && (
<div className="col-span-full text-center py-6 text-gray-500">
No featured courses selected
</div>
)}
</div>
</div>
)
default:
return null
}
}
return (
<div className="flex flex-col items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
{landing.sections.map((section) => renderSection(section))}
</div>
)
}
export default LandingCustom

232
apps/web/components/Objects/Courses/CourseActions/CourseActionsMobile.tsx Normal file
View file

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

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

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

36
apps/web/components/Objects/Onboarding/Onboarding.tsx
View file

@ -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) => (

156
apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx Normal file
View file

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

5
apps/web/services/media/media.ts
View file

@ -18,6 +18,11 @@ export function getCourseThumbnailMediaDirectory(
return uri
}
export function getOrgLandingMediaDirectory(orgUUID: string, fileId: string) {
let uri = `${getMediaUrl()}content/orgs/${orgUUID}/landing/${fileId}`
return uri
}
export function getUserAvatarMediaDirectory(userUUID: string, fileId: string) {
let uri = `${getMediaUrl()}content/users/${userUUID}/avatars/${fileId}`
return uri

30
apps/web/services/organizations/orgs.ts
View file

@ -1,5 +1,6 @@
import { getAPIUrl } from '@services/config/config'
import {
RequestBodyFormWithAuthHeader,
RequestBodyWithAuthHeader,
errorHandling,
getResponseMetadata,
@ -101,6 +102,35 @@ export async function updateUserRole(
return res
}
export async function updateOrgLanding(
org_id: any,
landing_object: any,
access_token: string
) {
const result = await fetch(
`${getAPIUrl()}orgs/${org_id}/landing`,
RequestBodyWithAuthHeader('PUT', landing_object, null, access_token)
)
const res = await getResponseMetadata(result)
return res
}
export async function uploadLandingContent(
org_uuid: any,
content_file: File,
access_token: string
) {
const formData = new FormData()
formData.append('content_file', content_file)
const result = await fetch(
`${getAPIUrl()}orgs/${org_uuid}/landing/content`,
RequestBodyFormWithAuthHeader('POST', formData, null, access_token)
)
const res = await getResponseMetadata(result)
return res
}
export async function removeUserFromOrg(
org_id: any,
user_id: any,